wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Navigate through card/index

This commit is contained in:
Joan Sanchez 2023-02-14 14:59:39 +01:00
parent a1ab4d84c8
commit a864e2786b
8 changed files with 237 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ui/VnSearchbar.vue
View File

@ -2,12 +2,18 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { route } from 'quasar/wrappers';
const props = defineProps({ const props = defineProps({
dataKey: { dataKey: {
type: String, type: String,
required: true, required: true,
}, },
label: {
type: String,
required: false,
default: 'Search',
},
redirect: { redirect: {
type: Boolean, type: Boolean,
required: false, required: false,
@ -16,6 +22,7 @@ const props = defineProps({
}); });
const router = useRouter(); const router = useRouter();
// const route = useRoute();
const arrayData = useArrayData(props.dataKey); const arrayData = useArrayData(props.dataKey);
const store = arrayData.store; const store = arrayData.store;
const searchText = ref(); const searchText = ref();
@ -28,20 +35,26 @@ onMounted(() => {
}); });
async function search() { async function search() {
console.log('search!');
await arrayData.apply({ await arrayData.apply({
params: { params: {
search: searchText.value, search: searchText.value,
}, },
}); });
if (!props.redirect) return; if (!props.redirect) return;
console.log(route.query);
const rows = store.data; const rows = store.data;
if (rows.length === 1) { if (rows.length === 1) {
const firstRow = rows[0]; const firstRow = rows[0];
router.push({ path: `/customer/${firstRow.id}` }); router.push({ path: `/customer/${firstRow.id}` });
} else {
router.replace({ path: `/customer` });
} }
// if (route.matched.length > 2) {
// } else {
// }
} }
</script> </script>
@ -50,9 +63,9 @@ async function search() {
<q-input <q-input
id="searchbar" id="searchbar"
v-model="searchText" v-model="searchText"
label="Search by customer id or name" :label="props.label"
dense dense
standout standout="bg-grey-6 text-white"
autofocus autofocus
> >
<template #prepend> <template #prepend>

4
src/composables/useArrayData.js
View File

@ -13,7 +13,7 @@ export function useArrayData(key, userOptions) {
} }
const store = arrayDataStore.get(key); const store = arrayDataStore.get(key);
const hasMoreData = ref(true); const hasMoreData = ref(false);
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -60,7 +60,7 @@ export function useArrayData(key, userOptions) {
store.filter = filter; store.filter = filter;
const params = { const params = {
filter: filter, filter: JSON.stringify(filter),
}; };
Object.assign(params, store.userParams); Object.assign(params, store.userParams);

46
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -108,15 +108,30 @@ const entityId = computed(() => {
<q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip> <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
</q-icon> </q-icon>
</q-card-actions> </q-card-actions>
<!-- <q-card-actions> <q-card-actions>
<q-btn size="md" icon="vn:ticket" color="primary"> <q-btn
<q-tooltip>Ticket list</q-tooltip> :to="{
name: 'TicketList',
query: { params: JSON.stringify({ clientFk: entity.id }) },
}"
size="md"
icon="vn:ticket"
color="primary"
>
<q-tooltip>{{ t('ticketList') }}</q-tooltip>
</q-btn> </q-btn>
<q-btn
<q-btn size="md" icon="vn:invoice-out" color="primary"> :to="{
<q-tooltip>Invoice Out list</q-tooltip> name: 'InvoiceOutList',
query: { params: JSON.stringify({ clientFk: entity.id }) },
}"
size="md"
icon="vn:invoice-out"
color="primary"
>
<q-tooltip>{{ t('invoiceOutList') }}</q-tooltip>
</q-btn> </q-btn>
<!--
<q-btn size="md" icon="vn:basketadd" color="primary"> <q-btn size="md" icon="vn:basketadd" color="primary">
<q-tooltip>Order list</q-tooltip> <q-tooltip>Order list</q-tooltip>
</q-btn> </q-btn>
@ -127,8 +142,21 @@ const entityId = computed(() => {
<q-btn size="md" icon="expand_more" color="primary"> <q-btn size="md" icon="expand_more" color="primary">
<q-tooltip>More options</q-tooltip> <q-tooltip>More options</q-tooltip>
</q-btn> </q-btn> -->
</q-card-actions> --> </q-card-actions>
</template> </template>
</card-descriptor> </card-descriptor>
</template> </template>
<i18n>
{
"en": {
"ticketList": "Customer ticket list",
"invoiceOutList": "Customer invoice out list"
},
"es": {
"ticketList": "Listado de tickets del cliente",
"invoiceOutList": "Listado de facturas del cliente"
}
}
</i18n>

43
src/pages/Customer/CustomerFilter.vue
View File

@ -1,13 +1,14 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
const props = defineProps({ const props = defineProps({
params: { dataKey: {
type: Object, type: String,
required: true required: true,
} },
}) });
const provinces = ref([]); const provinces = ref([]);
const workers = ref([]); const workers = ref([]);
@ -29,6 +30,8 @@ function setWorkers(data) {
@on-fetch="setWorkers" @on-fetch="setWorkers"
auto-load auto-load
/> />
<VnFilterPanel :data-key="props.dataKey">
<template #body="{ params }">
<q-list> <q-list>
<!-- <q-item> <!-- <q-item>
<q-item-section> <q-item-section>
@ -55,7 +58,7 @@ function setWorkers(data) {
<q-separator /> --> <q-separator /> -->
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Fiscal ID" v-model="props.fi" lazy-rules> <q-input label="Fiscal ID" v-model="params.fi" lazy-rules>
<template #prepend> <template #prepend>
<q-icon name="badge" size="sm"></q-icon> <q-icon name="badge" size="sm"></q-icon>
</template> </template>
@ -64,18 +67,22 @@ function setWorkers(data) {
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Name" v-model="props.name" lazy-rules /> <q-input label="Name" v-model="params.name" lazy-rules />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Social name" v-model="props.socialName" lazy-rules /> <q-input
label="Social name"
v-model="params.socialName"
lazy-rules
/>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-select <q-select
v-model="props.salesPersonFk" v-model="params.salesPersonFk"
:options="workers" :options="workers"
option-value="id" option-value="id"
option-label="name" option-label="name"
@ -88,8 +95,8 @@ function setWorkers(data) {
<template #prepend> <template #prepend>
<q-avatar color="orange" size="xs"> <q-avatar color="orange" size="xs">
<q-img <q-img
v-if="props.salesPersonFk" v-if="params.salesPersonFk"
:src="`/api/Images/user/160x160/${props.salesPersonFk}/download?access_token=${token}`" :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
spinner-color="white" spinner-color="white"
/> />
</q-avatar> </q-avatar>
@ -99,7 +106,7 @@ function setWorkers(data) {
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Phone" v-model="props.phone" lazy-rules> <q-input label="Phone" v-model="params.phone" lazy-rules>
<template #prepend> <template #prepend>
<q-icon name="phone" size="sm"></q-icon> <q-icon name="phone" size="sm"></q-icon>
</template> </template>
@ -108,7 +115,7 @@ function setWorkers(data) {
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-input label="Email" v-model="props.email" lazy-rules> <q-input label="Email" v-model="params.email" lazy-rules>
<template #prepend> <template #prepend>
<q-icon name="email" size="sm"></q-icon> <q-icon name="email" size="sm"></q-icon>
</template> </template>
@ -119,7 +126,7 @@ function setWorkers(data) {
<q-item-section> <q-item-section>
<q-select <q-select
label="Province" label="Province"
v-model="props.provinceFk" v-model="params.provinceFk"
:options="provinces" :options="provinces"
option-value="id" option-value="id"
option-label="name" option-label="name"
@ -128,14 +135,14 @@ function setWorkers(data) {
/> />
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-input label="City" v-model="props.city" lazy-rules /> <q-input label="City" v-model="params.city" lazy-rules />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-select <q-select
label="Zone" label="Zone"
v-model="props.zoneFk" v-model="params.zoneFk"
:options="zones" :options="zones"
option-value="id" option-value="id"
option-label="name" option-label="name"
@ -144,8 +151,10 @@ function setWorkers(data) {
/> />
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-input label="Postcode" v-model="props.postcode" lazy-rules /> <q-input label="Postcode" v-model="params.postcode" lazy-rules />
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
</template>
</VnFilterPanel>
</template> </template>

17
src/pages/Customer/CustomerList.vue
View File

@ -3,23 +3,19 @@ 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 { useSession } from 'src/composables/useSession';
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 VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import CustomerFilter from './CustomerFilter.vue';
import CustomeFilter from './CustomeFilter.vue';
const state = useStateStore(); const state = useStateStore();
const router = useRouter(); const router = useRouter();
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const session = useSession();
const token = session.getToken();
onMounted(() => state.toggleRightDrawer()); onMounted(() => state.toggleRightDrawer());
onUnmounted(() => state.toggleRightDrawer()); onUnmounted(() => state.toggleRightDrawer());
@ -38,12 +34,11 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<teleport-slot to="#searchbar">
<VnSearchbar data-key="CustomerList" label="Search by customer id or name" />
</teleport-slot>
<teleport-slot to="#rightPanel"> <teleport-slot to="#rightPanel">
<VnFilterPanel data-key="CustomerList"> <CustomerFilter data-key="CustomerList" />
<template #body="{ params }">
<CustomeFilter :params="params" />
</template>
</VnFilterPanel>
</teleport-slot> </teleport-slot>
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<paginate data-key="CustomerList" url="/Clients/filter" order="id DESC" auto-load> <paginate data-key="CustomerList" url="/Clients/filter" order="id DESC" auto-load>

5
src/pages/Customer/CustomerMain.vue
View File

@ -1,16 +1,11 @@
<script setup> <script setup>
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue'; import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
</script> </script>
<template> <template>
<teleport-slot to="#searchbar">
<VnSearchbar data-key="CustomerList" />
</teleport-slot>
<q-drawer <q-drawer
v-model="stateStore.leftDrawer" v-model="stateStore.leftDrawer"
show-if-above show-if-above

0
src/pages/Ticket/TicketFilter.vue Normal file
View File

90
src/pages/Ticket/TicketList.vue
View File

@ -8,8 +8,9 @@ import Paginate from 'src/components/PaginateData.vue';
import { toDate, toCurrency } from 'src/filters/index'; import { toDate, toCurrency } from 'src/filters/index';
import TicketSummaryDialog from './Card/TicketSummaryDialog.vue'; import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue'; import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
// import FetchData from 'components/FetchData.vue'; // import FetchData from 'components/FetchData.vue';
const router = useRouter(); const router = useRouter();
@ -48,11 +49,12 @@ const filter = {
], ],
}; };
function stateColor(state) { function stateColor(row) {
if (state.code === 'OK') return 'green'; if (row.alertLevelCode === 'OK') return 'green';
if (state.code === 'FREE') return 'blue-3'; if (row.alertLevelCode === 'FREE') return 'blue-3';
if (state.alertLevel === 1) return 'orange'; if (row.alertLevel === 1) return 'orange';
if (state.alertLevel === 0) return 'red'; if (row.alertLevel === 0) return 'red';
return 'red';
} }
function navigate(id) { function navigate(id) {
@ -70,6 +72,9 @@ function viewSummary(id) {
</script> </script>
<template> <template>
<teleport-slot to="#searchbar">
<VnSearchbar data-key="TicketList" />
</teleport-slot>
<teleport-slot to="#rightPanel"> <teleport-slot to="#rightPanel">
<VnFilterPanel data-key="TicketList"> <VnFilterPanel data-key="TicketList">
<template #body="{ params }"> <template #body="{ params }">
@ -85,6 +90,16 @@ function viewSummary(id) {
/> />
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item>
<q-item-section>
<q-input
v-model="params.clientFk"
label="Customer ID"
lazy-rules
autofocus
/>
</q-item-section>
</q-item>
</q-list> </q-list>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
@ -92,7 +107,7 @@ function viewSummary(id) {
<q-page class="q-pa-md"> <q-page class="q-pa-md">
<paginate <paginate
data-key="TicketList" data-key="TicketList"
url="Tickets" url="Tickets/filter"
:filter="filter" :filter="filter"
sort-by="id DESC" sort-by="id DESC"
auto-load auto-load
@ -110,56 +125,57 @@ function viewSummary(id) {
<q-list> <q-list>
<q-item class="q-pa-none"> <q-item class="q-pa-none">
<q-item-section> <q-item-section>
<q-item-label caption>{{ <q-item-label caption>
t('ticket.list.nickname') {{ t('ticket.list.nickname') }}
}}</q-item-label> </q-item-label>
<q-item-label>{{ row.nickname }}</q-item-label> <q-item-label>{{ row.nickname }}</q-item-label>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ <q-item-label caption>
t('ticket.list.state') {{ t('ticket.list.state') }}
}}</q-item-label> </q-item-label>
<q-item-label> <q-item-label>
<q-chip <q-chip
:color="stateColor(row.ticketState)" :color="stateColor(row)"
class="q-ma-none"
dense dense
> >
{{ row.ticketState.state.name }} {{ row.state }}
</q-chip> </q-chip>
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item class="q-pa-none"> <q-item class="q-pa-none">
<q-item-section> <q-item-section>
<q-item-label caption>{{ <q-item-label caption>
t('ticket.list.shipped') {{ t('ticket.list.shipped') }}
}}</q-item-label> </q-item-label>
<q-item-label>{{ <q-item-label>
toDate(row.shipped) {{ toDate(row.shipped) }}
}}</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ <q-item-label caption>
t('ticket.list.landed') {{ t('ticket.list.landed') }}
}}</q-item-label> </q-item-label>
<q-item-label>{{ <q-item-label>
toDate(row.landed) {{ toDate(row.landed) }}
}}</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item class="q-pa-none"> <q-item class="q-pa-none">
<q-item-section v-if="row.client.salesPersonUser"> <q-item-section>
<q-item-label caption>{{ <q-item-label caption>
t('ticket.list.salesPerson') {{ t('ticket.list.salesPerson') }}
}}</q-item-label> </q-item-label>
<q-item-label>{{ <q-item-label>
row.client.salesPersonUser.name {{ row.salesPerson }}
}}</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label caption>{{ <q-item-label caption>
t('ticket.list.total') {{ t('ticket.list.total') }}
}}</q-item-label> </q-item-label>
<q-item-label>{{ <q-item-label>{{
toCurrency(row.totalWithVat) toCurrency(row.totalWithVat)
}}</q-item-label> }}</q-item-label>