forked from verdnatura/salix-front
Added claim filters
This commit is contained in:
parent
323e467371
commit
a1f7fdfb37
|
|
@ -0,0 +1,259 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const workers = ref();
|
||||
const workersCopy = ref();
|
||||
const states = ref();
|
||||
|
||||
function setWorkers(data) {
|
||||
workers.value = data;
|
||||
workersCopy.value = data;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fetch-data url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
|
||||
<fetch-data
|
||||
url="Workers/activeWithInheritedRole"
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
@on-fetch="setWorkers"
|
||||
auto-load
|
||||
/>
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ params, searchFn }">
|
||||
<q-list>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:label="t('Customer ID')"
|
||||
v-model="params.clientFk"
|
||||
lazy-rules
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="badge" size="sm"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input :label="t('Name')" v-model="params.name" lazy-rules />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section v-if="!workers">
|
||||
<q-skeleton type="QInput" class="full-width" />
|
||||
</q-item-section>
|
||||
<q-item-section v-if="workers">
|
||||
<q-select
|
||||
:label="t('Salesperson')"
|
||||
v-model="params.salesPersonFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-avatar color="orange" size="xs">
|
||||
<q-img
|
||||
v-if="params.salesPersonFk"
|
||||
:src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
/>
|
||||
</q-avatar>
|
||||
</template>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section v-if="!workers">
|
||||
<q-skeleton type="QInput" class="full-width" />
|
||||
</q-item-section>
|
||||
<q-item-section v-if="workers">
|
||||
<q-select
|
||||
:label="t('Attender')"
|
||||
v-model="params.attenderFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="workers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
:label="t('State')"
|
||||
v-model="params.stateFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="states"
|
||||
option-value="id"
|
||||
option-label="description"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
:label="t('Item')"
|
||||
v-model="params.itemFk"
|
||||
:options="items"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-mb-md">
|
||||
<q-item-section>
|
||||
<q-input :label="t('City')" v-model="params.city" lazy-rules />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-expansion-item :label="t('More options')" expand-separator>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:label="t('Phone')"
|
||||
v-model="params.phone"
|
||||
lazy-rules
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="phone" size="sm"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:label="t('Email')"
|
||||
v-model="params.email"
|
||||
lazy-rules
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="email" size="sm"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section v-if="!zones">
|
||||
<q-skeleton type="QInput" class="full-width" />
|
||||
</q-item-section>
|
||||
<q-item-section v-if="zones">
|
||||
<q-select
|
||||
:label="t('Zone')"
|
||||
v-model="params.zoneFk"
|
||||
@update:model-value="searchFn()"
|
||||
:options="zones"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
:label="t('Postcode')"
|
||||
v-model="params.postcode"
|
||||
lazy-rules
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
search: Contains
|
||||
fi: FI
|
||||
name: Name
|
||||
socialName: Social Name
|
||||
salesPersonFk: Salesperson
|
||||
provinceFk: Province
|
||||
city: City
|
||||
phone: Phone
|
||||
email: Email
|
||||
zoneFk: Zone
|
||||
postcode: Postcode
|
||||
es:
|
||||
params:
|
||||
search: Contiene
|
||||
fi: NIF
|
||||
name: Nombre
|
||||
socialName: Razón Social
|
||||
salesPersonFk: Comercial
|
||||
provinceFk: Provincia
|
||||
city: Ciudad
|
||||
phone: Teléfono
|
||||
email: Email
|
||||
zoneFk: Zona
|
||||
postcode: CP
|
||||
FI: NIF
|
||||
Name: Nombre
|
||||
Social Name: Razón social
|
||||
Salesperson: Comercial
|
||||
Province: Provincia
|
||||
City: Ciudad
|
||||
More options: Más opciones
|
||||
Phone: Teléfono
|
||||
Email: Email
|
||||
Zone: Zona
|
||||
Postcode: Código postal
|
||||
</i18n>
|
||||
|
||||
<!-- <i18n>
|
||||
{
|
||||
"en": {
|
||||
"fi": "Fiscal ID",
|
||||
"name": "Name",
|
||||
"socialName": "Social Name",
|
||||
"salesPersonFk": "Salesperson",
|
||||
"provinceFk": "Province",
|
||||
"city": "City",
|
||||
"zoneFk": "Zone",
|
||||
"postcode": "Postcode"
|
||||
},
|
||||
"es": {
|
||||
"fi": "NIF",
|
||||
"name": "Nombre",
|
||||
"socialName": "Razón social",
|
||||
"salesPersonFk": "Comercial"
|
||||
}
|
||||
}
|
||||
</i18n> -->
|
||||
|
|
@ -1,19 +1,25 @@
|
|||
<script setup>
|
||||
import { onMounted, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import { toDate } from 'src/filters/index';
|
||||
|
||||
import Paginate from 'src/components/PaginateData.vue';
|
||||
import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
|
||||
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
|
||||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import ClaimFilter from './ClaimFilter.vue';
|
||||
|
||||
const state = useStateStore();
|
||||
const router = useRouter();
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
||||
onMounted(() => state.toggleRightDrawer());
|
||||
onUnmounted(() => state.toggleRightDrawer());
|
||||
|
||||
function stateColor(code) {
|
||||
if (code === 'pending') return 'green';
|
||||
if (code === 'managed') return 'orange';
|
||||
|
|
@ -38,6 +44,9 @@ function viewSummary(id) {
|
|||
<teleport-slot to="#searchbar">
|
||||
<VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
|
||||
</teleport-slot>
|
||||
<teleport-slot to="#rightPanel">
|
||||
<ClaimFilter data-key="ClaimList" />
|
||||
</teleport-slot>
|
||||
<q-page class="q-pa-md">
|
||||
<paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
|
||||
<template #body="{ rows }">
|
||||
|
|
|
|||
|
|
@ -4,11 +4,10 @@ import { useI18n } from 'vue-i18n';
|
|||
import { useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
import Paginate from 'src/components/PaginateData.vue';
|
||||
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||
import CustomerFilter from './CustomerFilter.vue';
|
||||
|
||||
const state = useStateStore();
|
||||
|
|
|
|||
Loading…
Reference in New Issue