refactor: refs #7553 modified ticket sale to create a row in the table

src/components/VnTable/VnTable.vue

@@ -53,6 +53,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    bottom: {
+        type: Object,
+        default: null,
+    },
     cardClass: {
         type: String,
         default: 'flex-one',
@@ -522,7 +526,24 @@ function handleOnDataSaved(_, res) {
                     </QTd>
                 </template>
                 <template #bottom v-if="bottom">
-                    <slot name="bottom-table" />
+                    <slot name="bottom-table">
+                        <QIcon
+                            @click="
+                                () =>
+                                    createAsDialog
+                                        ? (showForm = !showForm)
+                                        : handleOnDataSaved(create)
+                            "
+                            class="fill-icon-on-hover"
+                            color="primary"
+                            name="add_circle"
+                            size="sm"
+                            shortcut="+"
+                        />
+                        <QTooltip>
+                            {{ createForm.title }}
+                        </QTooltip>
+                    </slot>
                 </template>
                 <template #item="{ row, colsMap }">
                     <component

src/pages/Ticket/Card/TicketSale.vue

@@ -22,7 +22,6 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
-import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -51,8 +50,6 @@ const transfer = ref({
     sales: [],
 });
 const tableRef = ref([]);
-const formModelPopupRef = ref();
-const showForm = ref(false);
 
 watch(
     () => route.params.id,
@@ -219,6 +216,7 @@ const addSale = async (sale) => {
         sale.item = newSale.item;
 
         notify('globals.dataSaved', 'positive');
+        window.location.reload();
     } catch (err) {
         console.error('Error adding sale', err);
     }
@@ -427,18 +425,70 @@ onMounted(async () => {
     stateStore.rightDrawer = true;
     getConfig();
     getSales();
+    getItems();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
 
-async function save(item) {
+const items = ref([]);
-    const { data } = await axios.post(`Tickets/${route.params.id}/addSale`, {
+const newRow = ref({});
-        id: route.params.id,
+
-        barcode: item.itemFk,
+async function getItems() {
-        quantity: parseInt(item.quantity),
+    const { data } = await axios.get(`Items/withName`);
-    });
+    items.value = data;
-    if (data) window.location.reload();
 }
+
+const updateItem = (row) => {
+    const selectedItem = items.value.find((item) => item.id === row.itemFk);
+    if (selectedItem) {
+        row.item = selectedItem;
+        row.itemFk = selectedItem.id;
+        row.price = selectedItem.price;
+        row.discount = 0;
+        row.quantity = 0;
+        row.amount = row.price * row.quantity;
+    }
+    endNewRow(selectedItem);
+};
+
+function handleOnDataSave({ CrudModelRef }) {
+    const { copy } = addRow(CrudModelRef.formData);
+    CrudModelRef.insert(copy);
+}
+
+const addRow = (original = null) => {
+    let copy = null;
+    if (!original) {
+        copy = { isNew: true };
+    } else {
+        copy = {
+            itemFk: original.itemFk,
+            item: original.item,
+            quantity: original.quantity,
+            price: original.price,
+            discount: original.discount,
+            amount: original.amount,
+            isNew: true,
+        };
+    }
+    newRow.value = copy;
+    return { original, copy };
+};
+
+const endNewRow = (row) => {
+    if (row.itemFk && row.quantity) {
+        row.isNew = false;
+    }
+};
+
+watch(
+    () => newRow.value.itemFk,
+    (newItemFk) => {
+        if (newItemFk) {
+            updateItem(newRow.value);
+        }
+    }
+);
 </script>
 
 <template>
@@ -566,6 +616,16 @@ async function save(item) {
         :column-search="false"
         :disable-option="{ card: true }"
         auto-load
+        :create="{
+            onDataSaved: handleOnDataSave,
+        }"
+        :create-as-dialog="false"
+        :crud-model="{
+            paginate: false,
+        }"
+        :default-remove="false"
+        :default-reset="false"
+        :default-save="false"
     >
         <template #column-statusIcons="{ row }">
             <router-link
@@ -626,7 +686,26 @@ async function save(item) {
             </QBadge>
         </template>
         <template #column-itemFk="{ row }">
-            <span class="link" @click.stop>
+            <VnSelect
+                v-if="row.isNew"
+                url="Items"
+                :options="items"
+                option-label="name"
+                option-value="id"
+                v-model="row.itemFk"
+                @update:model-value="updateItem(row)"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>
+                                {{ scope.opt?.id }} - {{ scope.opt?.name }}</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+            <span v-else class="link" @click.stop>
                 {{ row?.itemFk }}
                 <ItemDescriptorProxy :id="row?.itemFk" />
             </span>
@@ -638,34 +717,22 @@ async function save(item) {
                     {{ row?.item?.subName.toUpperCase() }}
                 </div>
             </div>
-            <FetchedTags :item="row?.item" :max-length="6" />
+            <FetchedTags :item="row" :max-length="6" />
             <QPopupProxy v-if="row.id && isTicketEditable">
                 <VnInput v-model="row.concept" @change="updateConcept(row)" />
             </QPopupProxy>
-            <VnSelect
-                v-else
-                :options="itemsWithNameOptions"
-                hide-selected
-                option-label="name"
-                option-value="id"
-                @update:model-value="changeQuantity(row)"
-                v-model="row.itemFk"
-            >
-                <template #option="scope">
-                    <QItem v-bind="scope.itemProps">
-                        <QItemSection>
-                            <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
-                            <QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                </template>
-            </VnSelect>
         </template>
         <template #column-quantity="{ row }">
             <VnInput
-                v-if="isTicketEditable"
+                v-if="row.isNew"
+                v-model.number="row.quantity"
+                type="number"
+                @blur="changeQuantity(row)"
+                @focus="edit.oldQuantity = row.quantity"
+            />
+            <VnInput
+                v-else-if="isTicketEditable"
                 v-model.number="row.quantity"
-                @keyup.enter="changeQuantity(row)"
                 @blur="changeQuantity(row)"
                 @focus="edit.oldQuantity = row.quantity"
             />
@@ -713,58 +780,9 @@ async function save(item) {
         <template #column-amount="{ row }">
             {{ toCurrency(row.quantity * row.price) }}
         </template>
-        <template #bottom-table v-if="isTicketEditable">
-            <QIcon
-                @click="showForm = !showForm"
-                class="fill-icon-on-hover"
-                color="primary"
-                name="add_circle"
-                size="sm"
-            >
-                <QTooltip>
-                    {{ t('Add item') }}
-                </QTooltip>
-            </QIcon>
-            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
-                <FormModelPopup
-                    ref="formModelPopupRef"
-                    :url-create="`Tickets/${route.params.id}/addSale`"
-                    :title="t('New item')"
-                    :form-initial-data="{
-                        price: 0,
-                        discount: 0,
-                        visible: 0,
-                        available: 0,
-                        packaging: null,
-                    }"
-                    :save-fn="save"
-                >
-                    <template #form-inputs="{ data }">
-                        <VnSelect
-                            url="Items/withName"
-                            :option-filter="{
-                                order: 'id DESC',
-                            }"
-                            :fields="['id', 'name']"
-                            :label="t('Items')"
-                            option-label="name"
-                            option-value="id"
-                            :options="itemsWithNameOptions"
-                            hide-selected
-                            v-model="data.itemFk"
-                        />
-                        <VnInput
-                            v-model="data.quantity"
-                            :label="t('Quantity')"
-                            type="number"
-                        />
-                    </template>
-                </FormModelPopup>
-            </QDialog>
-        </template>
     </VnTable>
 
-    <QPageSticky :offset="[20, 20]">
+    <QPageSticky :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="newOrderFromTicket()" color="primary" fab icon="add" />
         <QTooltip class="text-no-wrap">
             {{ t('Add item to basket') }}