fix alert empty validation on currency module

2025-05-08 11:23:13 +07:00
parent 789a275e10
commit 87f716d469
4 changed files with 172 additions and 141 deletions
--- a/src/pages/master/currency/blocks/AddDialog.tsx
+++ b/src/pages/master/currency/blocks/AddDialog.tsx
@ -15,16 +15,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
-import { set } from 'date-fns';
 import {
  Select,
  SelectContent,
@ -33,9 +23,9 @@ import {
  SelectValue
 } from '@/components/ui/select';
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
-import { prefix } from 'stylis';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
+import { initialStateCurrency, validateFormCurrency } from './Types';
 interface CurrencyProps {
  ID: string;
  name: string;
@ -50,27 +40,15 @@ const AddDialog = () => {
  const { PostData, GetData } = useCallApi();
  const parsedUser = getAuth()?.user;
  const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
-  const [open, setOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    code: '',
-    name: '',
-    prefix: '',
-    status: '',
-    created_by: '',
-    created_at: ''
-  };
-  const [formField, setFormField] = useState(initialState);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [formField, setFormField] = useState(initialStateCurrency);
  const created_time = new Date();
  const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');

  const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setFormField(initialStateCurrency);
+    setErrors({});
  };

  const doCreateCurrency = useCallback(
@ -94,8 +72,7 @@ const AddDialog = () => {
          doSaveLogActivity(createActivity);
          reload();
        } else {
-          toast.error('Error Create Currency');
-          setAlert({ show: true, message: response?.message });
+          toast.error(response?.message);
        }
      } catch (error) {
        toast.error('Something went wrong');
@ -109,19 +86,11 @@ const AddDialog = () => {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

-    if (
-      formField.code === '' ||
-      formField.name === '' ||
-      formField.prefix === '' ||
-      formField.status === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
+    if (!validateFormCurrency(formField, setErrors)) {
      return;
    }

    doCreateCurrency(e);
-    // console.log(formField);
-    setAlert({ show: false, message: '' });
  };

  useEffect(() => {
@ -144,17 +113,11 @@ const AddDialog = () => {
    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
        <DialogHeader>
-          <DialogTitle>Cuurency - Create</DialogTitle>
+          <DialogTitle>Currency - Create</DialogTitle>
          <DialogDescription></DialogDescription>
        </DialogHeader>
        <DialogBody ref={parentRef}>
          <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
            <form onSubmit={handleSubmit}>
              <div className="card-body grid gap-5">
                <div className="grid grid-cols-8 gap-2 w-full items-center">
@ -167,10 +130,16 @@ const AddDialog = () => {
                    type="text"
                    autoComplete="off"
                    value={formField.code}
-                    onChange={({ target }) =>
-                      setFormField((prev) => ({ ...prev, code: target.value }))
-                    }
+                    onChange={({ target }) => {
+                      setFormField((prev) => ({ ...prev, code: target.value }));
+                      setErrors((prev) => ({ ...prev, code: '' }));
+                    }}
                  />
+                  {errors.code && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.code}
+                    </span>
+                  )}
                </div>
                <div className="grid grid-cols-8 gap-2 w-full items-center">
                  <label className="form-label flex items-center gap-1 col-span-2">
@ -182,10 +151,16 @@ const AddDialog = () => {
                    type="text"
                    autoComplete="off"
                    value={formField.name}
-                    onChange={({ target }) =>
-                      setFormField((prev) => ({ ...prev, name: target.value }))
-                    }
+                    onChange={({ target }) => {
+                      setFormField((prev) => ({ ...prev, name: target.value }));
+                      setErrors((prev) => ({ ...prev, name: '' }));
+                    }}
                  />
+                  {errors.name && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.name}
+                    </span>
+                  )}
                </div>
                <div className="grid grid-cols-8 gap-2 w-full items-center">
                  <label className="form-label flex items-center gap-1 col-span-2">
@ -197,10 +172,16 @@ const AddDialog = () => {
                    type="text"
                    autoComplete="off"
                    value={formField.prefix}
-                    onChange={({ target }) =>
-                      setFormField((prev) => ({ ...prev, prefix: target.value }))
-                    }
+                    onChange={({ target }) => {
+                      setFormField((prev) => ({ ...prev, prefix: target.value }));
+                      setErrors((prev) => ({ ...prev, prefix: '' }));
+                    }}
                  />
+                  {errors.prefix && (
+                    <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                      {errors.prefix}
+                    </span>
+                  )}
                </div>

                <div className="grid grid-cols-8 gap-2 w-full items-center">
@ -211,11 +192,12 @@ const AddDialog = () => {
                  <div className="col-span-6">
                    <Select
                      value={formField.status}
-                      onValueChange={(value) =>
-                        setFormField((prev) => ({ ...prev, status: value }))
-                      }
+                      onValueChange={(value) => {
+                        setFormField((prev) => ({ ...prev, status: value }));
+                        setErrors((prev) => ({ ...prev, status: '' }));
+                      }}
                    >
-                      <SelectTrigger className="w-full">
+                      <SelectTrigger className={`w-full ${errors.status && 'border-red-500'}`}>
                        <SelectValue placeholder="Select" />
                      </SelectTrigger>
                      <SelectContent>
@ -223,12 +205,12 @@ const AddDialog = () => {
                        <SelectItem value="N">Inactive</SelectItem>
                      </SelectContent>
                    </Select>
+                    {errors.status && (
+                      <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                    )}
                  </div>
                </div>
                <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
                  <Button variant="default" type="submit" disabled={isSubmitting}>
                    {isSubmitting ? (
                      <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
--- a/src/pages/master/currency/blocks/EditDialog.tsx
+++ b/src/pages/master/currency/blocks/EditDialog.tsx
@ -15,16 +15,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { NumericFormat } from 'react-number-format';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@/components/ui/command';
-import { set } from 'date-fns';
 import {
  Select,
  SelectContent,
@ -35,6 +25,7 @@ import {
 import { useManageCurrencyContext } from '../hooks/useManageCurrencyContext';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
+import { initialStateCurrency, validateFormCurrency } from './Types';
 interface CurrencyProps {
  ID: string;
  name: string;
@ -49,28 +40,16 @@ const EditDialog = () => {
  const { PostData, GetData, PutData } = useCallApi();
  const parsedUser = getAuth()?.user;
  const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
-  const [open, setOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
-  const [alert, setAlert] = useState({
-    show: false,
-    message: ''
-  });
-  const initialState = {
-    code: '',
-    name: '',
-    prefix: '',
-    status: '',
-    created_by: '',
-    created_at: ''
-  };
-  const [formField, setFormField] = useState(initialState);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [formField, setFormField] = useState(initialStateCurrency);
  const updated_time = new Date();
  const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');

  const resetForm = () => {
-    setFormField(initialState);
-    setAlert({ show: false, message: '' });
+    setFormField(initialStateCurrency);
+    setErrors({});
  };

  const doUpdateCurrency = useCallback(
@ -78,6 +57,11 @@ const EditDialog = () => {
      e.preventDefault();
      setIsSubmitting(true);

+      if (!validateFormCurrency(formField, setErrors)) {
+        setIsSubmitting(false);
+        return;
+      }
+
      try {
        const response = await PutData(
          `${API_URL}/dashboard/currency/${selectedCurrency}`,
@ -97,8 +81,7 @@ const EditDialog = () => {
          doSaveLogActivity(createActivity);
          reload();
        } else {
-          toast.error('Error Create Currency');
-          setAlert({ show: true, message: response?.message });
+          toast.error(response?.message);
        }
      } catch (error) {
        toast.error('Something went wrong');
@ -115,7 +98,6 @@ const EditDialog = () => {
    const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id });
    const [response] = await Promise.all([fetchData, minDelay]);

-    // console.log('Transaction Type: ', response?.data);
    if (response?.status) {
      setFormField((prev) => ({
        ...prev,
@ -126,7 +108,6 @@ const EditDialog = () => {
      }));
    }
    setIsLoading(false);
-    // console.log('form fieldd Transaction Type: ', formField);
  }, []);

  useEffect(() => {
@ -160,12 +141,6 @@ const EditDialog = () => {
        </DialogHeader>
        <DialogBody ref={parentRef}>
          <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
            {isLoading ? (
              <div className="flex flex-col items-center justify-center p-8">
                <div className="animate-pulse flex space-x-4 w-full">
@ -182,74 +157,102 @@ const EditDialog = () => {
            ) : (
              <form onSubmit={doUpdateCurrency}>
                <div className="card-body grid gap-5">
-                  <div className="w-full">
-                    <label className="form-label">
-                      Code
-                      <span className="text-red-500">*</span>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Code<span className="text-red-500">*</span>
                    </label>
+
                    <Input
+                      className="input col-span-6"
                      type="text"
-                      placeholder="Code"
+                      autoComplete="off"
                      value={formField.code}
-                      onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, code: target.value }));
+                        setErrors((prev) => ({ ...prev, code: '' }));
+                      }}
                    />
+                    {errors.code && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.code}
+                      </span>
+                    )}
                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Name
-                      <span className="text-red-500">*</span>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Name<span className="text-red-500">*</span>
                    </label>
+
                    <Input
+                      className="input col-span-6"
                      type="text"
-                      placeholder="Code"
+                      autoComplete="off"
                      value={formField.name}
-                      onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, name: target.value }));
+                        setErrors((prev) => ({ ...prev, name: '' }));
+                      }}
                    />
+                    {errors.name && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.name}
+                      </span>
+                    )}
                  </div>
-
-                  <div className="w-full">
-                    <label className="form-label">
-                      Prefix
-                      <span className="text-red-500">*</span>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Prefix<span className="text-red-500">*</span>
                    </label>
+
                    <Input
+                      className="input col-span-6"
                      type="text"
-                      placeholder="Code"
+                      autoComplete="off"
                      value={formField.prefix}
-                      onChange={(e) =>
-                        setFormField((prev) => ({ ...prev, prefix: e.target.value }))
-                      }
+                      onChange={({ target }) => {
+                        setFormField((prev) => ({ ...prev, prefix: target.value }));
+                        setErrors((prev) => ({ ...prev, prefix: '' }));
+                      }}
                    />
+                    {errors.prefix && (
+                      <span className="text-red-500 text-xs mt-1 col-span-8 ml-[calc(25%+0.5rem)]">
+                        {errors.prefix}
+                      </span>
+                    )}
                  </div>

-                  <div className="w-full">
-                    <label className="form-label">
-                      Status
-                      <span className="text-red-500">*</span>
+                  <div className="grid grid-cols-8 gap-2 w-full items-center">
+                    <label className="form-label flex items-center gap-1 col-span-2">
+                      Status<span className="text-red-500">*</span>
                    </label>

-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) =>
-                        setFormField((prev) => ({ ...prev, status: value }))
-                      }
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue placeholder="Select" defaultValue={formField.status} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
+                    <div className="col-span-6">
+                      <Select
+                        value={formField.status}
+                        onValueChange={(value) => {
+                          setFormField((prev) => ({ ...prev, status: value }));
+                          setErrors((prev) => ({ ...prev, status: '' }));
+                        }}
+                      >
+                        <SelectTrigger className={`w-full ${errors.status && 'border-red-500'}`}>
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="Y">Active</SelectItem>
+                          <SelectItem value="N">Inactive</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {errors.status && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                      )}
+                    </div>
                  </div>
-
                  <div className="flex justify-end gap-5">
                    <Button variant="default" type="submit" disabled={isSubmitting}>
                      {isSubmitting ? (
-                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
+                        <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
                      ) : (
-                        'Save Changes'
+                        'Create'
                      )}
                    </Button>
                  </div>
--- a/src/pages/master/currency/blocks/Types.ts
+++ b/src/pages/master/currency/blocks/Types.ts
@ -0,0 +1,47 @@
+import { toast } from 'sonner';
+
+export const initialStateCurrency: {
+  code: string;
+  name: string;
+  prefix: string;
+  status: string;
+  created_by: string;
+  created_at: string;
+} = {
+  code: '',
+  name: '',
+  prefix: '',
+  status: '',
+  created_by: '',
+  created_at: ''
+};
+
+export const validateFormCurrency = (
+  formField: typeof initialStateCurrency,
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>
+) => {
+  const requiredFields = [
+    { key: 'code', label: 'Code' },
+    { key: 'name', label: 'Name' },
+    { key: 'prefix', label: 'Prefix' },
+    { key: 'status', label: 'Status' }
+  ];
+
+  const newErrors: Record<string, string> = {};
+  let isValid = true;
+
+  requiredFields.forEach(({ key, label }) => {
+    if (
+      formField[key as keyof typeof formField] === '' ||
+      formField[key as keyof typeof formField] === null ||
+      formField[key as keyof typeof formField] === undefined
+    ) {
+      newErrors[key] = `${label} is required`;
+      toast.error(`${label} is required`);
+      isValid = false;
+    }
+  });
+
+  setErrors(newErrors);
+  return isValid;
+};
--- a/src/pages/master/currency/hooks/ManageCurrencyContext.tsx
+++ b/src/pages/master/currency/hooks/ManageCurrencyContext.tsx
@ -155,7 +155,6 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
      order_direction: sorting[0].desc ? 'ASC' : 'DESC'
      // filter: JSON.stringify(filter)
    });
-    // console.log(response?.data);
    return { data: response?.data.list, totalCount: response?.data.total_count };
  };

@ -181,7 +180,7 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
            pagination={{ size: 10 }}
            layout={{ card: true }}
            toolbar={<ListToolbar />}
-            sorting={[{ id: 'ID', desc: true }]}
+            sorting={[{ id: 'created_at', desc: false }]}
            serverSide={true}
            onFetchData={({ pageIndex, pageSize, sorting }) =>
              doGetCurrency(pageIndex, pageSize, sorting)