feat: updates ItemProposal

src/pages/Item/components/ItemProposal.vue

@@ -9,6 +9,9 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import { toCurrency } from 'filters/index';
 import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
 import { useDialogPluginComponent } from 'quasar';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
@@ -79,12 +82,23 @@ const columns = computed(() => [
         label: t('proposal.available'),
         name: 'available',
         field: 'available',
+        columnClass: 'shrink',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
         label: t('proposal.difference'),
         name: 'difference',
-        field: (item) => (item.id % 2 === 0 ? 10 : -10),
+        format: (item) => (item.id % 2 === 0 ? 10 : -10),
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            columnClass: 'shrink',
+        },
     },
     {
         ...defaultColumnAttrs,
@@ -106,6 +120,8 @@ const columns = computed(() => [
         label: t('proposal.longName'),
         name: 'longName',
         field: 'longName',
+        columnClass: 'expand',
+        columnFilter: { class: 'expand' },
     },
     // {
     //     ...defaultColumnAttrs,
@@ -152,12 +168,22 @@ const columns = computed(() => [
         label: t('proposal.price2'),
         name: 'price2',
         field: 'price2',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            class: 'expand',
+        },
     },
     {
         ...defaultColumnAttrs,
         label: t('proposal.minQuantity'),
         name: 'minQuantity',
         field: 'minQuantity',
+        columnFilter: {
+            component: 'input',
+            type: 'number',
+            class: 'expand',
+        },
     },
     {
         ...defaultColumnAttrs,
@@ -200,82 +226,15 @@ onUnmounted(() => {});
 </script>
 <template>
     <QPopupProxy ref="popupProxyRef">
-        <QCard>
+        <QCard style="min-width: 500px">
-            <!-- {{ itemLack }} -->
-            <QCardSection v-if="false" class="row items-center q-pb-none">
-                <VnLv class="image">
-                    <template #label>
-                        <QImg
-                            :src="`/api/Images/catalog/50x50/${item.id}/download?access_token=${token}`"
-                            spinner-color="primary"
-                            :ratio="1"
-                            height="50px"
-                            width="50px"
-                            class="image remove-bg"
-                            :alt="'asdads'"
-                        />
-                    </template>
-                    <template #value>
-                        <QBtn flat class="link text-blue">
-                            {{ item.longName }}
-                            <ItemDescriptorProxy :id="item.id" />
-                        </QBtn>
-                        <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
-                    </template>
-                </VnLv>
-                <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardSection
-                v-if="false"
-                class="row items-center justify-center column items-stretch"
-            >
-                <span class="text-h6 text-grey">
-                    <!-- {{ currentTicket }} -->
-                    <!-- {{
-                        t('proposal.title', {
-                            ticketFk: currentTicket.ticketFk,
-                            saleFk: currentTicket.saleFk,
-                        })
-                    }} -->
-                </span>
-            </QCardSection>
-            <QCardActions v-if="$props.replaceAction">
-                <!-- <QBtn
-                    :label="t('globals.removeSelection')"
-                    color="primary"
-                    flat
-                    :disable="proposalSelected.length < 1 || quantity === 0"
-                    @click="proposalSelected = []"
-                /> -->
-
-                <QBtn
-                    :label="t('globals.replace')"
-                    color="primary"
-                    :loading="isLoading"
-                    @click="confirm"
-                    :disable="proposalSelected.length < 1 || quantity === 0"
-                    unelevated
-                />
-                <QInput
-                    v-model.number="quantity"
-                    v-if="quantity > -1"
-                    @update:model-value="(val) => (quantity = val)"
-                    type="number"
-                    min="0"
-                    :label="t('proposal.quantityToReplace')"
-                    class="q-ml-lg"
-                />
-            </QCardActions>
-
             <QCardSection class="row items-center justify-center column items-stretch">
                 <!-- <VnRow style="display: flex"> -->
-                <div>
+                <div style="width: 62vw">
                     <!-- {{ proposalSelected }} -->
                     {{ $props.itemLack.itemFk }}
                     {{ $props.itemLack.warehouseFk }}
-                    <VnPaginate
+                    <!-- {{ rows[1].available }} -->
-                        :append="false"
+                    <VnTable
                         data-key="ItemsGetSimilar"
                         url="Items/getSimilar"
                         :filter="{
@@ -285,44 +244,53 @@ onUnmounted(() => {});
                             },
                         }"
                         auto-load
-                    >
-                        <template #body="{ rows }">
-                            <!-- {{ rows[1].available }} -->
-                            <QTable
-                                :rows="rows"
                         :columns="columns"
-                                row-key="id"
-                                selection="single"
-                                disa
-                                :pagination="{ rowsPerPage: 0 }"
                         class="full-width q-mt-md"
-                                :no-data-label="t('globals.noResults')"
                         v-model:selected="proposalSelected"
-                                :dense="$q.screen.lt.md"
+                        row-key="id"
-                                flat
+                        :is-editable="false"
-                                :grid="$q.screen.lt.md"
+                        :right-search="false"
-                                auto-load
+                        :without-header="false"
-                                :rows-per-page-options="[0]"
+                        :disable-option="{ card: true, table: true }"
-                                hide-pagination
+                        :table="{
-                                hide-bottom
+                            'row-key': 'id',
+                            selection: 'multiple',
+                        }"
                     >
