fix loading page, add delete edit manage menu, search manage user

2025-03-28 10:06:57 +07:00
parent 1200301479
commit e5844a9f2e
7 changed files with 150 additions and 83 deletions
--- a/src/components/data-grid/DataGridContext.tsx
+++ b/src/components/data-grid/DataGridContext.tsx
@ -181,6 +181,7 @@ export const DataGridProvider = <TData extends object>(props: TDataGridProps<TDa
        reload: loadData
      }}
    >
+      {loading && <div className="fixed inset-0 flex items-center justify-center z-50"></div>}
      {props.children ? props.children : <DataGridInner />}
    </DataGridContext.Provider>
  );
--- a/src/components/data-grid/DataGridLoader.tsx
+++ b/src/components/data-grid/DataGridLoader.tsx
@ -5,10 +5,10 @@ export const DataGridLoader = () => {
  const { props } = useDataGrid();

  return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+    <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-6 min-w-[160px] bg-card text-muted-foreground px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
      <div className="text-muted-foreground bg-card  flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border shadow-sm rounded-md">
        <svg
-          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground"
+          className="animate-spin -ml-1 h-5 w-5 text-muted-foreground flex-shrink-0"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
--- a/src/pages/menu/manage-menu/blocks/AddDIalog.tsx
+++ b/src/pages/menu/manage-menu/blocks/AddDIalog.tsx
@ -12,16 +12,22 @@ import {
  DialogHeader,
  DialogTitle
 } from '@/components/ui/dialog';
-import { FormControl,NativeSelect } from "@mui/material";
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';

 const API_URL = apiConfig.service_dashboard;
 const AddDialog = () => {
-  const parentRef = useRef<any | null>(null);
  const { showAddDialog, handleAddDialog, parents } = useManageMenusContext();
  const { reload } = useDataGrid();
  const { PostData } = useCallApi();
+  const [open, setOpen] = useState(false);
  const [alert, setAlert] = useState({
    show: false,
    message: ''
@ -51,8 +57,11 @@ const AddDialog = () => {
      return;
    }

+    console.log('Data dikirim ke API:', formField);
    const response = await PostData(`${API_URL}/menus/create`, formField);

+    console.log('Response from API:', response);
+
    if (response?.status) {
      handleAddDialog(false);
      resetForm();
@ -67,7 +76,10 @@ const AddDialog = () => {
  };

  const resetForm = () => {
-    setFormField(initialState);
+    setFormField({
+      ...initialState,
+      status: formField.status // Pertahankan nilai status terpilih
+    });
    setAlert({ show: false, message: '' });
  };

@ -78,7 +90,7 @@ const AddDialog = () => {
          <DialogTitle>Menu - Create</DialogTitle>
          <DialogDescription></DialogDescription>
        </DialogHeader>
-        <DialogBody ref={parentRef}>
+        <DialogBody className="scrollable">
          <div className="flex flex-col">
            {alert.show && (
              <Alert variant="danger">
@ -133,24 +145,21 @@ const AddDialog = () => {
                <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">Parent</label>
-                    <FormControl fullWidth margin="dense">
-                      <NativeSelect
-                        defaultValue={30}
+                    <Select
                      value={formField.id_parent}
-                        onChange={(e: any) => setFormField({ ...formField, id_parent: e.target.value })}
-                        inputProps={{
-                          name: 'id_parent',
-                          id: 'uncontrolled-native',
-                        }}
+                      onValueChange={(value) => setFormField({ ...formField, id_parent: value })}
                    >
-                      <option value={''}>As Parent</option>
-                      {
-                        parents ? parents.map((el: any) => (
-                          <option key={el.id} value={el.id}>{el.name}</option>
-                        )) : ''
-                      }
-                      </NativeSelect>
-                    </FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select As Parent" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {parents.map((parent: any) => (
+                          <SelectItem key={parent.id} value={parent.id}>
+                            {parent.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                  </div>
                </div>

@ -190,21 +199,18 @@ const AddDialog = () => {
                    <label className="form-label flex items-center gap-1 max-w-56">
                      Status<span className="text-red-500">*</span>
                    </label>
-                    <FormControl fullWidth margin="dense">
-                      <NativeSelect
-                        defaultValue={30}
+                    <Select
                      value={formField.status}
-                        onChange={(e: any) => setFormField({ ...formField, status: e.target.value })}
-                        inputProps={{
-                          name: 'status',
-                          id: 'uncontrolled-native',
-                        }}
+                      onValueChange={(value) => setFormField({ ...formField, status: value })}
                    >
-                        <option value={''}>Select</option>
-                        <option value={"Y"}>Active</option>
-                        <option value={"N"}>Inactive</option>
-                      </NativeSelect>
-                    </FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
                  </div>
                </div>

--- a/src/pages/menu/manage-menu/blocks/DeleteDialog.tsx
+++ b/src/pages/menu/manage-menu/blocks/DeleteDialog.tsx
@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { ChangeEvent, useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { EnforceSwitch } from '@/components/switch';
 import { Button } from '@/components/ui/button';

@ -13,14 +20,13 @@ const DeleteDialog = () => {
  const { showDeleteDialog, handleDeleteDialog, selectedMenu }: any = useManageMenusContext();
  const { reload } = useDataGrid();
  const { DeleteData } = useCallApi();
-  const [enforce, setEnforce] = useState(false);
  const [alert, setAlert] = useState({
    show: false,
    message: ''
  });

  const doDeleteMenu = async () => {
-    const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/${enforce}`, {
+    const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu.id}/false`, {
      id: selectedMenu.id
    });

@ -44,15 +50,6 @@ const DeleteDialog = () => {
          <Alert variant="warning">
            <h3 className="text-lg">Are you sure?</h3>
            <span className="text-sm">you will delete this data!</span>
-            <div className="mt-2 flex items-center gap-x-2">
-              <label className="form-label max-w-56">Hard Delete</label>
-              <EnforceSwitch
-                enforce={enforce}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  setEnforce(e.target.checked);
-                }}
-              />
-            </div>
          </Alert>
          {alert.show && (
            <Alert variant="danger">
--- a/src/pages/menu/manage-menu/blocks/EditDialog.tsx
+++ b/src/pages/menu/manage-menu/blocks/EditDialog.tsx
@ -12,15 +12,25 @@ import {
  DialogHeader,
  DialogTitle
 } from '@/components/ui/dialog';
-import { FormControl,NativeSelect } from "@mui/material";
+import { FormControl, NativeSelect } from '@mui/material';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
 const API_URL = apiConfig.service_dashboard;

 const EditDialog = () => {
-  const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any = useManageMenusContext();
+  const { showEditDialog, handleEditDialog, selectedMenu, setSelectedMenu, parents }: any =
+    useManageMenusContext();
  const { reload } = useDataGrid();
  const { PutData } = useCallApi();
+  const [open, setOpen] = useState(false);
  const [alert, setAlert] = useState({
    show: false,
    message: ''
@ -43,6 +53,7 @@ const EditDialog = () => {
      selectedMenu.module === '' ||
      selectedMenu.name === '' ||
      selectedMenu.link === '' ||
+      selectedMenu.id_parent === '' ||
      selectedMenu.order_number === 0 ||
      selectedMenu.status === ''
    ) {
@ -51,8 +62,8 @@ const EditDialog = () => {
    }

    const updateMenu = selectedMenu;
-    if (updateMenu.id_parent === null) updateMenu.id_parent = "";
-    delete updateMenu.parentName    
+    if (updateMenu.id_parent === null) updateMenu.id_parent = '';
+    delete updateMenu.parentName;
    const response = await PutData(`${API_URL}/menus/update/${selectedMenu.id}`, selectedMenu);
    if (response?.status) {
      handleEditDialog(false, null);
@ -67,7 +78,7 @@ const EditDialog = () => {
  };

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

@ -78,7 +89,7 @@ const EditDialog = () => {
          <DialogTitle>Menu - Update</DialogTitle>
          <DialogDescription></DialogDescription>
        </DialogHeader>
-        <DialogBody>
+        <DialogBody className="scrollable">
          <div className="flex flex-col">
            {alert.show && (
              <Alert variant="danger">
@ -132,24 +143,27 @@ const EditDialog = () => {

                <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">ID Parent</label>
-                    <FormControl fullWidth margin="dense">
-                      <NativeSelect
-                        defaultValue={30}
-                        value={selectedMenu.id_parent}
-                        onChange={(e: any) => setSelectedMenu({ ...selectedMenu, id_parent: e.target.value })}
-                        inputProps={{
-                          name: 'id_parent',
-                          id: 'uncontrolled-native',
+                    <label className="form-label flex items-center gap-1 max-w-56">Parent</label>
+                    <Select
+                      value={selectedMenu.id_parent || ''}
+                      onValueChange={(value) => {
+                        setSelectedMenu({
+                          ...selectedMenu,
+                          id_parent: value === '' ? null : value
+                        });
                      }}
                    >
-                      {
-                        parents ? parents.map((el: any) => (
-                          <option key={el.id} value={el.id}>{el.name}</option>
-                        )) : ''
-                      }
-                      </NativeSelect>
-                    </FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select As Parent" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {parents.map((parent: any) => (
+                          <SelectItem key={parent.id} value={parent.id}>
+                            {parent.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                  </div>
                </div>

@ -165,7 +179,10 @@ const EditDialog = () => {
                      value={selectedMenu.order_number === 0 ? '' : selectedMenu.order_number}
                      onChange={(e) => {
                        const value = parseInt(e.target.value, 10);
-                        setSelectedMenu({ ...selectedMenu, order_number: isNaN(value) ? 0 : value });
+                        setSelectedMenu({
+                          ...selectedMenu,
+                          order_number: isNaN(value) ? 0 : value
+                        });
                      }}
                    />
                  </div>
@ -184,6 +201,26 @@ const EditDialog = () => {
                </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">
+                      Status<span className="text-red-500">*</span>
+                    </label>
+                    <Select
+                      value={selectedMenu.status}
+                      onValueChange={(value) => setSelectedMenu({ ...selectedMenu, status: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Status" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="Y">Active</SelectItem>
+                        <SelectItem value="N">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </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">
                      Status<span className="text-red-500">*</span>
@ -203,7 +240,7 @@ const EditDialog = () => {
                      </NativeSelect>
                    </FormControl>
                  </div>
-                </div>
+                </div> */}

                <div className="flex justify-end">
                  <Button className="btn btn-primary">Save Changes</Button>
--- a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
+++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
@ -133,12 +133,27 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
        meta: { headerClassName: 'w-[250px]' }
      },
      {
-        accessorFn: (row) => row.status,
-        id: 'status',
+        accessorKey: 'status',
        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
        enableSorting: false,
        enableHiding: false,
-        meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
      },
      {
        id: 'actions',
@ -211,7 +226,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
        link: child.link,
        id_parent: child.id_parent,
        status: child.status,
-        order_number: child.order_number
+        order_number: parent.order_number
      };
    });

@ -242,7 +257,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
      const total_count = transformedData.length;
      const paginatedData = transformedData.slice(page * limit, (page + 1) * limit);

-      console.log(response.data);
+      console.log('data', paginatedData);
      // setMenus(transformedData);
      return { data: paginatedData, totalCount: total_count };
    } catch (error) {
--- a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
+++ b/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
@ -8,6 +8,8 @@ import { ListToolBar } from '../blocks';
 import { useCallApi } from '@/hooks';

 interface ContextProps {
+  showSearchDialog: boolean;
+  handleSearchDialog: (show: boolean) => void;
  showEditDialog: boolean;
  handleEditDialog: (show: boolean, selected_user: string | null) => void;
  showAddDialog: boolean;
@ -35,6 +37,8 @@ interface RoleListProps {
 }

 const initialProps: ContextProps = {
+  showSearchDialog: false,
+  handleSearchDialog: (show: boolean) => {},
  showEditDialog: false,
  handleEditDialog: () => {},
  showAddDialog: false,
@ -52,6 +56,7 @@ const API_URL = apiConfig.service_dashboard;
 const ManageUserContextProvider = ({ children }: { children: React.ReactNode }) => {
  /* state */
  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showSearchDialog, setShowSearchDialog] = useState(false);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [selectedUser, setSelectedUser] = useState<string | null>(null);
@ -59,6 +64,10 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
  const { GetData } = useCallApi();

  /* action */
+  const handleSearchDialog = useCallback((show: boolean) => {
+    setShowSearchDialog(show);
+  }, []);
+
  const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
    setSelectedUser(show ? selected_user : null);
    setShowEditDialog(show);
@ -219,6 +228,8 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
  return (
    <ManageUserContext.Provider
      value={{
+        showSearchDialog,
+        handleSearchDialog,
        showEditDialog,
        handleEditDialog,
        selectedUser,