@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/containers/ListView/reducer.js

@@ -0,0 +1,182 @@
+/**
+ *
+ * listView reducer
+ */
+
+import produce from 'immer';
+import {
+  GET_DATA,
+  GET_DATA_SUCCEEDED,
+  RESET_PROPS,
+  ON_CHANGE_BULK,
+  ON_CHANGE_BULK_SELECT_ALL,
+  ON_DELETE_DATA_ERROR,
+  ON_DELETE_DATA_SUCCEEDED,
+  ON_DELETE_SEVERAL_DATA_SUCCEEDED,
+  TOGGLE_MODAL_DELETE,
+  TOGGLE_MODAL_DELETE_ALL,
+  ON_CHANGE_LIST_HEADERS,
+  ON_RESET_LIST_HEADERS,
+  SET_LIST_LAYOUT,
+  SET_MODAL_LOADING_STATE,
+} from './constants';
+
+export const initialState = {
+  data: [],
+  didDeleteData: false,
+  entriesToDelete: [],
+  isLoading: true,
+  showModalConfirmButtonLoading: false,
+  showWarningDelete: false,
+  showWarningDeleteAll: false,
+  contentType: {},
+  initialDisplayedHeaders: [],
+  displayedHeaders: [],
+  pagination: {
+    total: 0,
+  },
+};
+
+const listViewReducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, drafState => {
+    switch (action.type) {
+      case GET_DATA: {
+        return {
+          ...initialState,
+          contentType: state.contentType,
+          initialDisplayedHeaders: state.initialDisplayedHeaders,
+          displayedHeaders: state.displayedHeaders,
+        };
+      }
+
+      case GET_DATA_SUCCEEDED: {
+        drafState.pagination = action.pagination;
+        drafState.data = action.data;
+        drafState.isLoading = false;
+        break;
+      }
+      case ON_CHANGE_BULK: {
+        const hasElement = state.entriesToDelete.some(el => el === action.name);
+
+        if (hasElement) {
+          drafState.entriesToDelete = drafState.entriesToDelete.filter(el => el !== action.name);
+          break;
+        }
+
+        drafState.entriesToDelete.push(action.name);
+        break;
+      }
+      case ON_CHANGE_BULK_SELECT_ALL: {
+        if (state.entriesToDelete.length > 0) {
+          drafState.entriesToDelete = [];
+
+          break;
+        }
+
+        drafState.data.forEach(value => {
+          drafState.entriesToDelete.push(value.id.toString());
+        });
+
+        break;
+      }
+
+      case ON_CHANGE_LIST_HEADERS: {
+        const {
+          target: { name, value },
+        } = action;
+
+        if (!value) {
+          const { metadatas, attributes, uid } = state.contentType;
+          const metas = metadatas[name].list;
+          const header = {
+            name,
+            fieldSchema: attributes[name],
+            metadatas: metas,
+            key: `__${name}_key__`,
+          };
+
+          if (attributes[name].type === 'relation') {
+            drafState.displayedHeaders.push({
+              ...header,
+              queryInfos: {
+                defaultParams: {},
+                endPoint: `collection-types/${uid}`,
+              },
+            });
+          } else {
+            drafState.displayedHeaders.push(header);
+          }
+        } else {
+          drafState.displayedHeaders = state.displayedHeaders.filter(
+            header => header.name !== name
+          );
+        }
+
+        break;
+      }
+      case ON_DELETE_DATA_SUCCEEDED: {
+        drafState.didDeleteData = true;
+        drafState.showWarningDelete = false;
+        break;
+      }
+      case ON_DELETE_DATA_ERROR: {
+        drafState.didDeleteData = false;
+        drafState.showWarningDelete = false;
+        break;
+      }
+      case ON_DELETE_SEVERAL_DATA_SUCCEEDED: {
+        drafState.didDeleteData = true;
+        drafState.showWarningDeleteAll = false;
+        break;
+      }
+      case ON_RESET_LIST_HEADERS: {
+        drafState.displayedHeaders = state.initialDisplayedHeaders;
+        break;
+      }
+      case RESET_PROPS: {
+        return initialState;
+      }
+      case SET_MODAL_LOADING_STATE: {
+        drafState.showModalConfirmButtonLoading = true;
+        break;
+      }
+      case TOGGLE_MODAL_DELETE: {
+        drafState.showModalConfirmButtonLoading = false;
+
+        // Only change this value when the modal is opening
+        if (!state.showWarningDelete) {
+          drafState.didDeleteData = false;
+        }
+
+        drafState.entriesToDelete = [];
+        drafState.showWarningDelete = !state.showWarningDelete;
+
+        break;
+      }
+      case TOGGLE_MODAL_DELETE_ALL: {
+        drafState.showModalConfirmButtonLoading = false;
+
+        // Only change this value when the modal is closing
+        if (!state.showWarningDeleteAll) {
+          drafState.didDeleteData = false;
+        }
+
+        drafState.showWarningDeleteAll = !state.showWarningDeleteAll;
+        break;
+      }
+      case SET_LIST_LAYOUT: {
+        const { contentType, displayedHeaders } = action;
+
+        drafState.contentType = contentType;
+        drafState.displayedHeaders = displayedHeaders;
+        drafState.initialDisplayedHeaders = displayedHeaders;
+
+        break;
+      }
+      default:
+        return drafState;
+    }
+  });
+
+export default listViewReducer;

