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

WIP: mockup for set visibility dialog

Browse Source
This commit is contained in:
Jose Olarte III
2025-10-09 21:56:50 +08:00
parent b0d13b3cd4
commit acf7d611e8
2 changed files with 120 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/App.vue
View File

@@ -352,6 +352,109 @@
</div>
</div>
</div>
<div
v-if="notification.type === 'set-visibility-to-meeting-members'"
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
>
<div
class="flex w-11/12 max-w-lg mx-auto my-4 overflow-y-scroll bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<h3 class="text-lg font-semibold leading-[1.25] mb-2">
Set Visibility to Meeting Members
</h3>
<p class="text-sm mb-4">
Would you like to <b>make your activities visible</b> to the
following members? (This will also add them as contacts if
they aren't already.)
</p>
<!-- Custom table area - you can customize this -->
<div class="mb-4">
<table
class="w-full border-collapse border border-slate-300 text-sm text-start"
>
<thead>
<tr class="bg-slate-100 font-medium">
<th class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Select All
</label>
</th>
</tr>
</thead>
<tbody>
<!-- Sample data - replace with your actual data -->
<tr>
<td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
John Doe
<!-- Friend indicator -->
<font-awesome
icon="user-circle"
class="fa-fw ms-auto text-slate-400"
/>
</label>
</td>
</tr>
<tr>
<td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Jane Smith
<!-- Friend indicator -->
<font-awesome
icon="user-circle"
class="fa-fw ms-auto text-slate-400"
/>
</label>
</td>
</tr>
<tr>
<td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Jim Beam
</label>
</td>
</tr>
<tr>
<td class="border border-slate-300 px-3 py-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Susie Q
</label>
</td>
</tr>
</tbody>
</table>
</div>
<div class="space-y-2">
<button
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md"
@click="
notification.onYes ? notification.onYes() : null;
close(notification.id);
"
>
Set Visibility
</button>
<button
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
@click="close(notification.id)"
>
Maybe Later
</button>
</div>
</div>
</div>
</div>
</div>
</Notification>
</div>

18
src/views/OnboardMeetingMembersView.vue
View File

@@ -7,7 +7,7 @@
<!-- Sub View Heading -->
<div id="SubViewHeading" class="flex gap-4 items-start mb-8">
<h1 class="grow text-xl text-center font-semibold leading-tight">
Meeting Members
Meeting Member<a href="#" @click="showAddMembersNotification">s</a>
</h1>
<!-- Spacer (no Back button) -->
@@ -77,6 +77,7 @@ import {
} from "../libs/endorserServer";
import { generateSaveAndActivateIdentity } from "../libs/util";
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
import { NotificationIface } from "../constants/app";
@Component({
components: {
@@ -97,6 +98,7 @@ export default class OnboardMeetingMembersView extends Vue {
projectLink = "";
$route!: RouteLocationNormalizedLoaded;
$router!: Router;
$notify!: (notification: NotificationIface, timeout?: number) => void;
userNameDialog!: InstanceType<typeof UserNameDialog>;
@@ -257,5 +259,19 @@ export default class OnboardMeetingMembersView extends Vue {
handleError(message: string) {
this.errorMessage = message;
}
showAddMembersNotification() {
this.$notify(
{
group: "modal",
type: "set-visibility-to-meeting-members",
onYes: async () => {
// Handle the "Add Selected" action - you can implement the actual logic here
console.log("User confirmed adding selected members as contacts");
},
},
-1,
); // -1 means no auto-dismiss, stays open until user acts
}
}
</script>