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

<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">
         {{ $t('course.emergency') }}
      </button>
      
      <button class="badge badge-pill"
         :class="{ 'badge-primary': isConfidential, 'badge-secondary': !isConfidential }"
         @click="toggleConfidential">
         {{ $t('course.confidential') }}
      </button>
   </p>
</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;
         //border: 1px solid rgba(255,255,255,0.2);
         text-decoration: underline;
         border-radius: 20px;
      }
   }
</style>