reactive toggle flags emergency and confidential

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

@@ -19,17 +19,15 @@
          
          <dt>{{ $t('course.flags') }}</dt>
          <dd>
-            <div v-if="accompanyingCourse.emergency === true"
-               class="badge badge-pill badge-primary">
-               {{ $t('course.emergency') }}</div>
-            <div v-else class="badge badge-pill badge-secondary">
-               {{ $t('course.emergency') }}</div>
+         
+            <toggle-flags
+               v-bind:emergency="accompanyingCourse.emergency"
+               v-bind:confidential="accompanyingCourse.confidential">
+            </toggle-flags>
             
-            <div v-if="accompanyingCourse.confidential === true"
-               class="badge badge-pill badge-primary">
-               {{ $t('course.confidential') }}</div>
-            <div v-else class="badge badge-pill badge-secondary">
-               {{ $t('course.confidential') }}</div>
+
+         
+         
          </dd>
             
          <dt>{{ $t('course.opening_date') }}</dt>
@@ -49,8 +47,13 @@
 </template>
 
 <script>
+import ToggleFlags from './ToggleFlags';
+
 export default {
    name: 'AccompanyingCourse',
+   components: {
+      ToggleFlags
+   },
    computed: {
       accompanyingCourse() {
          return this.$store.state.accompanyingCourse

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

@@ -0,0 +1,38 @@
+<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>
+   
+</template>
+
+<script>
+export default {
+   name: "ToggleFlags",
+   props: ['emergency', 'confidential'],
+   computed: {
+      isEmergency() {
+         return (this.emergency) ? true : false;
+      },
+      isConfidential() {
+         return (this.confidential) ? true : false;
+      }
+   },
+   methods: {
+      toggleEmergency() {
+         this.$store.dispatch('toggleEmergency', (!this.isEmergency));
+      },
+      toggleConfidential() {
+         this.$store.dispatch('toggleConfidential', (!this.isConfidential));
+      }
+   }
+}
+</script>