From 821b67723cdffd6eb836e141048bedadde8bdbed Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 20 May 2021 12:59:58 +0200
Subject: [PATCH] Banner vue component fully manage AccompanyingCourse banner

---
 .../public/vuejs/AccompanyingCourse/App.vue   | 17 +++---
 .../AccompanyingCourse/components/Banner.vue  | 59 +++++++++++++++----
 .../AccompanyingCourse/components/Confirm.vue |  4 +-
 .../components/ToggleFlags.vue                | 55 +++++++++--------
 .../views/AccompanyingCourse/banner.html.twig | 22 ++-----
 5 files changed, 95 insertions(+), 62 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index b1826c70b..287db7fb6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -43,21 +43,22 @@ export default {
 
 <style lang="scss" scoped>
    div.vue-component {
-      padding: 1.5em 0;
+      padding: 1.5em 1em;
       margin: 2em 0;
-      border: 2px dotted lightgrey;
-      border-radius: 10px;
-      border-left: 0;
-      border-right: 0;
-      position: relative;
-      &:before { 
+      border: 1px solid lightgrey; 
+      border-radius: 5px;
+      border-left: 1px dotted lightgrey;
+      border-right: 1px dotted lightgrey;
+      /*
+      position: relative; */
+      &:before { /*
          content: "vuejs component";
          position: absolute;
          left: 1.5em;
          top: -0.9em;
          background-color: white;
          color: grey;
-         padding: 0 0.3em;
+         padding: 0 0.3em;*/
       }
       dd { 
          margin-left: 1em; 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index 498ab14eb..3a2243a1d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -1,4 +1,5 @@
 <template>
+   
    <div class="vue-component" style="display: none;">
       <h3>{{ $t('course.title') }}</h3>
       <dl>
@@ -7,19 +8,38 @@
      </dl>
    </div>
       
-   <teleport to="#header-accompanying_course-name .grid-4">
+   <teleport to="#header-accompanying_course-name #banner-flags">
       <toggle-flags></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>
+   
+   <teleport to="#header-accompanying_course-name #banner-status">
+      <div v-if="accompanyingCourse.step === 'DRAFT'">
+         <span class="badge badge-secondary">
+            {{ $t('course.step.draft') }}
          </span>
-      </p>
+      </div>
+      <div v-else>
+         <div>
+            <span class="badge badge-primary">
+               {{ $t('course.step.active') }}
+            </span>
+         </div>
+         <div>
+            <span>
+               <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>
+         </div>
+      </div>
+   </teleport>
+   
+   <teleport to="#header-accompanying_course-details #banner-social-issues">
+      <div class="grid-4">{{ $t('social_issue.title') }}</div>
+      <div class="grid-4">_</div>
+      <div class="grid-4">_</div>
    </teleport>
 
 </template>
@@ -39,3 +59,22 @@ export default {
    }
 }
 </script>
+
+<style lang="scss">
+   div#banner-flags,
+   div#banner-status {
+      margin: 1.5em 0;
+      div {
+         text-align: right;
+         margin-bottom: 0.8em;
+      }
+      .badge {
+         text-transform: uppercase;
+      }
+   }
+   div#banner-status {
+      span.badge {
+         font-size: 90%;
+      }
+   }
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
index 98fbd3f25..f7a321cc6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
@@ -7,11 +7,11 @@
      <div>
         <p>
            {{ $t('confirm.text_draft') }}
-           <span class="badge badge-pill badge-secondary">{{ $t('course.step.draft') }}</span>
+           <span class="badge badge-secondary">{{ $t('course.step.draft') }}</span>
         </p>
         <p>
            {{ $t('confirm.text_active') }}
-           <span class="badge badge-pill badge-primary">{{ $t('course.step.active') }}</span>
+           <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
         </p>
      </div>
      
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 5dfcaf67c..67ef8c193 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
@@ -1,24 +1,20 @@
 <template>
-   <p style="text-align: right;">      
-
+   <div>
       <a @click="toggleIntensity" class="flag-toggle">
          {{ $t('course.occasional') }}
-         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-off': !isRegular }"></i>
+         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
          {{ $t('course.regular') }}
       </a>
-
-      <button class="badge badge-pill" 
-         :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }"
-         @click="toggleEmergency">
+   </div>
+   
+   <div>
+      <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">
+      <button class="badge badge-pill" :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }" @click="toggleConfidential">
          {{ $t('course.confidential') }}
       </button>
-   </p>
+   </div>
 </template>
 
 <script>
@@ -32,7 +28,7 @@ export default {
          confidential: state => state.accompanyingCourse.confidential,
       }),
       isRegular() {
-         return (this.intensity === 'regular')? true : false;
+         return (this.intensity === 'regular') ? true : false;
       },
       isEmergency() {
          return (this.emergency) ? true : false;
@@ -68,15 +64,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-   a.flag-toggle {
-      color: white;
-      padding: 0 10px;
-      cursor: pointer;
-      &:hover {
-         color: white;
-         //border: 1px solid rgba(255,255,255,0.2);
-         text-decoration: underline;
-         border-radius: 20px;
-      }
-   }
+    a.flag-toggle {
+        color: white;
+        padding: 0 10px;
+        cursor: pointer;
+        &:hover {
+            color: white;
+            text-decoration: underline;
+            border-radius: 20px;
+        }
+        i {
+            margin: auto 0.4em;
+        }
+    }
+    button.badge {
+       margin-left: 0.8em;
+       &.badge-secondary {
+           opacity: 0.5;
+           &:hover {
+              opacity: 0.7;
+           }
+       }
+    }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
index 94663e2f0..af07af698 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
@@ -2,7 +2,7 @@
     <div class="grid-12 parent" id="header-accompanying_course-name" >
         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
 
-            <div class="grid-5">{% set title = title %}
+            <div class="grid-6">{% set title = title %}
                 <h1>
                     <i class="fa fa-random fa-fw"></i>
                     {{ 'Accompanying Course'|trans }}{# ou défini en amont
@@ -11,30 +11,16 @@
                 </h1>
             </div>
 
-            <div class="grid-4">
-            </div>
+            <div class="grid-3" id="banner-flags"></div>
 
-            <div class="grid-3">
-                <p style="text-align: right;">
-                {% if 'DRAFT' == accompanyingCourse.getStep() %}
-                  Brouillon
-                {% else %}
-                  <i>{{ 'Started on %date%'|trans({'%date%': accompanyingCourse.openingDate|format_date('short') } ) }}</i><br>
-                  {% if accompanyingCourse.user is not null %}
-                    par <b>{{ accompanyingCourse.user.username }}</b>
-                  {% endif %}
-                {% endif %}
-                </p>
-            </div>
+            <div class="grid-3" id="banner-status"></div>
 
         </div>
     </div>
     <div class="grid-12 parent" id="header-accompanying_course-details" >
         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
 
-            <div class="grid-4">Problématiques sociales</div>
-            <div class="grid-4">_</div>
-            <div class="grid-4">_</div>
+            <div id="banner-social-issues"></div>
 
         </div>
     </div>