eslint fixes

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

@@ -1,30 +1,30 @@
 <template>
-    <div class="vue-component">
-        <h2><a id="section-60" />{{ $t("social_issue.title") }}</h2>
+  <div class="vue-component">
+    <h2><a id="section-60" />{{ $t("social_issue.title") }}</h2>
 
-        <div class="my-4">
-            <!--label for="field">{{ $t('social_issue.label') }}</label
+    <div class="my-4">
+      <!--label for="field">{{ $t('social_issue.label') }}</label
         -->
-            <VueMultiselect
-                name="field"
-                :close-on-select="true"
-                :allow-empty="true"
-                :show-labels="false"
-                track-by="id"
-                label="text"
-                :multiple="true"
-                :searchable="true"
-                :placeholder="$t('social_issue.label')"
-                @update:model-value="updateSocialIssues"
-                :model-value="value"
-                :options="options"
-            />
-        </div>
-
-        <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
-            {{ $t("social_issue.not_valid") }}
-        </div>
+      <VueMultiselect
+        name="field"
+        :close-on-select="true"
+        :allow-empty="true"
+        :show-labels="false"
+        track-by="id"
+        label="text"
+        :multiple="true"
+        :searchable="true"
+        :placeholder="$t('social_issue.label')"
+        @update:model-value="updateSocialIssues"
+        :model-value="value"
+        :options="options"
+      />
     </div>
+
+    <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
+      {{ $t("social_issue.not_valid") }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -33,59 +33,54 @@ import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
 import { mapGetters, mapState } from "vuex";
 
 export default {
-    name: "SocialIssue",
-    components: { VueMultiselect },
-    data() {
-        return {
-            options: [],
-        };
+  name: "SocialIssue",
+  components: { VueMultiselect },
+  data() {
+    return {
+      options: [],
+    };
+  },
+  computed: {
+    ...mapState({
+      value: (state) => state.accompanyingCourse.socialIssues,
+    }),
+    ...mapGetters(["isSocialIssueValid"]),
+  },
+  mounted() {
+    this.getOptions();
+  },
+  methods: {
+    getOptions() {
+      fetchResults(`/api/1.0/person/social-work/social-issue.json`).then(
+        (response) => {
+          this.options = response;
+        },
+      );
     },
-    computed: {
-        ...mapState({
-            value: (state) => state.accompanyingCourse.socialIssues,
-        }),
-        ...mapGetters(["isSocialIssueValid"]),
-    },
-    mounted() {
-        this.getOptions();
-    },
-    methods: {
-        getOptions() {
-            fetchResults(`/api/1.0/person/social-work/social-issue.json`).then(
-                (response) => {
-                    this.options = response;
-                },
+    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 }),
             );
-        },
-        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 };
-        },
+          } 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>
 
@@ -96,20 +91,20 @@ export default {
 @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__tag {
+    @include badge_social($social-issue-color);
+    background: $chill-l-gray;
+    color: $dark;
+  }
+  span.multiselect__option--highlight {
+    &::after {
+      background: $green;
     }
-    span.multiselect__option--highlight {
-        &::after {
-            background: $green;
-        }
-        &.multiselect__option--selected {
-            &::after {
-                background: $red;
-            }
-        }
+    &.multiselect__option--selected {
+      &::after {
+        background: $red;
+      }
     }
+  }
 }
 </style>