Karimaldeen/Quiz_dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add permission and wait for api #166

Browse Source
This commit is contained in:
karimaldeen 2024-09-23 17:27:25 +03:00
parent d603736a16
commit ba2b5b411c
8 changed files with 171 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Components/LatextInput/AddLaTexModal.tsx
View File

@ -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 +" $$ ");

1
src/Pages/Admin/Roles/Model/ModelForm.tsx
View File

@ -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>
);

6
src/Pages/Admin/Roles/Permissions/FormTable.tsx
View File

@ -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"}
/>

8
src/Pages/Admin/Roles/Permissions/Page.tsx
View File

@ -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>
);

62
src/Pages/Admin/Roles/Permissions/Table.tsx
View File

@ -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<ParamsEnum>();
@ -28,7 +28,16 @@ const App: React.FC = () => {
"admin::update",
];
const response = useGetAllRole({
pagination: true,
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>();
@ -48,24 +57,51 @@ const App: React.FC = () => {
}
}
console.log(newArray);
return newArray
}
const newShapeArray = changePermissionShape(Data)
const [t] = useTranslation()
const response = useGetAllPermissions({
pagination: true,
role_id,
name,
sort_by,
...filterState,
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={newShapeArray} onSubmit={handelSubmit} enableReinitialize>
{({handleSubmit})=>{
return (
<Formik initialValues={newArray} onSubmit={()=>{}}>
<Form>
<FormTable response={response} />
<button>submit</button>
<div className="permissions_submit_button">
<button className="button" onClick={()=> handleSubmit()
} type="submit" >{t("practical.submit")}</button>
</div>
</Form>
)
}}
</Formik>
);
};

121
src/Pages/Admin/Roles/Permissions/useTableColumns.tsx
View File

@ -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 {values,setFieldValue} = useFormikContext<any>()
console.log(values,"values");
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 <Checkbox onChange={onChangeAll} checked={isChecked} />;
return <Checkbox onChange={()=>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 <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} />
);
},
},

7
src/Pages/Admin/Roles/Table.tsx
View File

@ -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;

7
src/Styles/Tables/Table.scss
View File

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