+                        <template #top-left>
+                            <div v-if="$props.replaceAction" style="display: flex">
+                                <QBtn
+                                    :label="t('globals.replace')"
+                                    color="primary"
+                                    :loading="isLoading"
+                                    @click="confirm"
+                                    :disable="
+                                        proposalSelected.length < 1 || quantity === 0
+                                    "
+                                    unelevated
+                                />
+                                <VnInputNumber
+                                    v-model.number="quantity"
+                                    v-if="quantity > -1"
+                                    @update:model-value="(val) => (quantity = val)"
+                                    type="number"
+                                    min="0"
+                                    :label="t('proposal.quantityToReplace')"
+                                    class="q-ml-lg"
+                                /></div
+                        ></template>
+                        <!-- <template #body="scope">{{ scope }}</template> -->
                         <template #body-selection="scope">
                             <QTd align="center" v-if="$props.replaceAction"
                                 ><QCheckbox
                                     v-model="scope.selected"
                                     :disable="
-                                                !(
+                                        !(scope.row.available >= itemLack.lack * -1)
-                                                    scope.row.available >=
-                                                    itemLack.lack * -1
-                                                )
                                     "
                                 >
                                     <QTooltip
                                         v-if="
-                                                    !(
+                                            !(scope.row.available >= itemLack.lack * -1)
-                                                        scope.row.available >=
-                                                        itemLack.lack * -1
-                                                    )
                                         "
                                     >
                                         Nop</QTooltip
@@ -353,8 +321,8 @@ onUnmounted(() => {});
                                         </QTd>
                                     </QTr> -->
                         </template>
-                                <template #body-cell-longName="{ row, value }">
+                        <template #column-longName="{ row, value }">
-                                    <QTd align="left" class="text-primary">
+                            <!-- <QTd align="left" class="text-primary"> -->
                             <QTooltip>
                                 {{ row.id }}
                             </QTooltip>
@@ -365,15 +333,16 @@ onUnmounted(() => {});
                                 height="50px"
                                 width="50px"
                                 class="image remove-bg"
-                                            :alt="'asdads'" />
+                                :alt="'asdads'"
+                            />
                             <QBtn flat color="blue" dense>{{ value }}</QBtn>
 
                             <ItemDescriptorProxy :id="row.id" />
-                                        <FetchedTags :item="row" :max-length="5"
+                            <FetchedTags :item="row" :max-length="5" />
-                                    /></QTd>
+                            <!-- </QTd> -->
                         </template>
-                                <template #body-cell-status="{ value }">
+                        <template #column-status="{ value }">
-                                    <QTd class="col" align="center">
+                            <!-- <QTd class="col" align="center"> -->
                             <div
                                 :style="{ background: gradientStyle(value) }"
                                 class="compatibility"
@@ -382,32 +351,31 @@ onUnmounted(() => {});
                                     {{ compatibilityItem(value) }}
                                 </QTooltip>
                             </div>
-                                    </QTd>
+                            <!-- </QTd> -->
                         </template>
-                                <!-- <template #body-cell-tags="{ row }">
+                        <!-- <template #column-tags="{ row }">
                                     <QTd class="col" align="center"> </QTd>
                                 </template> -->
 
