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>
|
<script setup>
|
||||||
|
import { onMounted, onUnmounted } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { toDate } from 'src/filters/index';
|
import { toDate } from 'src/filters/index';
|
||||||
|
|
||||||
import Paginate from 'src/components/PaginateData.vue';
|
import Paginate from 'src/components/PaginateData.vue';
|
||||||
import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
|
import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
|
||||||
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
|
import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
|
||||||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||||
|
import ClaimFilter from './ClaimFilter.vue';
|
||||||
|
|
||||||
|
const state = useStateStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
onMounted(() => state.toggleRightDrawer());
|
||||||
|
onUnmounted(() => state.toggleRightDrawer());
|
||||||
|
|
||||||
function stateColor(code) {
|
function stateColor(code) {
|
||||||
if (code === 'pending') return 'green';
|
if (code === 'pending') return 'green';
|
||||||
if (code === 'managed') return 'orange';
|
if (code === 'managed') return 'orange';
|
||||||
|
|
@ -38,6 +44,9 @@ function viewSummary(id) {
|
||||||
<teleport-slot to="#searchbar">
|
<teleport-slot to="#searchbar">
|
||||||
<VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
|
<VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
|
||||||
</teleport-slot>
|
</teleport-slot>
|
||||||
|
<teleport-slot to="#rightPanel">
|
||||||
|
<ClaimFilter data-key="ClaimList" />
|
||||||
|
</teleport-slot>
|
||||||
<q-page class="q-pa-md">
|
<q-page class="q-pa-md">
|
||||||
<paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
|
<paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
|
||||||
<template #body="{ rows }">
|
<template #body="{ rows }">
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,10 @@ import { useI18n } from 'vue-i18n';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useQuasar } from 'quasar';
|
import { useQuasar } from 'quasar';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
|
||||||
import Paginate from 'src/components/PaginateData.vue';
|
import Paginate from 'src/components/PaginateData.vue';
|
||||||
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
|
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
|
||||||
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
|
||||||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||||
|
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
|
||||||
import CustomerFilter from './CustomerFilter.vue';
|
import CustomerFilter from './CustomerFilter.vue';
|
||||||
|
|
||||||
const state = useStateStore();
|
const state = useStateStore();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue