refactor: organized pages based on domain

2026-02-23 12:30:27 +03:30
parent 32246fd0cc
commit 1f763a33ac
31 changed files with 317 additions and 314 deletions
--- a/src/Pages/LiveStock/Roles.tsx
+++ b/src/Pages/LiveStock/Roles.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useState } from "react";
+import { useModalStore } from "../../context/zustand-store/appStore";
+import { useApiRequest } from "../../utils/useApiRequest";
+import { Popover } from "../../components/PopOver/PopOver";
+import { Tooltip } from "../../components/Tooltip/Tooltip";
+import Button from "../../components/Button/Button";
+import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverButtons";
+import { Grid } from "../../components/Grid/Grid";
+import Table from "../../components/Table/Table";
+import { AddRole } from "../../partials/management/AddRole";
+import { getFaPermissions } from "../../utils/getFaPermissions";
+import ShowStringList from "../../components/ShowStringList/ShowStringList";
+import ShowMoreInfo from "../../components/ShowMoreInfo/ShowMoreInfo";
+import Typography from "../../components/Typography/Typography";
+
+export default function Roles() {
+  const { openModal } = useModalStore();
+  const [pagesInfo, setPagesInfo] = useState({ page: 1, page_size: 10 });
+  const [pagesTableData, setPagesTableData] = useState([]);
+
+  const { data: pagesData, refetch } = useApiRequest({
+    api: "/auth/api/v1/role/",
+    method: "get",
+    params: pagesInfo,
+    queryKey: ["roles", pagesInfo],
+  });
+
+  useEffect(() => {
+    if (pagesData?.results) {
+      const tableData = pagesData.results.map((item: any, i: number) => {
+        const accessList = Object.values(
+          item?.permissions.reduce((acc: any, item: any) => {
+            if (!acc[item.page]) {
+              acc[item.page] = {
+                page: item.page,
+                names: [],
+                descriptions: [],
+              };
+            }
+            acc[item.page].names.push(item.name);
+            acc[item.page].descriptions.push(item.description);
+            return acc;
+          }, {}),
+        );
+
+        return [
+          pagesInfo.page === 1
+            ? i + 1
+            : i + pagesInfo.page_size * (pagesInfo.page - 1) + 1,
+          item?.role_name,
+          item?.parent_role?.name || "-",
+          item?.type?.name,
+          item?.type?.key || "-",
+          item?.description,
+          <ShowMoreInfo
+            key={i}
+            title="دسترسی ها"
+            counter={[accessList?.length.toString()]}
+            disabled={!accessList?.length}
+          >
+            <Grid
+              container
+              column
+              className="gap-2 p-2 justify-start items-start"
+            >
+              {accessList?.map((opt: any) => (
+                <Grid key={i} container column className="gap-2">
+                  <Grid>
+                    <Typography variant="subtitle2" sign="arrow">
+                      {getFaPermissions(opt.page)}
+                    </Typography>
+                  </Grid>
+                  <Grid>
+                    <ShowStringList
+                      strings={opt.descriptions}
+                      showSearch={false}
+                    />
+                  </Grid>
+                </Grid>
+              ))}
+            </Grid>{" "}
+          </ShowMoreInfo>,
+          <Popover key={i}>
+            <Tooltip title="ویرایش" position="right">
+              <Button
+                variant="edit"
+                page="roles_management"
+                access="Edit-Role"
+                onClick={() => {
+                  openModal({
+                    title: "ویرایش نقش",
+                    content: <AddRole item={item} getData={refetch} />,
+                  });
+                }}
+              />
+            </Tooltip>
+            <DeleteButtonForPopOver
+              page="roles_management"
+              access="Delete-Role"
+              api={`auth/api/v1/role/${item?.id}/`}
+              getData={refetch}
+            />
+          </Popover>,
+        ];
+      });
+      setPagesTableData(tableData);
+    }
+  }, [pagesData, pagesInfo]);
+
+  return (
+    <Grid container column>
+      <Grid>
+        <Button
+          size="small"
+          page="roles_management"
+          access="Post-Role"
+          variant="submit"
+          onClick={() => {
+            openModal({
+              title: "ایجاد نقش",
+              content: <AddRole getData={refetch} />,
+            });
+          }}
+        >
+          ایجاد نقش
+        </Button>
+      </Grid>
+      <Table
+        className="mt-2"
+        onChange={(e) => {
+          setPagesInfo(e);
+        }}
+        count={pagesData?.count || 10}
+        isPaginated
+        title="لیست نقش ها"
+        columns={[
+          "ردیف",
+          "نقش",
+          "نقش والد",
+          "نوع نقش",
+          "کلید",
+          "توضیحات",
+          "دسترسی ها",
+          "عملیات",
+        ]}
+        rows={pagesTableData}
+      />
+    </Grid>
+  );
+}