add permission and wait for api #166

src/Components/LatextInput/AddLaTexModal.tsx

@@ -15,12 +15,13 @@ const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen,setCurren
     setCurrentValue:(value:string)=> void
 
 }) => {
-    const {values,setFieldValue} = useFormikContext<any>()
+    const {values,setFieldValue,getFieldProps} = useFormikContext<any>()
-
 
+  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 +" $$ ");

src/Pages/Admin/Roles/Model/ModelForm.tsx

@@ -6,7 +6,6 @@ const Form = () => {
     <Row className="w-100">
       <Col>
         <ValidationField placeholder="name" label="name" name="name" />
-        <ValidationField placeholder="created_at" label="created_at" name="created_at" />
       </Col>
     </Row>
   );

src/Pages/Admin/Roles/Permissions/FormTable.tsx

@@ -5,6 +5,9 @@ import { useFormikContext } from 'formik'
 
 const FormTable = ({response}:{response:any}) => {
   const {values} = useFormikContext<any>()
+  console.log(response);
+    const data = response?.data?.data?.abilities ;
+    console.log(data);
     
   return (
     <div>
@@ -12,9 +15,10 @@ const FormTable = ({response}:{response:any}) => {
       <DataTable
       response={response}
       useColumns={useColumns}
-      dataSource={values}
+      dataSource={data}
       pagination={false}
       loading={false}
+      rowKey={"name"}
       
     />
 

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}
         />
-        <FormikForm 
-         initialValues={getInitialValues}
-         handleSubmit={()=>(console.log(1))}>
-          <Table />
 
-        </FormikForm>
+          <Table />
       </Suspense>
     </div>
   );

src/Pages/Admin/Roles/Permissions/Table.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo } from "react";
+import React from "react";
-import DataTable from "../../../../Layout/Dashboard/Table/DataTable";
 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<ParamsEnum>();
@@ -28,44 +28,80 @@ const App: React.FC = () => {
     "admin::update",
   ];
 
-  /// time complexity O(n) -_-   
+  const response = useGetAllRole({
-  const newArray: Array<{ name: any; [key: string]: boolean }> = [];
-  const hashMap = new Map<string, number>();
-  
-  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({
     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<string, number>();
+      
+      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 (
-   <Formik initialValues={newArray} onSubmit={()=>{}}>
+   <Formik initialValues={newShapeArray} onSubmit={handelSubmit} enableReinitialize> 
-    <Form>
+    {({handleSubmit})=>{
+      return (
+        <Form>
+
+        <FormTable  response={response}  />
+        <div className="permissions_submit_button">
+        <button className="button" onClick={()=> handleSubmit()
+        }  type="submit"  >{t("practical.submit")}</button>
+        </div>
+        </Form>
+      )
+    }}
 
-    <FormTable  response={response} />
-    <button>submit</button>
-    </Form>
    </Formik>
   );
 };

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 {values,setValues} = useFormikContext<any>()
   
-  const { setIsOpen } = useModalState((state) => state);
+  const onChange = (type:any,index:any) => {
-
+    const cloneValue = JSON.parse(JSON.stringify(values))  
-
+    if (!cloneValue[index]) {
-  const {values,setFieldValue} = useFormikContext<any>()
+      cloneValue[index] = {}; 
-  console.log(values,"values");
+  }
-  
+  cloneValue[index][type] = !cloneValue[index][type];
-
+  setValues(cloneValue)
-
-  const onChange: CheckboxProps['onChange'] = (e) => {
-    console.log(`checked = ${e.target.checked}`);
-  };
-  const onChangeAll: CheckboxProps['onChange'] = (e) => {
-    console.log(`checked = ${e.target.checked}`);
   };
 
-  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  <Checkbox onChange={onChangeAll}  checked={isChecked} />;
+    return  <Checkbox onChange={()=>onChangeAll(index)}  checked={isChecked} />;
   }
 
 
-   const CheckBoxField = ({record,type}:{record:any,type:string})=>{
+   const CheckBoxField = ({record,type,index}:{record:any,type:string,index:number})=>{
-    const name = record?.name ;
+  
-    console.log(record,"record");
+   
-    console.log(type,"type");
       const isChecked = record?.[type] ;
       
-    return  <Checkbox onChange={onChange}  checked={isChecked} />;
+    return  <Checkbox onChange={()=>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  <Checkbox onChange={()=>onChangeAllPermissions()}  checked={IsAllValuesTrue} />;
+}
+
+
   const columns: TableColumnsType<any> = [
 
     {
-      title: t("columns.units"),
+      title: <div className="df">  <CheckBoxFieldALLPermissions/>  {t("columns.units")} </div>,
       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 (
-        <CheckBoxField record={record} type={ABILITIES_VALUES_ENUM.INDEX}  />
+        <CheckBoxField record={record} index={index} type={ABILITIES_VALUES_ENUM.STORE}  />
         );
       },
     },
@@ -70,9 +109,9 @@ export const useColumns = () => {
       dataIndex: "id",
       key: "id",
       align: "center",
-      render: (_text,record) => {
+      render: (_text,record,index) => {
         return (
-        <CheckBoxField record={record} type={ABILITIES_VALUES_ENUM.SHOW} />
+        <CheckBoxField record={record} index={index} type={ABILITIES_VALUES_ENUM.INDEX} />
         );
       },
     },
@@ -81,9 +120,9 @@ export const useColumns = () => {
       dataIndex: "id",
       key: "id",
       align: "center",
-      render: (_text,record) => {
+      render: (_text,record,index) => {
         return (
-        <CheckBoxField record={record} type={ABILITIES_VALUES_ENUM.STORE} />
+        <CheckBoxField record={record} index={index} type={ABILITIES_VALUES_ENUM.UPDATE} />
         );
       },
     },
@@ -92,9 +131,9 @@ export const useColumns = () => {
       dataIndex: "id",
       key: "id",
       align: "center",
-      render: (_text,record) => {
+      render: (_text,record,index) => {
         return (
-        <CheckBoxField record={record} type={ABILITIES_VALUES_ENUM.DELETE} />
+        <CheckBoxField record={record} index={index} type={ABILITIES_VALUES_ENUM.DELETE} />
         );
       },
     },
@@ -103,9 +142,9 @@ export const useColumns = () => {
       dataIndex: "id",
       key: "id",
       align: "center",
-      render: (_text,record) => {
+      render: (_text,record,index) => {
         return (
-        <CheckBoxField record={record}  type={ABILITIES_VALUES_ENUM.UPDATE} />
+        <CheckBoxField record={record} index={index}  type={ABILITIES_VALUES_ENUM.SHOW} />
         );
       },
     },
@@ -115,9 +154,9 @@ export const useColumns = () => {
       dataIndex: "id",
       key: "id",
       align: "center",
-      render: (_text,record) => {
+      render: (_text,record,index) => {
         return (
-        <CheckBoxFieldALL record={record} />
+        <CheckBoxFieldALL  record={record} index={index}  />
         );
       },
     },

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 <DataTable response={response} useColumns={useColumns} dataSource={Data} />;
+  return <DataTable response={response} useColumns={useColumns} />;
 };
 
 export default App;

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;
+}