From ea191958507d3b5e414e423688eb1871b013d1b2 Mon Sep 17 00:00:00 2001 From: Jose Olarte III Date: Thu, 16 Oct 2025 17:18:56 +0800 Subject: [PATCH] refactor: extract SetVisibilityDialog into standalone component - Extract "Set Visibility to Meeting Members" dialog from App.vue into dedicated SetVisibilityDialog.vue component - Move dialog logic directly to MembersList.vue for better component coupling - Remove unnecessary intermediate state management from App.vue - Clean up redundant style definitions (rely on existing Tailwind CSS classes) - Remove unused logger imports and debug functions - Add explanatory comment for Vue template constant pattern This improves maintainability by isolating dialog functionality and follows established component patterns in the codebase. --- src/App.vue | 328 ------------------------ src/components/MembersList.vue | 45 +++- src/components/SetVisibilityDialog.vue | 333 +++++++++++++++++++++++++ 3 files changed, 366 insertions(+), 340 deletions(-) create mode 100644 src/components/SetVisibilityDialog.vue diff --git a/src/App.vue b/src/App.vue index c4e943a0..01e9914f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -352,130 +352,6 @@ - -
-
-
-

- Set Visibility to Meeting Members -

-

- Would you like to make your activities visible to the - following members? (This will also add them as contacts if - they aren't already.) -

- - -
- - - - - - - - - - - - - - - -
- -
- No members need visibility settings -
-
- - - - -
-
-
- -
- - -
-
-
-
@@ -488,9 +364,6 @@ import { Vue, Component } from "vue-facing-decorator"; import { NotificationIface } from "./constants/app"; import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin"; import { logger } from "./utils/logger"; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import { SOMEONE_UNNAMED } from "@/constants/entities"; -import { setVisibilityUtil } from "./libs/endorserServer"; interface Settings { notifyingNewActivityTime?: string; @@ -505,12 +378,6 @@ export default class App extends Vue { $notify!: (notification: NotificationIface, timeout?: number) => void; stopAsking = false; - selectedMembers: string[] = []; - selectionInitialized = false; - - get hasSelectedMembers() { - return this.selectedMembers.length > 0; - } activeDid = ""; apiServer = ""; @@ -525,201 +392,6 @@ export default class App extends Vue { this.activeDid = activeIdentity.activeDid || ""; } - isAllSelected(notification: NotificationIface) { - const membersData = notification?.membersData || []; - if (!membersData || membersData.length === 0) return false; - return membersData.every((member) => - this.selectedMembers.includes(member.did), - ); - } - - isIndeterminate(notification: NotificationIface) { - const membersData = notification?.membersData || []; - if (!membersData || membersData.length === 0) return false; - const selectedCount = membersData.filter((member) => - this.selectedMembers.includes(member.did), - ).length; - return selectedCount > 0 && selectedCount < membersData.length; - } - - toggleSelectAll(notification: NotificationIface) { - const membersData = notification?.membersData || []; - if (!membersData || membersData.length === 0) return; - - if (this.isAllSelected(notification)) { - // Deselect all - this.selectedMembers = []; - } else { - // Select all - this.selectedMembers = membersData.map((member) => member.did); - } - } - - toggleMemberSelection(memberDid: string) { - const index = this.selectedMembers.indexOf(memberDid); - if (index > -1) { - this.selectedMembers.splice(index, 1); - } else { - this.selectedMembers.push(memberDid); - } - } - - isMemberSelected(memberDid: string) { - return this.selectedMembers.includes(memberDid); - } - - shouldInitializeSelection(notification: NotificationIface) { - // This method will initialize selection when the dialog opens - if ( - notification?.type === "set-visibility-meeting-members" && - !this.selectionInitialized - ) { - this.initializeSelection(notification); - this.selectionInitialized = true; - } - return true; - } - - initializeSelection(notification: NotificationIface) { - // Reset selection when dialog opens - this.selectedMembers = []; - // Select all by default - const membersData = notification?.membersData || []; - this.selectedMembers = membersData.map((member) => member.did); - } - - resetSelection() { - this.selectedMembers = []; - this.selectionInitialized = false; - } - - async setVisibilityForSelectedMembers(notification: NotificationIface) { - try { - const membersData = notification?.membersData || []; - const selectedMembers = membersData.filter((member) => - this.selectedMembers.includes(member.did), - ); - - let successCount = 0; - - for (const member of selectedMembers) { - try { - // If they're not a contact yet, add them as a contact first - if (!member.isContact) { - await this.addAsContact(member); - } - - // Set their seesMe to true - await this.updateContactVisibility(member.did, true); - - successCount++; - } catch (error) { - // eslint-disable-next-line no-console - console.error(`Error processing member ${member.did}:`, error); - // Continue with other members even if one fails - } - } - - // Show success notification - this.$notify( - { - group: "alert", - type: "success", - title: "Visibility Set Successfully", - text: `Visibility set for ${successCount} member${successCount === 1 ? "" : "s"}.`, - }, - 5000, - ); - } catch (error) { - // eslint-disable-next-line no-console - console.error("Error setting visibility:", error); - this.$notify( - { - group: "alert", - type: "danger", - title: "Error", - text: "Failed to set visibility for some members. Please try again.", - }, - 5000, - ); - } - } - - async addAsContact(member: { did: string; name: string }) { - try { - const newContact = { - did: member.did, - name: member.name, - }; - - await this.$insertContact(newContact); - } catch (err) { - // eslint-disable-next-line no-console - console.error("Error adding contact:", err); - if (err instanceof Error && err.message?.indexOf("already exists") > -1) { - // Contact already exists, continue - } else { - throw err; // Re-throw if it's not a duplicate error - } - } - } - - async updateContactVisibility(did: string, seesMe: boolean) { - try { - // Get the contact object - const contact = await this.$getContact(did); - if (!contact) { - throw new Error(`Contact not found for DID: ${did}`); - } - - // Use the proper API to set visibility on the server - const result = await setVisibilityUtil( - this.activeDid, - this.apiServer, - this.axios, - contact, - seesMe, - ); - - if (!result.success) { - throw new Error(result.error || "Failed to set visibility"); - } - } catch (err) { - // eslint-disable-next-line no-console - console.error("Error updating contact visibility:", err); - throw err; - } - } - - async closeDialog( - notification: NotificationIface, - closeFn: (id: string) => void, - ) { - this.resetSelection(); - - // Close the notification first - closeFn(notification.id); - - // Then call the callback after a short delay to ensure dialog is closed - setTimeout(async () => { - if (notification.callback) { - await notification.callback(); - } - }, 100); - } - - showContactInfo() { - this.$notify( - { - group: "alert", - type: "info", - title: "Contact Info", - text: "This user is already your contact, but your activities are not visible to them yet.", - }, - 5000, - ); - } - async turnOffNotifications( notification: NotificationIface, ): Promise { diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue index 9dedec28..a315cf24 100644 --- a/src/components/MembersList.vue +++ b/src/components/MembersList.vue @@ -180,6 +180,15 @@

+ + +