trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 5 Releases 5 Wiki Activity
Browse Source

move edit & delete around & eliminate redundant boolean

master
Trent Larson 4 days ago
parent
5ff91186e2
commit
40765feea1
1 changed files with 40 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      src/views/OnboardMeetingSetupView.vue

67
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"
>
Go to Meeting Members
</router-link>
</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">
<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="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 hover:bg-blue-200 transition-colors duration-200"
class="text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
title="Edit Meeting"
>
<fa icon="pen" class="fa-fw text-blue-600" />
<fa icon="pen" class="fa-fw" />
<span class="sr-only">Edit Meeting</span>
</button>
</div>
<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 };
}

Write Preview
Loading…
Cancel
Save