Apply prettier rules

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

@@ -1,113 +1,119 @@
 <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';
+import { mapGetters } from "vuex";
 
 export default {
-  name: "CalendarActive",
-  props: {
-    user: {
-      type: Object,
-      required: true
+    name: "CalendarActive",
+    props: {
+        user: {
+            type: Object,
+            required: true,
+        },
+        invite: {
+            type: Object,
+            required: false,
+            default: null,
+        },
     },
-    invite: {
-      type: Object,
-      required: false,
-      default: null,
-    }
-  },
-  computed: {
-    style() {
-      return {
-        backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
-      };
+    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,
+                );
+            },
+        },
     },
-    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>