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

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

@@ -0,0 +1,30 @@
+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 EditView from '../EditView';
+import { generatePermissionsObject } from '../../utils';
+
+const Permissions = props => {
+  const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
+  const { isLoading, allowedActions } = useUserPermissions(viewPermissions, props.userPermissions);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return <EditView {...props} allowedActions={allowedActions} />;
+};
+
+Permissions.defaultProps = {
+  permissions: [],
+};
+
+Permissions.propTypes = {
+  permissions: PropTypes.array,
+  slug: PropTypes.string.isRequired,
+  userPermissions: PropTypes.array.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/EditViewLayoutManager/actions.js

@@ -0,0 +1,9 @@
+import { RESET_PROPS, SET_LAYOUT } from './constants';
+
+export const resetProps = () => ({ type: RESET_PROPS });
+
+export const setLayout = (layout, query) => ({
+  type: SET_LAYOUT,
+  layout,
+  query,
+});

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

@@ -0,0 +1,2 @@
+export const SET_LAYOUT = 'ContentManager/EditViewLayoutManager/SET_LAYOUT';
+export const RESET_PROPS = 'ContentManager/EditViewLayoutManager/RESET_PROPS';

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

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { LoadingIndicatorPage, useQueryParams } from 'strapi-helper-plugin';
+import useSyncRbac from '../RBACManager/useSyncRbac';
+import { resetProps, setLayout } from './actions';
+import selectLayout from './selectors';
+import Permissions from './Permissions';
+
+const EditViewLayoutManager = ({ layout, ...rest }) => {
+  const currentLayout = useSelector(selectLayout);
+  const dispatch = useDispatch();
+  const [{ query }] = useQueryParams();
+  const permissions = useSyncRbac(query, rest.slug, 'editView');
+
+  useEffect(() => {
+    dispatch(setLayout(layout, query));
+
+    return () => {
+      dispatch(resetProps());
+    };
+  }, [layout, dispatch, query]);
+
+  if (!currentLayout || !permissions) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return <Permissions {...rest} layout={currentLayout} userPermissions={permissions} />;
+};
+
+EditViewLayoutManager.propTypes = {
+  layout: PropTypes.shape({
+    components: PropTypes.object.isRequired,
+    contentType: PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      settings: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      options: PropTypes.object.isRequired,
+      attributes: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default EditViewLayoutManager;

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

@@ -0,0 +1,30 @@
+/**
+ *
+ * EditViewLayoutManager reducer
+ */
+
+import produce from 'immer';
+import { RESET_PROPS, SET_LAYOUT } from './constants';
+
+export const initialState = {
+  currentLayout: null,
+};
+
+const editViewManagerReducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, drafState => {
+    switch (action.type) {
+      case RESET_PROPS: {
+        drafState.currentLayout = null;
+        break;
+      }
+      case SET_LAYOUT: {
+        drafState.currentLayout = action.layout;
+        break;
+      }
+      default:
+        return drafState;
+    }
+  });
+
+export default editViewManagerReducer;

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

@@ -0,0 +1,5 @@
+import pluginId from '../../pluginId';
+
+const selectLayout = state => state.get(`${pluginId}_editViewLayoutManager`).currentLayout;
+
+export default selectLayout;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LayoutDndContext from '../../contexts/LayoutDnd';
+
+function LayoutDndProvider({
+  attributes,
+  buttonData,
+  children,
+  goTo,
+  layout,
+  metadatas,
+  moveItem,
+  moveRow,
+  onAddData,
+  relationsLayout,
+  removeField,
+  selectedItemName,
+  setEditFieldToSelect,
+  ...rest
+}) {
+  return (
+    <LayoutDndContext.Provider
+      value={{
+        attributes,
+        buttonData,
+        goTo,
+        layout,
+        metadatas,
+        moveItem,
+        moveRow,
+        onAddData,
+        relationsLayout,
+        removeField,
+        selectedItemName,
+        setEditFieldToSelect,
+        ...rest,
+      }}
+    >
+      {children}
+    </LayoutDndContext.Provider>
+  );
+}
+
+LayoutDndProvider.defaultProps = {
+  attributes: {},
+  buttonData: [],
+  goTo: () => {},
+  layout: [],
+  metadatas: {},
+  moveItem: () => {},
+  moveRow: () => {},
+  onAddData: () => {},
+  relationsLayout: [],
+  removeField: () => {},
+  selectedItemName: null,
+  setEditFieldToSelect: () => {},
+};
+
+LayoutDndProvider.propTypes = {
+  attributes: PropTypes.object,
+  buttonData: PropTypes.array,
+  children: PropTypes.node.isRequired,
+  goTo: PropTypes.func,
+  layout: PropTypes.array,
+  metadatas: PropTypes.object,
+  moveItem: PropTypes.func,
+  moveRow: PropTypes.func,
+  onAddData: PropTypes.func,
+  relationsLayout: PropTypes.array,
+  removeField: PropTypes.func,
+  selectedItemName: PropTypes.string,
+  setEditFieldToSelect: PropTypes.func,
+};
+
+export default LayoutDndProvider;

package/admin/src/containers/ListSettingsView/DragWrapper.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const DragWrapper = styled.div`
+  position: relative;
+  padding: 11px 40px 11px 11px;
+  margin-top: 19px;
+  margin-bottom: 10px;
+  border: 1px dashed #e3e9f3;
+  border-radius: 2px;
+  > div,
+  > div > div {
+    margin: 0;
+    padding: 0;
+  }
+  > div > div {
+    overflow-x: auto;
+    overflow-y: scroll;
+  }
+`;
+
+export default DragWrapper;

package/admin/src/containers/ListSettingsView/DropdownButton.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { ButtonDropdown } from 'reactstrap';
+
+const DropdownButton = styled(ButtonDropdown)`
+  display: table-cell;
+`;
+
+export default DropdownButton;

package/admin/src/containers/ListSettingsView/Label.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import ItemTypes from '../../utils/ItemTypes';
+import DraggedField from '../../components/DraggedField';
+import useLayoutDnd from '../../hooks/useLayoutDnd';
+
+const Label = ({
+  count,
+  index,
+  label,
+  move,
+  name,
+  onClick,
+  onRemove,
+  selectedItem,
+}) => {
+  const ref = useRef(null);
+  const { setIsDraggingSibling } = useLayoutDnd();
+
+  const [, drop] = useDrop({
+    accept: ItemTypes.FIELD,
+    hover(item) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      move(dragIndex, hoverIndex);
+
+      item.index = hoverIndex;
+    },
+  });
+  const [{ isDragging }, drag, preview] = useDrag({
+    begin: () => {
+      setIsDraggingSibling(true);
+    },
+    end: () => {
+      setIsDraggingSibling(false);
+    },
+    item: { type: ItemTypes.FIELD, id: name, name, index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: false });
+  }, [preview]);
+
+  drag(drop(ref));
+
+  return (
+    <DraggedField
+      count={count}
+      ref={ref}
+      isDragging={isDragging}
+      label={label}
+      name={name}
+      onClick={onClick}
+      onRemove={onRemove}
+      selectedItem={selectedItem}
+    />
+  );
+};
+
+Label.defaultProps = {
+  index: 0,
+  label: '',
+  selectedItem: '',
+};
+
+Label.propTypes = {
+  count: PropTypes.number.isRequired,
+  index: PropTypes.number,
+  label: PropTypes.string,
+  move: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onRemove: PropTypes.func.isRequired,
+  selectedItem: PropTypes.string,
+};
+
+export default Label;

package/admin/src/containers/ListSettingsView/MenuDropdown.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { DropdownMenu } from 'reactstrap';
+
+const MenuDropdown = styled(DropdownMenu)`
+  max-height: 180px;
+  min-width: 230px;
+  margin-left: -1px;
+  margin-top: -1px;
+  padding: 0;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0;
+  border-color: #e3e9f3 !important;
+  border-top-color: #aed4fb !important;
+  box-shadow: 0 2px 3px rgba(227, 233, 245, 0.5);
+  transform: translate3d(-199px, 30px, 0px) !important;
+
+  overflow: scroll;
+
+  button {
+    height: 30px;
+    padding-left: 10px !important;
+    line-height: 26px;
+    cursor: pointer;
+    font-size: 13px !important;
+    &:focus,
+    &:active,
+    &:hover {
+      background-color: #fafafb !important;
+      color: #333740;
+      outline: 0;
+    }
+    div {
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
+export default MenuDropdown;

package/admin/src/containers/ListSettingsView/Toggle.js

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import { DropdownToggle } from 'reactstrap';
+
+const openedStyle = `
+  background-color: #e6f0fb !important;
+  border: 1px solid #aed4fb !important;
+  color: #007eff !important;
+`;
+
+const beforeStyle = `
+  content: '\f067';
+  font-family: FontAwesome;
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+`;
+
+const Toggle = styled(DropdownToggle)`
+  width: 30px;
+  height: 30px;
+  background: #fafafb;
+  border: 1px solid #e3e9f3;
+  border-radius: 2px;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  color: #b3b5b9;
+
+  &:disabled {
+    cursor: not-allowed !important;
+
+    background: #fafafb;
+    border: 1px solid #e3e9f3;
+    border-radius: 2px;
+    color: #b3b5b9;
+  }
+
+  &:before {
+    ${beforeStyle}
+  }
+
+  &:hover,
+  :active,
+  :focus {
+    ${openedStyle}
+
+    &:before {
+      ${beforeStyle}
+    }
+  }
+`;
+
+export default Toggle;

package/admin/src/containers/ListSettingsView/forms.json

@@ -0,0 +1,64 @@
+[
+  {
+    "label": { "id": "content-manager.form.Input.search" },
+    "customBootstrapClass": "col-md-4",
+    "didCheckErrors": false,
+    "errors": [],
+    "name": "settings.searchable",
+    "type": "bool",
+    "validations": {}
+  },
+  {
+    "label": { "id": "content-manager.form.Input.filters" },
+    "customBootstrapClass": "col-md-4",
+    "didCheckErrors": false,
+    "errors": [],
+    "name": "settings.filterable",
+    "type": "bool",
+    "validations": {}
+  },
+  {
+    "label": { "id": "content-manager.form.Input.bulkActions" },
+    "customBootstrapClass": "col-md-4",
+    "didCheckErrors": false,
+    "errors": [],
+    "name": "settings.bulkable",
+    "type": "bool",
+    "validations": {}
+  },
+  {
+    "label": { "id": "content-manager.form.Input.pageEntries" },
+    "customBootstrapClass": "col-md-4",
+    "didCheckErrors": false,
+    "errors": [],
+    "description": {
+      "id": "content-manager.form.Input.pageEntries.inputDescription"
+    },
+    "name": "settings.pageSize",
+    "options": [10, 20, 50, 100],
+    "type": "select",
+    "validations": {}
+  },
+  {
+    "label": { "id": "content-manager.form.Input.defaultSort" },
+    "customBootstrapClass": "col-md-4 ml-md-auto",
+    "didCheckErrors": false,
+    "errors": [],
+    "style": { "marginRight": "-20px" },
+    "name": "settings.defaultSortBy",
+    "options": ["id"],
+    "type": "select",
+    "validations": {}
+  },
+  {
+    "label": { "id": "app.utils.defaultMessage" },
+    "customBootstrapClass": "col-md-2",
+    "didCheckErrors": false,
+    "errors": [],
+
+    "name": "settings.defaultSortOrder",
+    "options": ["ASC", "DESC"],
+    "type": "select",
+    "validations": {}
+  }
+]