refactor: refs #8945 reorganize imports and enhance confirmation dialog for unassigning invoices

src/pages/FixedAsset/Card/FixedAssetInvoice.vue

@@ -1,23 +1,25 @@
 <script setup>
-import VnTable from 'src/components/VnTable/VnTable.vue';
-import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
-import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import { useRoute } from 'vue-router';
 import { ref, computed } from 'vue';
-import { useVnConfirm } from 'composables/useVnConfirm';
 import { useI18n } from 'vue-i18n';
-import useNotify from 'src/composables/useNotify.js';
+import { useQuasar } from 'quasar';
+
 import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import InvoiceInDescriptorProxy from 'pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 
-const tableRef = ref();
-const { t } = useI18n();
 const route = useRoute();
+const { t } = useI18n();
 const { notify } = useNotify();
+const quasar = useQuasar();
+const tableRef = ref();
 const dataKey = 'fixedAssetInvoiceIn';
-const { openConfirmationModal } = useVnConfirm();
 
 const columns = computed(() => [
     {
@@ -65,19 +67,25 @@ const columns = computed(() => [
         actions: [
             {
                 title: t('fixedAsset.invoice.unassignInvoice'),
-                icon: 'delete',
-                action: (row) =>
-                    openConfirmationModal(
-                        t('fixedAsset.invoice.unassignInvoice'),
-                        t('fixedAsset.invoice.unassignInvoiceConfirmation'),
-                        () => unassignInvoice(row.id),
-                    ),
                 isPrimary: true,
+                icon: 'delete',
+                action: ({ id }) => confirmRemove(id),
             },
         ],
     },
 ]);
 
+function confirmRemove(id) {
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('fixedAsset.invoice.unassignInvoice'),
+            message: t('fixedAsset.invoice.unassignInvoiceConfirmation'),
+            promise: () => unassignInvoice(id),
+        },
+    });
+}
+
 async function unassignInvoice(id) {
     try {
         await axios.delete(`PpeComponents/${id}`);
@@ -103,7 +111,7 @@ async function unassignInvoice(id) {
             formInitialData: {
                 ppeFk: parseInt(route.params.id, 10),
             },
-            onDataSaved: ( {id} ) => tableRef.reload(),
+            onDataSaved: ({ id }) => tableRef.reload(),
         }"
         :disable-option="{ card: true }"
         auto-load
@@ -138,4 +146,4 @@ async function unassignInvoice(id) {
             />
         </template>
     </VnTable>
-</template>
+</template>

src/pages/FixedAsset/Card/FixedAssetSummary.vue

@@ -278,7 +278,7 @@ function toFixedAssetUrl(section) {
             </QCard>
             <QCard v-if="entity.ppeComponents?.length > 0" class="vn-two">
                 <VnTitle
-                    :url="toFixedAssetUrl('invoice-in')"
+                    :url="toFixedAssetUrl('invoice')"
                     :text="$t('globals.pageTitles.assignedInvoices')"
                     data-cy="titleInvoiceBlock"
                 />
@@ -300,7 +300,9 @@ function toFixedAssetUrl(section) {
                             <QTd>
                                 <span class="link" data-cy="supplierLink">
                                     {{ props.row.invoiceIn.supplier.name }}
-                                    <SupplierDescriptorProxy :id="props.row.invoiceIn.supplierFk" />
+                                    <SupplierDescriptorProxy
+                                        :id="props.row.invoiceIn.supplierFk"
+                                    />
                                 </span>
                             </QTd>
                             <QTd>