package/admin/src/containers/ListView/selectors.js

@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect';
+import pluginId from '../../pluginId';
+import { initialState } from './reducer';
+
+/**
+ * Direct selector to the listView state domain
+ */
+const listViewDomain = () => state => state.get(`${pluginId}_listView`) || initialState;
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by listView
+ */
+
+const makeSelectListView = () =>
+  createSelector(listViewDomain(), substate => {
+    return substate;
+  });
+
+export default makeSelectListView;
+export { listViewDomain };

package/admin/src/containers/ListView/utils/buildQueryString.js

@@ -0,0 +1,26 @@
+import { stringify } from 'qs';
+import createPluginsFilter from './createPluginsFilter';
+
+/**
+ * Creates a valid query string from an object of queryParams
+ * This includes:
+ * - a _where clause
+ * - plugin options
+ */
+const buildQueryString = (queryParams = {}) => {
+  const _where = queryParams._where || [];
+
+  /**
+   * Extracting pluginOptions from the query since we don't want them to be part
+   * of the url
+   */
+  const { plugins: _, ...otherQueryParams } = {
+    ...queryParams,
+    _where,
+    ...createPluginsFilter(queryParams.plugins),
+  };
+
+  return `?${stringify(otherQueryParams, { encode: false })}`;
+};
+
+export default buildQueryString;

package/admin/src/containers/ListView/utils/createPluginsFilter.js

@@ -0,0 +1,13 @@
+const createPluginsFilter = obj =>
+  Object.values(obj || {}).reduce((acc, current) => {
+    return {
+      ...acc,
+      ...Object.keys(current).reduce((accumulator, key) => {
+        accumulator[`_${key}`] = current[key];
+
+        return accumulator;
+      }, {}),
+    };
+  }, {});
+
+export default createPluginsFilter;

package/admin/src/containers/ListView/utils/getAllAllowedHeaders.js

@@ -0,0 +1,17 @@
+import { checkIfAttributeIsDisplayable } from '../../../utils';
+
+const getAllAllowedHeaders = attributes => {
+  const allowedAttributes = Object.keys(attributes).reduce((acc, current) => {
+    const attribute = attributes[current];
+
+    if (checkIfAttributeIsDisplayable(attribute)) {
+      acc.push(current);
+    }
+
+    return acc;
+  }, []);
+
+  return allowedAttributes.sort();
+};
+
+export default getAllAllowedHeaders;

package/admin/src/containers/ListView/utils/getFirstSortableHeader.js

@@ -0,0 +1,14 @@
+import { get } from 'lodash';
+
+const getFirstSortableHeader = headers => {
+  const matched = headers.find(header => header.metadatas.sortable === true);
+  const fieldName = get(matched, 'name', 'id');
+
+  if (get(matched, 'fieldSchema.type', '') === 'relation') {
+    return `${fieldName}.${matched.metadatas.mainField}`;
+  }
+
+  return fieldName;
+};
+
+export default getFirstSortableHeader;

package/admin/src/containers/ListView/utils/index.js

@@ -0,0 +1,3 @@
+export { default as getAllAllowedHeaders } from './getAllAllowedHeaders';
+export { default as getFirstSortableHeader } from './getFirstSortableHeader';
+export { default as buildQueryString } from './buildQueryString';

package/admin/src/containers/ListViewLayoutManager/Permissions.js

@@ -0,0 +1,29 @@
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useUserPermissions, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import isEqual from 'react-fast-compare';
+import ListView from '../ListView';
+import { generatePermissionsObject } from '../../utils';
+
+const Permissions = props => {
+  const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
+  const { isLoading, allowedActions } = useUserPermissions(viewPermissions, props.permissions);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return <ListView {...props} {...allowedActions} />;
+};
+
+Permissions.defaultProps = {
+  permissions: [],
+};
+
+Permissions.propTypes = {
+  permissions: PropTypes.array,
+  slug: PropTypes.string.isRequired,
+};
+
+// This avoids the components to rerender on params change causing multiple requests to be fired
+export default memo(Permissions, isEqual);

