add the Manage Notifications page and handle the create notification form

2025-02-25 14:27:54 +07:00
parent 754c67a6d2
commit 5c6feb8ab5
5 changed files with 370 additions and 5 deletions
--- a/src/pages/notification/blocks/AddDialog.tsx
+++ b/src/pages/notification/blocks/AddDialog.tsx
@ -0,0 +1,147 @@
+import { apiConfig } from '@/config/api.config';
+import { useRef, useState } from 'react';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { useCallApi } from '@/hooks';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
+
+const API_URL = apiConfig.service_dashboard;
+
+const AddDialog = () => {
+  const parentRef = useRef<any | null>(null);
+  const {
+    handleAddDialog,
+    handleEditDialog,
+    showAddDialog,
+    showEditDialog,
+    selectedNotification,
+    notifications
+  } = useManageNotificationContext();
+
+  const { reload } = useDataGrid();
+  const { PostData, PutData } = useCallApi();
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const initialState = {
+    name: '',
+    destination_module: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (formField.name === '' || formField.destination_module === '') {
+      setAlert({ show: true, message: 'Please fill in all required fields.' });
+      return;
+    }
+    console.log(formField);
+    setAlert({ show: false, message: '' });
+  };
+
+  const handleReset = () => {
+    setFormField(initialState);
+  };
+
+  return (
+    <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
+      <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
+        <DialogHeader className="p-5 border-0">
+          <div className="flex items-center justify-between flex-wrap grow">
+            <div className="flex flex-col justify-center">
+              <h1 className="text-xl font-semibold leading-none text-gray-900">
+                Create Notification
+              </h1>
+              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
+            </div>
+            <div
+              className="cursor-pointer hover:opacity-100 opacity-50"
+              onClick={() => {
+                handleAddDialog(false);
+                resetForm();
+              }}
+            >
+              <KeenIcon icon="cross" className="text-1.5xl" />
+            </div>
+          </div>
+        </DialogHeader>
+        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+          <div className="flex flex-col px-0">
+            {alert.show && (
+              <Alert variant="danger" className="mb-5">
+                {alert.message}
+              </Alert>
+            )}
+            <form action="" onSubmit={handleSubmit}>
+              <div className="card-body grid gap-5 p-0">
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Name<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.name}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, name: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Destination Module<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      className="input"
+                      type="text"
+                      autoComplete="off"
+                      value={formField.destination_module}
+                      onChange={({ target }) =>
+                        setFormField((prev) => ({ ...prev, destination_module: target.value }))
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button variant={'outline'} type="reset" onClick={handleReset}>
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit">
+                    Save Changes
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddDialog;