Ajout de commentaires supplémentaires aux motifs

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -1,119 +1,105 @@
 <template>
-    <div :style="style" class="calendar-active">
-        <span class="badge-user">
-            {{ user.text }}
-            <template v-if="invite !== null">
-                <i v-if="invite.status === 'accepted'" class="fa fa-check" />
-                <i
-                    v-else-if="invite.status === 'declined'"
-                    class="fa fa-times"
-                />
-                <i
-                    v-else-if="invite.status === 'pending'"
-                    class="fa fa-question-o"
-                />
-                <i
-                    v-else-if="invite.status === 'tentative'"
-                    class="fa fa-question"
-                />
-                <span v-else="">{{ invite.status }}</span>
-            </template>
-        </span>
-        <span class="form-check-inline form-switch">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                id="flexSwitchCheckDefault"
-                v-model="rangeShow"
-            />
-            &nbsp;<label
-                class="form-check-label"
-                for="flexSwitchCheckDefault"
-                title="Disponibilités"
-                ><i class="fa fa-calendar-check-o"
-            /></label>
-        </span>
-        <span class="form-check-inline form-switch">
-            <input
-                class="form-check-input"
-                type="checkbox"
-                id="flexSwitchCheckDefault"
-                v-model="remoteShow"
-            />
-            &nbsp;<label
-                class="form-check-label"
-                for="flexSwitchCheckDefault"
-                title="Agenda"
-                ><i class="fa fa-calendar"
-            /></label>
-        </span>
-    </div>
+  <div :style="style" class="calendar-active">
+    <span class="badge-user">
+      {{ user.text }}
+      <template v-if="invite !== null">
+        <i v-if="invite.status === 'accepted'" class="fa fa-check" />
+        <i v-else-if="invite.status === 'declined'" class="fa fa-times" />
+        <i v-else-if="invite.status === 'pending'" class="fa fa-question-o" />
+        <i v-else-if="invite.status === 'tentative'" class="fa fa-question" />
+        <span v-else="">{{ invite.status }}</span>
+      </template>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="rangeShow"
+      />
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Disponibilités"
+        ><i class="fa fa-calendar-check-o"
+      /></label>
+    </span>
+    <span class="form-check-inline form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        id="flexSwitchCheckDefault"
+        v-model="remoteShow"
+      />
+      &nbsp;<label
+        class="form-check-label"
+        for="flexSwitchCheckDefault"
+        title="Agenda"
+        ><i class="fa fa-calendar"
+      /></label>
+    </span>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 
 export default {
-    name: "CalendarActive",
-    props: {
-        user: {
-            type: Object,
-            required: true,
-        },
-        invite: {
-            type: Object,
-            required: false,
-            default: null,
-        },
+  name: "CalendarActive",
+  props: {
+    user: {
+      type: Object,
+      required: true,
     },
-    computed: {
-        style() {
-            return {
-                backgroundColor: this.$store.getters.getUserData(this.user)
-                    .mainColor,
-            };
-        },
-        rangeShow: {
-            set(value) {
-                this.$store.commit("showUserOnCalendar", {
-                    user: this.user,
-                    ranges: value,
-                });
-            },
-            get() {
-                return this.$store.getters.isRangeShownOnCalendarForUser(
-                    this.user,
-                );
-            },
-        },
-        remoteShow: {
-            set(value) {
-                this.$store.commit("showUserOnCalendar", {
-                    user: this.user,
-                    remotes: value,
-                });
-            },
-            get() {
-                return this.$store.getters.isRemoteShownOnCalendarForUser(
-                    this.user,
-                );
-            },
-        },
+    invite: {
+      type: Object,
+      required: false,
+      default: null,
     },
+  },
+  computed: {
+    style() {
+      return {
+        backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
+      };
+    },
+    rangeShow: {
+      set(value) {
+        this.$store.commit("showUserOnCalendar", {
+          user: this.user,
+          ranges: value,
+        });
+      },
+      get() {
+        return this.$store.getters.isRangeShownOnCalendarForUser(this.user);
+      },
+    },
+    remoteShow: {
+      set(value) {
+        this.$store.commit("showUserOnCalendar", {
+          user: this.user,
+          remotes: value,
+        });
+      },
+      get() {
+        return this.$store.getters.isRemoteShownOnCalendarForUser(this.user);
+      },
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .calendar-active {
-    margin: 0 0.25rem 0.25rem 0;
-    padding: 0.5rem;
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.5rem;
 
-    border-radius: 0.5rem;
+  border-radius: 0.5rem;
 
-    color: var(--bs-blue);
+  color: var(--bs-blue);
 
-    & > .badge-user {
-        margin-right: 0.5rem;
-    }
+  & > .badge-user {
+    margin-right: 0.5rem;
+  }
 }
 </style>