refactor: refs #8944 modified EditFixedPrice component to save data as VnTable

src/pages/Item/ItemFixedPrice.vue

@@ -2,9 +2,10 @@
 import { onMounted, ref, onUnmounted, computed, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
-
 import { beforeSave } from 'src/composables/updateMinPriceBeforeSave';
 
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -15,13 +16,13 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnColor from 'src/components/common/VnColor.vue';
 
-import { toDate } from 'src/filters';
+import { toDate, toCurrency } from 'src/filters';
 import { isLower, isBigger } from 'src/filters/date.js';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
 import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
-import { toCurrency } from 'src/filters';
 
 const stateStore = useStateStore();
+const quasar = useQuasar();
 const { t } = useI18n();
 const tableRef = ref();
 const editFixedPriceForm = ref(null);
@@ -219,9 +220,13 @@ const dateStyle = (date) =>
           }
         : { color: dateColor, 'background-color': 'transparent' };
 
-const onDataSaved = () => {
-    tableRef.value.CrudModelRef.saveChanges();
+const onDataSaved = async (data) => {
+    for (const row of data) {
+        await axios.patch('FixedPrices/upsertFixedPrice', row);
+    }
     selectedRows.value = [];
+    tableRef.value.reload();
+    tableRef.value.CrudModelRef.reset();
 };
 
 async function saveData(data, getChanges) {
@@ -236,6 +241,10 @@ async function saveData(data, getChanges) {
     if (data?.deletes?.length) {
         for (const deleteItem of data.deletes) {
             await axios.delete(`FixedPrices/${deleteItem}`);
+            quasar.notify({
+                message: t('globals.dataDeleted'),
+                color: 'positive',
+            });
         }
     }
     tableRef.value.reload();

src/pages/Item/components/EditFixedPriceForm.vue

@@ -26,7 +26,6 @@ const $props = defineProps({
         default: () => {},
     },
 });
-
 const { t } = useI18n();
 const emit = defineEmits(['onDataSaved']);
 
@@ -38,7 +37,7 @@ const inputs = {
     select: markRaw(VnSelect),
 };
 
-const newValue = ref(null);
+const newFieldValue = ref(null);
 const selectedField = ref(null);
 const closeButton = ref(null);
 const isLoading = ref(false);
@@ -46,7 +45,11 @@ const isLoading = ref(false);
 const onSubmit = async () => {
     isLoading.value = true;
     $props.rows.forEach((row) => {
-        row[selectedField.value.name] = newValue.value;
+        const newValue =
+            selectedField.value.component === 'number'
+                ? parseInt(newFieldValue.value)
+                : newFieldValue.value;
+        row[selectedField.value.name] = newValue;
     });
     emit('onDataSaved', $props.rows);
     closeForm();
@@ -77,11 +80,19 @@ const closeForm = () => {
                     data-cy="EditFixedPriceSelectOption"
                     @update:model-value="newValue = null"
                     :class="{ 'is-select': selectedField?.component === 'select' }"
-                />
+                >
+                    <template #option="{ opt, itemProps }">
+                        <QItem v-bind="itemProps" class="q-pa-xs row items-center">
+                            <QItemSection class="col-9 justify-center">
+                                <span>{{ opt?.label }}</span>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
                 <component
                     :is="inputs[selectedField?.component || 'input']"
                     v-bind="selectedField?.attrs || {}"
-                    v-model="newValue"
+                    v-model="newFieldValue"
                     :label="t('Value')"
                     data-cy="EditFixedPriceValueOption"
                     style="width: 200px"