members.vue
2.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script setup lang="ts">
import type { Member } from '~/types'
const { t } = useAppI18n()
const settingsApi = useSettingsApi()
const toast = useToast()
const { can, getDeniedReason } = usePermission()
const { data: members, refresh: refreshMembers } = await settingsApi.getMembers()
const inviteOpen = ref(false)
const editOpen = ref(false)
const selectedMember = ref<Member>()
const q = ref('')
const canInvite = computed(() => can('/settings/members', 'members.invite'))
const filteredMembers = computed(() => {
return members.value.filter((member) => {
return member.name.search(new RegExp(q.value, 'i')) !== -1 || member.username.search(new RegExp(q.value, 'i')) !== -1
})
})
function onEdit(member: Member) {
selectedMember.value = member
editOpen.value = true
}
function onInviteClick() {
if (!canInvite.value) {
toast.add({
title: t('permission.toast.title'),
description: t(getDeniedReason('/settings/members', 'members.invite')),
icon: 'i-lucide-shield-alert',
color: 'warning'
})
return
}
inviteOpen.value = true
}
async function onMembersChanged() {
await refreshMembers()
}
</script>
<template>
<div>
<UPageCard
:title="t('settings.members.title')"
:description="t('settings.members.description')"
variant="naked"
orientation="horizontal"
class="mb-4"
>
<UButton
:label="t('common.invitePeople')"
color="neutral"
class="w-fit lg:ms-auto"
:disabled="!canInvite"
@click="onInviteClick"
/>
</UPageCard>
<UPageCard variant="subtle" :ui="{ container: 'p-0 sm:p-0 gap-y-0', wrapper: 'items-stretch', header: 'p-4 mb-0 border-b border-default' }">
<template #header>
<UInput
v-model="q"
icon="i-lucide-search"
:placeholder="t('settings.members.searchPlaceholder')"
autofocus
class="w-full"
/>
</template>
<SettingsMembersList :members="filteredMembers" @updated="onMembersChanged" @edit="onEdit" />
</UPageCard>
<SettingsMemberProfileModal
v-model="inviteOpen"
mode="create"
:can-submit="canInvite"
permission-key="members.invite"
permission-page="/settings/members"
@submitted="onMembersChanged"
/>
<SettingsMemberProfileModal
v-model="editOpen"
mode="edit"
:member="selectedMember"
:can-submit="can('/settings/members', 'members.edit')"
permission-key="members.edit"
permission-page="/settings/members"
@submitted="onMembersChanged"
/>
</div>
</template>