Merge branch 'dev' into 6654-stickySubToolbar

.eslintrc.js

@@ -58,7 +58,7 @@ module.exports = {
     rules: {
         'prefer-promise-reject-errors': 'off',
         'no-unused-vars': 'warn',
-
+        "vue/no-multiple-template-root": "off" ,
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

src/components/FormModel.vue

@@ -177,13 +177,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner
-        v-if="$props.observeFormChanges && hasChanges"
-        class="text-white bg-warning full-width"
-    >
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <div class="column items-center full-width">
         <QForm
             v-if="formData"

src/components/UserPanel.vue

@@ -1,19 +1,19 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar, useQuasar } from 'quasar';
+import { Dark, Quasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { localeEquivalence } from "src/i18n/index";
+import { localeEquivalence } from 'src/i18n/index';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-const quasar = useQuasar();
+import { useClipboard } from 'src/composables/useClipboard';
-
+const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
         return locale.value;
@@ -21,7 +21,7 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        value = localeEquivalence[value] ?? value
+        value = localeEquivalence[value] ?? value;
 
         try {
             /* @vite-ignore */
@@ -81,12 +81,8 @@ function logout() {
     router.push('/login');
 }
 
-function copyUserToken(){
+function copyUserToken() {
-    navigator.clipboard.writeText(session.getToken());
+    copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
-    quasar.notify({
-        type: 'positive',
-        message: t('components.userPanel.copyToken'),
-    });
 }
 </script>
 
@@ -129,7 +125,11 @@ function copyUserToken(){
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
+                <div
+                    class="text-subtitle3 text-grey-7 q-mb-xs copyText"
+                    @click="copyUserToken()"
+                >
+                    @{{ user.name }}
                 </div>
 
                 <QBtn
@@ -152,8 +152,8 @@ function copyUserToken(){
     width: 150px;
 }
 
-.copyUserToken {
+.copyText {
-   &:hover{
+    &:hover {
         cursor: alias;
     }
 }

src/components/common/VnLocation.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import FetchData from 'components/FetchData.vue';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const postcodesOptions = ref([]);
+const postcodesRef = ref(null);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    filterOptions: {
+        type: Array,
+        default: () => [],
+    },
+    isClearable: {
+        type: Boolean,
+        default: true,
+    },
+    defaultFilter: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+onMounted(() => {
+    locationFilter()
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
+
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+function showLabel(data) {
+       return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+}
+
+function locationFilter(search) {
+    let where = { search };
+    postcodesRef.value.fetch({filter:{ where}, limit: 30});
+}
+
+function handleFetch( data) {
+    postcodesOptions.value = data;
+}
+
+</script>
+<template>
+    <FetchData
+        ref="postcodesRef"
+        url="Postcodes/filter"
+        @on-fetch="(data) =>handleFetch(data)"
+    />
+    <VnSelectCreate
+        v-if="postcodesRef"
+        v-model="value"
+        :options="postcodesOptions"
+        :label="t('Location')"
+        :option-label="showLabel"
+        :placeholder="t('Search by postalCode, town, province or country')"
+        @input-value="locationFilter"
+        :default-filter="false"
+        :input-debounce="300"
+        :class="{ required: $attrs.required }"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        clearable
+        hide-selected
+        fill-input
+    >
+        <template #form>
+            <CreateNewPostcode @on-data-saved="locationFilter()" />
+        </template>
+        <template #option="{itemProps, opt}">
+            <QItem v-bind="itemProps">
+                <QItemSection v-if="opt">
+                    <QItemLabel>{{ opt.code }}</QItemLabel>
+                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelectCreate>
+</template>
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Location: Ubicación
+    Search by postalcode, town, province or country: Buscar por código postal, ciudad o país
+</i18n>

src/components/common/VnSelectFilter.vue

@@ -12,11 +12,11 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
-        type: String,
+        type: [String],
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array],
         default: () => [],
     },
     isClearable: {
@@ -47,6 +47,7 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+
 setOptions(options.value);
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();

src/components/ui/VnLv.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
 
+import { useClipboard } from 'src/composables/useClipboard';
 const $props = defineProps({
     label: { type: String, default: null },
     value: {
@@ -10,8 +11,19 @@ const $props = defineProps({
     },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    copy: { type: Boolean, default: false },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+
+const { copyText } = useClipboard();
+
+function copyValueText() {
+    copyText($props.value, {
+        component: {
+            copyValue: $props.value,
+        },
+    });
+}
 </script>
 <style scoped>
 .label,
@@ -48,5 +60,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 </QTooltip>
             </QIcon>
         </div>
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
+            <QIcon name="Content_Copy" color="primary" />
+        </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.copy {
+    &:hover {
+        cursor: pointer;
+    }
+}
+</style>

src/composables/useClipboard.js

@@ -0,0 +1,17 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useClipboard() {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    /**
+     *
+     * @param {String} value Value to send to clipboardAPI
+     * @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
+     */
+    function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
+        navigator.clipboard.writeText(value);
+        quasar.notify({ type: 'positive', message: t(label, component) });
+    }
+    return { copyText };
+}

src/i18n/en/index.js

@@ -1060,6 +1060,7 @@ export default {
             totalEntries: 'Total entries',
         },
     },
+
     components: {
         topbar: {},
         userPanel: {
@@ -1083,5 +1084,8 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
+        VnLv: {
+            copyText: '{copyValue} has been copied to the clipboard',
+        },
     },
 };

src/i18n/es/index.js

@@ -1083,5 +1083,8 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
+        VnLv: {
+            copyText: '{copyValue} se ha copiado al portapepeles',
+        },
     },
 };

src/pages/Customer/Card/CustomerSummary.vue

@@ -81,7 +81,7 @@ const creditWarning = computed(() => {
                         <VnLinkPhone :phone-number="entity.mobile" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('customer.summary.email')" :value="entity.email" />
+                <VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
                     :value="entity?.salesPersonUser?.name"

src/pages/Customer/CustomerCreate.vue

@@ -2,12 +2,11 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
@@ -29,23 +28,18 @@ const newClientForm = reactive({
     isEqualizated: false,
 });
 
-const postcodeFetchDataRef = ref(null);
-const townsFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
+
-    await postcodeFetchDataRef.value.fetch();
+function handleLocation(data, location ) {
-    await townsFetchDataRef.value.fetch();
+    const { town, code, provinceFk, countryFk } = location ?? {}
-    formData.postcode = code;
+    data.postcode = code;
-    formData.provinceFk = provinceFk;
+    data.city = town;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+    data.provinceFk = provinceFk;
-    formData.countryFk = countryFk;
+    data.countryFk = countryFk;
-};
+}
 </script>
 
 <template>
@@ -54,33 +48,11 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         auto-load
         url="Workers/search?departmentCodes"
     />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
     <FetchData
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
         url="BusinessTypes"
     />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
     <QPage>
         <VnSubToolbar />
         <FormModel
@@ -139,96 +111,19 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
+                        <VnLocation
-                            v-model="data.postcode"
-                            :label="t('Postcode')"
                             :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
+                            v-model="data.location"
-                            option-value="code"
+                            @update:model-value="
-                            hide-selected
+                                (location) => handleLocation(data, location)
+                            "
                         >
-                            <template #form>
+                        </VnLocation>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event, data)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <!-- ciudades -->
-                        <VnSelectFilter
-                            :label="t('City')"
-                            :options="citiesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="name"
-                            v-model="data.city"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{
-                                                `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Province')"
-                            :options="provincesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.provinceFk"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{
-                                            `${scope.opt.name} (${scope.opt.country.country})`
-                                        }}</QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Country')"
-                            :options="countriesOptions"
-                            hide-selected
-                            option-label="country"
-                            option-value="id"
-                            v-model="data.countryFk"
-                        />
                     </div>
                 </VnRow>
+
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput v-model="data.userName" :label="t('Web user')" />

src/pages/Department/Card/DepartmentDescriptor.vue

@@ -90,17 +90,15 @@ const removeDepartment = () => {
             </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('department.chat')" :value="entity.chatName" dash />
+            <VnLv :label="t('department.chat')" :value="entity.chatName" />
-            <VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
+            <VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
             <VnLv
                 :label="t('department.selfConsumptionCustomer')"
                 :value="entity.client?.name"
-                dash
             />
             <VnLv
                 :label="t('department.bossDepartment')"
                 :value="entity.worker?.user?.name"
-                dash
             />
         </template>
         <template #actions>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -101,7 +101,7 @@ const setData = (entity) => {
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
-            <VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
+            <VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
             <VnLv
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"

src/pages/Worker/Card/WorkerSummary.vue

@@ -80,7 +80,7 @@ const filter = {
                     :label="t('worker.list.department')"
                     :value="worker.department.department.name"
                 />
-                <VnLv :label="t('worker.list.email')" :value="worker.user.email" />
+                <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                 <VnLv :label="t('worker.summary.boss')" link>
                     <template #value>
                         <VnUserLink

src/pages/Worker/WorkerCreate.vue

@@ -9,7 +9,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -21,14 +22,6 @@ const workerConfigFilter = {
     field: ['payMethodFk'],
 };
 
-const provincesFilter = {
-    fields: ['id', 'name', 'countryFk'],
-};
-
-const townsFilter = {
-    fields: ['id', 'name', 'provinceFk'],
-};
-
 const newWorkerForm = ref({
     companyFk: null,
     payMethodFk: null,
@@ -49,10 +42,6 @@ const newWorkerForm = ref({
     bankEntityFk: null,
 });
 
-const postcodeFetchDataRef = ref(null);
-const townsFetchDataRef = ref(null);
-const provincesOptions = ref([]);
-const townsOptions = ref([]);
 const companiesOptions = ref([]);
 const workersOptions = ref([]);
 const payMethodsOptions = ref([]);
@@ -67,13 +56,14 @@ const onBankEntityCreated = (data) => {
     bankEntitiesOptions.value.push(data);
 };
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
+
-    await postcodeFetchDataRef.value.fetch();
+function handleLocation(data, location ) {
-    await townsFetchDataRef.value.fetch();
+    const { town, postcode: code, provinceFk, countryFk } = location ?? {}
-    formData.postcode = code;
+    data.postcode = code;
-    formData.provinceFk = provinceFk;
+    data.city = town;
-    formData.city = townsOptions.value.find((town) => town.id === townFk).name;
+    data.provinceFk = provinceFk;
-};
+    data.countryFk = countryFk;
+}
 
 onMounted(async () => {
     const userInfo = await useUserConfig().fetch();
@@ -88,25 +78,7 @@ onMounted(async () => {
         :filter="workerConfigFilter"
         auto-load
     />
-    <FetchData
+
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Provinces/location"
-        @on-fetch="(data) => (provincesOptions = data)"
-        :filter="provincesFilter"
-        auto-load
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        url="Towns/location"
-        @on-fetch="(data) => (townsOptions = data)"
-        :filter="townsFilter"
-        auto-load
-    />
     <FetchData
         url="Companies"
         @on-fetch="(data) => (companiesOptions = data)"
@@ -184,77 +156,19 @@ onMounted(async () => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
+                        <VnLocation
-                            v-model="data.postcode"
-                            :label="t('worker.create.postcode')"
                             :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
+                            v-model="data.location"
-                            option-value="code"
+                            @update:model-value="
-                            hide-selected
+                                    (location) => handleLocation(data, location)
+                                    "
                             >
-                            <template #form>
+                        </VnLocation>
-                                <CreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.province')"
-                            v-model="data.provinceFk"
-                            :options="provincesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            :rules="validate('Worker.provinceFk')"
-                        />
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('worker.create.city')"
-                            v-model="data.city"
-                            :options="townsOptions"
-                            option-value="name"
-                            option-label="name"
-                            hide-selected
-                            :rules="validate('Worker.city')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.name }},
-                                            {{ scope.opt.province.name }} ({{
-                                                scope.opt.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
                     <div class="col">
                         <VnInput
                             :label="t('worker.create.street')"

test/cypress/integration/VnLocation.spec.js

@@ -0,0 +1,31 @@
+const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
+describe('VnLocation', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/worker/create');
+        cy.waitForElement('.q-card');
+    });
+
+    it('Show all options', function() {
+      cy.get(inputLocation).click();
+      cy.get(locationOptions).should('have.length',5);
+    });
+
+    it('input filter location as "al"', function() {
+        cy.get(inputLocation).click();
+        cy.get(inputLocation).clear();
+        cy.get(inputLocation).type('al');
+        cy.get(locationOptions).should('have.length',3);
+    });
+    it('input filter location as "ecuador"', function() {
+        cy.get(inputLocation).click();
+        cy.get(inputLocation).clear();
+        cy.get(inputLocation).type('ecuador');
+        cy.get(locationOptions).should('have.length',1);
+        cy.get(`${locationOptions}:nth-child(1)`).click();
+        cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+
+    });
+})