yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-29 02:11:45 +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 */ /* 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 PropTypes from 'prop-types';
import { components } from 'react-select'; import { components } from 'react-select';
import { groupBy, intersectionWith } from 'lodash'; import { groupBy, intersectionWith } from 'lodash';
@ -13,12 +13,26 @@ import UpperFirst from '../../../../../../admin/src/components/Roles/ConditionsS
import { usePermissionsContext } from '../../../../../../admin/src/hooks'; import { usePermissionsContext } from '../../../../../../admin/src/hooks';
/* eslint-disable jsx-a11y/no-static-element-interactions */ /* 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 MenuList = ({ selectProps, ...rest }) => {
const Component = components.MenuList; const Component = components.MenuList;
const { isSuperAdmin } = usePermissionsContext(); 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 => { const toggleCollapse = collapseName => {
setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] })); setCollapses(prevState => ({ ...prevState, [collapseName]: !collapses[collapseName] }));
}; };
@ -69,14 +83,16 @@ const MenuList = ({ selectProps, ...rest }) => {
return ( return (
<Component {...rest}> <Component {...rest}>
<Ul> <Ul>
{Object.entries(optionsGroupByCategory).map((category, index) => { {arrayOfOptionsGroupedByCategory.map((category, index) => {
const [categoryName, conditions] = category;
return ( return (
<li key={category[0]}> <li key={category[0]}>
<div> <div>
<Flex justifyContent="space-between"> <Flex justifyContent="space-between">
<Label <Label
htmlFor="overrideReactSelectBehavior" htmlFor="overrideReactSelectBehavior"
onClick={() => handleCategoryChange(category[1])} onClick={() => handleCategoryChange(conditions)}
> >
<Flex> <Flex>
<Checkbox <Checkbox
@ -86,12 +102,12 @@ const MenuList = ({ selectProps, ...rest }) => {
value={hasAllCategoryAction(category)} value={hasAllCategoryAction(category)}
someChecked={hasSomeCategoryAction(category)} someChecked={hasSomeCategoryAction(category)}
/> />
<UpperFirst content={category[0]} /> <UpperFirst content={categoryName} />
</Flex> </Flex>
</Label> </Label>
<div <div
style={{ flex: 1, textAlign: 'end', cursor: 'pointer' }} style={{ flex: 1, textAlign: 'end', cursor: 'pointer' }}
onClick={() => toggleCollapse(category[0])} onClick={() => toggleCollapse(categoryName)}
> >
<FontAwesomeIcon <FontAwesomeIcon
style={{ style={{
@ -99,13 +115,13 @@ const MenuList = ({ selectProps, ...rest }) => {
fontSize: '11px', fontSize: '11px',
color: '#919bae', color: '#919bae',
}} }}
icon={collapses[category[0]] ? 'chevron-up' : 'chevron-down'} icon={collapses[categoryName] ? 'chevron-up' : 'chevron-down'}
/> />
</div> </div>
</Flex> </Flex>
</div> </div>
<SubUl tag="ul" isOpen={collapses[category[0]]}> <SubUl tag="ul" isOpen={collapses[categoryName]}>
{category[1].map(action => { {conditions.map(action => {
return ( return (
<li key={action.id}> <li key={action.id}>
<Flex> <Flex>
@ -130,7 +146,7 @@ const MenuList = ({ selectProps, ...rest }) => {
); );
})} })}
</SubUl> </SubUl>
{index + 1 < Object.entries(optionsGroupByCategory).length && ( {index + 1 < arrayOfOptionsGroupedByCategory.length && (
<div style={{ paddingTop: '17px' }} /> <div style={{ paddingTop: '17px' }} />
)} )}
</li> </li>