teleport toggle flags in header

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",

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>
+         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-         
-         <dt>{{ $t('course.remark') }}</dt>
-            <dd>{{ accompanyingCourse.remark }}</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>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue

@@ -1,17 +1,17 @@
 <template>
-   
+   <p style="text-align: right;">      
-   <button class="badge badge-pill" 
+      <button class="badge badge-pill" 
-      :class="{ 'badge-primary': isEmergency }"
+         :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }"
-      @click="toggleEmergency">
+         @click="toggleEmergency">
-      {{ $t('course.emergency') }}
+         {{ $t('course.emergency') }}
-   </button>
+      </button>
-   
+      
-   <button class="badge badge-pill"
+      <button class="badge badge-pill"
-      :class="{ 'badge-primary': isConfidential }"
+         :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }"
-      @click="toggleConfidential">
+         @click="toggleConfidential">
-      {{ $t('course.confidential') }}
+         {{ $t('course.confidential') }}
-   </button>
+      </button>
-   
+   </p>
 </template>
 
 <script>

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",
       },