feat: Add change group option in edit user dialog AdminCP

apps/frontend/src/plugins/admin/langs/en.json

@@ -589,6 +589,7 @@
           },
           "edit": {
             "title": "Edit User",
+            "group": "Group",
             "success": "User has been updated."
           },
           "delete": {

packages/backend/src/core/admin/members/users/services/edit.service.ts

@@ -23,7 +23,7 @@ export class EditUsersMembersAdminService {
 
   async edit({
     id,
-    body: { email, name, newsletter },
+    body: { email, name, newsletter, group_id },
   }: {
     body: EditUserMembersAdminBody;
     id: number;
@@ -39,6 +39,17 @@ export class EditUsersMembersAdminService {
       throw new NotFoundException();
     }
 
+    const group = await this.databaseService.db.query.core_groups.findFirst({
+      where: (table, { eq }) => eq(table.id, group_id),
+      columns: {
+        id: true,
+      },
+    });
+
+    if (!group) {
+      throw new NotFoundException('GROUP_NOT_FOUND');
+    }
+
     const emailExists =
       await this.databaseService.db.query.core_users.findFirst({
         where: (table, { eq }) => eq(table.email, email),
@@ -55,6 +66,7 @@ export class EditUsersMembersAdminService {
         name,
         newsletter,
         avatar_color: generateAvatarColor(name),
+        group_id,
       })
       .where(eq(core_users.id, id))
       .returning();

packages/frontend/src/components/form/fields/combobox.tsx

@@ -118,7 +118,7 @@ export function AutoFormCombobox({
       return;
     }
 
-    field.onChange(findKey ? [] : [{ key, value }]);
+    field.onChange(findKey && !isRequired ? [] : [{ key, value }]);
     setOpen(false);
   };
 

packages/frontend/src/views/admin/views/members/user/actions/edit/edit.tsx

@@ -1,7 +1,11 @@
+import { getGroupsShortApi } from '@/api/get-groups-short-api';
 import { AutoForm } from '@/components/form/auto-form';
 import { AutoFormCheckbox } from '@/components/form/fields/checkbox';
+import { AutoFormCombobox } from '@/components/form/fields/combobox';
 import { AutoFormInput } from '@/components/form/fields/input';
 import { useDialog } from '@/components/ui/dialog';
+import { GroupFormat } from '@/components/ui/user/group-format';
+import { zodComboBoxWithFetcher } from '@/helpers/zod';
 import { nameRegex } from '@/hooks/sign/up/use-sign-up-view';
 import { useTranslations } from 'next-intl';
 import { UseFormReturn } from 'react-hook-form';
@@ -16,7 +20,11 @@ export const EditActionUserMembersAdmin = ({
   email,
   newsletter,
   id,
-}: Pick<UserMembersAdmin, 'email' | 'id' | 'name' | 'newsletter'>) => {
+  group,
+}: Pick<
+  UserMembersAdmin,
+  'email' | 'group' | 'id' | 'name' | 'newsletter'
+>) => {
   const t = useTranslations('admin.members.users.item.edit');
   const tSignUp = useTranslations('core.sign_up');
   const tCore = useTranslations('core.global.errors');
@@ -42,6 +50,12 @@ export const EditActionUserMembersAdmin = ({
       })
       .default(email),
     newsletter: z.boolean().default(newsletter).optional(),
+    group: zodComboBoxWithFetcher.default([
+      {
+        key: group.id.toString(),
+        value: group.name,
+      },
+    ]),
   });
 
   const onSubmit = async (
@@ -52,6 +66,7 @@ export const EditActionUserMembersAdmin = ({
       await mutationApi({
         id,
         ...values,
+        group_id: +values.group[0].key,
       });
 
       setOpen?.(false);
@@ -72,26 +87,53 @@ export const EditActionUserMembersAdmin = ({
         description: tCore('internal_server_error'),
       });
     }
-
-    // const mutation = await mutationApi({
-    //   id,
-    //   ...values,
-    //   newsletter: values.newsletter ?? false,
-    // });
   };
 
   return (
     <AutoForm
       fields={[
         {
           id: 'name',
+          label: tSignUp('name.label'),
           component: AutoFormInput,
           description: tSignUp('name.desc'),
         },
         {
           id: 'email',
-          component: props => <AutoFormInput {...props} type="email" />,
           label: tSignUp('email.label'),
+          component: props => <AutoFormInput {...props} type="email" />,
+        },
+        {
+          id: 'group',
+          label: t('group'),
+          component: props => (
+            <AutoFormCombobox
+              {...props}
+              withFetcher={{
+                queryKey: 'groups_short_api',
+                search: true,
+                queryFn: async ({ search }) => {
+                  try {
+                    const mutation = await getGroupsShortApi({ search });
+
+                    return (mutation.edges ?? [])
+                      .filter(item => !item.guest)
+                      .map(item => ({
+                        key: item.id.toString(),
+                        value: item.name,
+                        valueWithFormatting: <GroupFormat group={item} />,
+                      }));
+                  } catch (_) {
+                    toast.error(tCore('title'), {
+                      description: tCore('internal_server_error'),
+                    });
+
+                    return [];
+                  }
+                },
+              }}
+            />
+          ),
         },
         {
           id: 'newsletter',

packages/shared/src/admin/members/users.dto.ts

@@ -5,10 +5,12 @@ import {
   IsBoolean,
   IsEmail,
   IsEnum,
+  IsNumber,
   IsOptional,
   IsString,
   Matches,
   MaxLength,
+  Min,
   MinLength,
 } from 'class-validator';
 
@@ -69,6 +71,11 @@ export class EditUserMembersAdminBody {
   @ApiProperty({ example: '[email protected]' })
   email: string;
 
+  @ApiProperty({ example: 2 })
+  @IsNumber()
+  @Min(1)
+  group_id: number;
+
   @Transform(TransformString)
   @MinLength(3)
   @MaxLength(32)