refactor(frontend): replace DialogGroupEdit with app.confirm pattern

- Remove DialogGroupEdit.vue component
- Replace dialog with app.confirm inputs pattern following SmartStart.vue example
- Use list input type with multiple selection for nodes
- Combine create and edit operations in single editItem method
- Maintain same validation rules and user experience
- Addresses code review feedback for consistency

Addresses review comment 2359484174.

Co-authored-by: robertsLando <11502495+robertsLando@users.noreply.github.com>

Author: Copilot

src/components/dialogs/DialogGroupEdit.vue

@@ -19,23 +19,14 @@
 				<v-btn
 					color="primary"
 					variant="text"
-					@click="openCreateDialog"
+					@click="editItem()"
 					:disabled="!newGroupName"
 				>
 					Create Group
 				</v-btn>
 			</v-col>
 		</v-row>
 
-		<DialogGroupEdit
-			@save="saveGroup"
-			@close="closeDialog"
-			v-model="dialogGroup"
-			:title="dialogTitle"
-			:editedGroup="editedGroup"
-			:nodes="physicalNodes"
-		/>
-
 		<v-data-table
 			:headers="headers_groups"
 			:items="groups"
@@ -79,38 +70,22 @@
 import { mapState, mapActions } from 'pinia'
 import useBaseStore from '../stores/base.js'
 import InstancesMixin from '../mixins/InstancesMixin.js'
-import { defineAsyncComponent } from 'vue'
 
 export default {
 	name: 'Groups',
 	mixins: [InstancesMixin],
-	components: {
-		DialogGroupEdit: defineAsyncComponent(
-			() => import('@/components/dialogs/DialogGroupEdit.vue'),
-		),
-	},
-	watch: {
-		dialogGroup(val) {
-			val || this.closeDialog()
-		},
-	},
+	components: {},
 	computed: {
 		...mapState(useBaseStore, ['nodes']),
 		physicalNodes() {
 			// Only return physical nodes (not virtual ones)
 			return this.nodes.filter((node) => !node.virtual)
 		},
-		dialogTitle() {
-			return this.editedIndex === -1 ? 'New Group' : 'Edit Group'
-		},
 	},
 	data() {
 		return {
-			dialogGroup: false,
 			groups: [],
 			newGroupName: '',
-			editedGroup: {},
-			editedIndex: -1,
 			headers_groups: [
 				{ title: 'ID', key: 'id' },
 				{ title: 'Name', key: 'name' },
@@ -140,52 +115,57 @@ export default {
 				this.groups = response.result || []
 			}
 		},
-		openCreateDialog() {
-			this.editedIndex = -1
-			this.editedGroup = {
-				name: this.newGroupName,
-				nodeIds: [],
-			}
-			this.dialogGroup = true
-		},
-		editItem(item) {
-			this.editedIndex = this.groups.indexOf(item)
-			this.editedGroup = {
-				...item,
-				nodeIds: [...item.nodeIds], // Create a copy of the array
-			}
-			this.dialogGroup = true
-		},
-		async deleteItem(group) {
-			if (
-				await this.app.confirm(
-					'Attention',
-					`Are you sure you want to delete group "${group.name}"? This will also remove the virtual node.`,
-					'alert',
-				)
-			) {
-				const response = await this.app.apiRequest('_deleteGroup', [
-					group.id,
-				])
+		async editItem(existingGroup) {
+			const isEdit = !!existingGroup
+			
+			let inputs = [
+				{
+					type: 'text',
+					label: 'Group Name',
+					required: true,
+					key: 'name',
+					hint: 'Enter a descriptive name for this multicast group',
+					default: isEdit ? existingGroup.name : this.newGroupName,
+				},
+				{
+					type: 'list',
+					label: 'Nodes',
+					required: true,
+					key: 'nodeIds',
+					multiple: true,
+					items: this.physicalNodes.map(node => ({
+						title: node.name || `Node ${node.id}`,
+						value: node.id
+					})),
+					hint: 'Select at least 1 node for the multicast group',
+					default: isEdit ? existingGroup.nodeIds : [],
+					rules: [(value) => {
+						if (!value || value.length === 0) {
+							return 'Please select at least one node'
+						}
+						return true
+					}],
+				},
+			]
 
-				if (response.success) {
-					this.showSnackbar('Group deleted', 'success')
-					this.refreshGroups()
-				}
+			let result = await this.app.confirm(
+				isEdit ? 'Edit Group' : 'New Group',
+				'',
+				'info',
+				{
+					confirmText: isEdit ? 'Update' : 'Create',
+					width: 500,
+					inputs,
+				},
+			)
+
+			// cancelled
+			if (!result || Object.keys(result).length === 0) {
+				return
 			}
-		},
-		closeDialog() {
-			this.dialogGroup = false
-			setTimeout(() => {
-				this.editedGroup = {}
-				this.editedIndex = -1
-				this.newGroupName = ''
-			}, 300)
-		},
-		async saveGroup() {
-			const group = this.editedGroup
 
-			if (!group.name || !group.nodeIds || group.nodeIds.length === 0) {
+			// Validate inputs
+			if (!result.name || !result.nodeIds || result.nodeIds.length === 0) {
 				this.showSnackbar(
 					'Please provide a name and select at least one node',
 					'error',
@@ -194,26 +174,47 @@ export default {
 			}
 
 			let response
-			if (this.editedIndex === -1) {
-				// Create new group
-				response = await this.app.apiRequest('_createGroup', [
-					group.name,
-					group.nodeIds,
-				])
-			} else {
+			if (isEdit) {
 				// Update existing group
 				response = await this.app.apiRequest('_updateGroup', [
-					group.id,
-					group.name,
-					group.nodeIds,
+					existingGroup.id,
+					result.name,
+					result.nodeIds,
+				])
+			} else {
+				// Create new group
+				response = await this.app.apiRequest('_createGroup', [
+					result.name,
+					result.nodeIds,
 				])
 			}
 
 			if (response.success) {
-				const action = this.editedIndex === -1 ? 'created' : 'updated'
+				const action = isEdit ? 'updated' : 'created'
 				this.showSnackbar(`Group ${action}`, 'success')
 				this.refreshGroups()
-				this.closeDialog()
+				// Clear the input field after successful creation
+				if (!isEdit) {
+					this.newGroupName = ''
+				}
+			}
+		},
+		async deleteItem(group) {
+			if (
+				await this.app.confirm(
+					'Attention',
+					`Are you sure you want to delete group "${group.name}"? This will also remove the virtual node.`,
+					'alert',
+				)
+			) {
+				const response = await this.app.apiRequest('_deleteGroup', [
+					group.id,
+				])
+
+				if (response.success) {
+					this.showSnackbar('Group deleted', 'success')
+					this.refreshGroups()
+				}
 			}
 		},
 	},