refac: role update ui

src/lib/apis/users/index.ts

@@ -393,6 +393,7 @@ export const updateUserById = async (token: string, userId: string, user: UserUp
 		},
 		body: JSON.stringify({
 			profile_image_url: user.profile_image_url,
+			role: user.role,
 			email: user.email,
 			name: user.name,
 			password: user.password !== '' ? user.password : undefined

src/lib/components/admin/Users/UserList.svelte

@@ -52,27 +52,6 @@
 
 	let showUserChatsModal = false;
 	let showEditUserModal = false;
-	let showUpdateRoleModal = false;
-
-	const onUpdateRole = (user) => {
-		if (user.role === 'user') {
-			updateRoleHandler(user.id, 'admin');
-		} else if (user.role === 'pending') {
-			updateRoleHandler(user.id, 'user');
-		} else {
-			updateRoleHandler(user.id, 'pending');
-		}
-	};
-	const updateRoleHandler = async (id, role) => {
-		const res = await updateUserRole(localStorage.token, id, role).catch((error) => {
-			toast.error(`${error}`);
-			return null;
-		});
-
-		if (res) {
-			getUserList();
-		}
-	};
 
 	const deleteUserHandler = async (id) => {
 		const res = await deleteUserById(localStorage.token, id).catch((error) => {
@@ -133,21 +112,6 @@
 	}}
 />
 
-<RoleUpdateConfirmDialog
-	bind:show={showUpdateRoleModal}
-	on:confirm={() => {
-		onUpdateRole(selectedUser);
-	}}
-	message={$i18n.t(`Are you sure you want to update this user\'s role to **{{ROLE}}**?`, {
-		ROLE:
-			selectedUser?.role === 'user'
-				? 'admin'
-				: selectedUser?.role === 'pending'
-					? 'user'
-					: 'pending'
-	})}
-/>
-
 {#key selectedUser}
 	<EditUserModal
 		bind:show={showEditUserModal}
@@ -415,7 +379,7 @@
 								class=" translate-y-0.5"
 								on:click={() => {
 									selectedUser = user;
-									showUpdateRoleModal = true;
+									showEditUserModal = !showEditUserModal;
 								}}
 							>
 								<Badge

src/lib/components/admin/Users/UserList/EditUserModal.svelte

@@ -19,6 +19,7 @@
 
 	let _user = {
 		profile_image_url: '',
+		role: 'pending',
 		name: '',
 		email: '',
 		password: ''
@@ -95,6 +96,23 @@
 
 					<div class=" px-5 pt-3 pb-5">
 						<div class=" flex flex-col space-y-1.5">
+							<div class="flex flex-col w-full">
+								<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Role')}</div>
+
+								<div class="flex-1">
+									<select
+										class="w-full rounded-sm text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
+										bind:value={_user.role}
+										disabled={_user.id == sessionUser.id}
+										required
+									>
+										<option value="admin">{$i18n.t('Admin')}</option>
+										<option value="user">{$i18n.t('User')}</option>
+										<option value="pending">{$i18n.t('Pending')}</option>
+									</select>
+								</div>
+							</div>
+
 							<div class="flex flex-col w-full">
 								<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Email')}</div>