Feature: Allow to filter periods to reassign by postal code

src/Bundle/ChillMainBundle/Resources/public/module/pick-postal-code/index.js

@@ -0,0 +1,66 @@
+import { createApp } from 'vue';
+import PickPostalCode from 'ChillMainAssets/vuejs/PickPostalCode/PickPostalCode';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+
+const i18n = _createI18n(appMessages);
+
+
+function loadOnePicker(el, input, uniqId, city) {
+    const app = createApp({
+        template: '<pick-postal-code @select-city="onCitySelected" @removeCity="onCityRemoved" :picked="city"></pick-postal-code>',
+        components: {
+            PickPostalCode,
+        },
+        data() {
+            return {
+                city: city,
+            }
+        },
+        methods: {
+            onCitySelected(city) {
+                this.city = city;
+                input.value = city.id;
+            },
+            onCityRemoved(city) {
+                this.city = null;
+                input.value = '';
+            }
+        }
+    })
+        .use(i18n)
+        .mount(el);
+}
+
+function loadDynamicPickers(element) {
+
+    let apps = element.querySelectorAll('[data-module="pick-postal-code"]');
+
+    apps.forEach(function(el) {
+
+        console.log('el', el);
+        const
+            uniqId = el.dataset.uniqid,
+            input = document.querySelector(`input[data-input-uniqid="${uniqId}"]`),
+            cityIdValue = input.value === '' ? null : input.value
+        ;
+
+        console.log('uniqid', uniqId);
+        console.log('input', input);
+        console.log('input value', input.value);
+        console.log('cityIdValue', cityIdValue);
+
+        if (cityIdValue !== null) {
+            makeFetch('GET', `/api/1.0/main/postal-code/${cityIdValue}.json`).then(city => {
+                loadOnePicker(el, input, uniqId, city);
+            })
+        } else {
+            loadOnePicker(el, input, uniqId, null);
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function(e) {
+    loadDynamicPickers(document)
+})

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,
+};

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -238,3 +238,9 @@
     <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
     <div data-module="pick-dynamic" data-types="{{ form.vars['types']|json_encode }}" data-multiple="{{ form.vars['multiple'] }}" data-uniqid="{{ form.vars['uniqid'] }}"></div>
 {% endblock %}
+
+{% block pick_postal_code_widget %}
+    {{ form_help(form)}}
+    <input type="hidden" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %} data-input-uniqid="{{ form.vars['uniqid'] }}"/>
+    <div data-module="pick-postal-code"  data-uniqid="{{ form.vars['uniqid'] }}"></div>
+{% endblock %}