From ba2b5b411c8920e4ed7d06cf9f9b50ec39429536 Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Mon, 23 Sep 2024 17:27:25 +0300 Subject: [PATCH] add permission and wait for api #166 --- src/Components/LatextInput/AddLaTexModal.tsx | 9 +- src/Pages/Admin/Roles/Model/ModelForm.tsx | 1 - .../Admin/Roles/Permissions/FormTable.tsx | 8 +- src/Pages/Admin/Roles/Permissions/Page.tsx | 8 +- src/Pages/Admin/Roles/Permissions/Table.tsx | 104 ++++++++++----- .../Roles/Permissions/useTableColumns.tsx | 121 ++++++++++++------ src/Pages/Admin/Roles/Table.tsx | 7 +- src/Styles/Tables/Table.scss | 7 + 8 files changed, 171 insertions(+), 94 deletions(-) diff --git a/src/Components/LatextInput/AddLaTexModal.tsx b/src/Components/LatextInput/AddLaTexModal.tsx index bc4cf0a..971855e 100644 --- a/src/Components/LatextInput/AddLaTexModal.tsx +++ b/src/Components/LatextInput/AddLaTexModal.tsx @@ -15,13 +15,14 @@ const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen,setCurren setCurrentValue:(value:string)=> void }) => { - const {values,setFieldValue} = useFormikContext() - + const {values,setFieldValue,getFieldProps} = useFormikContext() + const currentValue = getFieldProps(name).value const handleOk = () => { - const oldValue = values?.[name] ?? ""; + const oldValue = currentValue ?? ""; const newLatex = convertMathMLToLaTeX(Latex); - + console.log(oldValue); + if(newLatex){ setFieldValue(name, oldValue + " $$ " +newLatex +" $$ "); setCurrentValue(oldValue + " $$ " +newLatex +" $$ ") diff --git a/src/Pages/Admin/Roles/Model/ModelForm.tsx b/src/Pages/Admin/Roles/Model/ModelForm.tsx index 457dce0..5a72fe4 100644 --- a/src/Pages/Admin/Roles/Model/ModelForm.tsx +++ b/src/Pages/Admin/Roles/Model/ModelForm.tsx @@ -6,7 +6,6 @@ const Form = () => { - ); diff --git a/src/Pages/Admin/Roles/Permissions/FormTable.tsx b/src/Pages/Admin/Roles/Permissions/FormTable.tsx index 15aa975..3562476 100644 --- a/src/Pages/Admin/Roles/Permissions/FormTable.tsx +++ b/src/Pages/Admin/Roles/Permissions/FormTable.tsx @@ -5,16 +5,20 @@ import { useFormikContext } from 'formik' const FormTable = ({response}:{response:any}) => { const {values} = useFormikContext() - + console.log(response); + const data = response?.data?.data?.abilities ; + console.log(data); + return (
diff --git a/src/Pages/Admin/Roles/Permissions/Page.tsx b/src/Pages/Admin/Roles/Permissions/Page.tsx index 59d3c2c..bcd3423 100644 --- a/src/Pages/Admin/Roles/Permissions/Page.tsx +++ b/src/Pages/Admin/Roles/Permissions/Page.tsx @@ -4,8 +4,6 @@ import { Spin } from "antd"; import useSetPageTitle from "../../../../Hooks/useSetPageTitle"; import PageHeader from "../../../../Layout/Dashboard/PageHeader"; import FilterLayout from "../../../../Layout/Dashboard/FilterLayout"; -import FormikForm from "../../../../Layout/Dashboard/FormikForm"; -import { getInitialValues } from "./Model/formUtil"; const Table = lazy(() => import("./Table")); const TableHeader = () => { @@ -29,12 +27,8 @@ const TableHeader = () => { filterTitle="page_header.permissions" haveFilter={false} /> - (console.log(1))}> - - +
); diff --git a/src/Pages/Admin/Roles/Permissions/Table.tsx b/src/Pages/Admin/Roles/Permissions/Table.tsx index d1838fa..aa9207b 100644 --- a/src/Pages/Admin/Roles/Permissions/Table.tsx +++ b/src/Pages/Admin/Roles/Permissions/Table.tsx @@ -1,13 +1,13 @@ -import React, { useEffect, useMemo } from "react"; -import DataTable from "../../../../Layout/Dashboard/Table/DataTable"; +import React from "react"; import { useFilterState } from "../../../../Components/Utils/Filter/FilterState"; import { useFilterStateState } from "../../../../zustand/Filter"; -import { useGetAllPermissions } from "../../../../api/Permissions"; +import { useAddPermissions, useGetAllPermissions } from "../../../../api/Permissions"; import { useParams } from "react-router-dom"; import { ParamsEnum } from "../../../../enums/params"; -import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; import { Form, Formik } from "formik"; import FormTable from "./FormTable"; +import { useTranslation } from "react-i18next"; +import { useGetAllRole } from "../../../../api/role"; const App: React.FC = () => { const { role_id } = useParams(); @@ -28,44 +28,80 @@ const App: React.FC = () => { "admin::update", ]; - /// time complexity O(n) -_- - const newArray: Array<{ name: any; [key: string]: boolean }> = []; - const hashMap = new Map(); - - for (let i = 0; i < Data.length; i++) { - const [permission, value] = Data[i].split("::"); - const existingIndex = hashMap.get(permission); - - if (existingIndex !== undefined) { - newArray[existingIndex][value] = true; - if(newArray[existingIndex]["index"] && newArray[existingIndex]["show"] && newArray[existingIndex]["store"] && newArray[existingIndex]["update"] && newArray[existingIndex]["delete"]){ - newArray[existingIndex]["ALL"] = true; - } - } else { - const newObject = { name: permission, [value]: true } as any; - newArray.push(newObject); - hashMap.set(permission, newArray.length - 1); - - } - } - console.log(newArray); - - - const response = useGetAllPermissions({ + const response = useGetAllRole({ pagination: true, - role_id, + show:role_id, name, sort_by, ...filterState, }); + /// time complexity O(n) -_- + + const changePermissionShape = (Data:string[])=>{ + const newArray: Array<{ name: any; [key: string]: boolean }> = []; + const hashMap = new Map(); + + for (let i = 0; i < Data.length; i++) { + const [permission, value] = Data[i].split("::"); + const existingIndex = hashMap.get(permission); + + if (existingIndex !== undefined) { + newArray[existingIndex][value] = true; + if(newArray[existingIndex]["index"] && newArray[existingIndex]["show"] && newArray[existingIndex]["store"] && newArray[existingIndex]["update"] && newArray[existingIndex]["delete"]){ + newArray[existingIndex]["ALL"] = true; + } + } else { + const newObject = { name: permission, [value]: true } as any; + newArray.push(newObject); + hashMap.set(permission, newArray.length - 1); + + } + } + return newArray + } + const newShapeArray = changePermissionShape(Data) + + const [t] = useTranslation() + +console.log(response,"response"); + + const reverseChangePermissionShape = ( + newArray: Array<{ name: any; [key: string]: boolean }> + ): string[] => { + const Data: string[] = []; + + newArray.forEach((obj) => { + const permission = obj.name; + Object.keys(obj).forEach((key) => { + if (key !== "name" && key !== "ALL" && obj[key]) { + Data.push(`${permission}::${key}`); + } + }); + }); + + return Data; + }; + const {mutate} = useAddPermissions() + const handelSubmit = (values:any)=>{ + const dataToSend = reverseChangePermissionShape(values); + mutate(dataToSend) + } return ( - {}}> -
+ + {({handleSubmit})=>{ + return ( + + + +
+ +
+ + ) + }} - - - ); }; diff --git a/src/Pages/Admin/Roles/Permissions/useTableColumns.tsx b/src/Pages/Admin/Roles/Permissions/useTableColumns.tsx index 80836e1..9e387ce 100644 --- a/src/Pages/Admin/Roles/Permissions/useTableColumns.tsx +++ b/src/Pages/Admin/Roles/Permissions/useTableColumns.tsx @@ -1,51 +1,94 @@ import { Checkbox, TableColumnsType } from "antd"; -import { useObjectToEdit } from "../../../../zustand/ObjectToEditState"; -import { useModalState } from "../../../../zustand/Modal"; import { useTranslation } from "react-i18next"; -import { Role } from "../../../../types/App"; -import { ModalEnum } from "../../../../enums/Model"; -import { CheckboxProps } from "antd/lib"; import { ABILITIES_VALUES_ENUM } from "../../../../enums/abilities"; import { useFormikContext } from "formik"; export const useColumns = () => { const [t] = useTranslation(); - - const { setIsOpen } = useModalState((state) => state); - - - const {values,setFieldValue} = useFormikContext() - console.log(values,"values"); + const {values,setValues} = useFormikContext() - - - const onChange: CheckboxProps['onChange'] = (e) => { - console.log(`checked = ${e.target.checked}`); - }; - const onChangeAll: CheckboxProps['onChange'] = (e) => { - console.log(`checked = ${e.target.checked}`); + const onChange = (type:any,index:any) => { + const cloneValue = JSON.parse(JSON.stringify(values)) + if (!cloneValue[index]) { + cloneValue[index] = {}; + } + cloneValue[index][type] = !cloneValue[index][type]; + setValues(cloneValue) }; - const CheckBoxFieldALL = ({record}:{record:any})=>{ + const onChangeAll = (index:any) => { + const cloneValue = JSON.parse(JSON.stringify(values)) + if (!cloneValue[index]) { + cloneValue[index] = {}; +} +if(cloneValue[index]["ALL"]){ + cloneValue[index] = { + name:cloneValue[index]?.name , + delete: false, + index: false, + show: false, + store: false, + update: false, + ALL: false + } + +}else{ + cloneValue[index] = { + name:cloneValue[index]?.name , + delete: true, + index: true, + show: true, + store: true, + update: true, + ALL: true + } + +} + +setValues(cloneValue) + + }; + + const CheckBoxFieldALL = ({record,index}:{record:any,index:any})=>{ const isChecked = record?.ALL ; - return ; + return onChangeAll(index)} checked={isChecked} />; } - const CheckBoxField = ({record,type}:{record:any,type:string})=>{ - const name = record?.name ; - console.log(record,"record"); - console.log(type,"type"); + const CheckBoxField = ({record,type,index}:{record:any,type:string,index:number})=>{ + + const isChecked = record?.[type] ; - return ; + return onChange(type,index)} checked={isChecked} />; } + + const CheckBoxFieldALLPermissions = ()=>{ + const cloneValue = JSON.parse(JSON.stringify(values)) ; + const IsAllValuesTrue = cloneValue?.every((item:any)=>{ + return !!item?.index && !!item?.show && !!item?.store && !!item?.update && !!item?.delete + }) + const onChangeAllPermissions = ()=>{ + const newShape =cloneValue?.map((item:any)=>{ + if(IsAllValuesTrue){ + return {...item,delete: false,index: false,show: false,store: false,update: false,ALL: false} + }else{ + return {...item,delete: true,index: true,show: true,store: true,update: true,ALL: true} + } + }) + setValues(newShape) + } + + return onChangeAllPermissions()} checked={IsAllValuesTrue} />; +} + + const columns: TableColumnsType = [ { - title: t("columns.units"), + title:
{t("columns.units")}
, dataIndex: "name", key: "name", align: "center", @@ -56,12 +99,8 @@ export const useColumns = () => { key: "id", align: "center", render: (_text,record,index) => { - console.log(record); - console.log(index); - - return ( - + ); }, }, @@ -70,9 +109,9 @@ export const useColumns = () => { dataIndex: "id", key: "id", align: "center", - render: (_text,record) => { + render: (_text,record,index) => { return ( - + ); }, }, @@ -81,9 +120,9 @@ export const useColumns = () => { dataIndex: "id", key: "id", align: "center", - render: (_text,record) => { + render: (_text,record,index) => { return ( - + ); }, }, @@ -92,9 +131,9 @@ export const useColumns = () => { dataIndex: "id", key: "id", align: "center", - render: (_text,record) => { + render: (_text,record,index) => { return ( - + ); }, }, @@ -103,9 +142,9 @@ export const useColumns = () => { dataIndex: "id", key: "id", align: "center", - render: (_text,record) => { + render: (_text,record,index) => { return ( - + ); }, }, @@ -115,9 +154,9 @@ export const useColumns = () => { dataIndex: "id", key: "id", align: "center", - render: (_text,record) => { + render: (_text,record,index) => { return ( - + ); }, }, diff --git a/src/Pages/Admin/Roles/Table.tsx b/src/Pages/Admin/Roles/Table.tsx index b902510..f7a0fab 100644 --- a/src/Pages/Admin/Roles/Table.tsx +++ b/src/Pages/Admin/Roles/Table.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { useGetAllTag } from "../../../api/tags"; import DataTable from "../../../Layout/Dashboard/Table/DataTable"; import { useColumns } from "./useTableColumns"; import { useFilterState } from "../../../Components/Utils/Filter/FilterState"; @@ -11,9 +10,7 @@ const App: React.FC = () => { const { Filter } = useFilterStateState(); const name = Filter?.name ; const sort_by = Filter?.sort_by ; - const Data = [ - {name:"name",id:1} - ] + const response = useGetAllRole({ pagination: true, name, @@ -21,7 +18,7 @@ const App: React.FC = () => { ...filterState, }); - return ; + return ; }; export default App; diff --git a/src/Styles/Tables/Table.scss b/src/Styles/Tables/Table.scss index 69effac..a695202 100644 --- a/src/Styles/Tables/Table.scss +++ b/src/Styles/Tables/Table.scss @@ -153,3 +153,10 @@ .ant-pagination .ant-pagination-next .ant-pagination-item-link { rotate: 180deg !important; } + + + +.permissions_submit_button{ + display: flex; + justify-content: flex-end; +} \ No newline at end of file