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

end role and permission # 166

Browse Source
This commit is contained in:
karimaldeen 2024-09-24 14:54:27 +03:00
parent 9a6e5bc53d
commit 3bf0308631
10 changed files with 248 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Pages/Admin/Roles/Permissions/FN/formatAbilityData.ts Normal file
View File

@ -0,0 +1,21 @@
export const formatAbilityData = (Data: any[]) => {
const newArray: Array<{ name: any; [key: string]: boolean }> = [];
console.log(Data, "Data");
for (let i = 0; i < Data.length; i++) {
const currentObject = Data?.[i];
console.log(currentObject);
const newObjectShape = {
name: currentObject?.name,
delete: typeof currentObject?.delete === "boolean" ? false : "disabled",
index: typeof currentObject?.index === "boolean" ? false : "disabled",
show: typeof currentObject?.show === "boolean" ? false : "disabled",
store: typeof currentObject?.store === "boolean" ? false : "disabled",
update: typeof currentObject?.update === "boolean" ? false : "disabled",
} as any;
console.log(newObjectShape);
newArray.push(newObjectShape);
}
return newArray;
};

14
src/Pages/Admin/Roles/Permissions/FN/formatArrayToPermission.ts Normal file
View File

@ -0,0 +1,14 @@
export const formatArrayToPermissions = ( 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] && obj[key] === true) {
Data.push(`${permission}::${key}`);
}
});
});
return Data;
};

54
src/Pages/Admin/Roles/Permissions/FN/mergePermissionsWithAbilities.ts Normal file
View File

@ -0,0 +1,54 @@
export const mergePermissionsWithAbilities = (
newShapeArray: Record<any, any>[],
Ability: Record<any, boolean | "disabled" | "string">[]
) => {
const newShapeMap = new Map(newShapeArray.map((item) => [item.name, item]));
console.log(newShapeMap, "newShapeMap");
return Ability.map((abilityItem) => {
const correspondingNewShape = newShapeMap.get(abilityItem.name);
console.log(correspondingNewShape);
let ALL = false;
if (correspondingNewShape) {
if (
correspondingNewShape["index"] &&
correspondingNewShape["show"] &&
correspondingNewShape["store"] &&
correspondingNewShape["update"] &&
correspondingNewShape["delete"]
) {
ALL = true;
}
console.log(correspondingNewShape);
return {
...abilityItem,
delete:
typeof correspondingNewShape.delete === "boolean"
? correspondingNewShape.delete
: "disabled",
index:
typeof correspondingNewShape.index === "boolean"
? correspondingNewShape.index
: "disabled",
show:
typeof correspondingNewShape.show === "boolean"
? correspondingNewShape.show
: "disabled",
store:
typeof correspondingNewShape.store === "boolean"
? correspondingNewShape.store
: "disabled",
update:
typeof correspondingNewShape.update === "boolean"
? correspondingNewShape.update
: "disabled",
ALL: ALL,
};
}
// Return original ability item if no match found
return abilityItem;
});
};

31
src/Pages/Admin/Roles/Permissions/FN/transformPermissions.ts Normal file
View File

@ -0,0 +1,31 @@
export const transformPermissions = (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) {
if (value) {
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 = value
? ({ name: permission, [value]: true } as any)
: { name: permission };
newArray.push(newObject);
hashMap.set(permission, newArray.length - 1);
}
}
return newArray;
};

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

