Skip to content

Commit e9fb494

Browse files
gustavotoyotagustavotoyota
committed
ui(pages): replace all lists with checklists
1 parent 1c35d57 commit e9fb494

File tree

5 files changed

+51
-136
lines changed

5 files changed

+51
-136
lines changed

‎apps/client/src/layouts/PagesLayout/MainToolbar/PagesSettingsDialog/InvitationsTab.vue‎

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,20 @@
2626

2727
<div style="flex: 1; height: 0; display: flex">
2828
<div style="flex: 1">
29-
<q-list
29+
<Checklist
30+
:item-ids="groupIds"
31+
:selected-item-ids="baseSelectedGroupIds"
32+
@select="(pageId) => baseSelectedGroupIds.add(pageId)"
33+
@unselect="(pageId) => baseSelectedGroupIds.delete(pageId)"
3034
style="
3135
border-radius: 10px;
3236
padding: 0;
3337
overflow-y: auto;
3438
max-height: 100%;
39+
background-color: #383838;
3540
"
3641
>
37-
<q-item
38-
v-for="groupId in invitationGroupsIds"
39-
:key="groupId"
40-
class="text-grey-1"
41-
style="background-color: #424242"
42-
clickable
43-
v-ripple
44-
active-class="bg-grey-7"
45-
:active="baseSelectedGroupIds.has(groupId)"
46-
@click="select(groupId, $event as MouseEvent)"
47-
>
42+
<template #item="{ itemId: groupId }">
4843
<q-item-section>
4944
<q-item-label>
5045
{{ groupNames()(groupId).get().text }}
@@ -61,8 +56,8 @@
6156
}}
6257
</q-item-label>
6358
</q-item-section>
64-
</q-item>
65-
</q-list>
59+
</template>
60+
</Checklist>
6661
</div>
6762

