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

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

@@ -0,0 +1,298 @@
+import React, { memo, useMemo, useReducer, useState } from 'react';
+import PropTypes from 'prop-types';
+import { get, pick } from 'lodash';
+import { request, useGlobalContext } from 'strapi-helper-plugin';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useDrop } from 'react-dnd';
+import { DropdownItem } from 'reactstrap';
+import { Inputs as Input } from '@buffetjs/custom';
+import pluginId from '../../pluginId';
+import { checkIfAttributeIsDisplayable, ItemTypes, getRequestUrl } from '../../utils';
+import PopupForm from '../../components/PopupForm';
+import SettingsViewWrapper from '../../components/SettingsViewWrapper';
+import SortWrapper from '../../components/SortWrapper';
+import LayoutDndProvider from '../LayoutDndProvider';
+import Label from './Label';
+import MenuDropdown from './MenuDropdown';
+import DropdownButton from './DropdownButton';
+import DragWrapper from './DragWrapper';
+import Toggle from './Toggle';
+import init from './init';
+import reducer, { initialState } from './reducer';
+import forms from './forms.json';
+
+const ListSettingsView = ({ layout, slug, updateLayout }) => {
+  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, layout)
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [isModalFormOpen, setIsModalFormOpen] = useState(false);
+  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
+  const { formatMessage } = useIntl();
+  const { emitEvent, updateMenu } = useGlobalContext();
+  const toggleModalForm = () => setIsModalFormOpen(prevState => !prevState);
+  const { labelForm, labelToEdit, initialData, modifiedData } = reducerState.toJS();
+  const attributes = useMemo(() => {
+    return get(modifiedData, ['attributes'], {});
+  }, [modifiedData]);
+
+  const getName = useMemo(() => {
+    return get(modifiedData, ['info', 'name'], '');
+  }, [modifiedData]);
+
+  const displayedFields = useMemo(() => {
+    return get(modifiedData, ['layouts', 'list'], []);
+  }, [modifiedData]);
+
+  const listRemainingFields = useMemo(() => {
+    const metadatas = get(modifiedData, ['metadatas'], {});
+
+    return Object.keys(metadatas)
+      .filter(key => {
+        return checkIfAttributeIsDisplayable(get(attributes, key, {}));
+      })
+      .filter(field => {
+        return !displayedFields.includes(field);
+      })
+      .sort();
+  }, [displayedFields, attributes, modifiedData]);
+
+  const handleClickEditLabel = labelToEdit => {
+    dispatch({
+      type: 'SET_LABEL_TO_EDIT',
+      labelToEdit,
+    });
+    toggleModalForm();
+  };
+
+  const handleClosed = () => {
+    dispatch({
+      type: 'UNSET_LABEL_TO_EDIT',
+    });
+  };
+
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name,
+      value: name === 'settings.pageSize' ? parseInt(value, 10) : value,
+    });
+  };
+
+  const handleChangeEditLabel = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE_LABEL_METAS',
+      name,
+      value,
+    });
+  };
+
+  const handleConfirm = async () => {
+    try {
+      const body = pick(modifiedData, ['layouts', 'settings', 'metadatas']);
+
+      const response = await request(getRequestUrl(`content-types/${slug}/configuration`), {
+        method: 'PUT',
+        body,
+      });
+
+      updateLayout(response.data);
+
+      dispatch({
+        type: 'SUBMIT_SUCCEEDED',
+      });
+      emitEvent('didEditListSettings');
+    } catch (err) {
+      strapi.notification.toggle({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  const move = (originalIndex, atIndex) => {
+    dispatch({
+      type: 'MOVE_FIELD',
+      originalIndex,
+      atIndex,
+    });
+  };
+
+  const [, drop] = useDrop({ accept: ItemTypes.FIELD });
+
+  const renderForm = () => {
+    const type = get(attributes, [labelToEdit, 'type'], 'text');
+    const relationType = get(attributes, [labelToEdit, 'relationType']);
+    let shouldDisplaySortToggle = !['media', 'relation'].includes(type);
+    const label = formatMessage({ id: `${pluginId}.form.Input.label` });
+    const description = formatMessage({ id: `${pluginId}.form.Input.label.inputDescription` });
+
+    if (['oneWay', 'oneToOne', 'manyToOne'].includes(relationType)) {
+      shouldDisplaySortToggle = true;
+    }
+
+    return (
+      <>
+        <div className="col-6" style={{ marginBottom: 4 }}>
+          <Input
+            description={description}
+            label={label}
+            type="text"
+            name="label"
+            onBlur={() => {}}
+            value={get(labelForm, 'label', '')}
+            onChange={handleChangeEditLabel}
+          />
+        </div>
+        {shouldDisplaySortToggle && (
+          <div className="col-6" style={{ marginBottom: 4 }}>
+            <FormattedMessage id={`${pluginId}.form.Input.sort.field`}>
+              {label => (
+                <Input
+                  label={label}
+                  type="bool"
+                  name="sortable"
+                  value={get(labelForm, 'sortable', false)}
+                  onChange={handleChangeEditLabel}
+                />
+              )}
+            </FormattedMessage>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <LayoutDndProvider
+      isDraggingSibling={isDraggingSibling}
+      setIsDraggingSibling={setIsDraggingSibling}
+    >
+      <SettingsViewWrapper
+        displayedFields={displayedFields}
+        inputs={forms}
+        isLoading={false}
+        initialData={initialData}
+        modifiedData={modifiedData}
+        onChange={handleChange}
+        onConfirmReset={() => {
+          dispatch({
+            type: 'ON_RESET',
+          });
+        }}
+        onConfirmSubmit={handleConfirm}
+        onModalConfirmClosed={updateMenu}
+        name={getName}
+      >
+        <DragWrapper>
+          <div className="row">
+            <div className="col-12">
+              <SortWrapper
+                ref={drop}
+                style={{
+                  display: 'flex',
+                  width: '100%',
+                }}
+              >
+                {displayedFields.map((item, index) => {
+                  const label = get(modifiedData, ['metadatas', item, 'list', 'label'], '');
+
+                  return (
+                    <Label
+                      count={displayedFields.length}
+                      key={item}
+                      index={index}
+                      isDraggingSibling={isDraggingSibling}
+                      label={label}
+                      move={move}
+                      name={item}
+                      onClick={handleClickEditLabel}
+                      onRemove={e => {
+                        e.stopPropagation();
+
+                        if (displayedFields.length === 1) {
+                          strapi.notification.toggle({
+                            type: 'info',
+                            message: { id: `${pluginId}.notification.info.minimumFields` },
+                          });
+                        } else {
+                          dispatch({
+                            type: 'REMOVE_FIELD',
+                            index,
+                          });
+                        }
+                      }}
+                      selectedItem={labelToEdit}
+                      setIsDraggingSibling={setIsDraggingSibling}
+                    />
+                  );
+                })}
+              </SortWrapper>
+            </div>
+          </div>
+          <DropdownButton
+            isOpen={isOpen}
+            toggle={() => {
+              if (listRemainingFields.length > 0) {
+                setIsOpen(prevState => !prevState);
+              }
+            }}
+            direction="down"
+            style={{
+              position: 'absolute',
+              top: 11,
+              right: 10,
+            }}
+          >
+            <Toggle disabled={listRemainingFields.length === 0} />
+            <MenuDropdown>
+              {listRemainingFields.map(item => (
+                <DropdownItem
+                  key={item}
+                  onClick={() => {
+                    dispatch({
+                      type: 'ADD_FIELD',
+                      item,
+                    });
+                  }}
+                >
+                  {item}
+                </DropdownItem>
+              ))}
+            </MenuDropdown>
+          </DropdownButton>
+        </DragWrapper>
+      </SettingsViewWrapper>
+      <PopupForm
+        headerId={`${pluginId}.containers.ListSettingsView.modal-form.edit-label`}
+        isOpen={isModalFormOpen}
+        onClosed={handleClosed}
+        onSubmit={e => {
+          e.preventDefault();
+          toggleModalForm();
+          dispatch({
+            type: 'SUBMIT_LABEL_FORM',
+          });
+        }}
+        onToggle={toggleModalForm}
+        renderForm={renderForm}
+        subHeaderContent={labelToEdit}
+        type={get(attributes, [labelToEdit, 'type'], 'text')}
+      />
+    </LayoutDndProvider>
+  );
+};
+
+ListSettingsView.propTypes = {
+  layout: PropTypes.shape({
+    uid: PropTypes.string.isRequired,
+    settings: PropTypes.object.isRequired,
+    metadatas: PropTypes.object.isRequired,
+    options: PropTypes.object.isRequired,
+    attributes: PropTypes.object.isRequired,
+  }).isRequired,
+  slug: PropTypes.string.isRequired,
+  updateLayout: PropTypes.func.isRequired,
+};
+
+export default memo(ListSettingsView);

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

@@ -0,0 +1,11 @@
+import { fromJS } from 'immutable';
+
+const init = (initialState, layout) => {
+  return fromJS({
+    ...initialState.toJS(),
+    initialData: layout,
+    modifiedData: layout,
+  });
+};
+
+export default init;

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

@@ -0,0 +1,77 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  labelForm: {},
+  labelToEdit: '',
+  initialData: {},
+  modifiedData: {},
+  status: 'resolved',
+});
+
+const reducer = (state, action) => {
+  const layoutPath = ['modifiedData', 'layouts', 'list'];
+
+  switch (action.type) {
+    case 'ADD_FIELD':
+      return state.updateIn(layoutPath, list => list.push(action.item));
+
+    case 'MOVE_FIELD':
+      return state.updateIn(['modifiedData', 'layouts', 'list'], list => {
+        return list
+          .delete(action.originalIndex)
+          .insert(action.atIndex, list.get(action.originalIndex));
+      });
+    case 'ON_CHANGE':
+      return state.updateIn(['modifiedData', ...action.keys.split('.')], () => action.value);
+    case 'ON_CHANGE_LABEL_METAS':
+      return state.updateIn(['labelForm', action.name], () => action.value);
+    case 'ON_RESET':
+      return state.update('modifiedData', () => state.get('initialData'));
+    case 'REMOVE_FIELD': {
+      const defaultSortByPath = ['modifiedData', 'settings', 'defaultSortBy'];
+      const defaultSortBy = state.getIn(defaultSortByPath);
+      const attrPath = ['modifiedData', 'layouts', 'list', action.index];
+      const attrToBeRemoved = state.getIn(attrPath);
+
+      const firstAttr = state.getIn(['modifiedData', 'layouts', 'list', 1]);
+      const firstAttrType = state.getIn(['modifiedData', 'attributes', firstAttr, 'type']);
+      const attrToSelect =
+        firstAttrType !== 'media' && firstAttrType !== 'richtext' ? firstAttr : 'id';
+
+      return state
+        .removeIn(['modifiedData', 'layouts', 'list', action.index])
+        .updateIn(defaultSortByPath, () => {
+          if (attrToBeRemoved === defaultSortBy) {
+            return attrToSelect;
+          }
+
+          return defaultSortBy;
+        });
+    }
+    case 'SET_LABEL_TO_EDIT':
+      return state
+        .update('labelToEdit', () => action.labelToEdit)
+        .updateIn(['labelForm', 'label'], () =>
+          state.getIn(['modifiedData', 'metadatas', action.labelToEdit, 'list', 'label'])
+        )
+        .updateIn(['labelForm', 'sortable'], () =>
+          state.getIn(['modifiedData', 'metadatas', action.labelToEdit, 'list', 'sortable'])
+        );
+    case 'UNSET_LABEL_TO_EDIT':
+      return state.update('labelToEdit', () => '').update('labelForm', () => fromJS({}));
+    case 'SUBMIT_LABEL_FORM': {
+      const metaPath = ['modifiedData', 'metadatas', state.get('labelToEdit'), 'list'];
+
+      return state
+        .updateIn([...metaPath, 'label'], () => state.getIn(['labelForm', 'label']))
+        .updateIn([...metaPath, 'sortable'], () => state.getIn(['labelForm', 'sortable']));
+    }
+    case 'SUBMIT_SUCCEEDED':
+      return state.update('initialData', () => state.get('modifiedData'));
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/ListView/FieldPicker/ConfigureLink/StyledLink.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+  display: block;
+  width: 100%;
+
+  text-decoration: none;
+  color: #333740;
+  font-size: 13px;
+  svg {
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+  &:hover {
+    text-decoration: none;
+    span {
+      color: #007eff;
+    }
+    svg {
+      g {
+        fill: #007eff;
+      }
+    }
+  }
+`;
+
+export default StyledLink;

package/admin/src/containers/ListView/FieldPicker/ConfigureLink/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 10px 15px;
+  border-bottom: 1px solid ${({ theme }) => theme.main.colors.pale};
+`;
+
+export default Wrapper;

package/admin/src/containers/ListView/FieldPicker/ConfigureLink/index.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin';
+import { FormattedMessage } from 'react-intl';
+import Link from './StyledLink';
+import Wrapper from './Wrapper';
+
+const ConfigureLink = ({ slug }) => {
+  const { emitEvent } = useGlobalContext();
+
+  const handleClick = () => {
+    emitEvent('willEditListLayout');
+  };
+
+  return (
+    <Wrapper>
+      <Link to={`${slug}/configurations/list`} onClick={handleClick}>
+        <LayoutIcon />
+        <FormattedMessage id="app.links.configure-view" />
+      </Link>
+    </Wrapper>
+  );
+};
+
+ConfigureLink.propTypes = {
+  slug: PropTypes.string.isRequired,
+};
+
+export default memo(ConfigureLink);

package/admin/src/containers/ListView/FieldPicker/Field/Wrapper.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.li`
+  padding: 0 16px;
+  height: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+  }
+`;
+
+export default Wrapper;

package/admin/src/containers/ListView/FieldPicker/Field/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const Field = ({ name, onChange, value }) => {
+  const handleChange = ({ target: { name, value } }) => {
+    onChange({ name, value: !value });
+  };
+
+  return (
+    <Wrapper>
+      <Checkbox name={name} message={name} onChange={handleChange} value={value} />
+    </Wrapper>
+  );
+};
+
+Field.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.bool.isRequired,
+};
+
+export default Field;

package/admin/src/containers/ListView/FieldPicker/Fields/Wrapper.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
+
+const Wrapper = styled(props => <Text as="ul" fontSize="md" {...props} />)`
+  margin-bottom: 0;
+  padding: 9px 0 0 0;
+  min-width: 228px;
+  list-style-type: none;
+  background-color: ${({ theme }) => theme.main.colors.white};
+`;
+
+Wrapper.propTypes = {
+  ...themePropTypes,
+};
+
+export default Wrapper;

package/admin/src/containers/ListView/FieldPicker/Fields/index.js

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Field from '../Field';
+import Wrapper from './Wrapper';
+
+const Fields = ({ displayedHeaders, items, onChange }) => {
+  const getInputValue = useCallback(
+    headerName => displayedHeaders.findIndex(({ name }) => name === headerName) !== -1,
+    [displayedHeaders]
+  );
+
+  return (
+    <Wrapper>
+      {items.map(header => (
+        <Field key={header} name={header} onChange={onChange} value={getInputValue(header)} />
+      ))}
+    </Wrapper>
+  );
+};
+
+Fields.propTypes = {
+  displayedHeaders: PropTypes.array.isRequired,
+  items: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Fields;

package/admin/src/containers/ListView/FieldPicker/Header/Reset.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Reset = styled(Text)`
+  cursor: pointer;
+`;
+
+export default Reset;

package/admin/src/containers/ListView/FieldPicker/Header/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { BaselineAlignment, useGlobalContext } from 'strapi-helper-plugin';
+import { getTrad } from '../../../../utils';
+import Reset from './Reset';
+
+const Header = ({ onClick, onToggle }) => {
+  const { emitEvent } = useGlobalContext();
+
+  const handleClick = () => {
+    onClick();
+    onToggle();
+
+    emitEvent('willChangeListFieldsSettings');
+  };
+
+  return (
+    <BaselineAlignment top size="19px">
+      <Padded left right size="xs">
+        <Padded left right size="sm">
+          <Flex justifyContent="space-between">
+            <Text fontWeight="bold">
+              <FormattedMessage id={getTrad('containers.ListPage.displayedFields')} />
+            </Text>
+            <Reset color="mediumBlue" cursor="pointer" onClick={handleClick}>
+              <FormattedMessage id={getTrad('containers.Edit.reset')} />
+            </Reset>
+          </Flex>
+        </Padded>
+      </Padded>
+    </BaselineAlignment>
+  );
+};
+
+Header.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default Header;

package/admin/src/containers/ListView/FieldPicker/Wrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  margin-bottom: 6px;
+  justify-content: flex-end;
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,46 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Flex, Padded, Picker } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Carret } from 'strapi-helper-plugin';
+import Fields from './Fields';
+import Header from './Header';
+import Wrapper from './Wrapper';
+import ConfigureLink from './ConfigureLink';
+
+const FieldPicker = ({ displayedHeaders, items, onChange, onClickReset, slug }) => {
+  return (
+    <Wrapper>
+      <Picker
+        position="right"
+        renderButtonContent={isOpen => (
+          <Flex>
+            <div>
+              <FontAwesomeIcon icon="cog" style={{ marginRight: 5 }} />
+            </div>
+            <Padded>
+              <Carret fill={isOpen ? '#007eff' : '#292b2c'} isUp={isOpen} />
+            </Padded>
+          </Flex>
+        )}
+        renderSectionContent={onToggle => (
+          <>
+            <ConfigureLink slug={slug} />
+            <Header onClick={onClickReset} onToggle={onToggle} />
+            <Fields displayedHeaders={displayedHeaders} items={items} onChange={onChange} />
+          </>
+        )}
+      />
+    </Wrapper>
+  );
+};
+
+FieldPicker.propTypes = {
+  displayedHeaders: PropTypes.array.isRequired,
+  items: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClickReset: PropTypes.func.isRequired,
+  slug: PropTypes.string.isRequired,
+};
+
+export default memo(FieldPicker);