Add checkbox state to all checkboxes

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/Collapse/index.js

@@ -1,29 +1,57 @@
 import React from 'react';
+import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { Flex, Padded } from '@buffetjs/core';
+import { usePermissionsDataManager } from '../../contexts/PermissionsDataManagerContext';
 import CheckboxWithCondition from '../../CheckboxWithCondition';
 import Chevron from '../../Chevron';
 import ConditionsButton from '../../ConditionsButton';
 import HiddenAction from '../../HiddenAction';
 import Wrapper from './Wrapper';
 import RowLabel from '../../RowLabel';
+import { getCheckboxState } from '../../utils';
+
+const Collapse = ({ availableActions, isActive, isGrey, name, onClickToggle, pathToData }) => {
+  const { modifiedData } = usePermissionsDataManager();
+
+  // This corresponds to the data related to the CT left checkboxe
+  // modifiedData: { collectionTypes: { [ctuid]: {create: {fields: {f1: true} } } } }
+  const mainData = get(modifiedData, pathToData.split('..'), {});
+  const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(mainData);
 
-const Collapse = ({ availableActions, isActive, isGrey, name, onClickToggle }) => {
   return (
     <Wrapper isActive={isActive} isGrey={isGrey}>
       <Flex style={{ flex: 1 }}>
         <Padded left size="sm" />
-        <RowLabel label={name} onClick={onClickToggle} isCollapsable>
+        <RowLabel
+          label={name}
+          onClick={onClickToggle}
+          isCollapsable
+          someChecked={hasSomeActionsSelected}
+          value={hasAllActionsSelected}
+        >
           <Chevron icon={isActive ? 'chevron-up' : 'chevron-down'} />
         </RowLabel>
 
         <Flex style={{ flex: 1 }}>
-          {availableActions.map(action => {
+          {availableActions.map(({ actionId, isDisplayed }) => {
-            if (!action.isDisplayed) {
+            if (!isDisplayed) {
-              return <HiddenAction key={action.actionId} />;
+              return <HiddenAction key={actionId} />;
             }
 
-            return <CheckboxWithCondition key={action.actionId} name={action.actionId} />;
+            const checkboxName = [...pathToData.split('..'), actionId];
+            const mainData = get(modifiedData, checkboxName, null);
+
+            const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(mainData);
+
+            return (
+              <CheckboxWithCondition
+                key={actionId}
+                name={checkboxName.join('..')}
+                someChecked={hasSomeActionsSelected}
+                value={hasAllActionsSelected}
+              />
+            );
           })}
         </Flex>
         <ConditionsButton isRight onClick={() => console.log('todo')} />
@@ -38,6 +66,7 @@ Collapse.propTypes = {
   isGrey: PropTypes.bool.isRequired,
   name: PropTypes.string.isRequired,
   onClickToggle: PropTypes.func.isRequired,
+  pathToData: PropTypes.string.isRequired,
 };
 
 export default Collapse;

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/index.js

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { Padded, Flex } from '@buffetjs/core';
 import { usePermissionsDataManager } from '../../../contexts/PermissionsDataManagerContext';
+import { getCheckboxState } from '../../../utils';
 import CheckboxWithCondition from '../../../CheckboxWithCondition';
 import Chevron from '../../../Chevron';
 import HiddenAction from '../../../HiddenAction';
 import RequiredSign from '../../../RequiredSign';
-import { getCheckboxState } from '../../utils';
 import RowLabel from '../../../RowLabel';
 import SubActionRow from '../SubActionRow';
 import Wrapper from './Wrapper';
+import getRowLabelCheckboxeState from './utils/getRowLabelCheckboxeState';
 
 const ActionRow = ({
   childrenForm,
@@ -48,12 +49,23 @@ const ActionRow = ({
     }
   }, [isCollapsable, name]);
 
+  const { hasAllActionsSelected, hasSomeActionsSelected } = useMemo(() => {
+    return getRowLabelCheckboxeState(propertyActions, modifiedData, pathToData, propertyName, name);
+  }, [propertyActions, modifiedData, pathToData, propertyName, name]);
+
   return (
     <>
       <Wrapper alignItems="center" isCollapsable={isCollapsable} isActive={isActive}>
         <Flex style={{ flex: 1 }}>
           <Padded left size="sm" />
-          <RowLabel width="15rem" onClick={handleClick} isCollapsable={isCollapsable} label={label}>
+          <RowLabel
+            width="15rem"
+            onClick={handleClick}
+            isCollapsable={isCollapsable}
+            label={label}
+            someChecked={hasSomeActionsSelected}
+            value={hasAllActionsSelected}
+          >
             {required && <RequiredSign />}
             <Chevron icon={isActive ? 'caret-up' : 'caret-down'} />
           </RowLabel>
@@ -78,10 +90,9 @@ const ActionRow = ({
                 );
               }
 
-              const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(
+              const data = get(modifiedData, checkboxName, {});
-                checkboxName,
+
-                modifiedData
+              const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(data);
-              );
 
               return (
                 <CheckboxWithCondition

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/ActionRow/utils/getRowLabelCheckboxeState.js

@@ -0,0 +1,37 @@
+import { get } from 'lodash';
+import { getCheckboxState } from '../../../../utils';
+
+const getActionIdsFromPropertyActions = propertyActions => {
+  const actionIds = propertyActions.reduce((acc, current) => {
+    if (current.isActionRelatedToCurrentProperty) {
+      acc.push(current.actionId);
+    }
+
+    return acc;
+  }, []);
+
+  return actionIds;
+};
+
+const getRowLabelCheckboxeState = (
+  propertyActions,
+  modifiedData,
+  pathToContentType,
+  propertyToCheck,
+  targetKey
+) => {
+  const actionIds = getActionIdsFromPropertyActions(propertyActions);
+
+  const data = actionIds.reduce((acc, current) => {
+    const pathToData = [...pathToContentType.split('..'), current, propertyToCheck, targetKey];
+    const mainData = get(modifiedData, pathToData, false);
+
+    acc[current] = mainData;
+
+    return acc;
+  }, {});
+
+  return getCheckboxState(data);
+};
+
+export default getRowLabelCheckboxeState;

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/CollapsePropertyMatrix/SubActionRow/index.js

@@ -4,13 +4,13 @@ import { get } from 'lodash';
 import { Flex, Text } from '@buffetjs/core';
 import styled from 'styled-components';
 import { usePermissionsDataManager } from '../../../contexts/PermissionsDataManagerContext';
+import { getCheckboxState } from '../../../utils';
 import CheckboxWithCondition from '../../../CheckboxWithCondition';
 import Chevron from '../../../Chevron';
 import CollapseLabel from '../../../CollapseLabel';
 import Curve from '../../../Curve';
 import HiddenAction from '../../../HiddenAction';
 import RequiredSign from '../../../RequiredSign';
-import { getCheckboxState } from '../../utils';
 import { RowStyle, RowWrapper } from './row';
 import { LeftBorderTimeline, TopTimeline } from './timeline';
 import Wrapper from './Wrapper';
@@ -27,7 +27,6 @@ const SubActionRow = ({
   parentName,
   propertyName,
 }) => {
-  console.log({ pathToDataFromActionRow });
   const { modifiedData, onChangeSimpleCheckbox } = usePermissionsDataManager();
   const [rowToOpen, setRowToOpen] = useState(null);
   const handleClickToggleSubLevel = useCallback(name => {
@@ -101,9 +100,9 @@ const SubActionRow = ({
                       value,
                     ];
 
-                    if (!subChildrenForm) {
                     const checkboxValue = get(modifiedData, checkboxName, 'test');
 
+                    if (!subChildrenForm) {
                       return (
                         <CheckboxWithCondition
                           key={label}
@@ -115,8 +114,7 @@ const SubActionRow = ({
                     }
 
                     const { hasAllActionsSelected, hasSomeActionsSelected } = getCheckboxState(
-                      checkboxName,
+                      checkboxValue
-                      modifiedData
                     );
 
                     return (

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/index.js

@@ -32,6 +32,7 @@ const ContentTypeCollapse = ({
         isGrey={index % 2 === 0}
         name={contentTypeName}
         onClickToggle={handleClickToggleCollapse}
+        pathToData={pathToData}
       />
       {isActive &&
         properties.map(({ label, value, children: childrenForm }, i) => {

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/getCheckboxState.js

@@ -1,19 +0,0 @@
-import { get } from 'lodash';
-import createArrayOfValues from './createArrayOfValues';
-
-const getValueFromModifiedData = (pathToData, modifiedData) => {
-  const data = get(modifiedData, pathToData, {});
-
-  return createArrayOfValues(data);
-};
-
-const getCheckboxState = (pathToData, modifiedData) => {
-  const arrayOfValues = getValueFromModifiedData(pathToData, modifiedData);
-
-  const hasAllActionsSelected = arrayOfValues.every(val => val);
-  const hasSomeActionsSelected = arrayOfValues.some(val => val) && !hasAllActionsSelected;
-
-  return { hasAllActionsSelected, hasSomeActionsSelected };
-};
-
-export default getCheckboxState;

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypeCollapse/utils/index.js

@@ -1,3 +1,2 @@
 export { default as activeStyle } from './activeStyle';
 export { default as getAvailableActions } from './getAvailableActions';
-export { default as getCheckboxState } from './getCheckboxState';

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/ContentTypes/index.js

@@ -9,7 +9,7 @@ const ContentTypes = ({ kind, layout: { actions, subjects } }) => {
   return (
     <Wrapper>
       <Padded left right bottom size="md">
-        <GlobalActions actions={actions} />
+        <GlobalActions actions={actions} kind={kind} />
         <ContentTypeCollapses pathToData={kind} subjects={subjects} actions={actions} />
       </Padded>
     </Wrapper>

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/GlobalActions/index.js

@@ -1,19 +1,25 @@
 import React, { memo, useMemo } from 'react';
+import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { Flex } from '@buffetjs/core';
 import { useIntl } from 'react-intl';
+import { usePermissionsDataManager } from '../contexts/PermissionsDataManagerContext';
 import CheckboxWithCondition from '../CheckboxWithCondition';
+import { findDisplayedActions, getCheckboxesState } from './utils';
 import Wrapper from './Wrapper';
 
-const GlobalActions = ({ actions }) => {
+const GlobalActions = ({ actions, kind }) => {
   const { formatMessage } = useIntl();
+  const { modifiedData } = usePermissionsDataManager();
 
   const displayedActions = useMemo(() => {
-    return actions.filter(({ subjects }) => {
+    return findDisplayedActions(actions);
-      return subjects.length;
-    });
   }, [actions]);
 
+  const checkboxesState = useMemo(() => {
+    return getCheckboxesState(displayedActions, modifiedData[kind]);
+  }, [modifiedData, displayedActions, kind]);
+
   return (
     <Wrapper>
       <Flex>
@@ -26,7 +32,8 @@ const GlobalActions = ({ actions }) => {
                 defaultMessage: label,
               })}
               name={actionId}
-              value={false}
+              value={get(checkboxesState, [actionId, 'hasAllActionsSelected'], false)}
+              someChecked={get(checkboxesState, [actionId, 'hasSomeActionsSelected'], false)}
             />
           );
         })}
@@ -47,6 +54,7 @@ GlobalActions.propTypes = {
       subjects: PropTypes.array.isRequired,
     })
   ),
+  kind: PropTypes.string.isRequired,
 };
 
 export default memo(GlobalActions);

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/GlobalActions/utils/getRowLabelCheckboxesState.js

@@ -0,0 +1,32 @@
+import { get } from 'lodash';
+import { getCheckboxState } from '../../utils';
+
+const getCheckboxesState = (properties, modifiedData) => {
+  const actionsIds = properties.map(({ actionId }) => actionId);
+
+  const relatedActionsData = actionsIds.reduce((acc, actionId) => {
+    Object.keys(modifiedData).forEach(ctUid => {
+      const actionIdData = get(modifiedData, [ctUid, actionId], {});
+
+      const actionIdState = { [ctUid]: actionIdData };
+
+      if (!acc[actionId]) {
+        acc[actionId] = actionIdState;
+      } else {
+        acc[actionId] = { ...acc[actionId], ...actionIdState };
+      }
+    });
+
+    return acc;
+  }, {});
+
+  const checkboxesState = Object.keys(relatedActionsData).reduce((acc, current) => {
+    acc[current] = getCheckboxState(relatedActionsData[current]);
+
+    return acc;
+  }, {});
+
+  return checkboxesState;
+};
+
+export default getCheckboxesState;

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/GlobalActions/utils/index.js

@@ -0,0 +1,2 @@
+export { default as findDisplayedActions } from './findDisplayedActions';
+export { default as getCheckboxesState } from './getRowLabelCheckboxesState';

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/Permissions/reducer.js

@@ -15,6 +15,24 @@ const initialState = {
             city: true,
           },
         },
+        'content-manager.explorer.read': {
+          fields: {
+            postal_coder: true,
+            categories: false,
+            cover: true,
+            images: true,
+            city: true,
+          },
+        },
+        'content-manager.explorer.update': {
+          fields: {
+            postal_coder: true,
+            categories: false,
+            cover: true,
+            images: true,
+            city: true,
+          },
+        },
       },
       restaurant: {
         'content-manager.explorer.create': {
@@ -31,6 +49,28 @@ const initialState = {
               },
             },
             dz: true,
+            relation: true,
+          },
+          locales: {
+            fr: true,
+            en: true,
+          },
+        },
+        'content-manager.explorer.read': {
+          fields: {
+            f1: true,
+            f2: true,
+            services: {
+              name: true,
+              media: true,
+              closing: {
+                name: {
+                  test: true,
+                },
+              },
+            },
+            dz: true,
+            relation: true,
           },
           locales: {
             fr: true,

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/RowLabel/index.js

@@ -4,10 +4,19 @@ import { Checkbox, Text } from '@buffetjs/core';
 import CollapseLabel from '../CollapseLabel';
 import Wrapper from './Wrapper';
 
-const RowLabel = ({ isCollapsable, label, children, onClick, textColor, width }) => {
+const RowLabel = ({
+  value,
+  someChecked,
+  isCollapsable,
+  label,
+  children,
+  onClick,
+  textColor,
+  width,
+}) => {
   return (
     <Wrapper width={width}>
-      <Checkbox name="todo" value={false} />
+      <Checkbox name="todo" someChecked={someChecked} value={value} />
       <CollapseLabel
         title={label}
         alignItems="center"
@@ -32,6 +41,8 @@ const RowLabel = ({ isCollapsable, label, children, onClick, textColor, width })
 
 RowLabel.defaultProps = {
   children: null,
+  value: false,
+  someChecked: false,
   isCollapsable: false,
   textColor: 'grey',
   width: '18rem',
@@ -39,6 +50,8 @@ RowLabel.defaultProps = {
 
 RowLabel.propTypes = {
   children: PropTypes.node,
+  value: PropTypes.bool,
+  someChecked: PropTypes.bool,
   isCollapsable: PropTypes.bool,
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/temp/fakeData.js

@@ -415,7 +415,7 @@ const data = {
         {
           label: 'Publish',
           actionId: 'content-manager.explorer.publish',
-          subjects: ['restaurante'],
+          subjects: ['restaurant'],
         },
       ],
     },

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/utils/getCheckboxState.js

@@ -0,0 +1,16 @@
+import createArrayOfValues from './createArrayOfValues';
+
+const getCheckboxState = data => {
+  const arrayOfValues = createArrayOfValues(data);
+
+  if (!arrayOfValues.length) {
+    return { hasAllActionsSelected: false, hasSomeActionsSelected: false };
+  }
+
+  const hasAllActionsSelected = arrayOfValues.every(val => val);
+  const hasSomeActionsSelected = arrayOfValues.some(val => val) && !hasAllActionsSelected;
+
+  return { hasAllActionsSelected, hasSomeActionsSelected };
+};
+
+export default getCheckboxState;

packages/strapi-admin/ee/admin/containers/Roles/CreatePage/utils/index.js

@@ -0,0 +1,2 @@
+export { default as getCheckboxState } from './getCheckboxState';
+export { default as createArrayOfValues } from './createArrayOfValues';