jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

move edit & delete around & eliminate redundant boolean

Browse Source
This commit is contained in:
Trent Larson
2025-02-03 12:39:16 -07:00
parent 3a56d83dd6
commit ce6ce63433
1 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/OnboardMeetingSetupView.vue
View File

@@ -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 };
}