Apply prettier rules

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue

@@ -1,23 +1,16 @@
 <template>
-  <h2>{{ $t('pick_social_issue') }}</h2>
-
+  <h2>{{ $t("pick_social_issue") }}</h2>
 
   <div id="awc_create_form">
-    <div
-      id="picking"
-      class=""
-    >
-      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
-      <div
-        v-for="si in socialIssues"
-        :key="si.id"
-      >
+    <div id="picking" class="">
+      <p>{{ $t("pick_social_issue_linked_with_action") }}</p>
+      <div v-for="si in socialIssues" :key="si.id">
         <input
           type="radio"
           :value="si.id"
           name="socialIssue"
           v-model="socialIssuePicked"
-        ><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+        /><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
       </div>
       <div class="my-3">
         <div class="col-11">
@@ -42,11 +35,8 @@
           />
         </div>
       </div>
-      <div
-        v-if="hasSocialIssuePicked"
-        class="mb-3"
-      >
-        <h2>{{ $t('pick_an_action') }}</h2>
+      <div v-if="hasSocialIssuePicked" class="mb-3">
+        <h2>{{ $t("pick_an_action") }}</h2>
         <div class="col-11">
           <vue-multiselect
             v-model="socialActionPicked"
@@ -64,30 +54,20 @@
         <i class="fa fa-circle-o-notch fa-spin fa-fw" />
       </div>
 
-      <div
-        v-if="hasSocialActionPicked"
-        id="persons"
-        class="mb-5"
-      >
-        <h2>{{ $t('persons_involved') }}</h2>
+      <div v-if="hasSocialActionPicked" id="persons" class="mb-5">
+        <h2>{{ $t("persons_involved") }}</h2>
 
         <ul>
-          <li
-            v-for="p in personsReachables"
-            :key="p.id"
-          >
+          <li v-for="p in personsReachables" :key="p.id">
             <div class="form-check">
               <input
                 type="checkbox"
                 :value="p.id"
                 v-model="personsPicked"
                 class="form-check-input"
-                :id="'person_check'+p.id"
-              >
-              <label
-                class="form-check-label"
-                :for="'person_check' + p.id"
-              >
+                :id="'person_check' + p.id"
+              />
+              <label class="form-check-label" :for="'person_check' + p.id">
                 <person-text :person="p" />
               </label>
             </div>
@@ -99,48 +79,29 @@
       <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
     </div> -->
     <div class="row">
-      <div
-        v-if="hasSocialActionPicked"
-        id="start_date"
-        class="mb-3 row"
-      >
-        <label class="col-form-label col-sm-4">{{ $t('startDate') }}</label>
+      <div v-if="hasSocialActionPicked" id="start_date" class="mb-3 row">
+        <label class="col-form-label col-sm-4">{{ $t("startDate") }}</label>
         <div class="col-sm-8">
-          <input
-            class="form-control"
-            type="date"
-            v-model="startDate"
-          >
+          <input class="form-control" type="date" v-model="startDate" />
         </div>
       </div>
 
       <!-- <div v-if="hasSocialActionPicked" id="end_date">
       <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
     </div> -->
-      <div
-        v-if="hasSocialActionPicked"
-        id="end_date"
-        class="mb-3 row"
-      >
-        <label class="col-form-label col-sm-4">{{ $t('endDate') }}</label>
+      <div v-if="hasSocialActionPicked" id="end_date" class="mb-3 row">
+        <label class="col-form-label col-sm-4">{{ $t("endDate") }}</label>
         <div class="col-sm-8">
-          <input
-            class="form-control"
-            type="date"
-            v-model="endDate"
-          >
+          <input class="form-control" type="date" v-model="endDate" />
         </div>
       </div>
     </div>
     <div id="confirm">
       <div v-if="hasErrors">
-        <p>{{ $t('form_has_errors') }}</p>
+        <p>{{ $t("form_has_errors") }}</p>
 
         <ul>
-          <li
-            v-for="e in errors"
-            :key="e.id"
-          >
+          <li v-for="e in errors" :key="e.id">
             {{ e }}
           </li>
         </ul>
@@ -149,11 +110,8 @@
       <div>
         <ul class="record_actions">
           <li class="cancel">
-            <button
-              class="btn btn-cancel"
-              @click="goToPrevious"
-            >
-              {{ $t('action.cancel') }}
+            <button class="btn btn-cancel" @click="goToPrevious">
+              {{ $t("action.cancel") }}
             </button>
           </li>
           <li v-if="hasSocialActionPicked">
@@ -162,14 +120,10 @@
               v-show="!isPostingWork"
               @click="submit"
             >
-              {{ $t('action.save') }}
+              {{ $t("action.save") }}
             </button>
-            <button
-              class="btn btn-save"
-              v-show="isPostingWork"
-              disabled
-            >
-              {{ $t('action.save') }}
+            <button class="btn btn-save" v-show="isPostingWork" disabled>
+              {{ $t("action.save") }}
             </button>
           </li>
         </ul>
@@ -178,12 +132,10 @@
   </div>
 </template>
 
-
-
 <script>
