feat: enhance party user schema with company, status, role and verification fields, update seeding and frontend form

03_source/frontend/src/sections/party-user/party-user-new-edit-form.tsx

@@ -11,7 +11,7 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { isValidPhoneNumber } from 'react-phone-number-input/input';
-import { createUser, deletePartyUser, saveUser } from 'src/actions/party-user';
+import { createUser, deletePartyUser, updatePartyUser } from 'src/actions/party-user';
 import { Field, Form, schemaHelper } from 'src/components/hook-form';
 import { Label } from 'src/components/label';
 import { toast } from 'src/components/snackbar';
@@ -27,27 +27,30 @@ import { z as zod } from 'zod';
 export type NewUserSchemaType = zod.infer<typeof NewUserSchema>;
 
 export const NewUserSchema = zod.object({
-  name: zod.string().min(1, { message: 'Name is required!' }),
-  city: zod.string().min(1, { message: 'City is required!' }),
+  name: zod.string().min(1, { message: 'Name is required!' }).optional().or(zod.literal('')),
+  city: zod.string().min(1, { message: 'City is required!' }).optional().or(zod.literal('')),
   role: zod.string().min(1, { message: 'Role is required!' }),
   email: zod
     .string()
     .min(1, { message: 'Email is required!' })
     .email({ message: 'Email must be a valid email address!' }),
-  state: zod.string().min(1, { message: 'State is required!' }),
+  state: zod.string().min(1, { message: 'State is required!' }).optional().or(zod.literal('')),
   status: zod.string(),
-  address: zod.string().min(1, { message: 'Address is required!' }),
-  country: schemaHelper.nullableInput(zod.string().min(1, { message: 'Country is required!' }), {
-    // message for null value
-    message: 'Country is required!',
-  }),
-  zipCode: zod.string().min(1, { message: 'Zip code is required!' }),
-  company: zod.string().min(1, { message: 'Company is required!' }),
-  avatarUrl: schemaHelper.file({ message: 'Avatar is required!' }),
-  phoneNumber: schemaHelper.phoneNumber({ isValid: isValidPhoneNumber }),
-  isVerified: zod.boolean(),
-  username: zod.string(),
-  password: zod.string(),
+  address: zod.string().min(1, { message: 'Address is required!' }).optional().or(zod.literal('')),
+  country: schemaHelper
+    .nullableInput(zod.string().min(1, { message: 'Country is required!' }), {
+      // message for null value
+      message: 'Country is required!',
+    })
+    .optional()
+    .or(zod.literal('')),
+  zipCode: zod.string().min(1, { message: 'Zip code is required!' }).optional().or(zod.literal('')),
+  company: zod.string().min(1, { message: 'Company is required!' }).optional().or(zod.literal('')),
+  avatarUrl: zod.string().optional().or(zod.literal('')),
+  phoneNumber: zod.string().optional().or(zod.literal('')),
+  isVerified: zod.boolean().default(true),
+  username: zod.string().optional().or(zod.literal('')),
+  password: zod.string().optional().or(zod.literal('')),
 });
 
 // ----------------------------------------------------------------------
@@ -63,18 +66,19 @@ export function PartyUserNewEditForm({ currentUser }: Props) {
 
   const defaultValues: NewUserSchemaType = {
     status: '',
-    avatarUrl: null,
-    isVerified: true,
+    avatarUrl: '',
     name: '新用戶名字',
     email: 'user@123.com',
-    phoneNumber: '+85291234567',
-    country: 'Hong Kong',
-    state: 'HK',
-    city: 'hong kong',
-    address: 'Kwun Tong, Sau Mau Ping',
-    zipCode: '00000',
-    company: 'test company',
+    phoneNumber: '',
+    country: '',
+    state: '',
+    city: '',
+    address: '',
+    zipCode: '',
+    company: '',
     role: 'user',
+    // Email is verified
+    isVerified: true,
     //
     username: '',
     password: '',
@@ -123,12 +127,14 @@ export function PartyUserNewEditForm({ currentUser }: Props) {
         data.avatarUrl = await fileToBase64(temp);
       }
 
+      const sanitizedValues: IPartyUserItem = values as unknown as IPartyUserItem;
+
       if (currentUser) {
-        // perform save
-        await saveUser(currentUser.id, data);
+        // perform
+        await updatePartyUser(sanitizedValues);
       } else {
         // perform create
-        await createUser(data);
+        await createUser(sanitizedValues);
       }
 
       toast.success(currentUser ? t('Update success!') : t('Create success!'));
@@ -260,6 +266,9 @@ export function PartyUserNewEditForm({ currentUser }: Props) {
                 gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(2, 1fr)' },
               }}
             >
+              <Field.Text name="username" label={t('username')} />
+              <Field.Text name="password" label={t('password')} />
+
               <Field.Text name="name" label={t('Full name')} />
               <Field.Text name="email" label={t('Email address')} />
               <Field.Phone name="phoneNumber" label={t('Phone number')} country="HK" />
@@ -274,19 +283,20 @@ export function PartyUserNewEditForm({ currentUser }: Props) {
               <Field.Text name="state" label={t('State/region')} />
               <Field.Text name="city" label={t('City')} />
               <Field.Text name="address" label={t('Address')} />
-              <Field.Text name="zipCode" label={t('Zip/code')} />
+              <Field.Text name="zipCode" label={t('Zip/code')} required={false} />
               <Field.Text name="company" label={t('Company')} />
               <Field.Text name="role" label={t('Role')} />
             </Box>
 
             <Stack sx={{ mt: 3, alignItems: 'flex-end' }}>
+              <>{JSON.stringify({ errors })}</>
               <Button
                 disabled={isSubmitting}
                 loading={isSubmitting}
                 type="submit"
                 variant="contained"
               >
-                {!currentUser ? t('Create user') : t('Save changes')}
+                {!currentUser ? t('create-user') : t('save-changes')}
               </Button>
             </Stack>
           </Card>