yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 08:19:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auto open the first section of conditions in RBAC

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2021-02-02 15:39:28 +01:00
parent bf445f961f
commit d0e89da94c
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/strapi-admin/ee/admin/components/Roles/ConditionsSelect/MenuList/index.js
View File

@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useState, useCallback } from 'react';
import React, { useMemo, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { components } from 'react-select';
import { groupBy, intersectionWith } from 'lodash';
@ -13,12 +13,26 @@ import UpperFirst from '../../../../../../admin/src/components/Roles/ConditionsS
import { usePermissionsContext } from '../../../../../../admin/src/hooks';
/* eslint-disable jsx-a11y/no-static-element-interactions */
const createCollapsesObject = arrayOfCategories =>
arrayOfCategories.reduce((acc, current, index) => {
acc[current[0]] = index === 0;
return acc;
}, {});
const MenuList = ({ selectProps, ...rest }) => {
const Component = components.MenuList;
const { isSuperAdmin } = usePermissionsContext();
const [collapses, setCollapses] = useState({});
const optionsGroupByCategory = groupBy(selectProps.options, 'category');
const arrayOfOptionsGroupedByCategory = useMemo(() => {
return Object.entries(groupBy(selectProps.options, 'category'));
}, [selectProps.options]);
const initCollapses = useMemo(() => createCollapsesObject(arrayOfOptionsGroupedByCategory), [
arrayOfOptionsGroupedByCategory,
]);
const [collapses, setCollapses] = useState(initCollapses);
const toggleCollapse = collapseName => {
setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] }));
};
@ -69,14 +83,16 @@ const MenuList = ({ selectProps, ...rest }) => {
return (
<Component {...rest}>
<Ul>
{Object.entries(optionsGroupByCategory).map((category, index) => {
{arrayOfOptionsGroupedByCategory.map((category, index) => {
const [categoryName, conditions] = category;
return (
<li key={category[0]}>
<div>
<Flex justifyContent="space-between">
<Label
htmlFor="overrideReactSelectBehavior"
onClick={() => handleCategoryChange(category[1])}
onClick={() => handleCategoryChange(conditions)}
>
<Flex>
<Checkbox
@ -86,12 +102,12 @@ const MenuList = ({ selectProps, ...rest }) => {
value={hasAllCategoryAction(category)}
someChecked={hasSomeCategoryAction(category)}
/>
<UpperFirst content={category[0]} />
<UpperFirst content={categoryName} />
</Flex>
</Label>
<div
style={{ flex: 1, textAlign: 'end', cursor: 'pointer' }}
onClick={() => toggleCollapse(category[0])}
onClick={() => toggleCollapse(categoryName)}
>
<FontAwesomeIcon
style={{
@ -99,13 +115,13 @@ const MenuList = ({ selectProps, ...rest }) => {
fontSize: '11px',
color: '#919bae',
}}
icon={collapses[category[0]] ? 'chevron-up' : 'chevron-down'}
icon={collapses[categoryName] ? 'chevron-up' : 'chevron-down'}
/>
</div>
</Flex>
</div>
<SubUl tag="ul" isOpen={collapses[category[0]]}>
{category[1].map(action => {
<SubUl tag="ul" isOpen={collapses[categoryName]}>
{conditions.map(action => {
return (
<li key={action.id}>
<Flex>
@ -130,7 +146,7 @@ const MenuList = ({ selectProps, ...rest }) => {
);
})}
</SubUl>
{index + 1 < Object.entries(optionsGroupByCategory).length && (
{index + 1 < arrayOfOptionsGroupedByCategory.length && (
<div style={{ paddingTop: '17px' }} />
)}
</li>