-import { mapState, mapGetters } from 'vuex';
-import VueMultiselect from 'vue-multiselect';
-import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+import { mapState, mapGetters } from "vuex";
+import VueMultiselect from "vue-multiselect";
+import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
 
 const i18n = {
   messages: {
@@ -194,39 +146,41 @@ const i18n = {
       pick_social_issue: "Choisir une problématique sociale",
       pick_other_social_issue: "Veuillez choisir un autre problématique",
       pick_an_action: "Choisir une action d'accompagnement",
-      pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",
+      pick_social_issue_linked_with_action:
+        "Indiquez la problématique sociale liée à l'action d'accompagnement",
       persons_involved: "Usagers concernés",
       choose_other_social_issue: "Veuillez choisir un autre problématique",
-    }
-  }
-}
+    },
+  },
+};
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
     VueMultiselect,
     PersonText,
   },
   methods: {
     submit() {
-      this.$store.dispatch('submit')
-          .catch(({name, violations}) => {
-          if (name === 'ValidationException' || name === 'AccessException') {
-            violations.forEach((violation) => this.$toast.open({message: violation}));
-          } else {
-            this.$toast.open({message: 'An error occurred'})
-          }
+      this.$store.dispatch("submit").catch(({ name, violations }) => {
+        if (name === "ValidationException" || name === "AccessException") {
+          violations.forEach((violation) =>
+            this.$toast.open({ message: violation }),
+          );
+        } else {
+          this.$toast.open({ message: "An error occurred" });
+        }
       });
     },
     addIssueInList(value) {
-      this.$store.commit('addIssueInList', value);
-      this.$store.commit('removeIssueInOther', value);
-      this.$store.dispatch('pickSocialIssue', value.id);
+      this.$store.commit("addIssueInList", value);
+      this.$store.commit("removeIssueInOther", value);
+      this.$store.dispatch("pickSocialIssue", value.id);
     },
     goToPrevious() {
       let params = new URLSearchParams(window.location.search);
-      if (params.has('returnPath')) {
-        window.location.replace(params.get('returnPath'));
+      if (params.has("returnPath")) {
+        window.location.replace(params.get("returnPath"));
       } else {
         return;
       }
@@ -235,28 +189,28 @@ export default {
   i18n,
   computed: {
     ...mapState([
-      'socialIssues',
-      'socialIssuesOther',
-      'socialActionsReachables',
-      'errors',
-      'personsReachables',
+      "socialIssues",
+      "socialIssuesOther",
+      "socialActionsReachables",
+      "errors",
+      "personsReachables",
     ]),
     ...mapGetters([
-      'hasSocialIssuePicked',
-      'hasSocialActionPicked',
-      'isLoadingSocialActions',
-      'isPostingWork',
-      'hasErrors',
+      "hasSocialIssuePicked",
+      "hasSocialActionPicked",
+      "isLoadingSocialActions",
+      "isPostingWork",
+      "hasErrors",
     ]),
     personsPicked: {
       get() {
-        let s = this.$store.state.personsPicked.map(p => p.id);
+        let s = this.$store.state.personsPicked.map((p) => p.id);
 
         return s;
       },
       set(v) {
-        this.$store.commit('setPersonsPickedIds', v);
-      }
+        this.$store.commit("setPersonsPickedIds", v);
+      },
     },
     socialIssuePicked: {
       get() {
@@ -269,47 +223,49 @@ export default {
         return s.id;
       },
       set(value) {
-        this.$store.dispatch('pickSocialIssue', value);
-      }
+        this.$store.dispatch("pickSocialIssue", value);
+      },
     },
     socialActionPicked: {
       get() {
         return this.$store.state.socialActionPicked;
       },
       set(value) {
-        this.$store.commit('setSocialAction', value);
-      }
+        this.$store.commit("setSocialAction", value);
+      },
     },
     startDate: {
       get() {
         return this.$store.state.startDate;
       },
       set(value) {
-        this.$store.commit('setStartDate', value);
-      }
+        this.$store.commit("setStartDate", value);
+      },
     },
     endDate: {
       get() {
         return this.$store.state.endDate;
       },
       set(value) {
-        this.$store.commit('setEndDate', value);
-      }
+        this.$store.commit("setEndDate", value);
+      },
     },
     setSocialIssue: {
       set() {
-        this.$store.dispatch('setSocialIssue', socialIssues[socialIssues.length - 1])
-      }
-    }
-  }
-}
-
+        this.$store.dispatch(
+          "setSocialIssue",
+          socialIssues[socialIssues.length - 1],
+        );
+      },
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import 'ChillMainAssets/module/bootstrap/shared';
-@import 'ChillPersonAssets/chill/scss/mixins';
-@import 'ChillMainAssets/chill/scss/chill_variables';
+@import "ChillMainAssets/module/bootstrap/shared";
+@import "ChillPersonAssets/chill/scss/mixins";
+@import "ChillMainAssets/chill/scss/chill_variables";
 span.badge {
   @include badge_social($social-issue-color);
   font-size: 95%;
@@ -320,14 +276,12 @@ span.badge {
 </style>
 
 <style lang="scss">
-
 #awc_create_form {
   display: grid;
   grid-template-areas:
     "picking picking"
     "start_date end_date"
-    "confirm confirm"
-    ;
+    "confirm confirm";
   grid-template-columns: 50% 50%;
   column-gap: 1.5rem;