package/admin/src/containers/ListViewLayoutManager/index.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { useQueryParams } from 'strapi-helper-plugin';
+import { useFindRedirectionLink } from '../../hooks';
+import { resetProps, setLayout } from '../ListView/actions';
+import useSyncRbac from '../RBACManager/useSyncRbac';
+import Permissions from './Permissions';
+
+const ListViewLayout = ({ layout, ...props }) => {
+  const dispatch = useDispatch();
+  const { replace } = useHistory();
+  const [{ query, rawQuery }] = useQueryParams();
+  const permissions = useSyncRbac(query, props.slug, 'listView');
+  const redirectionLink = useFindRedirectionLink(props.slug);
+
+  useEffect(() => {
+    if (!rawQuery) {
+      replace(redirectionLink);
+    }
+  }, [rawQuery, replace, redirectionLink]);
+
+  useEffect(() => {
+    dispatch(setLayout(layout.contentType));
+  }, [dispatch, layout]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(resetProps());
+    };
+  }, [dispatch]);
+
+  if (!permissions) {
+    return null;
+  }
+
+  return <Permissions {...props} layout={layout} permissions={permissions} />;
+};
+
+ListViewLayout.propTypes = {
+  layout: PropTypes.exact({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.shape({
+      attributes: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      info: PropTypes.shape({ label: PropTypes.string.isRequired }).isRequired,
+      layouts: PropTypes.shape({
+        list: PropTypes.array.isRequired,
+        editRelations: PropTypes.array,
+      }).isRequired,
+      options: PropTypes.object.isRequired,
+      settings: PropTypes.object.isRequired,
+      pluginOptions: PropTypes.object,
+    }).isRequired,
+  }).isRequired,
+  slug: PropTypes.string.isRequired,
+};
+
+export default ListViewLayout;

package/admin/src/containers/ListViewProvider/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ListViewContext from '../../contexts/ListView';
+
+function ListViewProvider({ children, ...rest }) {
+  return (
+    <ListViewContext.Provider value={rest}>{children}</ListViewContext.Provider>
+  );
+}
+
+ListViewProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default ListViewProvider;

package/admin/src/containers/Main/actions.js

@@ -0,0 +1,13 @@
+import { GET_DATA, GET_DATA_SUCCEEDED, RESET_PROPS } from './constants';
+
+export const getData = () => ({
+  type: GET_DATA,
+});
+
+export const getDataSucceeded = (models, components) => ({
+  type: GET_DATA_SUCCEEDED,
+  components,
+  models,
+});
+
+export const resetProps = () => ({ type: RESET_PROPS });

package/admin/src/containers/Main/constants.js

@@ -0,0 +1,3 @@
+export const GET_DATA = 'ContentManager/Main/GET_DATA';
+export const GET_DATA_SUCCEEDED = 'ContentManager/Main/GET_DATA_SUCCEEDED';
+export const RESET_PROPS = 'ContentManager/Main/RESET_PROPS';

package/admin/src/containers/Main/index.js

@@ -0,0 +1,100 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+import { Switch, Route } from 'react-router-dom';
+import {
+  CheckPagePermissions,
+  LoadingIndicatorPage,
+  NotFound,
+  request,
+} from 'strapi-helper-plugin';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import pluginId from '../../pluginId';
+import pluginPermissions from '../../permissions';
+import { getRequestUrl } from '../../utils';
+import DragLayer from '../../components/DragLayer';
+import CollectionTypeRecursivePath from '../CollectionTypeRecursivePath';
+import ComponentSettingsView from '../ComponentSetttingsView';
+import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
+import { getData, getDataSucceeded, resetProps } from './actions';
+import makeSelectMain from './selectors';
+
+function Main({ getData, getDataSucceeded, isLoading, resetProps }) {
+  useEffect(() => {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+
+    const fetchData = async signal => {
+      getData();
+
+      try {
+        const [{ data: components }, { data: models }] = await Promise.all(
+          ['components', 'content-types'].map(endPoint =>
+            request(getRequestUrl(endPoint), { method: 'GET', signal })
+          )
+        );
+
+        getDataSucceeded(models, components);
+      } catch (err) {
+        console.error(err);
+        strapi.notification.error('notification.error');
+      }
+    };
+
+    fetchData(signal);
+
+    return () => {
+      abortController.abort();
+      resetProps();
+    };
+  }, [getData, getDataSucceeded, resetProps]);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <DragLayer />
+
+      <Switch>
+        <Route path={`/plugins/${pluginId}/components/:uid/configurations/edit`}>
+          <CheckPagePermissions permissions={pluginPermissions.componentsConfigurations}>
+            <ComponentSettingsView />
+          </CheckPagePermissions>
+        </Route>
+        <Route
+          path={`/plugins/${pluginId}/collectionType/:slug`}
+          component={CollectionTypeRecursivePath}
+        />
+        <Route path={`/plugins/${pluginId}/singleType/:slug`} component={SingleTypeRecursivePath} />
+        <Route path="" component={NotFound} />
+      </Switch>
+    </DndProvider>
+  );
+}
+
+Main.propTypes = {
+  getData: PropTypes.func.isRequired,
+  getDataSucceeded: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  resetProps: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = makeSelectMain();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      getData,
+      getDataSucceeded,
+      resetProps,
+    },
+    dispatch
+  );
+}
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(withConnect)(Main);

