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,44 +133,51 @@ const columns = computed(() => [
                         },
                     }"
                     auto-load
-                    @on-fetch="(data) => (itemsProposal = data)" />
-                <QTable
-                    :rows="itemsProposal"
-                    :columns="columns"
-                    row-key="id"
-                    selection="multiple"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :no-data-label="t('globals.noResults')"
                 >
-                    <template #top-row="{ cols }">
+                    <template #body="{ rows }">
-                        <QTr>
+                        <QTable
-                            <QTd />
+                            :rows="rows"
-                            <QTd
+                            :columns="columns"
-                                v-for="(col, index) in cols"
+                            row-key="id"
-                                :key="index"
+                            selection="multiple"
-                                style="max-width: 100px"
+                            :pagination="{ rowsPerPage: 0 }"
-                            >
+                            class="full-width q-mt-md"
-                                <component
+                            :no-data-label="t('globals.noResults')"
-                                    :is="col.columnFilter.component"
+                            :dense="$q.screen.lt.md"
-                                    v-if="col.columnFilter"
+                            flat
-                                    v-model="col.columnFilter.filterValue"
+                            :grid="$q.screen.lt.md"
-                                    v-bind="col.columnFilter.attrs"
+                            auto-load
-                                    v-on="col.columnFilter.event(col)"
+                            :rows-per-page-options="[0]"
-                                    dense
+                            hide-pagination
-                                />
+                        >
-                            </QTd>
+                            <template #top-row="{ cols }">
-                        </QTr>
+                                <QTr>
-                    </template>
+                                    <QTd />
+                                    <QTd
+                                        v-for="(col, index) in cols"
+                                        :key="index"
+                                        style="max-width: 100px"
+                                    >
+                                        <component
+                                            :is="col.columnFilter.component"
+                                            v-if="col.columnFilter"
+                                            v-model="col.columnFilter.filterValue"
+                                            v-bind="col.columnFilter.attrs"
+                                            v-on="col.columnFilter.event(col)"
+                                            dense
+                                        />
+                                    </QTd>
+                                </QTr>
+                            </template>
 
-                    <template #body-cell-status="{ value }">
+                            <template #body-cell-status="{ value }">
-                        <QTd class="col" align="center">
+                                <QTd class="col" align="center">
-                            <div
+                                    <div
-                                :style="{ 'background-color': value }"
+                                        :style="{ 'background-color': value }"
-                                style="height: 10px"
+                                        style="height: 10px"
-                            ></div>
+                                    ></div>
-                        </QTd>
+                                </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 />