Import dialog

src/pages/Claim/Card/ClaimLines.vue

@@ -6,12 +6,13 @@ import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 import { toDate, toCurrency, toPercentage } from 'src/filters';
 import VnDiscount from 'components/common/vnDiscount.vue';
+import ClaimLinesImport from './ClaimLinesImport.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -165,6 +166,14 @@ async function remove({ id }) {
         message: t('globals.rowRemoved'),
     });
 }
+
+function showImportDialog() {
+    quasar
+        .dialog({
+            component: ClaimLinesImport,
+        })
+        .onOk(() => {});
+}
 </script>
 <template>
     <q-page-sticky position="top" :offset="[0, 0]" expand>
@@ -191,7 +200,7 @@ async function remove({ id }) {
     />
     <div class="column items-center">
         <div class="list">
-            <paginate
+            <VnPaginate
                 data-key="ClaimLines"
                 :url="`Claims/${route.params.id}/lines`"
                 :filter="linesFilter"
@@ -217,7 +226,6 @@ async function remove({ id }) {
                                     v-model="row.quantity"
                                     v-slot="scope"
                                     :title="t('Claimed quantity')"
-                                    buttons
                                     @update:model-value="updateQuantity(row)"
                                 >
                                     <q-input
@@ -228,6 +236,25 @@ async function remove({ id }) {
                                         @keyup.enter="scope.set"
                                         @focus="($event) => $event.target.select()"
                                     />
+
+                                    <q-card-actions
+                                        class="q-px-none q-mt-sm"
+                                        align="right"
+                                    >
+                                        <q-btn
+                                            :label="t('Cancel')"
+                                            color="primary"
+                                            flat
+                                            @click="cancel(scope)"
+                                        />
+                                        <q-btn
+                                            :label="t('Update')"
+                                            color="primary"
+                                            :loading="isLoading"
+                                            unelevated
+                                            @click="save(scope)"
+                                        />
+                                    </q-card-actions>
                                 </q-popup-edit>
                             </q-td>
                         </template>
@@ -244,30 +271,6 @@ async function remove({ id }) {
                                     :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
                                     @on-update="onUpdateDiscount"
                                 />
-
-                                <!-- <q-popup-edit
-                                    v-model="row.sale.discount"
-                                    v-slot="scope"
-                                    title="Update discount"
-                                    buttons
-                                >
-                                    <q-banner
-                                        class="bg-primary text-center q-mb-md"
-                                        rounded
-                                        dense
-                                    >
-                                        {{ t('Mana') }} {{ toCurrency(mana) }}
-                                    </q-banner>
-                                    <q-input
-                                        v-model="scope.value"
-                                        type="number"
-                                        dense
-                                        autofocus
-                                        @keyup.enter="scope.set"
-                                        @focus="($event) => $event.target.select()"
-                                    />
-                                    <span>New amount:</span>
-                                </q-popup-edit> -->
                             </q-td>
                         </template>
                         <template #body-cell-actions="{ row, rowIndex }">
@@ -286,7 +289,7 @@ async function remove({ id }) {
                         </template>
                     </q-table>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
     </div>
 
@@ -295,7 +298,7 @@ async function remove({ id }) {
         to="#actions-prepend"
     >
         <div class="row q-gutter-x-sm">
-            <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
+            <q-btn @click="showImportDialog" icon="add" color="primary" dense rounded>
                 <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
             </q-btn>
             <q-separator vertical />

src/pages/Claim/Card/ClaimLinesImport.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import { toDate } from 'filters';
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogOK } = useDialogPluginComponent();
+const { t } = useI18n();
+
+const columns = computed(() => [
+    {
+        name: 'delivered',
+        label: 'Delivered',
+        field: (row) => row.landed,
+        format: (value) => toDate(value),
+    },
+    {
+        name: 'quantity',
+        label: 'Quantity',
+        field: (row) => row.quantity,
+    },
+    {
+        name: 'description',
+        label: 'Description',
+        field: (row) => row.concept,
+    },
+    {
+        name: 'price',
+        label: 'Price',
+        field: (row) => row.price,
+    },
+    {
+        name: 'discount',
+        label: 'Discount',
+        field: (row) => row.discount,
+    },
+]);
+const selected = ref([]);
+const scrollable = ref();
+</script>
+<template>
+    <q-dialog ref="dialogRef" persistent>
+        <q-card>
+            <q-card-section class="row items-center">
+                <span class="text-h6 text-grey">{{ t('Available Sales') }}</span>
+                <q-space />
+                <q-btn icon="close" flat round dense v-close-popup />
+            </q-card-section>
+            <q-separator />
+            <VnPaginate data-key="ClaimableSales" url="Sales" :offset="50" auto-load>
+                <template #body="{ rows }">
+                    <q-table
+                        ref="scrollable"
+                        class="my-sticky-header-table"
+                        :columns="columns"
+                        :rows="rows"
+                        :pagination="{ rowsPerPage: 0 }"
+                        row-key="saleFk"
+                        selection="multiple"
+                        v-model:selected="selected"
+                        hide-pagination
+                        square
+                        flat
+                    ></q-table>
+                </template>
+            </VnPaginate>
+
+            <q-card-actions align="right">
+                <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <q-btn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :loading="isLoading"
+                    @click="confirm"
+                    unelevated
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.q-card {
+    max-width: 800px;
+}
+</style>
+
+<style lang="scss">
+.my-sticky-header-table {
+    height: 400px;
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th {
+        /* bg color is important for th; just specify one */
+        background-color: $primary;
+    }
+
+    thead tr th {
+        position: sticky;
+        z-index: 1;
+    }
+    thead tr:first-child th {
+        /* this is when the loading indicator appears */
+        top: 0;
+    }
+
+    &.q-table--loading thead tr:last-child th {
+        /* height of all previous header rows */
+        top: 48px;
+    }
+
+    // /* prevent scrolling behind sticky top row on focus */
+    tbody {
+        /* height of all previous header rows */
+        scroll-margin-top: 48px;
+    }
+}
+</style>

src/pages/Claim/Card/ClaimLog.vue

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import ClaimLogFilter from './ClaimLogFilter.vue';
 
 import { toDate } from 'src/filters';

src/pages/Claim/Card/ClaimRma.vue

@@ -6,7 +6,7 @@ import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 

src/pages/Claim/ClaimList.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
-import Paginate from 'components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';

src/pages/Claim/ClaimRmaList.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 

src/pages/Customer/CustomerList.vue

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

src/pages/Ticket/TicketList.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import { toDate, toDateString, toCurrency } from 'src/filters/index';
 import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

src/pages/Worker/WorkerList.vue

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
-import Paginate from 'src/components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';

test/vitest/__tests__/components/Paginate.spec.js

@@ -1,6 +1,6 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
 import { createWrapper, axios } from 'app/test/vitest/helper';
-import Paginate from 'components/PaginateData.vue';
+import Paginate from 'src/components/ui/VnPaginate.vue';
 
 describe('Paginate', () => {
     const expectedUrl = '/api/customers';