6863
<Gap style="width: 16px" />
@@ -155,18 +150,6 @@ function deselectAll() {
155150
}
156151
}
157152
158-
function select(groupId: string, event: MouseEvent) {
159-
if (!isCtrlDown(event)) {
160-
baseSelectedGroupIds.value.clear();
161-
}
162-
163-
if (baseSelectedGroupIds.value.has(groupId)) {
164-
baseSelectedGroupIds.value.delete(groupId);
165-
} else {
166-
baseSelectedGroupIds.value.add(groupId);
167-
}
168-
}
169-
170153
async function acceptSelectedInvitations() {
171154
$quasar().dialog({
172155
component: AcceptInvitationDialog,

‎apps/client/src/layouts/PagesLayout/MainToolbar/PagesSettingsDialog/RequestsTab.vue‎

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,32 +26,27 @@
2626

2727
<div style="flex: 1; height: 0; display: flex">
2828
<div style="flex: 1">
29-
<q-list
29+
<Checklist
30+
:item-ids="groupIds"
31+
:selected-item-ids="baseSelectedGroupIds"
32+
@select="(pageId) => baseSelectedGroupIds.add(pageId)"
33+
@unselect="(pageId) => baseSelectedGroupIds.delete(pageId)"
3034
style="
3135
border-radius: 10px;
3236
padding: 0;
3337
overflow-y: auto;
3438
max-height: 100%;
39+
background-color: #383838;
3540
"
3641
>
37-
<q-item
38-
v-for="groupId in requestGroupsIds"
39-
:key="groupId"
40-
class="text-grey-1"
41-
style="background-color: #424242"
42-
clickable
43-
v-ripple
44-
active-class="bg-grey-7"
45-
:active="baseSelectedGroupIds.has(groupId)"
46-
@click="select(groupId, $event as MouseEvent)"
47-
>
42+
<template #item="{ itemId: groupId }">
4843
<q-item-section>
4944
<q-item-label>
5045
{{ groupNames()(groupId).get().text }}
5146
</q-item-label>
5247
</q-item-section>
53-
</q-item>
54-
</q-list>
48+
</template>
49+
</Checklist>
5550
</div>
5651

5752
<Gap style="width: 16px" />
@@ -130,18 +125,6 @@ function deselectAll() {
130125
}
131126
}
132127
133-
function select(groupId: string, event: MouseEvent) {
134-
if (!isCtrlDown(event)) {
135-
baseSelectedGroupIds.value.clear();
136-
}
137-
138-
if (baseSelectedGroupIds.value.has(groupId)) {
139-
baseSelectedGroupIds.value.delete(groupId);
140-
} else {
141-
baseSelectedGroupIds.value.add(groupId);
142-
}
143-
}
144-
145128
async function cancelSelectedRequests() {
146129
try {
147130
await asyncDialog({

‎apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/InvitationsTab/InvitationsTab.vue‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,20 @@
2626

2727
<div style="flex: 1; height: 0; display: flex">
2828
<div style="flex: 1">
29-
<q-list
29+
<Checklist
30+
:item-ids="invitationsUserIds"
31+
:selected-item-ids="baseSelectedUserIds"
32+
@select="(pageId) => baseSelectedUserIds.add(pageId)"
33+
@unselect="(pageId) => baseSelectedUserIds.delete(pageId)"
3034
style="
3135
border-radius: 10px;
32-
max-height: 100%;
3336
padding: 0;
3437
overflow-y: auto;
38+
max-height: 100%;
39+
background-color: #383838;
3540
"
3641
>
37-
<q-item
38-
v-for="userId in invitationsUserIds"
39-
:key="userId"
40-
class="text-grey-1"
41-
style="background-color: #424242"
42-
clickable
43-
v-ripple
44-
active-class="bg-grey-7"
45-
:active="baseSelectedUserIds.has(userId)"
46-
@click="select(userId, $event as MouseEvent)"
47-
>
42+
<template #item="{ itemId: userId }">
4843
<q-item-section>
4944
<q-item-label>
5045
{{ groupInvitationNames()(`${groupId}:${userId}`).get().text }}
@@ -61,8 +56,8 @@
6156
}}
6257
</q-item-label>
6358
</q-item-section>
64-
</q-item>
65-
</q-list>
59+
</template>
60+
</Checklist>
6661
</div>
6762

6863
<Gap style="width: 16px" />
@@ -132,7 +127,7 @@ import type { QNotifyUpdateOptions } from 'quasar';
132127
import { cancelJoinInvitation } from 'src/code/api-interface/groups/join-invitations/cancel';
133128
import { groupInvitationNames } from 'src/code/pages/computed/group-invitation-names';
134129
import type { RealtimeContext } from 'src/code/realtime/context';
135-
import { asyncDialog, handleError, isCtrlDown } from 'src/code/utils/misc';
130+
import { asyncDialog, handleError } from 'src/code/utils/misc';
136131
137132
import GroupMemberDetailsDialog from '../GroupMemberDetailsDialog.vue';
138133
import InviteUserDialog from './InviteUserDialog.vue';
@@ -171,18 +166,6 @@ function deselectAll() {
171166
}
172167
}
173168
174-
function select(id: string, event: MouseEvent) {
175-
if (!isCtrlDown(event)) {
176-
baseSelectedUserIds.value.clear();
177-
}
178-
179-
if (baseSelectedUserIds.value.has(id)) {
180-
baseSelectedUserIds.value.delete(id);
181-
} else {
182-
baseSelectedUserIds.value.add(id);
183-
}
184-
}
185-
186169
async function cancelSelectedInvitations() {
187170
try {
188171
await asyncDialog({

‎apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/MembersTab/MembersTab.vue‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,20 @@
2121

2222
<div style="flex: 1; height: 0; display: flex">
2323
<div style="flex: 1">
24-
<q-list
24+
<Checklist
25+
:item-ids="membersUserIds"
26+
:selected-item-ids="baseSelectedUserIds"
27+
@select="(pageId) => baseSelectedUserIds.add(pageId)"
28+
@unselect="(pageId) => baseSelectedUserIds.delete(pageId)"
2529
style="
2630
border-radius: 10px;
27-
max-height: 100%;
2831
padding: 0;
2932
overflow-y: auto;
33+
max-height: 100%;
34+
background-color: #383838;
3035
"
3136
>
32-
<q-item
33-
v-for="userId in membersUserIds"
34-
:key="userId"
35-
class="text-grey-1"
36-
style="background-color: #424242"
37-
clickable
38-
v-ripple
39-
active-class="bg-grey-7"
40-
:active="baseSelectedUserIds.has(userId)"
41-
@click="select(userId, $event as MouseEvent)"
42-
>
37+
<template #item="{ itemId: userId }">
4338
<q-item-section>
4439
<q-item-label>
4540
{{ groupMemberNames()(`${groupId}:${userId}`).get().text }}
@@ -62,8 +57,8 @@
6257
}}
6358
</q-item-label>
6459
</q-item-section>
65-
</q-item>
66-
</q-list>
60+
</template>
61+
</Checklist>
6762
</div>
6863

6964
<Gap style="width: 16px" />
@@ -127,7 +122,7 @@ import { rotateGroupKeys } from 'src/code/api-interface/groups/key-rotation';
127122
import { removeGroupUser } from 'src/code/api-interface/groups/remove-user';
128123
import { groupMemberNames } from 'src/code/pages/computed/group-member-names';
129124
import type { RealtimeContext } from 'src/code/realtime/context';
130-
import { asyncDialog, handleError, isCtrlDown } from 'src/code/utils/misc';
125+
import { asyncDialog, handleError } from 'src/code/utils/misc';
131126
132127
import GroupMemberDetailsDialog from '../GroupMemberDetailsDialog.vue';
133128
import ChangeRoleDialog from './ChangeRoleDialog.vue';
@@ -209,18 +204,6 @@ function deselectAll() {
209204
}
210205
}
211206
212-
function select(id: string, event: MouseEvent) {
213-
if (!isCtrlDown(event)) {
214-
baseSelectedUserIds.value.clear();
215-
}
216-
217-
if (baseSelectedUserIds.value.has(id)) {
218-
baseSelectedUserIds.value.delete(id);
219-
} else {
220-
baseSelectedUserIds.value.add(id);
221-
}
222-
}
223-
224207
async function removeSelectedUsers() {
225208
try {
226209
await asyncDialog({

‎apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/RequestsTab/RequestsTab.vue‎

Lines changed: 11 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -26,32 +26,27 @@
2626

2727
<div style="flex: 1; height: 0; display: flex">
2828
<div style="flex: 1">
29-
<q-list
29+
<Checklist
30+
:item-ids="requestsUserIds"
31+
:selected-item-ids="baseSelectedUserIds"
32+
@select="(pageId) => baseSelectedUserIds.add(pageId)"
33+
@unselect="(pageId) => baseSelectedUserIds.delete(pageId)"
3034
style="
3135
border-radius: 10px;
32-
max-height: 100%;
3336
padding: 0;
3437
overflow-y: auto;
38+
max-height: 100%;
39+
background-color: #383838;
3540
"
3641
>
37-
<q-item
38-
v-for="userId in requestsUserIds"
39-
:key="userId"
40-
class="text-grey-1"
41-
style="background-color: #424242"
42-
clickable
43-
v-ripple
44-
active-class="bg-grey-7"
45-
:active="baseSelectedUserIds.has(userId)"
46-
@click="select(userId, $event as MouseEvent)"
47-
>
42+
<template #item="{ itemId: userId }">
4843
<q-item-section>
4944
<q-item-label>
5045
{{ groupRequestNames()(`${groupId}:${userId}`).get().text }}
5146
</q-item-label>
5247
</q-item-section>
53-
</q-item>
54-
</q-list>
48+
</template>
49+
</Checklist>
5550
</div>
5651

5752
<Gap style="width: 16px" />
@@ -115,7 +110,7 @@ import type { QNotifyUpdateOptions } from 'quasar';
115110
import { rejectJoinRequest } from 'src/code/api-interface/groups/join-requests/reject';
116111
import { groupRequestNames } from 'src/code/pages/computed/group-request-names';
117112
import type { RealtimeContext } from 'src/code/realtime/context';
118-
import { asyncDialog, handleError, isCtrlDown } from 'src/code/utils/misc';
113+
import { asyncDialog, handleError } from 'src/code/utils/misc';
119114
120115
import GroupMemberDetailsDialog from '../GroupMemberDetailsDialog.vue';
121116
import AcceptRequestDialog from './AcceptRequestDialog.vue';
@@ -168,18 +163,6 @@ function deselectAll() {
168163
}
169164
}
170165
171-
function select(id: string, event: MouseEvent) {
172-
if (!isCtrlDown(event)) {
173-
baseSelectedUserIds.value.clear();
174-
}
175-
176-
if (baseSelectedUserIds.value.has(id)) {
177-
baseSelectedUserIds.value.delete(id);
178-
} else {
179-
baseSelectedUserIds.value.add(id);
180-
}
181-
}
182-
183166
async function rejectSelectedRequests() {
184167
try {
185168
await asyncDialog({

0 commit comments

Comments
 (0)