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)
+})