From a864e2786b06b01ffa9c82fe64f9816a107ed875 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 14 Feb 2023 14:59:39 +0100
Subject: [PATCH] Navigate through card/index

---
 src/components/ui/VnSearchbar.vue             |  23 +-
 src/composables/useArrayData.js               |   4 +-
 .../Customer/Card/CustomerDescriptor.vue      |  66 ++++--
 src/pages/Customer/CustomerFilter.vue         | 213 +++++++++---------
 src/pages/Customer/CustomerList.vue           |  17 +-
 src/pages/Customer/CustomerMain.vue           |   5 -
 src/pages/Ticket/TicketFilter.vue             |   0
 src/pages/Ticket/TicketList.vue               |  90 +++++---
 8 files changed, 237 insertions(+), 181 deletions(-)
 create mode 100644 src/pages/Ticket/TicketFilter.vue

diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 2f184fbe7..6c0809c8b 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -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>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index e9e65ae23..5dde2f516 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -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);
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 6cbba9d2f..ca5f4adaa 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -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>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 237cc192c..dcc363487 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -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>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 45257eeed..ce06b0c9d 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -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>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index e15c73bfd..d39141de3 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -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
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index f50a6608f..921b0205e 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -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>