From 3c6d3f30d2894d5d76ce73bdd2fa0e46cdf6de4d Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 16 May 2021 09:54:27 +0200
Subject: [PATCH] teleport toggle flags in header

---
 .../Resources/public/vuejs/_js/i18n.js        |  5 ++
 .../components/AccompanyingCourse.vue         | 48 +++++++++----------
 .../components/ToggleFlags.vue                | 26 +++++-----
 .../vuejs/AccompanyingCourse/js/i18n.js       |  2 +
 4 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 4f5c64e30..e36cbda79 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -7,6 +7,11 @@ const datetimeFormats = {
          month: "numeric",
          day: "numeric"
       },
+      text: {
+         year: "numeric",
+         month: "long",
+         day: "numeric",
+      },
       long: {
          year: "numeric",
          month: "short",
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue
index 3573ce6e2..80e75414b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue
@@ -3,11 +3,8 @@
       <h3>{{ $t('course.title') }}</h3>
       <dl>
          <dt>{{ $t('course.id') }}</dt>
-            <dd>{{ accompanyingCourse.id }}</dd>
+         <dd>{{ accompanyingCourse.id }}</dd>
          
-         <dt>{{ $t('course.user') }}</dt>
-            <dd v-if="accompanyingCourse.user">{{ accompanyingCourse.user.username }}</dd>
-                  
          <dt>{{ $t('course.status') }}</dt>
          <dd>
             <div v-if="accompanyingCourse.step !== 'DRAFT'"
@@ -17,32 +14,31 @@
                {{ $t('course.step.draft') }}</div>
          </dd>
          
-         <dt>{{ $t('course.flags') }}</dt>
-         <dd>
-         
-            <toggle-flags
-               v-bind:emergency="accompanyingCourse.emergency"
-               v-bind:confidential="accompanyingCourse.confidential">
-            </toggle-flags>
-            
-
-         
-         
-         </dd>
-            
-         <dt>{{ $t('course.opening_date') }}</dt>
-            <dd>{{ $d(accompanyingCourse.openingDate.datetime, 'short') }}</dd>
-         
          <dt>{{ $t('course.closing_date') }}</dt>
-            <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+         <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
             
          <dt>{{ $t('course.closing_motive') }}</dt>
-            <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-         
-         <dt>{{ $t('course.remark') }}</dt>
-            <dd>{{ accompanyingCourse.remark }}</dd>
-         
+         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
       </dl>
+         
+      <teleport to="#header-accompanying_course-name .grid-4">
+         <toggle-flags
+            v-bind:emergency="accompanyingCourse.emergency"
+            v-bind:confidential="accompanyingCourse.confidential">
+         </toggle-flags>
+      </teleport>
+         
+      <teleport to="#header-accompanying_course-name .grid-3">
+         <p style="text-align: right;">
+            <span v-if="accompanyingCourse.openingDate">
+               <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
+            </span><br>
+            <span v-if="accompanyingCourse.user">
+               {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
+            </span>
+         </p>
+      </teleport>
+
    </div>
 </template>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
index 169233641..12c372f12 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
@@ -1,17 +1,17 @@
 <template>
-   
-   <button class="badge badge-pill" 
-      :class="{ 'badge-primary': isEmergency }"
-      @click="toggleEmergency">
-      {{ $t('course.emergency') }}
-   </button>
-   
-   <button class="badge badge-pill"
-      :class="{ 'badge-primary': isConfidential }"
-      @click="toggleConfidential">
-      {{ $t('course.confidential') }}
-   </button>
-   
+   <p style="text-align: right;">      
+      <button class="badge badge-pill" 
+         :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }"
+         @click="toggleEmergency">
+         {{ $t('course.emergency') }}
+      </button>
+      
+      <button class="badge badge-pill"
+         :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }"
+         @click="toggleConfidential">
+         {{ $t('course.confidential') }}
+      </button>
+   </p>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 1be75e6a0..c4d3d1df1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -17,6 +17,8 @@ const appMessages = {
             open: "Ouvert",
             active: "En file active"
          },
+         open_at: "ouvert le ",
+         by: "par ", 
          emergency: "urgent",
          confidential: "confidentiel",
       },