Browse Source

Migrate OnboardMeetingListView to new notify system and add comprehensive documentation

- Add missing logger import to fix 'Cannot find name logger' error
- Migrate from  to createNotifyHelpers pattern with proper NotificationIface type
- Remove unnecessary SQL query from created() method for cleaner initialization
- Add educational documentation to all methods explaining workflows, API endpoints, and user experience
- Update all notify calls to use new format (error, success, confirm methods)
- Improve code maintainability with detailed method documentation
offer-validation-logic
Matthew Raymer 6 days ago
parent
commit
0eb8d3d50e
  1. 298
      src/views/OnboardMeetingListView.vue

298
src/views/OnboardMeetingListView.vue

@ -115,6 +115,9 @@ import {
serverMessageForUser, serverMessageForUser,
} from "../libs/endorserServer"; } from "../libs/endorserServer";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin"; import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { logger } from "@/utils/logger";
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
import { NotificationIface } from "@/constants/app";
interface Meeting { interface Meeting {
name: string; name: string;
@ -129,19 +132,11 @@ interface Meeting {
mixins: [PlatformServiceMixin], mixins: [PlatformServiceMixin],
}) })
export default class OnboardMeetingListView extends Vue { export default class OnboardMeetingListView extends Vue {
$notify!: ( $notify!: (notification: NotificationIface, timeout?: number) => void;
notification: {
group: string;
type: string;
title: string;
text: string;
onYes?: () => void;
yesText?: string;
},
timeout?: number,
) => void;
$router!: Router; $router!: Router;
notify!: ReturnType<typeof createNotifyHelpers>;
activeDid = ""; activeDid = "";
apiServer = ""; apiServer = "";
attendingMeeting: Meeting | null = null; attendingMeeting: Meeting | null = null;
@ -153,30 +148,66 @@ export default class OnboardMeetingListView extends Vue {
selectedMeeting: Meeting | null = null; selectedMeeting: Meeting | null = null;
showPasswordDialog = false; showPasswordDialog = false;
/**
* Vue lifecycle hook - component initialization
*
* Initializes the component by loading user settings and fetching available
* onboarding meetings. This method is called when the component is created
* and sets up all necessary data for the meeting list interface.
*
* Workflow:
* 1. Initialize notification system using createNotifyHelpers
* 2. Load user account settings (DID, API server, registration status)
* 3. Fetch available onboarding meetings from the server
*
* Dependencies:
* - PlatformServiceMixin for settings access ($accountSettings)
* - Server API for meeting data (fetchMeetings)
*
* Error Handling:
* - Server errors during meeting fetch are handled in fetchMeetings()
*
* @author Matthew Raymer
*/
async created() { async created() {
this.notify = createNotifyHelpers(this.$notify);
// Load user account settings
const settings = await this.$accountSettings(); const settings = await this.$accountSettings();
if (settings?.activeDid) {
try {
// Verify database settings are accessible
await this.$query("SELECT * FROM settings WHERE accountDid = ?", [
settings.activeDid,
]);
} catch (error) {
logger.error("Error checking database settings:", error);
}
}
this.activeDid = settings?.activeDid || ""; this.activeDid = settings?.activeDid || "";
this.apiServer = settings?.apiServer || ""; this.apiServer = settings?.apiServer || "";
this.firstName = settings?.firstName || ""; this.firstName = settings?.firstName || "";
this.isRegistered = !!settings?.isRegistered; this.isRegistered = !!settings?.isRegistered;
if (this.isRegistered) { await this.fetchMeetings();
await this.fetchMeetings();
}
} }
/**
* Fetches available onboarding meetings from the server
*
* This method retrieves the list of onboarding meetings that the user can join.
* It first checks if the user is already attending a meeting, and if so,
* displays that meeting instead of the full list.
*
* Workflow:
* 1. Check if user is already attending a meeting (groupOnboardMember endpoint)
* 2. If attending: Fetch meeting details and display single meeting view
* 3. If not attending: Fetch all available meetings (groupsOnboarding endpoint)
* 4. Handle loading states and error conditions
*
* API Endpoints Used:
* - GET /api/partner/groupOnboardMember - Check current attendance
* - GET /api/partner/groupOnboard/{id} - Get meeting details
* - GET /api/partner/groupsOnboarding - Get all available meetings
*
* State Management:
* - Sets isLoading flag during API calls
* - Updates attendingMeeting or meetings array
* - Handles error states with user notifications
*
* @author Matthew Raymer
*/
async fetchMeetings() { async fetchMeetings() {
this.isLoading = true; this.isLoading = true;
try { try {
@ -226,20 +257,36 @@ export default class OnboardMeetingListView extends Vue {
"Error fetching meetings: " + errorStringForLog(error), "Error fetching meetings: " + errorStringForLog(error),
true, true,
); );
this.$notify( this.notify.error(
{ serverMessageForUser(error) || "Failed to fetch meetings.",
group: "alert", TIMEOUTS.LONG,
type: "danger",
title: "Error",
text: serverMessageForUser(error) || "Failed to fetch meetings.",
},
5000,
); );
} finally { } finally {
this.isLoading = false; this.isLoading = false;
} }
} }
/**
* Opens the password dialog for joining a meeting
*
* This method initiates the process of joining an onboarding meeting by
* opening a modal dialog that prompts the user for the meeting password.
* The dialog is focused and ready for input when displayed.
*
* Workflow:
* 1. Clear any previous password input
* 2. Store the selected meeting for later use
* 3. Show the password dialog modal
* 4. Focus the password input field for immediate typing
*
* UI State Changes:
* - Sets showPasswordDialog to true (shows modal)
* - Clears password field for fresh input
* - Stores selectedMeeting for password submission
*
* @param meeting - The meeting object the user wants to join
* @author Matthew Raymer
*/
promptPassword(meeting: Meeting) { promptPassword(meeting: Meeting) {
this.password = ""; this.password = "";
this.selectedMeeting = meeting; this.selectedMeeting = meeting;
@ -252,12 +299,61 @@ export default class OnboardMeetingListView extends Vue {
}); });
} }
/**
* Cancels the password dialog and resets state
*
* This method handles the cancellation of the meeting password dialog.
* It cleans up the dialog state and resets all related variables to
* their initial state, ensuring a clean slate for future dialog interactions.
*
* State Cleanup:
* - Clears password input field
* - Removes selected meeting reference
* - Hides password dialog modal
*
* This ensures that if the user reopens the dialog, they start with
* a fresh state without any leftover data from previous attempts.
*
* @author Matthew Raymer
*/
cancelPasswordDialog() { cancelPasswordDialog() {
this.password = ""; this.password = "";
this.selectedMeeting = null; this.selectedMeeting = null;
this.showPasswordDialog = false; this.showPasswordDialog = false;
} }
/**
* Submits the password and joins the selected meeting
*
* This method handles the complete workflow of joining an onboarding meeting.
* It encrypts the user's member data with the provided password and sends
* it to the server to register the user as a meeting participant.
*
* Workflow:
* 1. Validate that a meeting is selected (safety check)
* 2. Create member data object with user information
* 3. Encrypt member data using the meeting password
* 4. Send encrypted data to server via groupOnboardMember endpoint
* 5. On success: Navigate to meeting members view with credentials
* 6. On failure: Show error notification to user
*
* Data Encryption:
* - Member data includes: name, DID, registration status
* - Data is encrypted using the meeting password for security
* - Encrypted data is sent to server for verification
*
* Navigation:
* - On successful join: Redirects to onboard-meeting-members view
* - Passes groupId, password, and memberId as route parameters
* - Allows user to see other meeting participants
*
* Error Handling:
* - Invalid passwords result in server rejection
* - Network errors are caught and displayed to user
* - All errors are logged for debugging purposes
*
* @author Matthew Raymer
*/
async submitPassword() { async submitPassword() {
if (!this.selectedMeeting) { if (!this.selectedMeeting) {
// this should never happen // this should never happen
@ -316,69 +412,97 @@ export default class OnboardMeetingListView extends Vue {
"Error joining meeting: " + errorStringForLog(error), "Error joining meeting: " + errorStringForLog(error),
true, true,
); );
this.$notify( this.notify.error(
{ serverMessageForUser(error) || "You failed to join the meeting.",
group: "alert", TIMEOUTS.LONG,
type: "danger",
title: "Error",
text:
serverMessageForUser(error) || "You failed to join the meeting.",
},
5000,
); );
} }
} }
/**
* Prompts user to confirm leaving the current meeting
*
* This method initiates the process of leaving an onboarding meeting.
* It shows a confirmation dialog to prevent accidental departures,
* then handles the server-side removal and UI updates.
*
* Workflow:
* 1. Display confirmation dialog asking user to confirm departure
* 2. On confirmation: Send DELETE request to groupOnboardMember endpoint
* 3. On success: Clear attending meeting state and refresh meeting list
* 4. Show success notification to user
* 5. On failure: Show error notification with details
*
* Server Interaction:
* - DELETE /api/partner/groupOnboardMember - Removes user from meeting
* - Requires authentication headers for user verification
* - Server handles the actual removal from meeting database
*
* State Management:
* - Clears attendingMeeting when successfully left
* - Refreshes meetings list to show updated availability
* - Updates UI to show meeting list instead of single meeting
*
* User Experience:
* - Confirmation prevents accidental departures
* - Clear feedback on success/failure
* - Seamless transition back to meeting list
*
* @author Matthew Raymer
*/
async leaveMeeting() { async leaveMeeting() {
this.$notify( this.notify.confirm(
{ "Are you sure you want to leave this meeting?",
group: "modal", async () => {
type: "confirm", try {
title: "Leave Meeting", const headers = await getHeaders(this.activeDid);
text: "Are you sure you want to leave this meeting?", await this.axios.delete(
onYes: async () => { this.apiServer + "/api/partner/groupOnboardMember",
try { { headers },
const headers = await getHeaders(this.activeDid); );
await this.axios.delete(
this.apiServer + "/api/partner/groupOnboardMember", this.attendingMeeting = null;
{ headers }, await this.fetchMeetings();
);
this.notify.success(
this.attendingMeeting = null; "You left the meeting.",
await this.fetchMeetings(); TIMEOUTS.LONG,
);
this.$notify( } catch (error) {
{ this.$logAndConsole(
group: "alert", "Error leaving meeting: " + errorStringForLog(error),
type: "success", true,
title: "Success", );
text: "You left the meeting.", this.notify.error(
}, serverMessageForUser(error) ||
5000, "You failed to leave the meeting.",
); TIMEOUTS.LONG,
} catch (error) { );
this.$logAndConsole( }
"Error leaving meeting: " + errorStringForLog(error),
true,
);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text:
serverMessageForUser(error) ||
"You failed to leave the meeting.",
},
5000,
);
}
},
}, },
-1,
); );
} }
/**
* Navigates to the meeting creation page
*
* This method handles the navigation to the meeting setup page where
* registered users can create new onboarding meetings. It's only
* available to users who are registered in the system.
*
* Navigation:
* - Routes to onboard-meeting-setup view
* - Allows user to configure new meeting settings
* - Only accessible to registered users (controlled by template)
*
* User Flow:
* - User clicks "Create Meeting" button
* - System navigates to setup page
* - User can configure meeting name, password, etc.
* - New meeting becomes available to other users
*
* @author Matthew Raymer
*/
createMeeting() { createMeeting() {
this.$router.push({ name: "onboard-meeting-setup" }); this.$router.push({ name: "onboard-meeting-setup" });
} }

Loading…
Cancel
Save