Apply prettier rules

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vue-component">
-    <h2><a id="section-60" />{{ $t('social_issue.title') }}</h2>
+    <h2><a id="section-60" />{{ $t("social_issue.title") }}</h2>
 
     <div class="my-4">
       <!--label for="field">{{ $t('social_issue.label') }}</label
@@ -21,100 +21,95 @@
       />
     </div>
 
-    <div
-      v-if="!isSocialIssueValid"
-      class="alert alert-warning to-confirm"
-    >
-      {{ $t('social_issue.not_valid') }}
+    <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
+      {{ $t("social_issue.not_valid") }}
     </div>
   </div>
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect';
-import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
-import {mapGetters, mapState} from 'vuex';
+import VueMultiselect from "vue-multiselect";
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+import { mapGetters, mapState } from "vuex";
 
 export default {
-   name: "SocialIssue",
-   components: { VueMultiselect },
-   data() {
-      return {
-         options: []
-      }
-   },
-   computed: {
-      ...mapState({
-         value: state => state.accompanyingCourse.socialIssues,
-      }),
-      ...mapGetters([
-         'isSocialIssueValid'
-      ])
-   },
-   mounted() {
-      this.getOptions();
-   },
-   methods: {
-      getOptions() {
-         const url = `/api/1.0/person/social-work/social-issue.json`;
-         makeFetch('GET', url)
-            .then(response => {
-               this.options = response.results;
-               return response;
-            })
-            .catch((error) => {
-               commit('catchError', error);
-               this.$toast.open({message: error.txt})
-            })
-      },
-      updateSocialIssues(value) {
-         this.$store.dispatch('updateSocialIssues', this.transformValue(value))
-            .catch(({name, violations}) => {
-               if (name === 'ValidationException' || name === 'AccessException') {
-                  violations.forEach((violation) => this.$toast.open({message: violation}));
-               } else {
-                  this.$toast.open({message: 'An error occurred'})
-               }
-            });
-      },
-      transformValue(updated) {
-         let stored = this.value;
-         let added = updated.filter(x => stored.indexOf(x) === -1).shift();
-         let removed = stored.filter(x => updated.indexOf(x) === -1).shift();
-         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';
-         let changed = (typeof removed === 'undefined') ? added : removed;
-         let body = { type: "social_issue", id: changed.id };
-         let payload = updated;
-         return { payload, body, method };
-      }
-   }
-}
+  name: "SocialIssue",
+  components: { VueMultiselect },
+  data() {
+    return {
+      options: [],
+    };
+  },
+  computed: {
+    ...mapState({
+      value: (state) => state.accompanyingCourse.socialIssues,
+    }),
+    ...mapGetters(["isSocialIssueValid"]),
+  },
+  mounted() {
+    this.getOptions();
+  },
+  methods: {
+    getOptions() {
+      const url = `/api/1.0/person/social-work/social-issue.json`;
+      makeFetch("GET", url)
+        .then((response) => {
+          this.options = response.results;
+          return response;
+        })
+        .catch((error) => {
+          commit("catchError", error);
+          this.$toast.open({ message: error.txt });
+        });
+    },
+    updateSocialIssues(value) {
+      this.$store
+        .dispatch("updateSocialIssues", this.transformValue(value))
+        .catch(({ name, violations }) => {
+          if (name === "ValidationException" || name === "AccessException") {
+            violations.forEach((violation) =>
+              this.$toast.open({ message: violation }),
+            );
+          } else {
+            this.$toast.open({ message: "An error occurred" });
+          }
+        });
+    },
+    transformValue(updated) {
+      let stored = this.value;
+      let added = updated.filter((x) => stored.indexOf(x) === -1).shift();
+      let removed = stored.filter((x) => updated.indexOf(x) === -1).shift();
+      let method = typeof removed === "undefined" ? "POST" : "DELETE";
+      let changed = typeof removed === "undefined" ? added : removed;
+      let body = { type: "social_issue", id: changed.id };
+      let payload = updated;
+      return { payload, body, method };
+    },
+  },
+};
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
 <style lang="scss">
-@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";
 div#accompanying-course {
-   span.multiselect__tag {
-      @include badge_social($social-issue-color);
-      background: $chill-l-gray;
-      color: $dark;
-   }
-   span.multiselect__option--highlight {
+  span.multiselect__tag {
+    @include badge_social($social-issue-color);
+    background: $chill-l-gray;
+    color: $dark;
+  }
+  span.multiselect__option--highlight {
+    &::after {
+      background: $green;
+    }
+    &.multiselect__option--selected {
       &::after {
-         background: $green;
+        background: $red;
       }
-      &.multiselect__option--selected {
-         &::after {
-            background: $red;
-         }
-      }
-   }
+    }
+  }
 }
 </style>
-
-
-