From a3b7fa2f8865bffc578c8f4f0f7759b5ad4b58bc Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Thu, 13 Aug 2026 08:30:53 +0600
Subject: [PATCH] fix(vue): isolate Settings tab ConfirmDialogs with unique
 groups (#548)

Visited Settings tabs and Options+Groups keep multiple ungrouped
ConfirmDialogs on the shared PrimeVue bus, so delete shows two dialogs.
---
 vueManager/src/components/DeliveriesGrid.vue  |  7 ++-
 vueManager/src/components/LinksGrid.vue       |  7 ++-
 .../src/components/OptionGroupsGrid.vue       |  6 ++-
 vueManager/src/components/OptionsGrid.vue     |  6 ++-
 vueManager/src/components/PaymentsGrid.vue    |  7 ++-
 vueManager/src/components/StatusesGrid.vue    |  7 ++-
 vueManager/src/components/VendorsGrid.vue     |  7 ++-
 .../tests/settingsConfirmGroups.test.js       | 52 +++++++++++++++++++
 8 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 vueManager/tests/settingsConfirmGroups.test.js

diff --git a/vueManager/src/components/DeliveriesGrid.vue b/vueManager/src/components/DeliveriesGrid.vue
index 7fc22ecc0..7b9337987 100644
--- a/vueManager/src/components/DeliveriesGrid.vue
+++ b/vueManager/src/components/DeliveriesGrid.vue
@@ -39,6 +39,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-deliveries'
+
 // Bulk selection
 const {
   selectedItems,
@@ -49,6 +51,7 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'delivery',
+  confirmGroup: CONFIRM_GROUP,
   deleteBulk: async ids => {
     await request.delete('/api/mgr/deliveries/bulk', { ids })
   },
@@ -343,6 +346,7 @@ async function saveDelivery() {
  */
 function deleteDelivery(delivery) {
   confirm.require({
+    group: CONFIRM_GROUP,
     message: _('delivery_delete_confirm_message').replace('{name}', delivery.name),
     header: _('confirm_delete'),
     icon: 'pi pi-exclamation-triangle',
@@ -422,7 +426,7 @@ onMounted(async () => {
 <template>
   <div class="deliveries-grid">
     <Toast />
-    <ConfirmDialog append-to="self" />
+    <ConfirmDialog :group="CONFIRM_GROUP" append-to="self" />
 
     <Card>
       <template #title>
@@ -559,6 +563,7 @@ onMounted(async () => {
                     <ActionsColumn
                       :data="delivery"
                       :actions="getActionsConfig(column)"
+                      :confirm-group="CONFIRM_GROUP"
                       grid-id="deliveries"
                       @edit="editDelivery"
                       @delete="deleteDelivery"
diff --git a/vueManager/src/components/LinksGrid.vue b/vueManager/src/components/LinksGrid.vue
index c201dac00..01891f8c6 100644
--- a/vueManager/src/components/LinksGrid.vue
+++ b/vueManager/src/components/LinksGrid.vue
@@ -25,6 +25,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-links'
+
 // Bulk selection
 const {
   selectedItems,
@@ -35,6 +37,7 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'link',
+  confirmGroup: CONFIRM_GROUP,
   deleteBulk: async ids => {
     await request.delete('/api/mgr/links/bulk', { ids })
   },
@@ -147,6 +150,7 @@ async function saveLink() {
  */
 function deleteLink(link) {
   confirm.require({
+    group: CONFIRM_GROUP,
     message: _('link_delete_confirm_message').replace('{name}', link.name),
     header: _('confirm_delete'),
     icon: 'pi pi-exclamation-triangle',
@@ -211,7 +215,7 @@ onMounted(() => {
 <template>
   <div class="links-grid">
     <Toast />
-    <ConfirmDialog append-to="self" />
+    <ConfirmDialog :group="CONFIRM_GROUP" append-to="self" />
 
     <Card>
       <template #title>
@@ -300,6 +304,7 @@ onMounted(() => {
               <ActionsColumn
                 :data="data"
                 :actions="getActionsConfig()"
+                :confirm-group="CONFIRM_GROUP"
                 grid-id="links"
                 @edit="openEdit"
                 @delete="deleteLink"
diff --git a/vueManager/src/components/OptionGroupsGrid.vue b/vueManager/src/components/OptionGroupsGrid.vue
index 41f8609bc..9148aa772 100644
--- a/vueManager/src/components/OptionGroupsGrid.vue
+++ b/vueManager/src/components/OptionGroupsGrid.vue
@@ -35,6 +35,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-option-groups'
+
 const searchQuery = ref('')
 
 const {
@@ -134,6 +136,7 @@ function confirmDelete(group) {
       : _('ms3_option_group_delete_confirm')
 
   confirm.require({
+    group: CONFIRM_GROUP,
     message: detail,
     header: _('ms3_option_group_delete_header'),
     icon: 'pi pi-exclamation-triangle',
@@ -171,6 +174,7 @@ function confirmBulkDelete() {
   const ids = [...selectedIds.value]
   if (!ids.length) return
   confirm.require({
+    group: CONFIRM_GROUP,
     message: _('ms3_option_group_bulk_delete_confirm').replace('{count}', String(ids.length)),
     header: _('ms3_option_group_delete_header'),
     icon: 'pi pi-exclamation-triangle',
@@ -212,7 +216,7 @@ onMounted(() => {
 <template>
   <div class="ms3-option-groups">
     <Toast />
-    <ConfirmDialog />
+    <ConfirmDialog :group="CONFIRM_GROUP" />
 
     <Card>
       <template #content>
diff --git a/vueManager/src/components/OptionsGrid.vue b/vueManager/src/components/OptionsGrid.vue
index 5936b0fd5..80d4788ae 100644
--- a/vueManager/src/components/OptionsGrid.vue
+++ b/vueManager/src/components/OptionsGrid.vue
@@ -22,6 +22,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-options'
+
 // Grid state
 const options = ref([])
 const totalRecords = ref(0)
@@ -237,6 +239,7 @@ function buildProperties() {
 
 function confirmDelete(row) {
   confirm.require({
+    group: CONFIRM_GROUP,
     message:
       _('ms3_option_remove_confirm') ||
       `Удалить опцию «${row.caption || row.key}»? Значения у товаров будут удалены.`,
@@ -264,6 +267,7 @@ function confirmBulkDelete() {
   if (selectedRows.value.length === 0) return
   const ids = selectedRows.value.map(r => r.id)
   confirm.require({
+    group: CONFIRM_GROUP,
     message:
       _('ms3_options_remove_confirm') ||
       `Удалить выбранные опции (${ids.length})? Значения у товаров будут удалены.`,
@@ -342,7 +346,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="options-grid-app">
     <Toast />
-    <ConfirmDialog />
+    <ConfirmDialog :group="CONFIRM_GROUP" />
 
     <div class="options-grid-layout">
       <!-- Category filter tree (left pane) -->
diff --git a/vueManager/src/components/PaymentsGrid.vue b/vueManager/src/components/PaymentsGrid.vue
index 4bcf02759..980d6f636 100644
--- a/vueManager/src/components/PaymentsGrid.vue
+++ b/vueManager/src/components/PaymentsGrid.vue
@@ -37,6 +37,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-payments'
+
 // Bulk selection
 const {
   selectedItems,
@@ -47,6 +49,7 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'payment',
+  confirmGroup: CONFIRM_GROUP,
   deleteBulk: async ids => {
     await request.delete('/api/mgr/payments/bulk', { ids })
   },
@@ -311,6 +314,7 @@ async function savePayment() {
  */
 function deletePayment(payment) {
   confirm.require({
+    group: CONFIRM_GROUP,
     message: _('payment_delete_confirm_message').replace('{name}', payment.name),
     header: _('confirm_delete'),
     icon: 'pi pi-exclamation-triangle',
@@ -390,7 +394,7 @@ onMounted(async () => {
 <template>
   <div class="payments-grid">
     <Toast />
-    <ConfirmDialog append-to="self" />
+    <ConfirmDialog :group="CONFIRM_GROUP" append-to="self" />
 
     <Card>
       <template #title>
@@ -527,6 +531,7 @@ onMounted(async () => {
                     <ActionsColumn
                       :data="payment"
                       :actions="getActionsConfig(column)"
+                      :confirm-group="CONFIRM_GROUP"
                       grid-id="payments"
                       @edit="editPayment"
                       @delete="deletePayment"
diff --git a/vueManager/src/components/StatusesGrid.vue b/vueManager/src/components/StatusesGrid.vue
index bb6a41398..a902c990e 100644
--- a/vueManager/src/components/StatusesGrid.vue
+++ b/vueManager/src/components/StatusesGrid.vue
@@ -25,6 +25,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-statuses'
+
 // Bulk selection
 const {
   selectedItems,
@@ -35,6 +37,7 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'status',
+  confirmGroup: CONFIRM_GROUP,
   deleteBulk: async ids => {
     await request.delete('/api/mgr/statuses/bulk', { ids })
   },
@@ -153,6 +156,7 @@ async function saveStatus() {
  */
 function deleteStatus(status) {
   confirm.require({
+    group: CONFIRM_GROUP,
     message: _('status_delete_confirm_message').replace('{name}', status.name),
     header: _('confirm_delete'),
     icon: 'pi pi-exclamation-triangle',
@@ -249,7 +253,7 @@ onMounted(() => {
 <template>
   <div class="statuses-grid">
     <Toast />
-    <ConfirmDialog append-to="self" />
+    <ConfirmDialog :group="CONFIRM_GROUP" append-to="self" />
 
     <Card>
       <template #title>
@@ -371,6 +375,7 @@ onMounted(() => {
                       <ActionsColumn
                         :data="status"
                         :actions="getActionsConfig()"
+                        :confirm-group="CONFIRM_GROUP"
                         grid-id="statuses"
                         @edit="openEdit"
                         @delete="deleteStatus"
diff --git a/vueManager/src/components/VendorsGrid.vue b/vueManager/src/components/VendorsGrid.vue
index 95b1b8655..89bf4a97d 100644
--- a/vueManager/src/components/VendorsGrid.vue
+++ b/vueManager/src/components/VendorsGrid.vue
@@ -33,6 +33,8 @@ const toast = useToast()
 const confirm = useConfirm()
 const { _ } = useLexicon()
 
+const CONFIRM_GROUP = 'settings-vendors'
+
 // Bulk selection
 const {
   selectedItems,
@@ -43,6 +45,7 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'vendor',
+  confirmGroup: CONFIRM_GROUP,
   deleteBulk: async ids => {
     await request.delete('/api/mgr/vendors/bulk', { ids })
   },
@@ -310,6 +313,7 @@ async function saveVendor() {
  */
 function deleteVendor(vendor) {
   confirm.require({
+    group: CONFIRM_GROUP,
     message: _('vendor_delete_confirm_message').replace('{name}', vendor.name),
     header: _('confirm_delete'),
     icon: 'pi pi-exclamation-triangle',
@@ -481,7 +485,7 @@ onMounted(async () => {
 <template>
   <div class="vendors-grid">
     <Toast />
-    <ConfirmDialog append-to="self" />
+    <ConfirmDialog :group="CONFIRM_GROUP" append-to="self" />
 
     <Card>
       <template #title>
@@ -604,6 +608,7 @@ onMounted(async () => {
                         <ActionsColumn
                           :data="vendor"
                           :actions="getActionsConfig(column)"
+                          :confirm-group="CONFIRM_GROUP"
                           grid-id="vendors"
                           @edit="editVendor"
                           @delete="deleteVendor"
diff --git a/vueManager/tests/settingsConfirmGroups.test.js b/vueManager/tests/settingsConfirmGroups.test.js
new file mode 100644
index 000000000..d9051018f
--- /dev/null
+++ b/vueManager/tests/settingsConfirmGroups.test.js
@@ -0,0 +1,52 @@
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+import test from 'node:test'
+import { fileURLToPath } from 'node:url'
+
+const srcRoot = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'src', 'components')
+
+const GRIDS = [
+  ['OptionsGrid.vue', 'settings-options'],
+  ['OptionGroupsGrid.vue', 'settings-option-groups'],
+  ['DeliveriesGrid.vue', 'settings-deliveries'],
+  ['PaymentsGrid.vue', 'settings-payments'],
+  ['StatusesGrid.vue', 'settings-statuses'],
+  ['VendorsGrid.vue', 'settings-vendors'],
+  ['LinksGrid.vue', 'settings-links'],
+]
+
+function read(name) {
+  return fs.readFileSync(path.join(srcRoot, name), 'utf8')
+}
+
+test('settings tab grids isolate ConfirmDialog with unique groups (#548)', () => {
+  const groups = GRIDS.map(([, group]) => group)
+  assert.equal(new Set(groups).size, groups.length, 'CONFIRM_GROUP values must be unique')
+
+  for (const [file, expectedGroup] of GRIDS) {
+    const text = read(file)
+    assert.match(
+      text,
+      new RegExp(`const CONFIRM_GROUP = '${expectedGroup}'`),
+      `${file} must declare CONFIRM_GROUP = '${expectedGroup}'`
+    )
+
+    assert.match(text, /<ConfirmDialog[^>]*:group="CONFIRM_GROUP"/, `${file} ConfirmDialog must bind :group`)
+
+    const requireAt = [...text.matchAll(/confirm\.require\s*\(/g)]
+    assert.ok(requireAt.length > 0, `${file} must have confirm.require`)
+    for (const match of requireAt) {
+      const snippet = text.slice(match.index, match.index + 400)
+      assert.match(snippet, /\bgroup:\s*CONFIRM_GROUP/, `${file} confirm.require must pass group: CONFIRM_GROUP`)
+    }
+
+    if (text.includes('<ActionsColumn')) {
+      assert.match(text, /:confirm-group="CONFIRM_GROUP"/, `${file} ActionsColumn must pass confirm-group`)
+    }
+
+    if (/\bconfirmBulkDelete\b[\s\S]{0,200}=\s*useSelection\(/.test(text)) {
+      assert.match(text, /confirmGroup:\s*CONFIRM_GROUP/, `${file} useSelection must pass confirmGroup`)
+    }
+  }
+})