forked from verdnatura/salix-front
Added Right panel filter
This commit is contained in:
parent
82b0db73b5
commit
187f84b4da
|
|
@ -1,14 +1,27 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import Navbar from 'src/components/NavBar.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const filterPanel = ref(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<Navbar />
|
||||
<router-view></router-view>
|
||||
<q-drawer
|
||||
v-model="filterPanel"
|
||||
show-if-above
|
||||
side="right"
|
||||
:width="256"
|
||||
:breakpoint="500"
|
||||
>
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<div id="rightPanel"></div>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-footer v-if="quasar.platform.is.mobile"></q-footer>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -24,50 +24,46 @@ const entityId = computed(() => {
|
|||
<template>
|
||||
<card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
|
||||
<template #body="{ entity }">
|
||||
<q-list>
|
||||
<q-item v-if="entity.salesPersonUser">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.card.salesPerson')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-list dense>
|
||||
<q-item v-if="entity.salesPersonUser" class="row">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.salesPerson') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ entity.salesPersonUser.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
<q-item class="row">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.credit') }}
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ toCurrency(entity.credit) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{
|
||||
t('customer.card.securedCredit')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
</q-item>
|
||||
<q-item class="row">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.securedCredit') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ toCurrency(entity.creditInsurance) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section v-if="entity.payMethod">
|
||||
<q-item-label caption>{{
|
||||
t('customer.card.payMethod')
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<q-item v-if="entity.payMethod" class="row">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.payMethod') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ entity.payMethod.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
|
||||
<q-item-label>
|
||||
</q-item>
|
||||
<q-item class="row">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.card.debt') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ toCurrency(entity.debt) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-card-actions class="q-gutter-md">
|
||||
|
|
|
|||
|
|
@ -48,10 +48,6 @@ const creditWarning = computed(() => {
|
|||
|
||||
return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
|
||||
});
|
||||
|
||||
const arrayDataStore = useArrayDataStore();
|
||||
const d = arrayDataStore.get('test');
|
||||
console.log(d);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -59,7 +55,7 @@ console.log(d);
|
|||
<template #body="{ entity }">
|
||||
<q-card-section class="row q-pa-none q-col-gutter-md">
|
||||
<div class="col">
|
||||
<q-list>
|
||||
<q-list dense>
|
||||
<q-item-label header class="text-h6">
|
||||
{{ t('customer.summary.basicData') }}
|
||||
<router-link
|
||||
|
|
@ -72,57 +68,69 @@ console.log(d);
|
|||
<q-icon name="open_in_new" />
|
||||
</router-link>
|
||||
</q-item-label>
|
||||
<q-separator class="q-mb-md" />
|
||||
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.customerId') }}
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.customerId') }}:
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ entity.id }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.id }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.name') }}
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.name') }}:
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.contact') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.contact }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.salesPersonUser">
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.salesPerson') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{
|
||||
entity.salesPersonUser.name
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
entity.name
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.phone') }}
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.contact') }}:
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.phone }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
entity.contact
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.mobile') }}
|
||||
|
||||
<q-item v-if="entity.salesPersonUser" class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.salesPerson') }}:
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ entity.salesPersonUser.name }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ entity.mobile }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.phone') }}:
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
entity.phone
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
|
||||
<q-item class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.mobile') }}:
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">{{
|
||||
entity.mobile
|
||||
}}</q-item-label>
|
||||
</q-item>
|
||||
|
||||
<q-item v-if="entity.contactChannel" class="row col">
|
||||
<q-item-label class="col" caption>
|
||||
{{ t('customer.summary.contactChannel') }}
|
||||
</q-item-label>
|
||||
<q-item-label class="col text-right q-ma-none">
|
||||
{{ entity.contactChannel.name }}
|
||||
</q-item-label>
|
||||
</q-item>
|
||||
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
|
|
@ -131,16 +139,6 @@ console.log(d);
|
|||
<q-item-label>{{ entity.email }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="entity.contactChannel">
|
||||
<q-item-section>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.summary.contactChannel') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{
|
||||
entity.contactChannel.name
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
|
@ -526,3 +524,9 @@ console.log(d);
|
|||
</template>
|
||||
</card-summary>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.q-item__label + .q-item__label {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useQuasar } from 'quasar';
|
||||
import Paginate from 'src/components/PaginateData.vue';
|
||||
import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
|
||||
import TeleportSlot from 'components/ui/TeleportSlot.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
import { useArrayData } from 'composables/useArrayData';
|
||||
|
||||
const router = useRouter();
|
||||
const quasar = useQuasar();
|
||||
|
|
@ -21,27 +26,189 @@ function viewSummary(id) {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
const arrayData = useArrayData('customers');
|
||||
|
||||
const userParams = ref({});
|
||||
async function search() {
|
||||
//const params = userParams;
|
||||
const params = userParams.value;
|
||||
await arrayData.apply({ params });
|
||||
// searchPanel.value.hide();
|
||||
}
|
||||
|
||||
const provinces = ref([]);
|
||||
const workers = ref([]);
|
||||
const workersCopy = ref([]);
|
||||
const zones = ref([]);
|
||||
|
||||
function setWorkers(data) {
|
||||
workers.value = data;
|
||||
workersCopy.value = data;
|
||||
}
|
||||
|
||||
const tags = computed(() => {
|
||||
const params = [];
|
||||
|
||||
for (const param in userParams.value) {
|
||||
params.push({
|
||||
label: param,
|
||||
value: userParams.value[param],
|
||||
});
|
||||
}
|
||||
|
||||
return params;
|
||||
});
|
||||
</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
|
||||
/>
|
||||
<teleport-slot to="#rightPanel">
|
||||
<!-- <q-list>
|
||||
<q-item-label header class="text-uppercase">Filter</q-item-label>
|
||||
</q-list> -->
|
||||
<q-form @submit="search">
|
||||
<div class="row q-pa-md 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="q-pa-md q-gutter-y-md">
|
||||
<q-input
|
||||
v-model="userParams.search"
|
||||
label="Search by id or name"
|
||||
lazy-rules
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
label="Search"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
rounded
|
||||
/>
|
||||
</div>
|
||||
<q-separator />
|
||||
|
||||
<div class="q-px-md">
|
||||
<q-input label="Fiscal ID" v-model="userParams.fi" lazy-rules />
|
||||
</div>
|
||||
|
||||
<div class="row q-gutter-md q-px-md">
|
||||
<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="q-px-md">
|
||||
<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"
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
|
||||
<div class="row q-gutter-md q-px-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-md q-px-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-md q-px-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-form>
|
||||
</teleport-slot>
|
||||
<q-page class="q-pa-md">
|
||||
<paginate url="/Clients/filter" order="id DESC" auto-load>
|
||||
<template #body="{ rows }">
|
||||
<q-card class="card" v-for="row of rows" :key="row.id">
|
||||
<q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
|
||||
<q-item
|
||||
class="q-pa-none items-start cursor-pointer q-hoverable"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
<q-item-section class="q-pa-md" @click="navigate(row.id)">
|
||||
<div class="text-h6">{{ row.name }}</div>
|
||||
<q-item-label caption>#{{ row.id }}</q-item-label>
|
||||
|
||||
<q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.list.email') }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ t('customer.list.email') }}
|
||||
</q-item-label>
|
||||
<q-item-label>{{ row.email }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ t('customer.list.phone') }}</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
t('customer.list.phone')
|
||||
}}</q-item-label>
|
||||
<q-item-label>{{ row.phone }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -69,11 +236,27 @@ function viewSummary(id) {
|
|||
</q-menu>
|
||||
</q-btn> -->
|
||||
|
||||
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
|
||||
<q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="orange"
|
||||
icon="arrow_circle_right"
|
||||
@click="navigate(row.id)"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
t('components.smartCard.openCard')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
|
||||
<q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="grey-7"
|
||||
icon="preview"
|
||||
@click="viewSummary(row.id)"
|
||||
>
|
||||
<q-tooltip>{{
|
||||
t('components.smartCard.openSummary')
|
||||
}}</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- <q-btn flat round color="grey-7" icon="vn:ticket">
|
||||
<q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
|
||||
|
|
|
|||
Loading…
Reference in New Issue