move subcomponents in subfolder

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

@@ -0,0 +1,89 @@
+<template>
+   <div>
+      <a @click="toggleIntensity" class="flag-toggle">
+         {{ $t('course.occasional') }}
+         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
+         {{ $t('course.regular') }}
+      </a>
+   </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">
+         {{ $t('course.confidential') }}
+      </button>
+   </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+   name: "ToggleFlags",
+   computed: {
+      ...mapState({
+         intensity: state => state.accompanyingCourse.intensity,
+         emergency: state => state.accompanyingCourse.emergency,
+         confidential: state => state.accompanyingCourse.confidential,
+      }),
+      isRegular() {
+         return (this.intensity === 'regular') ? true : false;
+      },
+      isEmergency() {
+         return (this.emergency) ? true : false;
+      },
+      isConfidential() {
+         return (this.confidential) ? true : false;
+      }
+   },
+   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));
+      },
+      toggleConfidential() {
+         this.$store.dispatch('toggleConfidential', (!this.isConfidential));
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+    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>