diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js new file mode 100644 index 0000000000..62759b8e4e --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js @@ -0,0 +1,79 @@ +import styled, { css } from 'styled-components'; + +const Carret = styled.div` + position: absolute; + ${({ right }) => { + if (right) { + return css` + right: -4px; + `; + } + + return css` + left: -1px; + `; + }} + height: 30px; + margin-right: 3px; + width: 2px; + border-radius: 2px; + background: #007eff; +`; + +const FullWidthCarret = styled.div` + display: flex; + flex-direction: column; + justify-content: space-around; + height: 30px; + width: 100%; + padding: 0 10px; + margin-bottom: 6px; + border-radius: 2px; + > div { + background: #007eff; + height: 2px; + width: 100%; + } +`; + +const NameWrapper = styled.div` + position: relative; + height: 30px; + width: 100%; + margin-bottom: 10px; + display: flex; + padding-left: 10px; + justify-content: space-between; + ${({ isHidden }) => { + if (!isHidden) { + return css` + background: #fafafb; + line-height: 28px; + color: #333740; + border: 1px solid #e3e9f3; + border-radius: 2px; + &:hover { + cursor: move; + } + > img { + align-self: flex-start; + vertical-align: top; + max-width: 8px; + margin-right: 10px; + margin-top: 11px; + } + `; + } + }} +`; + +const Wrapper = styled.div` + display: flex; + position: relative; + .sub_wrapper { + width: 100%; + padding: 0 10px; + } +`; + +export { Carret, FullWidthCarret, NameWrapper, Wrapper }; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/index.js new file mode 100644 index 0000000000..60fb6b6881 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldItem/index.js @@ -0,0 +1,68 @@ +import React, { memo } from 'react'; +import PropTypes from 'prop-types'; + +// import EditIcon from '../VariableEditIcon'; +import RemoveIcon from '../DraggedRemovedIcon'; +import { Carret, FullWidthCarret, NameWrapper, Wrapper } from './components'; + +const FieldItem = ({ + isDragging, + name, + showLeftCarret, + showRightCarret, + size, + type, +}) => { + const isHidden = name === '_TEMP_'; + const withLongerHeight = [ + 'json', + 'text', + 'file', + 'group', + 'WYSIWYG', + ].includes(type); + const style = withLongerHeight ? { height: '84px' } : {}; + + return ( +
+ + {isDragging && size === 12 ? ( + +
+ + ) : ( + <> + {showLeftCarret && } +
+ + {!isHidden && name} + {!isHidden && ( + + )} + +
+ {showRightCarret && } + + )} + +
+ ); +}; + +FieldItem.defaultProps = { + isDragging: false, + showLeftCarret: false, + showRightCarret: false, + type: 'string', +}; + +FieldItem.propTypes = { + isDragging: PropTypes.bool, + name: PropTypes.string.isRequired, + showLeftCarret: PropTypes.bool, + showRightCarret: PropTypes.bool, + size: PropTypes.number.isRequired, + type: PropTypes.string, +}; + +export default memo(FieldItem); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js new file mode 100644 index 0000000000..f360274cc9 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; +import PropTypes from 'prop-types'; + +import FieldItem from '../FieldItem'; + +const Item = ({ name, size, type }) => { + return ; +}; + +Item.defaultProps = { + type: 'string', +}; + +Item.propTypes = { + name: PropTypes.string.isRequired, + size: PropTypes.number.isRequired, + type: PropTypes.string, +}; + +export default memo(Item); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/components.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/components.js new file mode 100644 index 0000000000..4daa90b419 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/components.js @@ -0,0 +1 @@ +// import styled from 'styled-components'; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js new file mode 100644 index 0000000000..df82fab61a --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/index.js @@ -0,0 +1,59 @@ +import React, { memo } from 'react'; +import PropTypes from 'prop-types'; +import { get } from 'lodash'; + +import SortWrapper from '../SortWrapper'; +import Item from './Item'; + +const FieldsReorder = ({ attributes, layout }) => { + const getType = attributeName => { + const attribute = get(attributes, [attributeName], {}); + + if (attribute.plugin === 'upload') { + return 'file'; + } + + return attribute.type; + }; + + return ( +
+ + {layout.map((row, rowIndex) => { + // + return ( +
+ {row.rowContent.map((rowContent, index) => { + const { name, size } = rowContent; + + return ( + + ); + })} +
+ ); + })} + +
+ ); +}; + +FieldsReorder.defaultProps = { + attributes: {}, + layout: [], +}; + +FieldsReorder.propTypes = { + attributes: PropTypes.object, + layout: PropTypes.array, +}; + +export default memo(FieldsReorder); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SettingFormWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SettingFormWrapper/index.js index 7a586cf420..09377eeae8 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SettingFormWrapper/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SettingFormWrapper/index.js @@ -1,6 +1,6 @@ import styled from 'styled-components'; -const SettingFormWrapper = styled.form` +const SettingFormWrapper = styled.div` min-height: 246px; padding: 24px 30px 0px; background-color: #fafafb; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js new file mode 100644 index 0000000000..0e36a00a0c --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/SortWrapper/index.js @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +const SortWrapper = styled.div` + margin-top: 7px; + margin-bottom: 10px; + padding-top: 10px; + border: 1px dashed #e3e9f3; + border-radius: 2px; + > div { + // padding: 0 10px; + } +`; + +export default SortWrapper; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js index 40426eef88..76778cbb60 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js @@ -25,6 +25,7 @@ function ListLayout({ onChange, onClick, onRemove, + onSubmit, }) { const ref = useRef(null); const handleRemove = index => { @@ -116,7 +117,7 @@ function ListLayout({
- + {form.map(input => { return ( {}, onClick: () => {}, onRemove: () => {}, + onSubmit: () => {}, }; ListLayout.propTypes = { @@ -155,6 +157,7 @@ ListLayout.propTypes = { onChange: PropTypes.func, onClick: PropTypes.func, onRemove: PropTypes.func, + onSubmit: PropTypes.func, }; export default DropTarget(ItemTypes.FIELD, {}, connect => ({ diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js index 54c6f91da1..de0b969ac7 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js @@ -1,3 +1,4 @@ +import { set } from 'lodash'; import { ADD_FIELD_TO_LIST, GET_DATA, @@ -11,6 +12,7 @@ import { SET_LIST_FIELD_TO_EDIT_INDEX, SUBMIT_SUCCEEDED, } from './constants'; +import { formatLayout, createLayout } from '../../utils/layout'; export function addFieldToList(field) { return { @@ -27,6 +29,11 @@ export function getData(uid) { } export function getDataSucceeded(layout) { + set( + layout, + ['layouts', 'edit'], + formatLayout(createLayout(layout.layouts.edit)) + ); return { type: GET_DATA_SUCCEEDED, layout, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js index 487763fc88..7b0d86d6a5 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js @@ -16,6 +16,7 @@ import pluginId from '../../pluginId'; import Block from '../../components/Block'; import Container from '../../components/Container'; +import FieldsReorder from '../../components/FieldsReorder'; import FormTitle from '../../components/FormTitle'; import SectionTitle from '../../components/SectionTitle'; @@ -83,12 +84,19 @@ function SettingViewModel({ if (showWarningSubmit) { toggleWarningSubmit(); } - }, [shouldToggleModalSubmit, showWarningSubmit]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [shouldToggleModalSubmit]); if (isLoading) { return ; } + const handleSubmit = e => { + e.preventDefault(); + toggleWarningSubmit(); + emitEvent('willSaveContentTypeLayout'); + }; + const getPluginHeaderActions = () => { if (isEqual(modifiedData, initialData)) { return []; @@ -96,17 +104,16 @@ function SettingViewModel({ return [ { - label: 'content-manager.popUpWarning.button.cancel', + label: `${pluginId}.popUpWarning.button.cancel`, kind: 'secondary', onClick: toggleWarningCancel, type: 'button', }, { kind: 'primary', - label: 'content-manager.containers.Edit.submit', - onClick: () => { - toggleWarningSubmit(); - emitEvent('willSaveContentTypeLayout'); + label: `${pluginId}.containers.Edit.submit`, + onClick: e => { + handleSubmit(e); }, type: 'submit', }, @@ -128,6 +135,21 @@ function SettingViewModel({ return getListDisplayedFields(); } + if (input.name === 'settings.mainField') { + const attributes = get(modifiedData, ['schema', 'attributes'], {}); + const options = Object.keys(attributes).filter(attr => { + const type = get(attributes, [attr, 'type'], ''); + + return ( + !['json', 'text', 'relation', 'group', 'boolean', 'date'].includes( + type + ) && !!type + ); + }); + + return ['id', ...options]; + } + return input.selectOptions; }; @@ -135,84 +157,96 @@ function SettingViewModel({ <> goBack()} /> - - -
- + - -
- {forms[settingType].map(input => { - return ( - - ); - })} -
- + description={{ + id: + 'content-manager.containers.SettingPage.pluginHeaderDescription', + }} + /> + +
+ + +
+ {forms[settingType].map(input => { + return ( + + ); + })} +
+ +
-
- + -
- - - +
+ + + - {settingType === 'list-settings' && ( - - )} -
- -
+ {settingType === 'list-settings' && ( + + )} + + {settingType === 'edit-settings' && ( + + )} +
+ +
+ arr.reduce((sum, value) => sum + value.size, 0); + +const createLayout = arr => { + return arr.reduce((acc, current, index) => { + const row = { rowId: index, rowContent: current }; + + return acc.concat(row); + }, []); +}; + +const formatLayout = arr => { + return arr + .reduce((acc, current) => { + let toPush = []; + const currentRow = current.rowContent.reduce((acc2, curr) => { + const acc2Size = getSize(acc2); + + if (curr.name === '_TEMP_') { + return acc2; + } + + if (acc2Size + curr.size <= 12) { + acc2.push(curr); + } else { + toPush.push(curr); + } + + return acc2; + }, []); + const rowId = + acc.length === 0 ? 0 : Math.max.apply(Math, acc.map(o => o.rowId)) + 1; + + const currentRowSize = getSize(currentRow); + + if (currentRowSize < 12) { + currentRow.push({ name: '_TEMP_', size: 12 - currentRowSize }); + } + + acc.push({ rowId, rowContent: currentRow }); + + if (toPush.length > 0) { + const toPushSize = getSize(toPush); + + if (toPushSize < 12) { + toPush.push({ name: '_TEMP_', size: 12 - toPushSize }); + } + + acc.push({ rowId: rowId + 1, rowContent: toPush }); + toPush = []; + } + + return acc; + }, []) + .filter(row => row.rowContent.length > 0) + .filter(row => { + if (row.rowContent.length === 1) { + return row.rowContent[0].name !== '_TEMP_'; + } + return true; + }); +}; + +const unformatLayout = arr => { + return arr.reduce((acc, current) => { + const currentRow = current.rowContent.filter( + content => content.name !== '_TEMP_' + ); + + return acc.concat([currentRow]); + }, []); +}; + +export { createLayout, formatLayout, unformatLayout };