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

package/admin/src/components/SelectWrapper/utils/styles.js

@@ -0,0 +1,105 @@
+/* eslint-disable indent */
+/* eslint-disable no-nested-ternary */
+
+const styles = {
+  container: base => ({ ...base, background: '#ffffff' }),
+  control: (base, state) => {
+    const borderRadiusStyle = state.selectProps.menuIsOpen
+      ? {
+          borderBottomLeftRadius: '0 !important',
+          borderBottomRightRadius: '0 !important',
+        }
+      : {};
+
+    const {
+      selectProps: { error, value },
+    } = state;
+
+    let border;
+    let borderBottom;
+    let backgroundColor;
+
+    if (state.isFocused) {
+      border = '1px solid #78caff !important';
+    } else if (error && !value.length) {
+      border = '1px solid #f64d0a !important';
+    } else {
+      border = '1px solid #e3e9f3 !important';
+    }
+
+    if (state.menuIsOpen === true) {
+      borderBottom = '1px solid #e3e9f3 !important';
+    }
+
+    if (state.isDisabled) {
+      backgroundColor = '#fafafb !important';
+    }
+
+    return {
+      ...base,
+      fontSize: 13,
+      height: 34,
+      minHeight: 34,
+      border,
+      outline: 0,
+      boxShadow: 0,
+      borderRadius: '2px !important',
+      ...borderRadiusStyle,
+      borderBottom,
+      backgroundColor,
+    };
+  },
+  input: base => ({ ...base, marginLeft: 10 }),
+  menu: base => {
+    return {
+      ...base,
+      width: '100%',
+      margin: '0',
+      paddingTop: 0,
+      borderRadius: '2px !important',
+      borderTopLeftRadius: '0 !important',
+      borderTopRightRadius: '0 !important',
+      border: '1px solid #78caff !important',
+      boxShadow: 0,
+      borderTop: '0 !important',
+      fontSize: '13px',
+    };
+  },
+  menuList: base => ({
+    ...base,
+    maxHeight: '112px',
+    paddingTop: 2,
+  }),
+  option: (base, state) => {
+    return {
+      ...base,
+      height: 36,
+      backgroundColor: state.isFocused ? '#f6f6f6' : '#fff',
+      ':active': {
+        ...base[':active'],
+        backgroundColor: '#f6f6f6',
+      },
+      color: '#333740',
+      fontWeight: state.isFocused ? '600' : '400',
+      cursor: 'pointer',
+      WebkitFontSmoothing: 'antialiased',
+    };
+  },
+  placeholder: base => ({
+    ...base,
+    marginTop: 0,
+    marginLeft: 10,
+    color: '#aaa',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    maxWidth: 'calc(100% - 32px)',
+  }),
+  valueContainer: base => ({
+    ...base,
+    padding: '2px 0px 4px 0px',
+    lineHeight: '18px',
+  }),
+};
+
+export default styles;

package/admin/src/components/Separator/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Separator = styled.div`
+  margin-top: 17px;
+  margin-bottom: 24px;
+  border-top: 1px solid #f6f6f6;
+`;
+
+export default Separator;

package/admin/src/components/SettingFormWrapper/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const SettingFormWrapper = styled.div`
+  padding: 24px 30px 0px;
+  background-color: #fafafb;
+  border-radius: 2px;
+`;
+
+export default SettingFormWrapper;

package/admin/src/components/SettingsViewWrapper/index.js

