Apply prettier rules

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue

@@ -1,107 +1,109 @@
 <template>
-  <div class="PickPostalCode">
-    <vue-multiselect
-      id="citySelector"
-      @search-change="listenInputSearch"
-      ref="citySelector"
-      v-model="internalPicked"
-      @select="selectCity"
-      @remove="remove"
-      name=""
-      track-by="id"
-      label="value"
-      :custom-label="transName"
-      :placeholder="$t('select_city')"
-      :select-label="$t('multiselect.select_label')"
-      :deselect-label="$t('multiselect.deselect_label')"
-      :selected-label="$t('multiselect.selected_label')"
-      :taggable="true"
-      :multiple="false"
-      :internal-search="false"
-      :loading="isLoading"
-      :options="cities"
-    />
-  </div>
+    <div class="PickPostalCode">
+        <vue-multiselect
+            id="citySelector"
+            @search-change="listenInputSearch"
+            ref="citySelector"
+            v-model="internalPicked"
+            @select="selectCity"
+            @remove="remove"
+            name=""
+            track-by="id"
+            label="value"
+            :custom-label="transName"
+            :placeholder="$t('select_city')"
+            :select-label="$t('multiselect.select_label')"
+            :deselect-label="$t('multiselect.deselect_label')"
+            :selected-label="$t('multiselect.selected_label')"
+            :taggable="true"
+            :multiple="false"
+            :internal-search="false"
+            :loading="isLoading"
+            :options="cities"
+        />
+    </div>
 </template>
 
 <script lang="js">
-
 import VueMultiselect from "vue-multiselect";
-import { searchCities} from "./api";
+import { searchCities } from "./api";
 
 export default {
-  components: {
-    VueMultiselect,
-  },
-  data() {
-    return {
-      cities: [],
-      internalPicked: null,
-      isLoading: false,
-      abortControllers: [],
-    }
-  },
-  emits: ['pickCity', 'removeCity'],
-  props: {
-    picked: {
-      type: Object,
-      required: false,
-      default: null
+    components: {
+        VueMultiselect,
     },
-    country: {
-      type: Object,
-      required: false,
-      default: null
-    }
-  },
-  mounted() {
-    if (this.picked !== null) {
-      this.internalPicked = this.picked;
-      this.cities.push(this.picked);
-    }
-  },
-  methods: {
-    transName(value) {
-      return (value.code && value.name) ? `${value.name} (${value.code})` : '';
+    data() {
+        return {
+            cities: [],
+            internalPicked: null,
+            isLoading: false,
+            abortControllers: [],
+        };
     },
-    selectCity(city) {
-      this.$emit('selectCity', city);
+    emits: ["pickCity", "removeCity"],
+    props: {
+        picked: {
+            type: Object,
+            required: false,
+            default: null,
+        },
+        country: {
+            type: Object,
+            required: false,
+            default: null,
+        },
     },
-    listenInputSearch(query) {
-      if (query.length <= 2) {
-        return;
-      }
-
-      let c = this.abortControllers.pop();
-
-      while (typeof c !== 'undefined') {
-        c.abort();
-        c = this.abortControllers.pop();
-      }
-
-      this.isLoading = true;
-      let controller = new AbortController();
-      this.abortControllers.push(controller);
-
-      searchCities(query, this.country, controller).then(
-          newCities => {
-            this.cities = this.cities.filter(city => city.id === this.picked);
-            newCities.forEach(item => {
-              this.cities.push(item);
-            })
-            this.isLoading = false;
-
-            return Promise.resolve();
-          })
-          .catch((error) => {
-            console.log(error); //TODO better error handling
-            this.isLoading = false;
-          });
+    mounted() {
+        if (this.picked !== null) {
+            this.internalPicked = this.picked;
+            this.cities.push(this.picked);
+        }
     },
-    remove(item) {
-      this.$emit('removeCity', item);
-    }
-  },
-}
+    methods: {
+        transName(value) {
+            return value.code && value.name
+                ? `${value.name} (${value.code})`
+                : "";
+        },
+        selectCity(city) {
+            this.$emit("selectCity", city);
+        },
+        listenInputSearch(query) {
+            if (query.length <= 2) {
+                return;
+            }
 
+            let c = this.abortControllers.pop();
+
+            while (typeof c !== "undefined") {
+                c.abort();
+                c = this.abortControllers.pop();
+            }
+
+            this.isLoading = true;
+            let controller = new AbortController();
+            this.abortControllers.push(controller);
+
+            searchCities(query, this.country, controller)
+                .then((newCities) => {
+                    this.cities = this.cities.filter(
+                        (city) => city.id === this.picked,
+                    );
+                    newCities.forEach((item) => {
+                        this.cities.push(item);
+                    });
+                    this.isLoading = false;
+
+                    return Promise.resolve();
+                })
+                .catch((error) => {
+                    console.log(error); //TODO better error handling
+                    this.isLoading = false;
+                });
+        },
+        remove(item) {
+            this.$emit("removeCity", item);
+        },
+    },
+};
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/api.js

@@ -1,4 +1,4 @@
-import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 
 /**
  * Endpoint chill_api_single_postal_code__index
@@ -7,14 +7,17 @@ import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods';
  * @returns {Promise} a promise containing all Postal Code objects filtered with country
  */
 const fetchCities = (country) => {
-    // warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
-    const params = new URLSearchParams({item_per_page: 100});
+  // warning: do not use fetchResults (in apiMethods): we need only a **part** of the results in the db
+  const params = new URLSearchParams({ item_per_page: 100 });
 
-    if (country !== null) {
-        params.append('country', country.id);
-    }
+  if (country !== null) {
+    params.append("country", country.id);
+  }
 
-    return makeFetch('GET', `/api/1.0/main/postal-code.json?${params.toString()}`).then(r => Promise.resolve(r.results));
+  return makeFetch(
+    "GET",
+    `/api/1.0/main/postal-code.json?${params.toString()}`,
+  ).then((r) => Promise.resolve(r.results));
 };
 
 /**
@@ -26,18 +29,16 @@ const fetchCities = (country) => {
  * @returns {Promise} a promise containing all Postal Code objects filtered with country and a search string
  */
 const searchCities = (search, country, controller) => {
-    const url = '/api/1.0/main/postal-code/search.json?';
-    const params = new URLSearchParams({q: search});
+  const url = "/api/1.0/main/postal-code/search.json?";
+  const params = new URLSearchParams({ q: search });
 
-    if (country !== null) {
-        Object.assign('country', country.id);
-    }
+  if (country !== null) {
+    Object.assign("country", country.id);
+  }
 
-    return makeFetch('GET', url + params, null, {signal: controller.signal})
-        .then(result => Promise.resolve(result.results));
+  return makeFetch("GET", url + params, null, {
+    signal: controller.signal,
+  }).then((result) => Promise.resolve(result.results));
 };
 
-export {
-    fetchCities,
-    searchCities,
-};
+export { fetchCities, searchCities };