@ -2,8 +2,13 @@ import React from 'react'
import DataTable from '../../../../Layout/Dashboard/Table/DataTable'
import { useColumns } from './useTableColumns'
import { useFormikContext } from 'formik'
import { TableProps } from 'antd'
const FormTable = ({response}:{response:any}) => {
interface IFormTable extends TableProps {
response:any
}
const FormTable = ({response,...props}:IFormTable) => {
const {values} = useFormikContext<any>()
return (
@ -16,7 +21,7 @@ const FormTable = ({response}:{response:any}) => {
pagination={false}
loading={false}
rowKey={"name"}
{...props}
/>
</div>

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

@ -22,11 +22,11 @@ const TableHeader = () => {
pageTitle="role"
addModal={false}
/>
<FilterLayout
{/* <FilterLayout
sub_children={""}
filterTitle="page_header.permissions"
haveFilter={false}
/>
/> */}
<Table />
</Suspense>

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

@ -1,7 +1,6 @@
import React from "react";
import React, { Suspense } from "react";
import { useFilterState } from "../../../../Components/Utils/Filter/FilterState";
import { useFilterStateState } from "../../../../zustand/Filter";
import { useAddPermissions, useGetAllPermissions } from "../../../../api/Permissions";
import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../../enums/params";
import { Form, Formik } from "formik";
@ -9,6 +8,12 @@ import FormTable from "./FormTable";
import { useTranslation } from "react-i18next";
import { useGetAllRole, useUpdateRole } from "../../../../api/role";
import { useGetAllAbility } from "../../../../api/Ability";
import LoadingLottie from "../../../../Components/Lottie/Loading/LoadingLottie";
import { Button } from "antd";
import { transformPermissions } from "./FN/transformPermissions";
import { formatAbilityData } from "./FN/formatAbilityData";
import { mergePermissionsWithAbilities } from "./FN/mergePermissionsWithAbilities";
import { formatArrayToPermissions } from "./FN/formatArrayToPermission";
const App: React.FC = () => {
const { role_id } = useParams<ParamsEnum>();
@ -19,113 +24,72 @@ const App: React.FC = () => {
const response = useGetAllRole({
pagination: true,
show:role_id,
show: role_id,
name,
sort_by,
...filterState,
});
const {data} = useGetAllAbility()
const AllAbilityData = data?.data ?? [] ;
const currentData = response?.data?.data?.abilities ?? [] ;
console.log(currentData,"currentData");
const { data, isLoading } = useGetAllAbility();
const AllAbilityData = data?.data ?? [];
const currentData = response?.data?.data?.abilities ?? [];
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);
const AllAbility = transformPermissions(AllAbilityData ?? []);
if (existingIndex !== undefined) {
} else {
const newObject = permission as any;
newArray.push(newObject);
hashMap.set(permission, newArray.length - 1);
const Ability = formatAbilityData(AllAbility) ?? [];
const newShapeArray = transformPermissions([...currentData]);
}
}
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 }> = [];
const hashMap = new Map<string, number>();
const finalShape = mergePermissionsWithAbilities(newShapeArray, Ability);
for (let i = 0; i < Data.length; i++) {
const [permission, value] = Data[i].split("::");
const existingIndex = hashMap.get(permission);
const [t] = useTranslation();
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 = value ? { name: permission, [value]: true } as any : {name: permission} ;
newArray.push(newObject);
hashMap.set(permission, newArray.length - 1);
}
}
return newArray
}
const newShapeArray = changePermissionShape([...currentData,...Ability])
const [t] = useTranslation()
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} = useUpdateRole()
const handelSubmit = (values:any)=>{
const { mutate, isLoading: UpdateLoading } = useUpdateRole();
const handelSubmit = (values: any) => {
console.log(values);
const dataToSend = reverseChangePermissionShape(values);
const dataToSend = formatArrayToPermissions(values);
console.log(dataToSend);
mutate({
id:role_id,
abilities:dataToSend
})
}
id: role_id,
abilities: dataToSend?.length > 0 ? dataToSend : "",
});
};
const disabled =
isLoading || response.isLoading || response.isRefetching || UpdateLoading;
return (
<Formik initialValues={newShapeArray} onSubmit={handelSubmit} enableReinitialize>
{({handleSubmit})=>{
return (
<Form>
<Formik initialValues={finalShape} onSubmit={handelSubmit} enableReinitialize>
{({ dirty }) => {
return (
<Form>
<div className="permissions_submit_button mt-4">
<Button
className="button"
disabled={disabled || !dirty}
htmlType="submit"
>
{t("practical.submit")}
</Button>
</div>
<FormTable response={response} />
<div className="permissions_submit_button">
<button className="button" type="submit" >{t("practical.submit")}</button>
</div>
</Form>
)
}}
<FormTable
response={response}
loading={{
spinning: disabled,
indicator: (
<Suspense fallback={<></>}>
<LoadingLottie />
</Suspense>
),
size: "large",
}}
/>
</Formik>
</Form>
);
}}
</Formik>
);
};

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

