feat: change Qdialog sizing

src/pages/Item/components/ItemProposal.vue

@@ -1,69 +1,21 @@
 <script setup>
-import FetchData from 'components/FetchData.vue';
+import { ref, computed } from 'vue';
-
-import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-// import { useDialogPluginComponent } from 'quasar';
+import VnPaginate from 'components/ui/VnPaginate.vue';
 
-// import VnInput from 'src/components/common/VnInput.vue';
-import { useArrayData } from 'composables/useArrayData';
 const { t } = useI18n();
 
-const params = reactive({});
 const $props = defineProps({
     item: {
         type: Object,
         default: () => {},
     },
 });
-const itemsProposal = ref([]);
 const showProposalDialog = ref(false);
-// const { dialogRef, onDialogHide } = useDialogPluginComponent();
-// watch($props.item, (newX, oldX) => {
-//     showProposalDialog.value = !newX;
-// });
-const exprBuilder = (param, value) => {
-    switch (param) {
-        default:
-            return {};
-    }
-};
-const arrayData = useArrayData('ItemProposal', {
-    url: 'Items/getSimilar',
-    userParams: params,
-    order: ['itemFk'],
-    exprBuilder: exprBuilder,
-});
-// const store = arrayData.store;
 const defaultColumnAttrs = {
     align: 'left',
     sortable: true,
 };
-// const getColumnInputEvents = (col) => {
-//     return col.columnFilter.type === 'select'
-//         ? { 'update:modelValue': () => applyColumnFilter(col) }
-//         : {
-//               'keyup.enter': () => applyColumnFilter(col),
-//           };
-// };
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await arrayData.addFilter({ params });
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-// const defaultColumnFilter = {
-//     component: VnInput,
-//     type: 'text',
-//     filterValue: null,
-//     event: getColumnInputEvents,
-//     attrs: {
-//         dense: true,
-//     },
-// };
 const statusConditionalValue = (row) => {
     const total = [5, 6, 7, 8].reduce((acc, i) => acc + row[`match${i}`], 0);
     const STATUS_VALUES = { 2: '$secondary', 3: 'positive', 4: 'warning' };
@@ -161,10 +113,9 @@ const columns = computed(() => [
 ]);
 </script>
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog">
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showProposalDialog" full-width>
-        <QCard class="q-pa-sm">
+        <QCard class="q-pa-lg">
             <QCardSection class="row items-center q-pb-none">
-                <!-- {{ $props.item }} -->
                 <span class="text-h6 text-grey">{{
                     t('negative.modalOrigin.title')
                 }}</span>
@@ -172,8 +123,8 @@ const columns = computed(() => [
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
-                <span>{{ t('negative.modalOrigin.question') }}</span>
+                <VnPaginate
-                <FetchData
+                    data-key="ItemsGetSimilar"
                     url="Items/getSimilar"
                     :filter="{
                         where: {
@@ -182,15 +133,22 @@ const columns = computed(() => [
                         },
                     }"
                     auto-load
-                    @on-fetch="(data) => (itemsProposal = data)" />
+                >
+                    <template #body="{ rows }">
                         <QTable
-                    :rows="itemsProposal"
+                            :rows="rows"
                             :columns="columns"
                             row-key="id"
                             selection="multiple"
                             :pagination="{ rowsPerPage: 0 }"
                             class="full-width q-mt-md"
                             :no-data-label="t('globals.noResults')"
+                            :dense="$q.screen.lt.md"
+                            flat
+                            :grid="$q.screen.lt.md"
+                            auto-load
+                            :rows-per-page-options="[0]"
+                            hide-pagination
                         >
                             <template #top-row="{ cols }">
                                 <QTr>
@@ -219,7 +177,7 @@ const columns = computed(() => [
                                         style="height: 10px"
                                     ></div>
                                 </QTd>
-                    </template> </QTable
+                            </template> </QTable></template></VnPaginate
             ></QCardSection>
         </QCard>
     </QDialog>

src/pages/Ticket/Negative/NegativeOriginDialog.vue

@@ -32,7 +32,12 @@ const update = async () => {
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showNegativeOriginDialog">
+    <QDialog
+        ref="dialogRef"
+        @hide="onDialogHide"
+        v-model="showNegativeOriginDialog"
+        full-width
+    >
         <QCard class="q-pa-sm">
             <QCardSection class="row items-center q-pb-none">
                 <QAvatar

src/pages/Ticket/Negative/TotalNegativeOriginDialog.vue

@@ -2,12 +2,10 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
-import { useDialogPluginComponent } from 'quasar';
 
 const { t } = useI18n();
 const selectedRows = ref([]);
 const showTotalNegativeOriginDialog = ref(false);
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
 
 const columns = computed(() => [
     {
@@ -44,8 +42,13 @@ const columns = computed(() => [
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showTotalNegativeOriginDialog">
+    <QDialog
-        <QCard class="q-pa-sm">
+        ref="dialogRef"
+        @hide="onDialogHide"
+        v-model="showTotalNegativeOriginDialog"
+        full-width
+    >
+        <QCard class="q-pa-lg">
             <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ t('negative.totalNegative') }}</span>
                 <QSpace />