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

4
src/composables/useArrayData.js
View File

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

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

@ -108,27 +108,55 @@ const entityId = computed(() => {
<q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
</q-icon>
</q-card-actions>
<!-- <q-card-actions>
<q-btn size="md" icon="vn:ticket" color="primary">
<q-tooltip>Ticket list</q-tooltip>
</q-btn>
<q-card-actions>
<q-btn
: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
:to="{
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 size="md" icon="vn:basketadd" color="primary">
<q-tooltip>Order list</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:invoice-out" color="primary">
<q-tooltip>Invoice Out list</q-tooltip>
</q-btn>
<q-btn size="md" icon="face" color="primary">
<q-tooltip>View user</q-tooltip>
</q-btn>
<q-btn size="md" icon="vn:basketadd" color="primary">
<q-tooltip>Order list</q-tooltip>
</q-btn>
<q-btn size="md" icon="face" color="primary">
<q-tooltip>View user</q-tooltip>
</q-btn>
<q-btn size="md" icon="expand_more" color="primary">
<q-tooltip>More options</q-tooltip>
</q-btn>
</q-card-actions> -->
<q-btn size="md" icon="expand_more" color="primary">
<q-tooltip>More options</q-tooltip>
</q-btn> -->
</q-card-actions>
</template>
</card-descriptor>
</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>

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

@ -1,13 +1,14 @@
<script setup>
import { ref } from 'vue';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
const props = defineProps({
params: {
type: Object,
required: true
}
})
dataKey: {
type: String,
required: true,
},
});
const provinces = ref([]);
const workers = ref([]);
@ -29,8 +30,10 @@ function setWorkers(data) {
@on-fetch="setWorkers"
auto-load
/>
<q-list>
<!-- <q-item>
<VnFilterPanel :data-key="props.dataKey">
<template #body="{ params }">
<q-list>
<!-- <q-item>
<q-item-section>
<q-input
v-model="params.search"
@ -53,99 +56,105 @@ function setWorkers(data) {
</q-item-section>
</q-item>
<q-separator /> -->
<q-item>
<q-item-section>
<q-input label="Fiscal ID" v-model="props.fi" 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="Name" v-model="props.name" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input label="Social name" v-model="props.socialName" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select
v-model="props.salesPersonFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
label="Salesperson"
map-options
use-input
:input-debounce="0"
>
<template #prepend>
<q-avatar color="orange" size="xs">
<q-img
v-if="props.salesPersonFk"
:src="`/api/Images/user/160x160/${props.salesPersonFk}/download?access_token=${token}`"
spinner-color="white"
/>
</q-avatar>
</template>
</q-select>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input label="Phone" v-model="props.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="Email" v-model="props.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>
<q-select
label="Province"
v-model="props.provinceFk"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
<q-item-section>
<q-input label="City" v-model="props.city" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select
label="Zone"
v-model="props.zoneFk"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
<q-item-section>
<q-input label="Postcode" v-model="props.postcode" lazy-rules />
</q-item-section>
</q-item>
</q-list>
<q-item>
<q-item-section>
<q-input label="Fiscal ID" v-model="params.fi" 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="Name" v-model="params.name" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-input
label="Social name"
v-model="params.socialName"
lazy-rules
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select
v-model="params.salesPersonFk"
:options="workers"
option-value="id"
option-label="name"
emit-value
label="Salesperson"
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>
<q-input label="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="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>
<q-select
label="Province"
v-model="params.provinceFk"
:options="provinces"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
<q-item-section>
<q-input label="City" v-model="params.city" lazy-rules />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-select
label="Zone"
v-model="params.zoneFk"
:options="zones"
option-value="id"
option-label="name"
emit-value
map-options
/>
</q-item-section>
<q-item-section>
<q-input label="Postcode" v-model="params.postcode" lazy-rules />
</q-item-section>
</q-item>
</q-list>
</template>
</VnFilterPanel>
</template>

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

@ -3,23 +3,19 @@ import { onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { useSession } from 'src/composables/useSession';
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 VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import CustomeFilter from './CustomeFilter.vue';
import CustomerFilter from './CustomerFilter.vue';
const state = useStateStore();
const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
const session = useSession();
const token = session.getToken();
onMounted(() => state.toggleRightDrawer());
onUnmounted(() => state.toggleRightDrawer());
@ -38,12 +34,11 @@ function viewSummary(id) {
</script>
<template>
<teleport-slot to="#searchbar">
<VnSearchbar data-key="CustomerList" label="Search by customer id or name" />
</teleport-slot>
<teleport-slot to="#rightPanel">
<VnFilterPanel data-key="CustomerList">
<template #body="{ params }">
<CustomeFilter :params="params" />
</template>
</VnFilterPanel>
<CustomerFilter data-key="CustomerList" />
</teleport-slot>
<q-page class="q-pa-md">
<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>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import TeleportSlot from 'components/ui/TeleportSlot.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const stateStore = useStateStore();
</script>
<template>
<teleport-slot to="#searchbar">
<VnSearchbar data-key="CustomerList" />
</teleport-slot>
<q-drawer
v-model="stateStore.leftDrawer"
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 TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.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';
const router = useRouter();
@ -48,11 +49,12 @@ const filter = {
],
};
function stateColor(state) {
if (state.code === 'OK') return 'green';
if (state.code === 'FREE') return 'blue-3';
if (state.alertLevel === 1) return 'orange';
if (state.alertLevel === 0) return 'red';
function stateColor(row) {
if (row.alertLevelCode === 'OK') return 'green';
if (row.alertLevelCode === 'FREE') return 'blue-3';
if (row.alertLevel === 1) return 'orange';
if (row.alertLevel === 0) return 'red';
return 'red';
}
function navigate(id) {
@ -70,6 +72,9 @@ function viewSummary(id) {
</script>
<template>
<teleport-slot to="#searchbar">
<VnSearchbar data-key="TicketList" />
</teleport-slot>
<teleport-slot to="#rightPanel">
<VnFilterPanel data-key="TicketList">
<template #body="{ params }">
@ -85,6 +90,16 @@ function viewSummary(id) {
/>
</q-item-section>
</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>
</template>
</VnFilterPanel>
@ -92,7 +107,7 @@ function viewSummary(id) {
<q-page class="q-pa-md">
<paginate
data-key="TicketList"
url="Tickets"
url="Tickets/filter"
:filter="filter"
sort-by="id DESC"
auto-load
@ -110,56 +125,57 @@ function viewSummary(id) {
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{
t('ticket.list.nickname')
}}</q-item-label>
<q-item-label caption>
{{ t('ticket.list.nickname') }}
</q-item-label>
<q-item-label>{{ row.nickname }}</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{
t('ticket.list.state')
}}</q-item-label>
<q-item-label caption>
{{ t('ticket.list.state') }}
</q-item-label>
<q-item-label>
<q-chip
:color="stateColor(row.ticketState)"
:color="stateColor(row)"
class="q-ma-none"
dense
>
{{ row.ticketState.state.name }}
{{ row.state }}
</q-chip>
</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{
t('ticket.list.shipped')
}}</q-item-label>
<q-item-label>{{
toDate(row.shipped)
}}</q-item-label>
<q-item-label caption>
{{ t('ticket.list.shipped') }}
</q-item-label>
<q-item-label>
{{ toDate(row.shipped) }}
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{
t('ticket.list.landed')
}}</q-item-label>
<q-item-label>{{
toDate(row.landed)
}}</q-item-label>
<q-item-label caption>
{{ t('ticket.list.landed') }}
</q-item-label>
<q-item-label>
{{ toDate(row.landed) }}
</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section v-if="row.client.salesPersonUser">
<q-item-label caption>{{
t('ticket.list.salesPerson')
}}</q-item-label>
<q-item-label>{{
row.client.salesPersonUser.name
}}</q-item-label>
<q-item-section>
<q-item-label caption>
{{ t('ticket.list.salesPerson') }}
</q-item-label>
<q-item-label>
{{ row.salesPerson }}
</q-item-label>
</q-item-section>
<q-item-section>
<q-item-label caption>{{
t('ticket.list.total')
}}</q-item-label>
<q-item-label caption>
{{ t('ticket.list.total') }}
</q-item-label>
<q-item-label>{{
toCurrency(row.totalWithVat)
}}</q-item-label>