Merge branch 'hot-fix/master-data-flock' into 'development'

[FIX/FE] Show server error message

See merge request mbugroup/lti-web-client!199

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -33,22 +33,6 @@ const RowsOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <RequirePermission permissions='lti.master.flocks.update'>
-        <Button
-          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-          variant='ghost'
-          color='warning'
-          className='justify-start text-sm'
-        >
-          <Icon
-            icon='material-symbols:edit-outline'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Edit
-        </Button>
-      </RequirePermission>
       <RequirePermission permissions='lti.master.flocks.detail'>
         <Button
           href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
@@ -65,6 +49,22 @@ const RowsOptions = ({
           Detail
         </Button>
       </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.update'>
+        <Button
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
       <RequirePermission permissions='lti.master.flocks.delete'>
         <Button
           onClick={deleteClickHandler}

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -19,6 +19,8 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { toast } from 'react-hot-toast';
+import Alert from '@/components/Alert';
 
 interface FlockCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -37,7 +39,13 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await FlockApi.delete(initialValues?.id as number);
+    const deleteFlockRes = await FlockApi.delete(initialValues?.id as number);
+    if (deleteFlockRes?.status === 'error') {
+      setFlockFormErrorMessage(deleteFlockRes.message);
+      return;
+    }
+
+    toast.success(deleteFlockRes?.message as string);
 
     deleteModal.closeModal();
     setIsDeleteLoading(false);
@@ -68,12 +76,29 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
 
       // cek type form yang disubmit
       switch (formType) {
-        case 'add':
-          await FlockApi.create(payload);
+        case 'add': {
+          const createFlockRes = await FlockApi.create(payload);
+          if (createFlockRes?.status === 'error') {
+            setFlockFormErrorMessage(createFlockRes.message);
+            return;
+          }
+
+          toast.success(createFlockRes?.message as string);
           break;
-        case 'edit':
-          await FlockApi.update(initialValues?.id as number, payload);
+        }
+        case 'edit': {
+          const updateFlockRes = await FlockApi.update(
+            initialValues?.id as number,
+            payload
+          );
+          if (updateFlockRes?.status === 'error') {
+            setFlockFormErrorMessage(updateFlockRes.message);
+            return;
+          }
+
+          toast.success(updateFlockRes?.message as string);
           break;
+        }
         default:
           break;
       }
@@ -174,6 +199,24 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
             )}
 
             <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            {flockFormErrorMessage && (
+              <Alert color='error' className='w-full'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                {flockFormErrorMessage}
+                <Button
+                  onClick={() => setFlockFormErrorMessage('')}
+                  variant='link'
+                  className='ml-auto p-0 w-fit text-white'
+                  color='none'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                </Button>
+              </Alert>
+            )}
 
             {formType !== 'detail' && (
               <div
@@ -197,17 +240,6 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
               </div>
             )}
           </div>
-
-          {flockFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{flockFormErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>