make EditTableCellForm componente reusable

src/components/EditTableCellValueForm.vue

@@ -15,23 +15,19 @@ const $props = defineProps({
         type: Array,
         default: () => [],
     },
+    fieldsOptions: {
+        type: Array,
+        default: () => [],
+    },
+    editUrl: {
+        type: String,
+        default: '',
+    },
 });
 
 const { t } = useI18n();
 const { notify } = useNotify();
 
-const fieldsOptions = [
-    { field: 'packing', label: t('entry.latestBuys.packing') },
-    { field: 'grouping', label: t('entry.latestBuys.grouping') },
-    { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
-    { field: 'weight', label: t('entry.latestBuys.weight') },
-    { field: 'description', label: t('entry.latestBuys.description') },
-    { field: 'size', label: t('entry.latestBuys.size') },
-    { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
-    { field: 'packingOut', label: t('entry.latestBuys.packingOut') },
-    { field: 'landing', label: t('entry.latestBuys.landing') },
-];
-
 const formData = reactive({
     field: null,
     newValue: null,
@@ -56,7 +52,7 @@ const submitData = async () => {
             lines: rowsToEdit,
         };
 
-        await axios.post('Buys/editLatestBuys', payload);
+        await axios.post($props.editUrl, payload);
         onDataSaved();
         isLoading.value = false;
     } catch (err) {

src/pages/Entry/EntryLatestBuys.vue

@@ -209,6 +209,18 @@ const columns = computed(() => [
     },
 ]);
 
+const editTableCellFormFieldsOptions = [
+    { field: 'packing', label: t('entry.latestBuys.packing') },
+    { field: 'grouping', label: t('entry.latestBuys.grouping') },
+    { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
+    { field: 'weight', label: t('entry.latestBuys.weight') },
+    { field: 'description', label: t('entry.latestBuys.description') },
+    { field: 'size', label: t('entry.latestBuys.size') },
+    { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
+    { field: 'packingOut', label: t('entry.latestBuys.packingOut') },
+    { field: 'landing', label: t('entry.latestBuys.landing') },
+];
+
 const openEditTableCellDialog = () => {
     editTableCellDialogRef.value.show();
 };
@@ -321,7 +333,9 @@ onMounted(async () => {
         </QPageSticky>
         <QDialog ref="editTableCellDialogRef">
             <EditTableCellValueForm
+                edit-url="Buys/editLatestBuys"
                 :rows="rowsSelected"
+                :fields-options="editTableCellFormFieldsOptions"
                 @on-data-saved="onEditCellDataSaved()"
             />
         </QDialog>