159 lines
5.4 KiB
Vue
159 lines
5.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
|
|
const props = defineProps({
|
|
scope: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const userParams = ref({});
|
|
async function search() {
|
|
const searchFn = props.scope.search;
|
|
|
|
await searchFn({ userParams });
|
|
}
|
|
|
|
const provinces = ref([]);
|
|
const workers = ref([]);
|
|
const workersCopy = ref([]);
|
|
const zones = ref([]);
|
|
|
|
function setWorkers(data) {
|
|
workers.value = data;
|
|
workersCopy.value = data;
|
|
}
|
|
</script>
|
|
<template>
|
|
<fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
|
|
<fetch-data url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
|
|
<fetch-data
|
|
url="Workers/activeWithInheritedRole"
|
|
:filter="{ where: { role: 'salesPerson' } }"
|
|
@on-fetch="setWorkers"
|
|
auto-load
|
|
/>
|
|
<q-card class="q-pa-md">
|
|
<q-form @submit="search" class="q-gutter-y-md">
|
|
<!-- <div class="row truncate-chip-labels">
|
|
<q-chip
|
|
v-for="chip of tags"
|
|
:key="chip.label"
|
|
@remove="log('Icecream')"
|
|
icon="label"
|
|
color="primary"
|
|
size="sm"
|
|
removable
|
|
>
|
|
<strong>{{ chip.label }}: </strong>
|
|
<span>"{{ chip.value }}"</span>
|
|
</q-chip>
|
|
</div> -->
|
|
<div class="row q-gutter-x-md">
|
|
<div class="col">
|
|
<q-input
|
|
v-model="userParams.search"
|
|
label="Search"
|
|
hint="Search by id or name"
|
|
lazy-rules
|
|
autofocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row q-gutter-x-md">
|
|
<div class="col">
|
|
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
|
|
</div>
|
|
<div class="col">
|
|
<q-input label="Name" v-model="userParams.name" lazy-rules />
|
|
</div>
|
|
<div class="col">
|
|
<q-input label="Social name" v-model="userParams.socialName" lazy-rules />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-gutter-x-md">
|
|
<div class="col">
|
|
<q-select
|
|
v-model="userParams.salesPersonFk"
|
|
:options="workers"
|
|
option-value="id"
|
|
option-label="name"
|
|
emit-value
|
|
label="Salesperson"
|
|
map-options
|
|
use-input
|
|
:input-debounce="0"
|
|
>
|
|
<template #before>
|
|
<q-avatar color="orange">
|
|
<q-img
|
|
v-if="userParams.salesPersonFk"
|
|
:src="`/api/Images/user/160x160/${userParams.salesPersonFk}/download?access_token=${token}`"
|
|
spinner-color="white"
|
|
/>
|
|
</q-avatar>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-gutter-x-md">
|
|
<div class="col">
|
|
<q-input label="Phone" v-model="userParams.phone" lazy-rules />
|
|
</div>
|
|
<div class="col">
|
|
<q-input label="Email" v-model="userParams.email" lazy-rules />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-gutter-x-md">
|
|
<div class="col">
|
|
<q-select
|
|
label="Province"
|
|
v-model="userParams.provinceFk"
|
|
:options="provinces"
|
|
option-value="id"
|
|
option-label="name"
|
|
emit-value
|
|
map-options
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input label="City" v-model="userParams.city" lazy-rules />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-gutter-x-md">
|
|
<div class="col">
|
|
<q-select
|
|
label="Zone"
|
|
v-model="userParams.zoneFk"
|
|
:options="zones"
|
|
option-value="id"
|
|
option-label="name"
|
|
emit-value
|
|
map-options
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<q-input label="Postcode" v-model="userParams.postcode" lazy-rules />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <q-input
|
|
label="Phone"
|
|
hint="The customer phone"
|
|
lazy-rules
|
|
:rules="[(val) => (val && val.length > 0) || 'Please type something']"
|
|
/> -->
|
|
|
|
<div>
|
|
<q-btn label="Search" type="submit" color="primary" class="full-width" rounded />
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</template>
|