@@ -0,0 +1,283 @@
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { get, isEqual, upperFirst } from 'lodash';
+import { withRouter } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { Inputs as Input, Header } from '@buffetjs/custom';
+import {
+  BackHeader,
+  LoadingIndicatorPage,
+  ModalConfirm,
+  PopUpWarning,
+  // contexts
+  useGlobalContext,
+} from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+import Block from '../Block';
+import Container from '../Container';
+import SectionTitle from '../SectionTitle';
+import Separator from '../Separator';
+
+const SettingsViewWrapper = ({
+  children,
+  history: { goBack },
+  displayedFields,
+  inputs,
+  initialData,
+  isEditSettings,
+  isLoading,
+  modifiedData,
+  name,
+  onChange,
+  onConfirmReset,
+  onConfirmSubmit,
+  onModalConfirmClosed,
+}) => {
+  const { emitEvent, formatMessage } = useGlobalContext();
+  const [showWarningCancel, setWarningCancel] = useState(false);
+  const [showWarningSubmit, setWarningSubmit] = useState(false);
+
+  const attributes = useMemo(() => {
+    return get(modifiedData, ['attributes'], {});
+  }, [modifiedData]);
+
+  const toggleWarningCancel = () => setWarningCancel(prevState => !prevState);
+  const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState);
+
+  const getPluginHeaderActions = () => {
+    return [
+      {
+        color: 'cancel',
+        onClick: toggleWarningCancel,
+        label: formatMessage({
+          id: 'app.components.Button.reset',
+        }),
+        type: 'button',
+        disabled: isEqual(modifiedData, initialData),
+        style: {
+          fontWeight: 600,
+          paddingLeft: 15,
+          paddingRight: 15,
+        },
+      },
+      {
+        color: 'success',
+        label: formatMessage({
+          id: `${pluginId}.containers.Edit.submit`,
+        }),
+        type: 'submit',
+        disabled: isEqual(modifiedData, initialData),
+        style: {
+          minWidth: 150,
+          fontWeight: 600,
+        },
+      },
+    ];
+  };
+
+  const headerProps = {
+    actions: getPluginHeaderActions(),
+    title: {
+      label: formatMessage(
+        {
+          id: `${pluginId}.components.SettingsViewWrapper.pluginHeader.title`,
+        },
+        { name: upperFirst(name) }
+      ),
+    },
+    content: formatMessage({
+      id: `${pluginId}.components.SettingsViewWrapper.pluginHeader.description.${
+        isEditSettings ? 'edit' : 'list'
+      }-settings`,
+    }),
+  };
+
+  const getSelectOptions = input => {
+    if (input.name === 'settings.defaultSortBy') {
+      return [
+        'id',
+        ...displayedFields.filter(name => {
+          const type = get(attributes, [name, 'type']);
+
+          return !['media', 'richtext', 'dynamiczone', 'relation'].includes(type) && name !== 'id';
+        }),
+      ];
+    }
+
+    if (input.name === 'settings.mainField') {
+      const options = Object.keys(attributes).filter(attr => {
+        const type = get(attributes, [attr, 'type'], '');
+
+        return (
+          ![
+            'dynamiczone',
+            'json',
+            'text',
+            'relation',
+            'component',
+            'boolean',
+            'date',
+            'media',
+            'richtext',
+            'timestamp',
+          ].includes(type) && !!type
+        );
+      });
+
+      return options;
+    }
+
+    return input.options;
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    toggleWarningSubmit();
+    emitEvent('willSaveContentTypeLayout');
+  };
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <>
+      <BackHeader onClick={goBack} />
+      <Container className="container-fluid">
+        <form onSubmit={handleSubmit}>
+          <Header {...headerProps} />
+          <div
+            className="row"
+            style={{
+              paddingTop: '3px',
+            }}
+          >
+            <Block
+              style={{
+                marginBottom: '13px',
+                paddingBottom: '30px',
+                paddingTop: '24px',
+              }}
+            >
+              <SectionTitle isSettings />
+              <div className="row">
+                {inputs.map(input => {
+                  return (
+                    <FormattedMessage key={input.name} id={input.label.id}>
+                      {label => (
+                        <div className={input.customBootstrapClass}>
+                          <FormattedMessage
+                            id={get(input, 'description.id', 'app.utils.defaultMessage')}
+                          >
+                            {description => (
+                              <Input
+                                {...input}
+                                description={description}
+                                label={label === ' ' ? null : label}
+                                onChange={onChange}
+                                options={getSelectOptions(input)}
+                                value={get(modifiedData, input.name, '')}
+                              />
+                            )}
+                          </FormattedMessage>
+                        </div>
+                      )}
+                    </FormattedMessage>
+                  );
+                })}
+                <div className="col-12">
+                  <Separator style={{ marginBottom: 20 }} />
+                </div>
+              </div>
+              <SectionTitle />
+              {children}
+            </Block>
+          </div>
+          <PopUpWarning
+            isOpen={showWarningCancel}
+            toggleModal={toggleWarningCancel}
+            content={{
+              message: `${pluginId}.popUpWarning.warning.cancelAllSettings`,
+            }}
+            popUpWarningType="danger"
+            onConfirm={() => {
+              onConfirmReset();
+              toggleWarningCancel();
+            }}
+          />
+          <ModalConfirm
+            isOpen={showWarningSubmit}
+            toggle={toggleWarningSubmit}
+            content={{
+              id: `${pluginId}.popUpWarning.warning.updateAllSettings`,
+            }}
+            type="success"
+            onConfirm={async () => {
+              await onConfirmSubmit();
+              toggleWarningSubmit();
+            }}
+            onClosed={() => {
+              if (onModalConfirmClosed) {
+                onModalConfirmClosed();
+              }
+            }}
+          />
+        </form>
+      </Container>
+    </>
+  );
+};
+
+SettingsViewWrapper.defaultProps = {
+  displayedFields: [],
+  inputs: [],
+  initialData: {},
+  isEditSettings: false,
+  modifiedData: {},
+  name: '',
+  onConfirmReset: () => {},
+  onConfirmSubmit: async () => {},
+  onModalConfirmClosed: null,
+  onSubmit: () => {},
+  pluginHeaderProps: {
+    actions: [],
+    description: {
+      id: 'app.utils.defaultMessage',
+    },
+    title: {
+      id: 'app.utils.defaultMessage',
+      values: {},
+    },
+  },
+};
+
+SettingsViewWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  displayedFields: PropTypes.array,
+  history: PropTypes.shape({
+    goBack: PropTypes.func.isRequired,
+  }).isRequired,
+  initialData: PropTypes.object,
+  inputs: PropTypes.array,
+  isEditSettings: PropTypes.bool,
+  isLoading: PropTypes.bool.isRequired,
+  modifiedData: PropTypes.object,
+  name: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onConfirmReset: PropTypes.func,
+  onConfirmSubmit: PropTypes.func,
+  onModalConfirmClosed: PropTypes.func,
+  onSubmit: PropTypes.func,
+  pluginHeaderProps: PropTypes.shape({
+    actions: PropTypes.array,
+    description: PropTypes.shape({
+      id: PropTypes.string,
+    }),
+    title: PropTypes.shape({
+      id: PropTypes.string,
+      values: PropTypes.object,
+    }),
+  }),
+};
+
+export default withRouter(SettingsViewWrapper);

