From 40765feea1c0b948973dbb955c514d170d68b2d7 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 3 Feb 2025 12:39:16 -0700
Subject: [PATCH] move edit & delete around & eliminate redundant boolean

---
 src/views/OnboardMeetingSetupView.vue | 75 ++++++++++++++-------------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/views/OnboardMeetingSetupView.vue b/src/views/OnboardMeetingSetupView.vue
index b181b3d..7d864a1 100644
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -9,44 +9,49 @@
     </h1>
 
     <!-- Existing Meeting Section -->
-    <div v-if="!isLoading && currentMeeting != null && !isEditing" class="mt-8 p-4 border rounded-lg bg-white shadow">
-      <h2 class="text-2xl mb-4">Current Meeting</h2>
-      <div class="space-y-2">
-        <p><strong>Name:</strong> {{ currentMeeting.name }}</p>
-        <p><strong>Expires:</strong> {{ formatExpirationTime(currentMeeting.expiresAt) }}</p>
-        <div v-if="currentMeeting.password" class="mt-4">
-          <p class="text-sm text-gray-600">Share the password with the people you want to onboard.</p>
-          <router-link
-            :to="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password)}`"
-            class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200"
+    <div v-if="!isLoading && currentMeeting != null && !isEditingOrCreating()" class="mt-8 p-4 border rounded-lg bg-white shadow">
+      <div class="flex items-center justify-between mb-4">
+        <div class="flex items-center">
+          <h2 class="text-2xl">Current Meeting</h2>
+          <button
+            @click="startEditing"
+            class="text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
+            title="Edit Meeting"
           >
-            Go to Meeting Members
-          </router-link>
+            <fa icon="pen" class="fa-fw" />
+            <span class="sr-only">Edit Meeting</span>
+          </button>
         </div>
-        <span v-else class="text-sm text-red-600">
-          The meeting password has been lost. Edit it, or delete and create a new meeting.
-        </span>
-      </div>
-      <div class="flex justify-between mt-4 space-x-2">
-        <button
-          @click="startEditing"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 hover:bg-blue-200 transition-colors duration-200"
-          title="Edit Meeting"
-        >
-          <fa icon="pen" class="fa-fw text-blue-600" />
-          <span class="sr-only">Edit Meeting</span>
-        </button>
         <button
           @click="confirmDelete"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 hover:bg-red-200 transition-colors duration-200"
+          class="text-red-600 hover:text-red-800 transition-colors duration-200"
           :disabled="isDeleting"
           :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
           title="Delete Meeting"
         >
-          <fa icon="trash-can" class="fa-fw text-red-600" />
+          <fa icon="trash-can" class="fa-fw" />
           <span class="sr-only">{{ isDeleting ? 'Deleting...' : 'Delete Meeting' }}</span>
         </button>
       </div>
+      <div class="space-y-2">
+        <p><strong>Name:</strong> {{ currentMeeting.name }}</p>
+        <p><strong>Expires:</strong> {{ formatExpirationTime(currentMeeting.expiresAt) }}</p>
+
+        <div v-if="currentMeeting.password" class="mt-4">
+          <p class="text-gray-600">Share the password with the people you want to onboard.</p>
+        </div>
+        <div v-else class="text-red-600">
+          Your copy of the password is not saved. Edit the meeting, or delete it and create a new meeting.
+        </div>
+
+        <router-link
+          :to="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password || '')}`"
+          class="mt-4 inline-block px-4 py-2 text-blue-600"
+          target="_blank"
+        >
+          Open page that meeting members see
+        </router-link>
+      </div>
     </div>
 
     <!-- Delete Confirmation Dialog -->
@@ -73,9 +78,9 @@
 
     <!-- Create/Edit Meeting Form -->
     <div v-if="!isLoading && newOrUpdatedMeeting != null" class="mt-8">
-      <h2 class="text-2xl mb-4">{{ isEditing ? 'Edit Meeting' : 'Create New Meeting' }}</h2>
+      <h2 class="text-2xl mb-4">{{ isEditingOrCreating() ? 'Edit Meeting' : 'Create New Meeting' }}</h2>
       <!-- This is my first form. Not sure whether I like it or not; gotta see if the browser benefits extend to the native app. -->
-      <form @submit.prevent="isEditing ? updateMeeting() : createMeeting()" class="space-y-4">
+      <form @submit.prevent="isEditingOrCreating() ? updateMeeting() : createMeeting()" class="space-y-4">
         <div>
           <label for="meetingName" class="block text-sm font-medium text-gray-700">Meeting Name</label>
           <input
@@ -129,10 +134,10 @@
           class="w-full bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md hover:from-green-500 hover:to-green-800"
           :disabled="isLoading"
         >
-          {{ isLoading ? (isEditing ? 'Updating...' : 'Creating...') : (isEditing ? 'Update Meeting' : 'Create Meeting') }}
+          {{ isLoading ? (isEditingOrCreating() ? 'Updating...' : 'Creating...') : (isEditingOrCreating() ? 'Update Meeting' : 'Create Meeting') }}
         </button>
         <button
-          v-if="isEditing"
+          v-if="isEditingOrCreating()"
           type="button"
           @click="cancelEditing"
           class="w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600"
@@ -187,7 +192,6 @@ export default class OnboardMeetingView extends Vue {
   activeDid = '';
   apiServer = '';
   isDeleting = false;
-  isEditing = false;
   isLoading = true;
   showDeleteConfirm = false;
   fullName = '';
@@ -207,6 +211,10 @@ export default class OnboardMeetingView extends Vue {
     this.isLoading = false;
   }
 
+  isEditingOrCreating(): boolean {
+    return this.newOrUpdatedMeeting != null;
+  }
+
   getDefaultExpirationTime(): string {
     const date = new Date();
     // Round up to the next hour
@@ -426,7 +434,6 @@ export default class OnboardMeetingView extends Vue {
   }
 
   startEditing() {
-    this.isEditing = true;
     // Populate form with existing meeting data
     if (this.currentMeeting) {
       console.log('Current meeting', this.currentMeeting);
@@ -443,7 +450,6 @@ export default class OnboardMeetingView extends Vue {
   }
 
   cancelEditing() {
-    this.isEditing = false;
     // Reset form data
     this.newOrUpdatedMeeting = null;
   }
@@ -522,7 +528,6 @@ export default class OnboardMeetingView extends Vue {
         };
         this.newOrUpdatedMeeting = null;
         console.log('Updated meeting now', this.currentMeeting);
-        this.isEditing = false;
       } else {
         throw { response: response };
       }