-
- {(message) => {message}
}
-
{map(filterRelationsUpload(props.schema.relations), (relation, key) => {
if (relation.nature.toLowerCase().includes('morph') && relation[key]) return '';
@@ -43,6 +39,7 @@ function EditRelations(props) {
schema={props.schema}
setRecordAttribute={props.changeData}
location={props.location}
+ onRedirect={props.onRedirect}
/>
);
})}
@@ -59,6 +56,7 @@ EditRelations.propTypes = {
changeData: PropTypes.func.isRequired,
currentModelName: PropTypes.string.isRequired,
location: PropTypes.object.isRequired,
+ onRedirect: PropTypes.func.isRequired,
record: PropTypes.object,
schema: PropTypes.object,
};
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/EditRelations/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/EditRelations/styles.scss
index 7c0056c788..efa65641f8 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/EditRelations/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/EditRelations/styles.scss
@@ -1,13 +1,3 @@
.editFormRelations { /* stylelint-disable */
- h3{
- height: 41px;
- margin: 0 -25px 14px;
- padding: 0 25px;
- background: #F3F3F3;
- line-height: 41px;
- border-radius: 2px 2px 0 0;
- letter-spacing: 0.03rem;
- font-size: 1.3rem;
- font-weight: bold;
- }
+ padding: 19px 0 20px;
}
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
index 22d95a29fd..13c7572c5f 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js
@@ -6,15 +6,46 @@
import React from 'react';
import Select from 'react-select';
+import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import PropTypes from 'prop-types';
-import 'react-select/dist/react-select.css';
import { cloneDeep, isArray, isNull, isUndefined, get, findIndex, includes } from 'lodash';
+// Utils.
import request from 'utils/request';
import templateObject from 'utils/templateObject';
+// CSS.
+import 'react-select/dist/react-select.css';
+
+// Icons.
+import IconRemove from '../../assets/images/icon_remove.svg';
+
import styles from './styles.scss';
+const SortableItem = SortableElement(({idx, onRemove, item, onClick}) => {
+ return (
+
+
+
+
onClick(item)}>{item.label}
+
+
onRemove(idx)} />
+
+ );
+});
+
+const SortableList = SortableContainer(({items, onRemove, onClick}) => {
+ return (
+
+ {items.map((item, index) => (
+
+ ))}
+
+ );
+});
+
class SelectMany extends React.Component {
// eslint-disable-line react/prefer-stateless-function
constructor(props) {
@@ -92,13 +123,12 @@ class SelectMany extends React.Component {
};
handleChange = value => {
- const filteredValue = value.filter(
- (data, index) => findIndex(value, o => o.value.id === data.value.id) === index
- );
+ const values = get(this.props.record, this.props.relation.alias) || [];
+
const target = {
name: `record.${this.props.relation.alias}`,
type: 'select',
- value: filteredValue,
+ value: [...values, value],
};
this.props.setRecordAttribute({ target });
@@ -121,6 +151,35 @@ class SelectMany extends React.Component {
}
}
+ handleSortEnd = ({oldIndex, newIndex}) => {
+ const values = get(this.props.record, this.props.relation.alias);
+ const target = {
+ name: `record.${this.props.relation.alias}`,
+ type: 'select',
+ value: arrayMove(values, oldIndex, newIndex),
+ };
+ this.props.setRecordAttribute({ target });
+ };
+
+ handleRemove = (index) => {
+ const values = get(this.props.record, this.props.relation.alias);
+ const target = {
+ name: `record.${this.props.relation.alias}`,
+ type: 'select',
+ value: values.filter( (item, idx) => idx !== index),
+ };
+ this.props.setRecordAttribute({ target });
+ }
+
+ // Redirect to the edit page
+ handleClick = (item = {}) => {
+ this.props.onRedirect({
+ model: this.props.relation.collection || this.props.relation.model,
+ id: item.value.id || item.value._id,
+ source: this.props.relation.plugin,
+ });
+ }
+
render() {
const description = this.props.relation.description ? (
{this.props.relation.description}
@@ -128,7 +187,7 @@ class SelectMany extends React.Component {
''
);
- const value = get(this.props.record, this.props.relation.alias);
+ const value = get(this.props.record, this.props.relation.alias) || [];
/* eslint-disable jsx-a11y/label-has-for */
return (
@@ -140,10 +199,9 @@ class SelectMany extends React.Component {
id={this.props.relation.alias}
isLoading={this.state.isLoading}
onMenuScrollToBottom={this.handleBottomScroll}
- onInputChange={this.handleInputChange}
- onSelectResetsInput={false}
- multi
- value={
+ />
+ {
@@ -159,6 +217,10 @@ class SelectMany extends React.Component {
}
})
}
+ onSortEnd={this.handleSortEnd}
+ onRemove={this.handleRemove}
+ distance={1}
+ onClick={this.handleClick}
/>
);
@@ -167,6 +229,7 @@ class SelectMany extends React.Component {
}
SelectMany.propTypes = {
+ onRedirect: PropTypes.func.isRequired,
record: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).isRequired,
relation: PropTypes.object.isRequired,
setRecordAttribute: PropTypes.func.isRequired,
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/styles.scss b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/styles.scss
index c752aabc81..5d87d5133d 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/styles.scss
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/styles.scss
@@ -7,7 +7,7 @@
}
label + div{
- margin: 5px 0 26px;
+ margin: 3px 0 26px;
&:focus{
outline: none;
@@ -25,3 +25,116 @@
}
}
}
+
+.sortableList {
+ margin-top: -21px;
+ padding-left: 0 !important;
+ list-style: none !important;
+
+}
+
+.sortableListItem {
+ display: flex;
+ flex-wrap: nowrap;
+ align-content: center;
+ justify-content: space-between;
+ height: 27px;
+
+
+ &:hover{
+ cursor: pointer;
+
+ }
+
+ &:active{
+ .dragHandle{
+ cursor: pointer;
+
+ > span {
+ background: #AED4FB;
+ }
+ }
+ }
+
+ .dragHandle{
+ outline: none;
+ text-decoration: none;
+ margin-top: -1px;
+
+ > span {
+ vertical-align: middle;
+ position: relative;
+ display: inline-block;
+ width: 6px;
+ height: 1px;
+ padding: 0px !important;
+ background: #B3B5B9;
+ overflow: visible !important;
+ transition: background .25s ease-out;
+
+ &:before, &:after{
+ content: '';
+ display: inline-block;
+ width: 6px;
+ height: 1px;
+ background: inherit;
+ }
+
+ &:before{
+ position: absolute;
+ top: -2px;
+ left: 0;
+ }
+
+ &:after{
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ }
+ }
+
+ }
+
+ > div {
+ span {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ &:first-of-type{
+ display: flex;
+ align-items: center;
+ transition: color .25s ease-out;
+
+ &:hover{
+ .dragHandle{
+ > span {
+ background: #007EFF;
+ }
+ }
+
+ color: #007EFF;
+ }
+
+ span {
+ &:last-of-type{
+ padding-left: 10px;
+ }
+ }
+ }
+
+ &:last-of-type{
+ display: inline-block;
+ height: 100%;
+ line-height: 27px;
+ text-align: right;
+ padding-right: 0px;
+
+ img{
+ display: inline-block;
+ height: 14px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js
index bb6f62d9ef..e7aeddead1 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/actions.js
@@ -72,7 +72,10 @@ export function initModelProps(modelName, isCreating, source, attributes) {
const record = Object.keys(attributes).reduce((acc, current) => {
if (attributes[current].default) {
acc[current] = attributes[current].default;
+ } else if (attributes[current].type === 'json') {
+ acc[current] = {};
}
+
return acc;
}, {});
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js
index cffe9faab2..06587a8f8e 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditPage/index.js
@@ -33,6 +33,7 @@ import injectSaga from 'utils/injectSaga';
import getQueryParameters from 'utils/getQueryParameters';
import { bindLayout } from 'utils/bindLayout';
import inputValidations from 'utils/inputsValidations';
+import { generateRedirectURI } from 'containers/ListPage/utils';
import { checkFormValidity } from 'utils/formValidations';
@@ -57,35 +58,15 @@ export class EditPage extends React.Component {
state = { showWarning: false };
componentDidMount() {
- this.props.initModelProps(this.getModelName(), this.isCreating(), this.getSource(), this.getModelAttributes());
-
- if (!this.isCreating()) {
- const mainField = get(this.getModel(), 'info.mainField') || this.getModel().primaryKey;
- this.props.getData(this.props.match.params.id, this.getSource(), mainField);
- } else {
- this.props.getLayout(this.getSource());
- }
-
- // Get all relations made with the upload plugin
- const fileRelations = Object.keys(get(this.getSchema(), 'relations', {})).reduce((acc, current) => {
- const association = get(this.getSchema(), ['relations', current], {});
-
- if (association.plugin === 'upload' && association[association.type] === 'file') {
- const relation = {
- name: current,
- multiple: association.nature === 'manyToManyMorph',
- };
-
- acc.push(relation);
- }
- return acc;
- }, []);
-
- // Update the reducer so we can use it to create the appropriate FormData in the saga
- this.props.setFileRelations(fileRelations);
+ this.initComponent(this.props);
}
componentDidUpdate(prevProps) {
+ if (prevProps.location.pathname !== this.props.location.pathname) {
+ this.props.resetProps();
+ this.initComponent(this.props);
+ }
+
if (prevProps.editPage.submitSuccess !== this.props.editPage.submitSuccess) {
if (!isEmpty(this.props.location.search) && includes(this.props.location.search, '?redirectUrl')) {
const redirectUrl = this.props.location.search.split('?redirectUrl=')[1];
@@ -168,6 +149,38 @@ export class EditPage extends React.Component {
*/
getSource = () => getQueryParameters(this.props.location.search, 'source');
+ /**
+ * Initialize component
+ */
+ initComponent = (props) => {
+ this.props.initModelProps(this.getModelName(), this.isCreating(), this.getSource(), this.getModelAttributes());
+
+ if (!this.isCreating()) {
+ const mainField = get(this.getModel(), 'info.mainField') || this.getModel().primaryKey;
+ this.props.getData(props.match.params.id, this.getSource(), mainField);
+ } else {
+ this.props.getLayout(this.getSource());
+ }
+
+ // Get all relations made with the upload plugin
+ const fileRelations = Object.keys(get(this.getSchema(), 'relations', {})).reduce((acc, current) => {
+ const association = get(this.getSchema(), ['relations', current], {});
+
+ if (association.plugin === 'upload' && association[association.type] === 'file') {
+ const relation = {
+ name: current,
+ multiple: association.nature === 'manyToManyMorph',
+ };
+
+ acc.push(relation);
+ }
+ return acc;
+ }, []);
+
+ // Update the reducer so we can use it to create the appropriate FormData in the saga
+ this.props.setFileRelations(fileRelations);
+ }
+
handleBlur = ({ target }) => {
const defaultValue = get(this.getModelAttribute(target.name), 'default');
@@ -212,6 +225,15 @@ export class EditPage extends React.Component {
this.props.changeData({ target });
}
+ handleRedirect = ({ model, id, source = 'content-manager'}) => {
+ const pathname = `${this.props.match.path.replace(':slug', model).replace(':id', id)}`;
+
+ this.props.history.push({
+ pathname,
+ search: `?source=${source}&redirectURI=${generateRedirectURI({ model, search: `?source=${source}` })}`,
+ });
+ }
+
handleSubmit = (e) => {
e.preventDefault();
const formErrors = checkFormValidity(this.generateFormFromRecord(), this.props.editPage.formValidations);
@@ -330,6 +352,7 @@ export class EditPage extends React.Component {
changeData={this.props.changeData}
record={editPage.record}
schema={this.getSchema()}
+ onRedirect={this.handleRedirect}
/>
)}