package/admin/src/containers/Main/reducer.js

@@ -0,0 +1,37 @@
+/**
+ *
+ * main reducer
+ */
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { GET_DATA, GET_DATA_SUCCEEDED, RESET_PROPS } from './constants';
+
+const initialState = {
+  components: [],
+  isLoading: true,
+  models: [],
+};
+
+const mainReducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case GET_DATA: {
+        draftState.isLoading = true;
+        break;
+      }
+      case GET_DATA_SUCCEEDED: {
+        draftState.isLoading = false;
+        draftState.components = action.components;
+        draftState.models = action.models;
+        break;
+      }
+      case RESET_PROPS: {
+        return initialState;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default mainReducer;
+export { initialState };

package/admin/src/containers/Main/selectors.js

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+import pluginId from '../../pluginId';
+import { initialState } from './reducer';
+
+const selectMainDomain = () => state => {
+  return state.get(`${pluginId}_main`) || initialState;
+};
+
+const makeSelectMain = () =>
+  createSelector(selectMainDomain(), substate => {
+    return substate;
+  });
+
+const makeSelectModelAndComponentSchemas = () =>
+  createSelector(selectMainDomain(), ({ components, models }) => ({
+    schemas: [...components, ...models],
+  }));
+
+export default makeSelectMain;
+export { makeSelectModelAndComponentSchemas, selectMainDomain };

package/admin/src/containers/RBACManager/actions.js

@@ -0,0 +1,14 @@
+import { RESET_PERMISSIONS, SET_PERMISSIONS } from './constants';
+
+export const setPermissions = (permissions, plugins, containerName) => {
+  return {
+    type: SET_PERMISSIONS,
+    permissions,
+    __meta__: {
+      plugins,
+      containerName,
+    },
+  };
+};
+
+export const resetPermissions = () => ({ type: RESET_PERMISSIONS });

package/admin/src/containers/RBACManager/constants.js

@@ -0,0 +1,2 @@
+export const SET_PERMISSIONS = 'ContentManager/RBACManager/SET_PERMISSIONS';
+export const RESET_PERMISSIONS = 'ContentManager/RBACManager/RESET_PERMISSIONS';

package/admin/src/containers/RBACManager/reducer.js

@@ -0,0 +1,32 @@
+/**
+ *
+ * RBACManager reducer
+ */
+
+import produce from 'immer';
+import { SET_PERMISSIONS, RESET_PERMISSIONS } from './constants';
+
+export const initialState = {
+  permissions: null,
+};
+
+const rbacManagerReducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_PERMISSIONS: {
+        draftState.permissions = Object.entries(action.permissions).reduce((acc, current) => {
+          return [...acc, ...current[1]];
+        }, []);
+        break;
+      }
+      case RESET_PERMISSIONS: {
+        draftState.permissions = null;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default rbacManagerReducer;

package/admin/src/containers/RBACManager/useSyncRbac.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { resetPermissions, setPermissions } from './actions';
+import { selectPermissions, selectCollectionTypePermissions } from '../../selectors';
+
+const useSyncRbac = (query, collectionTypeUID, containerName = 'listView') => {
+  const collectionTypesRelatedPermissions = useSelector(selectCollectionTypePermissions);
+  const permissions = useSelector(selectPermissions);
+  const dispatch = useDispatch();
+
+  const relatedPermissions = collectionTypesRelatedPermissions[collectionTypeUID];
+
+  useEffect(() => {
+    if (relatedPermissions) {
+      dispatch(setPermissions(relatedPermissions, query ? query.plugins : null, containerName));
+
+      return () => {
+        dispatch(resetPermissions());
+      };
+    }
+
+    return () => {};
+  }, [relatedPermissions, dispatch, query, containerName]);
+
+  return permissions;
+};
+
+export default useSyncRbac;