Skip to content

Commit 9cf0f08

Browse files
imrim12imrim12
committed
feat: edit user drawer
1 parent bd59950 commit 9cf0f08

File tree

7 files changed

+147
-281
lines changed

7 files changed

+147
-281
lines changed

‎app/components/permissions/AddEditPermissionDialog.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
22
import type { sysPermissionTable } from '@base/server/db/schemas/sys_permissions.schema'
33
import type { InferSelectModel } from 'drizzle-orm'
4-
import { requiredValidator } from '#imports'
54
import { PermissionAction, PermissionScope } from '@base/server/db/schemas'
65
import { cloneDeep } from 'lodash-es'
6+
import { requiredValidator } from '#imports'
77
88
type Permission = InferSelectModel<typeof sysPermissionTable>
99

‎app/components/users/UserBioPanel.vue

+32-80
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
11
<script setup lang="ts">
2-
import { avatarText, kFormatter } from '#imports'
3-
import type { UserWithRoles } from '~/stores/admin/user'
2+
import { type User, type UserWithRoles, useUserStore } from '@base/stores/admin/user'
3+
import UserDrawer from './UserDrawer.vue'
4+
import { avatarText } from '#imports'
45
56
defineProps<{
67
user: UserWithRoles
78
}>()
89
9-
const standardPlan = {
10-
plan: 'Standard',
11-
price: 99,
12-
benefits: ['10 Users', 'Up to 10GB storage', 'Basic Support'],
13-
}
14-
1510
const isUserInfoEditDialogVisible = ref(false)
1611
const isUpgradePlanDialogVisible = ref(false)
1712
18-
// 👉 Role variant resolver
19-
function resolveUserRoleVariant(role: string) {
20-
if (role === 'subscriber')
21-
return { color: 'primary', icon: 'ri-user-line' }
22-
if (role === 'author')
23-
return { color: 'warning', icon: 'ri-settings-2-line' }
24-
if (role === 'maintainer')
25-
return { color: 'success', icon: 'ri-database-2-line' }
26-
if (role === 'editor')
27-
return { color: 'info', icon: 'ri-pencil-line' }
28-
if (role === 'admin')
29-
return { color: 'error', icon: 'ri-server-line' }
30-
31-
return { color: 'primary', icon: 'ri-user-line' }
13+
const route = useRoute('admin-users-id')
14+
15+
const userStore = useUserStore()
16+
17+
async function handleSubmitEdit(payload: Partial<User>) {
18+
await userStore.updateUser(route.params.id, payload)
3219
}
3320
</script>
3421

@@ -62,14 +49,9 @@ function resolveUserRoleVariant(role: string) {
6249
{{ user.full_name }}
6350
</h5>
6451

65-
<!-- 👉 Role chip -->
66-
<VChip
67-
:color="resolveUserRoleVariant(user.roles[0]?.role.name || '').color"
68-
size="small"
69-
class="text-capitalize mt-4"
70-
>
71-
{{ user.roles[0]?.role.name || '' }}
72-
</VChip>
52+
<h6 class="text-body-1">
53+
{{ user.email }}
54+
</h6>
7355
</VCardText>
7456

7557
<VCardText class="d-flex justify-center flex-wrap gap-6 pb-6">
@@ -88,12 +70,9 @@ function resolveUserRoleVariant(role: string) {
8870
/>
8971
</VAvatar>
9072

91-
<div>
92-
<h5 class="text-h5">
93-
{{ kFormatter(456) }}
94-
</h5>
95-
<span>Task Done</span>
96-
</div>
73+
<h5 class="text-h5">
74+
{{ $t('Verified') }}
75+
</h5>
9776
</div>
9877

9978
<!-- 👉 Done Project -->
@@ -107,67 +86,48 @@ function resolveUserRoleVariant(role: string) {
10786
>
10887
<VIcon
10988
size="24"
110-
icon="ri-briefcase-line"
89+
icon="ri-shield-user-line"
11190
/>
11291
</VAvatar>
11392

114-
<div>
115-
<h5 class="text-h5">
116-
{{ kFormatter(123) }}
117-
</h5>
118-
<span>Project Done</span>
119-
</div>
93+
<h5 class="text-h5">
94+
{{ user.roles[0]?.role.name || $t('No role') }}
95+
</h5>
12096
</div>
12197
</VCardText>
12298

12399
<!-- 👉 Details -->
124100
<VCardText class="pb-6">
125-
<h5 class="text-h5">
126-
Details
127-
</h5>
128-
129-
<VDivider class="my-4" />
130-
131-
<!-- 👉 User Details list -->
132101
<VList class="card-list">
133102
<VListItem>
134103
<VListItemTitle class="text-sm">
135-
<span class="font-weight-medium">Phone:</span>
104+
<span class="font-weight-medium">{{ $t('Phone') }}:</span>
136105
<span class="text-body-1">
137-
+{{ user.phone }}
138-
</span>
139-
</VListItemTitle>
140-
</VListItem>
141-
142-
<VListItem>
143-
<VListItemTitle class="text-sm">
144-
<span class="font-weight-medium">
145-
Billing Email:
106+
{{ user.phone }}
146107
</span>
147-
<span class="text-body-1">{{ user.email }}</span>
148108
</VListItemTitle>
149109
</VListItem>
150110

151111
<VListItem>
152112
<VListItemTitle class="text-sm">
153113
<span class="font-weight-medium">
154-
Status:
114+
{{ $t('Status') }}:
155115
</span>
156116
<span class="text-body-1 text-capitalize">{{ user.status }}</span>
157117
</VListItemTitle>
158118
</VListItem>
159119

160120
<VListItem>
161121
<VListItemTitle class="text-sm">
162-
<span class="font-weight-medium">Role: </span>
122+
<span class="font-weight-medium">{{ $t('Role') }}: </span>
163123
<span class="text-capitalize text-body-1">{{ user.roles[0]?.role.name || '' }}</span>
164124
</VListItemTitle>
165125
</VListItem>
166126

167127
<VListItem>
168128
<VListItemTitle class="text-sm">
169129
<span class="font-weight-medium">
170-
Country:
130+
{{ $t('Country') }}:
171131
</span>
172132
<span class="text-body-1">
173133
{{ user.country }}
@@ -178,7 +138,7 @@ function resolveUserRoleVariant(role: string) {
178138
<VListItem>
179139
<VListItemTitle class="text-sm">
180140
<span class="font-weight-medium">
181-
ZIP Code:
141+
{{ $t('ZIP Code') }}:
182142
</span>
183143
<span class="text-body-1">{{ user.postcode }}</span>
184144
</VListItemTitle>
@@ -187,20 +147,11 @@ function resolveUserRoleVariant(role: string) {
187147
<VListItem>
188148
<VListItemTitle class="text-sm">
189149
<span class="font-weight-medium">
190-
Language:
150+
{{ $t('Language') }}:
191151
</span>
192152
<span class="text-body-1">{{ user.language }}</span>
193153
</VListItemTitle>
194154
</VListItem>
195-
196-
<VListItem>
197-
<VListItemTitle class="text-sm">
198-
<span class="font-weight-medium">
199-
Country:
200-
</span>
201-
<span class="text-body-1">{{ user.country }}</span>
202-
</VListItemTitle>
203-
</VListItem>
204155
</VList>
205156
</VCardText>
206157

@@ -211,23 +162,24 @@ function resolveUserRoleVariant(role: string) {
211162
class="me-4"
212163
@click="isUserInfoEditDialogVisible = true"
213164
>
214-
Edit
165+
{{ $t('Edit') }}
215166
</VBtn>
216167
<VBtn
217168
variant="outlined"
218169
color="error"
219170
>
220-
Suspend
171+
{{ $t('Suspend') }}
221172
</VBtn>
222173
</VCardText>
223174
</VCard>
224175
</VCol>
225176
</VRow>
226177

227178
<!-- 👉 Edit user info dialog -->
228-
<UserInfoEditDialog
229-
v-model:is-dialog-visible="isUserInfoEditDialogVisible"
230-
:user-data="user"
179+
<UserDrawer
180+
v-model="isUserInfoEditDialogVisible"
181+
:user="user"
182+
@edit="handleSubmitEdit"
231183
/>
232184

233185
<!-- 👉 Upgrade plan dialog -->

0 commit comments

Comments
 (0)