end #166

package.json

@@ -9,6 +9,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@types/katex": "^0.16.7",
+    "@uiw/react-markdown-preview": "^5.1.3",
     "antd": "^5.17.4",
     "axios": "^1.7.2",
     "better-react-mathjax": "^2.0.3",

src/Components/LatextInput/AddLaTexModal.tsx

@@ -55,7 +55,7 @@ const AddLaTexModal = ({name,setLatex,Latex,setIsModalOpen,isModalOpen,setCurren
     <TextArea
     size="large"
     showCount
-    maxLength={1000}
+    maxLength={5000}
     autoSize={{ minRows: 4, maxRows: 10 }} 
     style={{height:"400px"}}
     onChange={handleChangeInputLatex}

src/Components/LatextInput/LaTeXInputMemo.tsx

@@ -78,7 +78,7 @@ const LaTeXInputMemo: React.FC<any> =  React.memo(({ field ,form, label, ...prop
         <TextArea
           size="large"
           showCount
-          maxLength={1000}
+          maxLength={5000}
           autoSize={{ minRows: 6, maxRows: 10 }} 
           style={{ height: "400px" }}
           onChange={handleChangeInput}

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

@@ -5,17 +5,14 @@ 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 (
+      return (
     <div>
       
       <DataTable
       response={response}
       useColumns={useColumns}
-      dataSource={data}
+      dataSource={values}
       pagination={false}
       loading={false}
       rowKey={"name"}

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

@@ -7,7 +7,8 @@ import { ParamsEnum } from "../../../../enums/params";
 import { Form, Formik } from "formik";
 import FormTable from "./FormTable";
 import { useTranslation } from "react-i18next";
-import { useGetAllRole } from "../../../../api/role";
+import { useGetAllRole, useUpdateRole } from "../../../../api/role";
+import { useGetAllAbility } from "../../../../api/Ability";
 
 const App: React.FC = () => {
   const { role_id } = useParams<ParamsEnum>();
@@ -16,18 +17,6 @@ const App: React.FC = () => {
   const name = Filter?.name;
   const sort_by = Filter?.sort_by;
 
-  const Data = [
-    "absence::delete",
-    "absence::index",
-    "absence::show",
-    "absence::store",
-    "absence::update",
-    "admin::delete",
-    "admin::index",
-    "admin::show",
-    "admin::update",
-  ];
-
   const response = useGetAllRole({
     pagination: true,
     show:role_id,
@@ -35,7 +24,33 @@ const App: React.FC = () => {
     sort_by,
     ...filterState,
   });
+  const {data} = useGetAllAbility()
+  const AllAbilityData = data?.data ?? [] ; 
+  const currentData = response?.data?.data?.abilities ?? [] ;
+  console.log(currentData,"currentData");
+  
+  const GetAllAbility = (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) {
+       
+        } else {
+            const newObject = permission  as any;
+            newArray.push(newObject);
+            hashMap.set(permission, newArray.length - 1); 
+          
+        }
+    }
+    return newArray
+  }
+  const Ability = GetAllAbility(AllAbilityData ?? []) ?? []
   /// time complexity O(n) -_-   
+  console.log(Ability);
   
     const changePermissionShape = (Data:string[])=>{
       const newArray: Array<{ name: any; [key: string]: boolean }> = [];
@@ -46,12 +61,17 @@ const App: React.FC = () => {
                 const existingIndex = hashMap.get(permission);
     
           if (existingIndex !== undefined) {
+            if(value){
+              console.log(1);
+              
               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;
+              const newObject = value ?  { name: permission,  [value]: true } as any : {name: permission} ;
               newArray.push(newObject);
               hashMap.set(permission, newArray.length - 1); 
             
@@ -59,12 +79,9 @@ const App: React.FC = () => {
       }
       return newArray
     }
-    const newShapeArray = changePermissionShape(Data)
+    const newShapeArray = changePermissionShape([...currentData,...Ability])
 
   const [t] = useTranslation()    
-
-console.log(response,"response");
-
   const reverseChangePermissionShape = (
     newArray: Array<{ name: any; [key: string]: boolean }>
   ): string[] => {
@@ -81,10 +98,17 @@ console.log(response,"response");
   
     return Data;
   };
-  const {mutate} = useAddPermissions()
+  const {mutate} = useUpdateRole()
   const handelSubmit = (values:any)=>{
+    console.log(values);
+    
     const dataToSend = reverseChangePermissionShape(values);    
-    mutate(dataToSend)
+    console.log(dataToSend);
+    
+    mutate({
+      id:role_id,
+      abilities:dataToSend
+    })
   }
 
   return (
@@ -93,10 +117,9 @@ console.log(response,"response");
       return (
         <Form>
 
-        <FormTable  response={response}  />
+        <FormTable  response={response}   />
         <div className="permissions_submit_button">
-        <button className="button" onClick={()=> handleSubmit()
+        <button className="button"   type="submit"  >{t("practical.submit")}</button>
-        }  type="submit"  >{t("practical.submit")}</button>
         </div>
         </Form>
       )

src/Pages/Home/Dummy.tsx

@@ -1,16 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import MathMLPreview from "./MathMLPreview";
+import { Field, Form, Formik } from "formik";
+import Test from "./Test";
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { BlockMath } from "react-katex";
 
 const Dummy = () => {
   const [t] = useTranslation();
+  const [markdown, setMarkdown] = useState<string>(' \nV_{sphere} = \\frac{4}{3}\\pi r^3\n');
 
 
   return (
     <div className="DummyHomePage">
        
-<MathMLPreview/>
+       <MarkdownPreview style={{background:"transparent" ,color:"black"}} source={"This is an <u>underlined</u> text."} />
-
+       <BlockMath>
+      {markdown} 
+        </BlockMath> 
     </div>
   );
 };

src/Pages/Home/Test.tsx

@@ -0,0 +1,29 @@
+import { Input } from 'antd';
+import React, { useState } from 'react'
+
+const Test = React.memo(
+  ({field,form}:{field:any,form:any}) => {
+    const name = field.name  ;
+    const {setFieldValue,getFieldProps} = form
+    console.log(name);
+    const value = getFieldProps(`${name}`).value
+    const [CurrentValue, setCurrentValue] = useState(value)
+    const handleChange=(e: React.ChangeEvent<HTMLInputElement>)=>{
+      setCurrentValue(e.target.value)
+    }
+    const onBlur=()=>{
+      setFieldValue(`${name}`,CurrentValue)
+    }
+    return (
+      <>
+      <Input onChange={(e)=>handleChange(e)} value={CurrentValue} type="text" name="" id="" onBlur={onBlur} />
+       </>
+    )
+  },(prevProps:any,nextProps:any)=>{
+    const prevValue = prevProps.field.value;
+    const nextValue = nextProps.field.value;
+  
+    return prevValue === nextValue 
+  })
+
+export default Test

src/api/Ability.ts

@@ -0,0 +1,21 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/ability",
+  ADD: "/ability",
+  DELETE: "/ability",
+  UPDATE: "/ability",
+};
+
+const KEY = "ability";
+
+export const useGetAllAbility = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddAbility = () => useAddMutation(KEY, API.ADD);
+export const useUpdateAbility = (params?: any) =>
+  useUpdateMutation(KEY, API.GET);
+export const useDeleteAbility = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);

src/api/Permissions.ts

@@ -4,13 +4,13 @@ import useGetQuery from "./helper/useGetQuery";
 import useUpdateMutation from "./helper/useUpdateMutation";
 
 const API = {
-  GET: "/permissions",
+  GET: "/permission",
-  ADD: "/permissions",
+  ADD: "/permission",
-  DELETE: "/permissions",
+  DELETE: "/permission",
-  UPDATE: "/permissions",
+  UPDATE: "/permission",
 };
 
-const KEY = "Permissions";
+const KEY = "Permission";
 
 export const useGetAllPermissions = (params?: any, options?: any) =>
   useGetQuery(KEY, API.GET, params, options);