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">
+            <toggle-flags
-               {{ $t('course.emergency') }}</div>
+               v-bind:emergency="accompanyingCourse.emergency"
-            <div v-else class="badge badge-pill badge-secondary">
+               v-bind:confidential="accompanyingCourse.confidential">
-               {{ $t('course.emergency') }}</div>
+            </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>

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

@@ -51,13 +51,21 @@ let initPromise = getAccompanyingCourse(id)
                state.accompanyingCourse.requestorAnonymous = value;
             },
             removeResource(state, resource) {
-               console.log('### mutation: removeResource', resource);
+               //console.log('### mutation: removeResource', resource);
                state.accompanyingCourse.resources = state.accompanyingCourse.resources.filter(element => element !== resource);
             },
             addResource(state, resource) {
-               console.log('### mutation: addResource', resource);
+               //console.log('### mutation: addResource', resource);
                state.accompanyingCourse.resources.push(resource);
             },
+            toggleEmergency(state, value) {
+               //console.log('### mutation: toggleEmergency');
+               state.accompanyingCourse.emergency = value;
+            },
+            toggleConfidential(state, value) {
+               //console.log('### mutation: toggleConfidential');
+               state.accompanyingCourse.confidential = value;
+            }
          },
          actions: {
             removeParticipation({ commit }, payload) {
@@ -141,8 +149,27 @@ let initPromise = getAccompanyingCourse(id)
                   .catch((error) => { 
                      state.errorMsg.push(error.message); 
                   });
-               
             },
+            toggleEmergency({ commit }, payload) {
+               patchAccompanyingCourse(id, { type: "accompanying_period", emergency: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleEmergency', course.emergency);
+                  resolve();
+               }))
+               .catch((error) => { 
+                  state.errorMsg.push(error.message); 
+               });
+            },
+            toggleConfidential({ commit }, payload) {
+               patchAccompanyingCourse(id, { type: "accompanying_period", confidential: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleConfidential', course.confidential);
+                  resolve();
+               }))
+               .catch((error) => { 
+                  state.errorMsg.push(error.message); 
+               });
+            }
          }
       });
       resolve(store);