package/admin/src/components/SortWrapper/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const SortWrapper = styled.div`
+  .btn-group button {
+    line-height: 28px;
+  }
+`;
+
+export default SortWrapper;

package/admin/src/components/SortableList/Item.js

@@ -0,0 +1,126 @@
+import React, { useEffect, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import useLayoutDnd from '../../hooks/useLayoutDnd';
+
+import DraggedFieldWithPreview from '../DraggedFieldWithPreview';
+
+import ItemTypes from '../../utils/ItemTypes';
+
+const Item = ({ index, move, name, removeItem }) => {
+  const {
+    goTo,
+    metadatas,
+    selectedItemName,
+    setEditFieldToSelect,
+    setIsDraggingSibling,
+  } = useLayoutDnd();
+  const dragRef = useRef(null);
+  const dropRef = useRef(null);
+
+  // from: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed
+  const [, drop] = useDrop({
+    accept: ItemTypes.EDIT_RELATION,
+    hover(item, monitor) {
+      if (!dropRef.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action
+      move(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    },
+  });
+  const [{ isDragging }, drag, preview] = useDrag({
+    item: { type: ItemTypes.EDIT_RELATION, id: name, name, index },
+    begin: () => {
+      // Remove the over state from other components
+      // Since it's a dynamic list where items are replaced on the fly we need to disable all the over state
+      setIsDraggingSibling(true);
+    },
+    end: () => {
+      setIsDraggingSibling(false);
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  useEffect(() => {
+    preview(getEmptyImage(), { captureDraggingState: false });
+  }, [preview]);
+
+  // Create the refs
+  // We need 1 for the drop target
+  // 1 for the drag target
+  const refs = {
+    dragRef: drag(dragRef),
+    dropRef: drop(dropRef),
+  };
+
+  return (
+    <DraggedFieldWithPreview
+      isDragging={isDragging}
+      label={get(metadatas, [name, 'edit', 'label'], '')}
+      name={name}
+      onClickEdit={() => setEditFieldToSelect(name)}
+      onClickRemove={e => {
+        e.stopPropagation();
+        removeItem(index);
+      }}
+      push={goTo}
+      ref={refs}
+      selectedItem={selectedItemName}
+      size={12}
+      style={{ marginBottom: 6, paddingLeft: 5, paddingRight: 5 }}
+      type="relation"
+      i={index === 0}
+    />
+  );
+};
+
+Item.defaultProps = {
+  move: () => {},
+};
+
+Item.propTypes = {
+  index: PropTypes.number.isRequired,
+  move: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  removeItem: PropTypes.func.isRequired,
+};
+
+export default Item;

package/admin/src/components/SortableList/index.js

@@ -0,0 +1,60 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import useLayoutDnd from '../../hooks/useLayoutDnd';
+
+import Add from '../AddDropdown';
+import SortWrapper from '../SortWrapper';
+import Item from './Item';
+
+const SortableList = ({ addItem, buttonData, moveItem, removeItem }) => {
+  const { relationsLayout } = useLayoutDnd();
+
+  return (
+    <div className="col-4">
+      <SortWrapper
+        style={{
+          marginTop: 7,
+          paddingTop: 11,
+          paddingLeft: 5,
+          paddingRight: 5,
+          border: '1px dashed #e3e9f3',
+        }}
+      >
+        {relationsLayout.map((relationName, index) => {
+          return (
+            <Item
+              index={index}
+              key={relationName}
+              move={moveItem}
+              name={relationName}
+              removeItem={removeItem}
+            />
+          );
+        })}
+        <Add
+          data={buttonData}
+          isRelation
+          onClick={addItem}
+          style={{
+            marginLeft: 10,
+            marginRight: 10,
+            marginBottom: 13,
+          }}
+        />
+      </SortWrapper>
+    </div>
+  );
+};
+
+SortableList.defaultProps = {
+  buttonData: [],
+};
+
+SortableList.propTypes = {
+  addItem: PropTypes.func.isRequired,
+  buttonData: PropTypes.array,
+  moveItem: PropTypes.func.isRequired,
+  removeItem: PropTypes.func.isRequired,
+};
+
+export default memo(SortableList);

package/admin/src/components/State/Wrapper.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 1rem;
+  border-radius: 0.2rem;
+  height: 2.5rem;
+  ${({ theme, isGreen }) =>
+    isGreen
+      ? `
+        border: 1px solid #aad67c;
+        background-color: #e6f8d4;
+        ${Text} {
+            color: ${theme.main.colors.green};
+        }
+    `
+      : `
+        border: 1px solid #A5D5FF;
+        background-color: ${theme.main.colors.lightestBlue};
+        ${Text} {
+            color: ${theme.main.colors.mediumBlue};
+        }
+    `};
+`;
+
+export default Wrapper;

package/admin/src/components/State/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Text } from '@buffetjs/core';
+import { getTrad } from '../../utils';
+import Wrapper from './Wrapper';
+
+const State = ({ isPublished }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Wrapper isGreen={isPublished}>
+      <Text lineHeight="19px">
+        {formatMessage({
+          id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+        })}
+      </Text>
+    </Wrapper>
+  );
+};
+
+State.propTypes = {
+  isPublished: PropTypes.bool.isRequired,
+};
+
+export default State;

package/admin/src/components/Truncate/index.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const Truncate = styled.div``;
+
+export default Truncate;

package/admin/src/components/Truncated/index.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Truncated = styled.p`
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0;
+`;
+
+export default Truncated;