Feature: Allow to filter periods to reassign by postal code

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

@@ -0,0 +1,4 @@
+# Pickpostalcode
+
+## Usage
+    <PickPostalCode />

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

@@ -0,0 +1,108 @@
+<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"></vue-multiselect>
+    </div>
+</template>
+
+<script lang="js">
+
+import VueMultiselect from "vue-multiselect";
+import {reactive, defineProps, onMounted} from "vue";
+import {fetchCities, 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
+    },
+    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})` : '';
+    },
+    selectCity(city) {
+      console.log('city', 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/_PickPostalCode.scss

@@ -0,0 +1,3 @@
+.PickPostalCode {
+
+}

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

@@ -0,0 +1,43 @@
+import {makeFetch, fetchResults} from 'ChillMainAssets/lib/api/apiMethods';
+
+/**
+ * Endpoint chill_api_single_postal_code__index
+ * method GET, get Cities Object
+ * @params {object} a country object
+ * @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});
+
+    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));
+};
+
+/**
+ * Endpoint chill_main_postalcodeapi_search
+ * method GET, get Cities Object
+ * @params {string} search a search string
+ * @params {object} country a country object
+ * @params {AbortController} an abort controller
+ * @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});
+
+    if (country !== null) {
+        Object.assign('country', country.id);
+    }
+
+    return makeFetch('GET', url + params, null, {signal: controller.signal})
+        .then(result => Promise.resolve(result.results));
+};
+
+export {
+    fetchCities,
+    searchCities,
+};