add intensity in teleported toggleFlags

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -182,3 +182,15 @@ div.results {
    color: grey;
    margin-right: 1em;
 }
+
+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;
+   }
+}

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

@@ -9,6 +9,7 @@
       
    <teleport to="#header-accompanying_course-name .grid-4">
       <toggle-flags
+         v-bind:intensity="accompanyingCourse.intensity"
          v-bind:emergency="accompanyingCourse.emergency"
          v-bind:confidential="accompanyingCourse.confidential">
       </toggle-flags>

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

@@ -24,7 +24,11 @@
             ckeditor="ckeditor"
             v-model="content">
          </textarea>
-         <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+         <ul class="record_actions">
+            <li>
+               <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+            </li>
+         </ul>
       </form>
       
    </div>

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

@@ -4,27 +4,33 @@
         {{ $t('confirm.title') }}
         <span v-if="accompanyingCourse.step !== 'DRAFT'"
            class="badge badge-pill badge-primary">
-           {{ $t('course.step.active') }}</span>
+           {{ $t('course.step.active') }}
+        </span>
         <span v-else class="badge badge-pill badge-secondary">
-           {{ $t('course.step.draft') }}</span>
+           {{ $t('course.step.draft') }}
+        </span>
      </h3>
      
      <p v-if="accompanyingCourse.step === 'DRAFT'">
         {{ $t('confirm.text_draft') }}
      </p>
      
-     <dl>
+     <dl v-if="accompanyingCourse.closingDate">
         <dt>{{ $t('course.closing_date') }}</dt>
-        <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+        <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
            
         <dt>{{ $t('course.closing_motive') }}</dt>
         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
      </dl>
      
-     <button class="sc-button bt-save"
+     <ul class="record_actions">
-         @click="confirmCourse">
+        <li>
-         {{ $t('confirm.ok') }}
+           <button class="sc-button bt-save"
-     </button>
+              @click="confirmCourse">
+              {{ $t('confirm.ok') }}
+           </button>
+        </li>
+     </ul>
   </div>
 </template>
 

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

@@ -1,5 +1,12 @@
 <template>
    <p style="text-align: right;">      
+
+      <a @click="toggleIntensity" class="flag-toggle">
+         {{ $t('course.occasional') }}
+         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-off': !isRegular }"></i>
+         {{ $t('course.regular') }}
+      </a>
+
       <button class="badge badge-pill" 
          :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }"
          @click="toggleEmergency">
@@ -17,8 +24,11 @@
 <script>
 export default {
    name: "ToggleFlags",
-   props: ['emergency', 'confidential'],
+   props: ['emergency', 'confidential', 'intensity'],
    computed: {
+      isRegular() {
+         return (this.intensity === 'regular')? true : false;
+      },
       isEmergency() {
          return (this.emergency) ? true : false;
       },
@@ -27,6 +37,21 @@ export default {
       }
    },
    methods: {
+      toggleIntensity() {
+         let value;
+         switch (this.intensity) {
+            case "occasional":
+               value = "regular";
+               break;
+            case "regular":
+               value = "occasional";
+               break;
+            default:
+               //temporaire (modif backend)
+               value = "occasional";
+         }
+         this.$store.dispatch('toggleIntensity', value);
+      },
       toggleEmergency() {
          this.$store.dispatch('toggleEmergency', (!this.isEmergency));
       },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -21,6 +21,8 @@ const appMessages = {
          by: "par ", 
          emergency: "urgent",
          confidential: "confidentiel",
+         regular: "régulier",
+         occasional: "ponctuel"
       },
       persons_associated: {
          title: "Usagers concernés",

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -62,6 +62,9 @@ let initPromise = getAccompanyingCourse(id)
                //console.log('### mutation: addResource', resource);
                state.accompanyingCourse.resources.push(resource);
             },
+            toggleIntensity(state, value) {
+               state.accompanyingCourse.intensity = value;
+            },
             toggleEmergency(state, value) {
                //console.log('### mutation: toggleEmergency');
                state.accompanyingCourse.emergency = value;
@@ -136,6 +139,14 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
+            toggleIntensity({ commit }, payload) {
+               console.log(payload);
+               patchAccompanyingCourse(id, { type: "accompanying_period", intensity: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleIntensity', course.intensity);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
             toggleEmergency({ commit }, payload) {
                patchAccompanyingCourse(id, { type: "accompanying_period", emergency: payload })
                .then(course => new Promise((resolve, reject) => {