@ -13,6 +13,10 @@ export const useColumns = () => {
cloneValue[index] = {};
}
cloneValue[index][type] = !cloneValue[index][type];
if(!cloneValue[index][type]){
cloneValue[index]["ALL"] = false
}
setValues(cloneValue)
};
@ -24,22 +28,22 @@ export const useColumns = () => {
if(cloneValue[index]["ALL"]){
cloneValue[index] = {
name:cloneValue[index]?.name ,
delete: false,
index: false,
show: false,
store: false,
update: false,
delete: typeof cloneValue[index]?.delete === "boolean" ? false : "disabled" ,
index: typeof cloneValue[index]?.index === "boolean" ? false : "disabled" ,
show: typeof cloneValue[index]?.show === "boolean" ? false : "disabled" ,
store: typeof cloneValue[index]?.store === "boolean" ? false : "disabled" ,
update: typeof cloneValue[index]?.update === "boolean" ? false : "disabled" ,
ALL: false
}
}else{
cloneValue[index] = {
name:cloneValue[index]?.name ,
delete: true,
index: true,
show: true,
store: true,
update: true,
delete: typeof cloneValue[index]?.delete === "boolean" ? true : "disabled" ,
index: typeof cloneValue[index]?.index === "boolean" ? true : "disabled" ,
show: typeof cloneValue[index]?.show === "boolean" ? true : "disabled" ,
store: typeof cloneValue[index]?.store === "boolean" ? true : "disabled" ,
update: typeof cloneValue[index]?.update === "boolean" ? true : "disabled" ,
ALL: true
}
@ -58,10 +62,9 @@ setValues(cloneValue)
const CheckBoxField = ({record,type,index}:{record:any,type:string,index:number})=>{
const isChecked = record?.[type] ;
return <Checkbox onChange={()=>onChange(type,index)} checked={isChecked} />;
const isChecked = record?.[type] === true ;
const isDisabled = record?.[type] === "disabled" ;
return <Checkbox onChange={()=>onChange(type,index)} checked={isChecked} disabled={isDisabled} />;
}
@ -71,11 +74,31 @@ setValues(cloneValue)
return !!item?.index && !!item?.show && !!item?.store && !!item?.update && !!item?.delete
})
const onChangeAllPermissions = ()=>{
const newShape =cloneValue?.map((item:any)=>{
const newShape =cloneValue?.map((item:any,index:number)=>{
if(IsAllValuesTrue){
return {...item,delete: false,index: false,show: false,store: false,update: false,ALL: false}
console.log(item);
return {
...item,
delete: typeof item?.delete === "boolean" ? false : "disabled",
index: typeof item?.index === "boolean" ? false : "disabled",
show: typeof item?.show === "boolean" ? false : "disabled",
store: typeof item?.store === "boolean" ? false : "disabled",
update: typeof item?.update === "boolean" ? false : "disabled",
ALL: false
}
}else{
return {...item,delete: true,index: true,show: true,store: true,update: true,ALL: true}
console.log(item);
return {
...item,
delete: typeof item?.delete === "boolean" ? true : "disabled",
index: typeof item?.index === "boolean" ? true : "disabled",
show: typeof item?.show === "boolean" ? true : "disabled",
store: typeof item?.store === "boolean" ? true : "disabled",
update: typeof item?.update === "boolean" ? true : "disabled",
ALL: true
}
}
})
setValues(newShape)
@ -83,8 +106,6 @@ setValues(cloneValue)
return <Checkbox onChange={()=>onChangeAllPermissions()} checked={IsAllValuesTrue} />;
}
const columns: TableColumnsType<any> = [
{
@ -92,6 +113,9 @@ setValues(cloneValue)
dataIndex: "name",
key: "name",
align: "center",
render: (_text,record,index) => {
return ( <> {t(`models.${record?.name}`)} </> );
},
},
{
title: t("columns.add"),

4
src/Styles/Layout/PageHeader.scss
View File

@ -42,3 +42,7 @@
.PageTitleLastItem {
color: #202C4B !important;
}
.permissions_submit_button{
transform: translateY(-40px);
}

9
src/translate/ar.json
View File

@ -389,7 +389,14 @@
"sale":"عملية بيع",
"collections": "التحصيلات",
"phone_number":"رقم الهاتف",
"email_address":"عنوان البريد الإلكتروني"
"email_address":"عنوان البريد الإلكتروني",
"ability": "القدرات",
"answer": "إجابة",
"area": "منطقة",
"city": "مدينة",
"coupon": "قسيمة",
"package": "حزمة",
"packageItem": "عنصر الحزمة"
},
"education_class_actions": {
"Student_Records": "سجلات الطلاب",