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

feat: implement member visibility dialog with checkbox selection and refresh #208

Merged
jose merged 9 commits from meeting-members-set-visibility into master 2025-10-21 08:52:15 +00:00
Conversation 4 Commits 9 Files Changed 6 +96 -54
2 changed files with 96 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b84546686a - Show all commits

58
src/App.vue
View File

@@ -389,46 +389,56 @@
<!-- 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
<div class="flex items-center justify-between gap-2">
<label class="flex items-center gap-2">
trentlarson commented 2025-10-17 01:44:07 +00:00
Outdated
Review
Copy Link

Since these are not used, I don't see any reason to add this section.

This might make these variables accessible in other components and your intent may be to load them in one place, which makes sense. However, I do see a few potential side-effects that I don't love:

  1. There are multiple DB "settings" loads in many of these places (one here and and another in each specific View), so we would want to remove all the other loads to avoid so many DB loads.

  2. If there are errors in the DB accesses, that shuts down the whole app, and I believe some pages like Help should have almost no logic so that people can get there even if errors happen elsewhere. (Maybe there are "catch" statements so that doesn't happen... I'd have to look.)

  3. The variables are a bit magic: when you're in another class, it's hard to know from where these values are loaded. (It may still be worthwhile if it saves user error in all these places. Will ponder.)

So I look forward to your thoughts... if you think it's worthwhile, let me know... and we'd want to work on issue #1 across the codebase, so it might be worthwhile in a separate PR.

Since these are not used, I don't see any reason to add this section. This might make these variables accessible in other components and your intent may be to load them in one place, which makes sense. However, I do see a few potential side-effects that I don't love: 1) There are multiple DB "settings" loads in many of these places (one here and and another in each specific View), so we would want to remove all the other loads to avoid so many DB loads. 2) If there are errors in the DB accesses, that shuts down the whole app, and I believe some pages like Help should have almost no logic so that people can get there even if errors happen elsewhere. (Maybe there are "catch" statements so that doesn't happen... I'd have to look.) 3) The variables are a bit magic: when you're in another class, it's hard to know from where these values are loaded. (It may still be worthwhile if it saves user error in all these places. Will ponder.) So I look forward to your thoughts... if you think it's worthwhile, let me know... and we'd want to work on issue #1 across the codebase, so it might be worthwhile in a separate PR.
jose commented 2025-10-17 09:05:50 +00:00
Outdated
Review
Copy Link

Thanks for catching this. It's leftover code from when the rest of the logic was housed in here. I'll clean that up.

Thanks for catching this. It's leftover code from when the rest of the logic was housed in here. I'll clean that up.
<input type="checkbox" checked />
John Doe
</label>
<!-- Friend indicator -->
<font-awesome
icon="user-circle"
class="fa-fw ms-auto text-slate-400"
class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
@click="showContactInfo"
/>
</label>
</div>
</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
<div class="flex items-center justify-between gap-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Jane Smith
</label>
<!-- Friend indicator -->
<font-awesome
icon="user-circle"
class="fa-fw ms-auto text-slate-400"
class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
@click="showContactInfo"
/>
</label>
</div>
</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>
<div class="flex items-center justify-between gap-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Jim Beam
</label>
</div>
</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>
<div class="flex items-center justify-between gap-2">
<label class="flex items-center gap-2">
<input type="checkbox" checked />
Susie Q
</label>
</div>
</td>
</tr>
</tbody>
@@ -482,6 +492,18 @@ export default class App extends Vue {
stopAsking = false;
showContactInfo() {
this.$notify(
{
group: "alert",
type: "info",
title: "Contact Info",
text: "This user is already your contact, but your activities are not visible to them yet.",
},
5000,
);
}
async turnOffNotifications(
notification: NotificationIface,
): Promise<boolean> {

92
src/components/MembersList.vue
View File

@@ -84,45 +84,62 @@
:key="member.member.memberId"
class="border-b border-slate-300 py-1.5"
>
<div class="flex items-center justify-between">
<div class="flex items-center overflow-hidden">
<div class="flex items-center gap-2 justify-between">
<div class="flex items-center gap-1 overflow-hidden">
<h3 class="font-semibold truncate">
{{ member.name || unnamedMember }}
</h3>
<div
v-if="!getContactFor(member.did) && member.did !== activeDid"
class="flex justify-end"
class="flex items-center gap-1"
>
<button
class="btn-add-contact"
title="Add as contact"
@click="addAsContact(member)"
>
<font-awesome icon="circle-user" class="text-sm" />
<font-awesome icon="circle-user" />
</button>
<button
class="btn-info-contact"
title="Contact Info"
@click="
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
>
<font-awesome icon="circle-info" class="text-sm" />
</button>
</div>
</div>
<div class="flex">
<span
v-if="
showOrganizerTools && isOrganizer && member.did !== activeDid
<span
v-if="
showOrganizerTools && isOrganizer && member.did !== activeDid
"
class="flex items-center gap-1"
>
<button
class="btn-admission"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
class="flex items-center"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<button
class="btn-admission"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<font-awesome
:icon="member.member.admitted ? 'minus' : 'plus'"
class="text-sm"
/>
</button>
</span>
</div>
<font-awesome
:icon="member.member.admitted ? 'minus' : 'plus'"
/>
</button>
<button
class="btn-info-admission"
title="Admission Info"
@click="informAboutAdmission()"
>
<font-awesome icon="circle-info" class="text-sm" />
</button>
</span>
</div>
<p class="text-xs text-gray-600 truncate">
{{ member.did }}
@@ -143,6 +160,15 @@
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
Refresh <span class="text-xs">(10s)</span>
</button>
<button
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
title="Set visibility for meeting members"
@click="showAddMembersNotification"
>
<font-awesome icon="eye" />
Set Visibility
</button>
</div>
<p v-if="members.length === 0" class="text-gray-500 py-4">
@@ -338,7 +364,7 @@ export default class MembersList extends Vue {
informAboutAdmission() {
this.notify.info(
"This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
"This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
TIMEOUTS.VERY_LONG,
);
}
@@ -531,29 +557,23 @@ export default class MembersList extends Vue {
.btn-add-contact {
/* stylelint-disable-next-line at-rule-no-unknown */
@apply ml-2 w-5 h-5 flex items-center justify-center rounded-full
@apply w-6 h-6 flex items-center justify-center rounded-full
bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800
transition-colors;
}
.btn-info-contact {
.btn-info-contact,
.btn-info-admission {
/* stylelint-disable-next-line at-rule-no-unknown */
@apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full
bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800
@apply w-6 h-6 flex items-center justify-center rounded-full
bg-slate-100 text-slate-400 hover:text-slate-600
transition-colors;
}
.btn-admission {
/* stylelint-disable-next-line at-rule-no-unknown */
@apply w-5 h-5 flex items-center justify-center rounded-full
@apply w-6 h-6 flex items-center justify-center rounded-full
bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800
transition-colors;
}
.btn-info-admission {
/* stylelint-disable-next-line at-rule-no-unknown */
@apply w-6 h-6 flex items-center justify-center rounded-full
bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800
transition-colors;
}
</style>