-                                <template #body-cell-price2="{ row, value }">
+                        <template #column-price2="{ row }">
-                                    <QTd
+                            <!-- <QTd
                                 class="col"
                                 align="center"
                                 :class="[conditionalValuePrice(value)]"
-                                    >
+                            > -->
                             <QTooltip>
                                 {{ toCurrency(row.price2) }}
                             </QTooltip>
                             {{ toCurrency(row.price2) }}
-                                    </QTd>
+                            <!-- </QTd> -->
                         </template>
-                                <template #body-cell-difference="{ value }">
+                        <template #column-difference="{ row }">
-                                    <QTd class="col" align="left">
+                            <pre>{{ row.difference }}</pre>
-                                        <VnStockValueDisplay :value="value" />
+                            <!-- <QTd class="col" align="left"> -->
-                                    </QTd>
+                            <!-- <VnStockValueDisplay :value="value" /> -->
+                            <!-- </QTd> -->
                         </template>
-                            </QTable>
+                    </VnTable>
-                        </template>
-                    </VnPaginate>
                 </div>
             </QCardSection>
         </QCard>

src/pages/Route/RouteList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'composables/useSession';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -17,7 +17,13 @@ import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-
+const $props = defineProps({
+    filter: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+watch($props.filter, (v) => (filterLack.value.where = v));
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const quasar = useQuasar();
@@ -27,7 +33,7 @@ const tableRef = ref([]);
 const confirmationDialog = ref(false);
 const startingDate = ref(null);
 const router = useRouter();
-const routeFilter = {
+const filterLack = ref({
     include: [
         {
             relation: 'workers',
@@ -36,7 +42,8 @@ const routeFilter = {
             },
         },
     ],
-};
+    where: { alertLevel: 'FREE' },
+});
 const columns = computed(() => [
     {
         align: 'left',
@@ -306,7 +313,7 @@ const openTicketsDialog = (id) => {
         :columns="columns"
         :right-search="false"
         :is-editable="true"
-        :filter="routeFilter"
+        :filter="filterLack"
         redirect="route"
         :row-click="false"
         :create="{

src/pages/Ticket/Card/TicketTransfer.vue

@@ -34,7 +34,7 @@ const emit = defineEmits(['refreshData']);
 
 const router = useRouter();
 const { t } = useI18n();
-const QPopupProxyRef = ref(null);
+const popupProxyRef = ref(null);
 
 const transferLinesColumns = computed(() => [
     {
@@ -102,7 +102,7 @@ const transferSales = async (ticketId) => {
 </script>
 
 <template>
-    <QPopupProxy :breakpoint="600" ref="QPopupProxyRef">
+    <QPopupProxy ref="popupProxyRef">
         <QCard class="full-width q-px-md" style="display: flex; width: 100vw">
             <QTable
                 v-if="transfer.sales"

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QBtn, QCheckbox } from 'quasar';
 import axios from 'axios';
 import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
 import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
@@ -196,8 +195,8 @@ const replaceItem = () => {
                             sales: selectedRows,
                             lastActiveTickets: selectedRows.map((row) => row.ticketFk),
                         }"
-                    ></TicketTransfer
+                    ></TicketTransfer>
-                ></QBtn>
+                </QBtn>
                 <QBtn color="primary" @click="showProposalDialog = true">
                     <QIcon name="import_export" class="rotate-90"></QIcon>
                     <ItemProposal
@@ -217,7 +216,7 @@ const replaceItem = () => {
         </template>
     </VnSubToolbar>
     <QPage>
-        <div class="full-width q-pa-md">
+        <div class="full-width q-pa-md" style="padding-bottom: 0px">
             <!-- <p>item:{{ item }}</p>
             <p>itemLack:{{ itemLack }}</p>
             <p>selectedRows:{{ selectedRows }}</p>
@@ -229,31 +228,32 @@ const replaceItem = () => {
                 @on-fetch="copyOriginalRowsData"
                 auto-load
             >
-                <template #body="{ rows }">
+                <template #body>
                     <!-- <VnLv >
                         <template #label> -->
-                    <div class="q-mb-lg image" style="display: flex; align-items: center">
+                    <div style="display: flex; align-items: center">
                         <VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
-                        <QBtn flat class="link text-blue">
-                            {{ item.longName }}
-                            <ItemDescriptorProxy :id="entityId" />
-                        </QBtn>
                         <QBadge
+                            class="q-ml-xs"
                             v-if="itemLack"
                             text-color="white"
                             :color="itemLack.lack === 0 ? 'green' : 'red'"
                             :label="itemLack.lack"
                         />
+                        <QBtn flat class="link text-blue">
+                            {{ item.longName }}
+                            <ItemDescriptorProxy :id="entityId" />
+                        </QBtn>
                         <FetchedTags class="q-ml-md" :item="item" :max-length="5" />
                     </div>
-                    {{ rows }}
+                    <!-- {{ rows }} -->
                     <!-- </template>
                         <template #value> </template>
                     </VnLv> -->
                 </template>
             </VnPaginate>
         </div>
-        <TicketLackTable></TicketLackTable>
+        <TicketLackTable :filter="{ alertLevel: showFree }"></TicketLackTable>
     </QPage>
 
     <!--<HandleSplited
@@ -273,4 +273,7 @@ const replaceItem = () => {
     opacity: 0;
     background-color: $primary;
 }
+.q-table.q-table__container > div:first-child {
+    border-radius: unset;
+}
 </style>

src/pages/Ticket/Negative/TicketLackList.vue

@@ -12,8 +12,10 @@ import { useState } from 'src/composables/useState';
 import { useRole } from 'src/composables/useRole';
 import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 const router = useRouter();
 import VnImg from 'src/components/ui/VnImg.vue';
+import TicketLackFilter from './TicketLackFilter.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -67,7 +69,8 @@ const columns = computed(() => [
         format: ({ itemFk }) => itemFk,
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
             columnClass: 'shrink',
         },
     },
@@ -115,7 +118,8 @@ const columns = computed(() => [
         sortable: true,
         cardVisible: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
             columnClass: 'shrink',
         },
     },
@@ -133,7 +137,8 @@ const columns = computed(() => [
         label: t('negative.lack'),
         field: ({ lack }) => lack,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
             columnClass: 'shrink',
         },
         sortable: true,
@@ -198,7 +203,11 @@ onBeforeMount(() => {
                 <!-- </QBtnGroup> -->
             </template>
         </VnSubToolbar>
-        <div class="list">
+        <RightMenu>
+            <template #right-panel>
+                <TicketLackFilter data-key="NegativeList" />
+            </template>
+        </RightMenu>
         <VnTable
             ref="tableRef"
             data-key="NegativeList"
@@ -208,7 +217,7 @@ onBeforeMount(() => {
             auto-load
             :columns="columns"
             default-mode="table"
-                :right-search="true"
+            :right-search="false"
             :is-editable="false"
             :use-model="true"
             :row-click="redirectToCreateView"
@@ -230,7 +239,6 @@ onBeforeMount(() => {
                 <!-- </QTd> -->
             </template>
         </VnTable>
-        </div>
     </QPage>
 </template>
 

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import FetchData from 'src/components/FetchData.vue';
@@ -14,7 +14,30 @@ import { useRoute } from 'vue-router';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import TicketDescriptorProxy from '../Card/TicketDescriptorProxy.vue';
 const rowsSelected = ref([]);
-
+const $props = defineProps({
+    filter: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+watch(
+    () => $props.filter,
+    (v) => {
+        filterLack.value.where = v;
+        tableRef.value.reload(filterLack);
+    }
+);
+const filterLack = ref({
+    include: [
+        {
+            relation: 'workers',
+            scope: {
+                fields: ['id', 'firstName'],
+            },
+        },
+    ],
+    where: { alertLevel: 'FRasdEE' },
+});
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
 const editableStates = ref([]);
@@ -75,7 +98,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
         },
         columnClass: 'shrink',
     },
@@ -85,7 +109,8 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
+            type: 'number',
         },
         columnClass: 'shrink',
     },
@@ -155,8 +180,9 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: 'number',
+            component: 'input',
-            columnClass: 'shrink',
+            type: 'number',
+            class: 'expand',
         },
     },
 ]);
@@ -217,7 +243,7 @@ const tableRef = ref(null);
         :create="false"
         :create-as-dialog="false"
         :use-model="true"
-        :filter="routeFilter"
+        :filter="filterLack"
         :table="{
             'row-key': 'id',
             selection: 'multiple',