yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-26 00:39:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design RelationBox

Browse Source
This commit is contained in:
cyril lopez 2017-09-06 11:19:57 +02:00
parent 528e461aa2
commit ba4d01ceda
8 changed files with 137 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/strapi-plugin-content-type-builder/admin/src/components/PopUpRelations/index.js
View File

@ -5,10 +5,11 @@
*/
import React from 'react';
import { map } from 'lodash';
import { get, map } from 'lodash';
import { FormattedMessage } from 'react-intl';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import PopUpHeaderNavLink from 'components/PopUpHeaderNavLink';
import RelationBox from 'components/RelationBox';
import styles from './styles.scss';
class PopUpRelations extends React.Component { // eslint-disable-line react/prefer-stateless-function
@ -34,10 +35,33 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
</div>
)
renderModalBodyRelations = () => {
console.log('ok');
return (
<ModalBody className={`${styles.modalBody} ${styles.flex}`}>
<RelationBox
header={this.props.contentType}
input={get(this.props.form, ['items', '0'])}
value={get(this.props.values, 'name')}
handleChange={this.props.handleChange}
/>
<div></div>
<RelationBox
header={this.props.contentType}
input={get(this.props.form, ['items', '0'])}
value={get(this.props.values, 'name')}
handleChange={this.props.handleChange}
/>
</ModalBody>
)
}
render() {
const loader = this.props.showLoader ?
<Button onClick={this.props.handleSubmit} type="submit" className={styles.primary} disabled={this.props.showLoader}><p className={styles.saving}><span>.</span><span>.</span><span>.</span></p></Button>
: <Button type="submit" onClick={this.props.handleSubmit} className={styles.primary}><FormattedMessage id="form.button.continue" /></Button>;
const modalBody = this.props.showRelation ? this.renderModalBodyRelations(): <div />;
return (
<div className={styles.popUpRelations}>
<Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={`${styles.modalPosition}`}>
@ -53,13 +77,9 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
{this.renderNavContainer()}
</div>
<ModalBody className={styles.modalBody}>
<div className="container-fluid">
<div className="row">
</div>
</div>
</ModalBody>
{modalBody}
<ModalFooter className={styles.modalFooter}>
<Button onClick={this.props.toggle} className={styles.secondary}><FormattedMessage id="form.button.cancel" /></Button>
{loader}{' '}
@ -71,12 +91,20 @@ class PopUpRelations extends React.Component { // eslint-disable-line react/pref
}
PopUpRelations.propTypes = {
contentType: React.PropTypes.object,
form: React.PropTypes.oneOfType([
React.PropTypes.array.isRequired,
React.PropTypes.object.isRequired,
]),
handleChange: React.PropTypes.func,
handleSubmit: React.PropTypes.func,
isOpen: React.PropTypes.bool,
popUpTitle: React.PropTypes.string.isRequired,
routePath: React.PropTypes.string.isRequired,
showLoader: React.PropTypes.bool,
showRelation: React.PropTypes.bool,
toggle: React.PropTypes.func,
values: React.PropTypes.object,
}
export default PopUpRelations;

5
packages/strapi-plugin-content-type-builder/admin/src/components/PopUpRelations/styles.scss
View File

@ -8,11 +8,12 @@
}
.modalBody {
padding: 2.2rem 1.4rem 0 1.4rem;
display: flex;
padding: 4.8rem 2.9rem 0 2.9rem;
}
.modalFooter {
padding: 1rem 1rem 2.8rem 1rem;
padding: 4.4rem 1rem 2.8rem 1rem;
border: none;
> button {
height: 3rem;

30
packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js
View File

@ -5,16 +5,44 @@
*/
import React from 'react';
import { get, startCase } from 'lodash';
import Input from 'components/Input';
import styles from './styles.scss';
class RelationBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() {
return (
<div className={styles.relationBox}>
<div className={styles.headerContainer}>
<i className={`fa ${get(this.props.header, 'icon')}`} />
{startCase(get(this.props.header, 'name'))}
</div>
<div className={styles.inputContainer}>
<div className="container-fluid">
<div className={`row ${styles.input}`}>
<Input
type={this.props.input.type}
handleChange={this.props.handleChange}
name={this.props.input.name}
target={this.props.input.target}
value={this.props.value}
placeholder={this.props.input.placeholder}
customBootstrapClass="col-md-12"
validations={this.props.input.validations}
/>
</div>
</div>
</div>
</div>
);
}
}
RelationBox.propTypes = {
handleChange: React.PropTypes.func,
header: React.PropTypes.object,
input: React.PropTypes.object,
value: React.PropTypes.string,
}
export default RelationBox;

35
packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss
View File

@ -1,3 +1,36 @@
.relationBox { /* stylelint-disable */
height: 13.8rem;
width: 21.5rem;
background-color: #FCFCFC;
box-shadow: 0 1px 2px #CAD2DF;
}
.headerContainer {
height: 3.6rem;
width: 100%;
background-color: rgba(16, 22, 34, 0.04);
line-height: 3.6rem;
text-align: center;
font-size: 1.4rem;
font-weight: bold;
text-transform: capitalize;
> i {
margin-right: 8px;
color: rgba(50, 55, 64, 0.75);
font-size: 1.3rem;
font-weight: 100;
}
}
.inputContainer {
padding-top: 1rem;
}
.input {
> div {
> label {
font-weight: 600;
}
}
}

17
packages/strapi-plugin-content-type-builder/admin/src/containers/Form/actions.js
View File

@ -6,7 +6,7 @@
/* eslint-disable new-cap */
import { map , forEach, replace } from 'lodash';
import { includes, map , forEach, replace } from 'lodash';
import { Map, List } from 'immutable';
import { getValidationsFromForm } from '../../utils/formValidations';
import { storeData } from '../../utils/storeData';
@ -140,11 +140,24 @@ export function resetIsFormSet() {
export function setAttributeForm(hash) {
const data = setAttributeFormData(hash);
const attributeRelation = Map({
name: '',
params: Map({
columnName: '',
target: '',
targetColumnName: "",
key: '',
nature: '',
required: false,
unique: false,
}),
});
const attribute = includes(hash, 'defineRelation') ? attributeRelation : data.attribute;
const formValidations = getValidationsFromForm(data.form, []);
return {
type: SET_ATTRIBUTE_FORM,
form: data.form,
attribute: data.attribute,
attribute,
formValidations,
}
}

17
packages/strapi-plugin-content-type-builder/admin/src/containers/Form/forms.json
View File

@ -83,7 +83,7 @@
{
"name": "form.attribute.item.textarea.name",
"target": "name",
"type": "textarea",
"type": "string",
"value": "",
"validations": {
"required": true
@ -366,7 +366,20 @@
}
},
"relation": {
"defineRelation": {},
"defineRelation": {
"items": [
{
"name": "form.attribute.item.defineRelation.fieldName",
"target": "name",
"type": "string",
"value": "",
"placeholder": "relation.attributeName.placeholder",
"validations": {
"required": true
}
}
]
},
"advancedSettings": {}
}
}

5
packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js
View File

@ -496,6 +496,11 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
renderCustomPopUpHeader={renderCustomPopUpHeader}
popUpTitle={popUpTitle}
routePath={`${this.props.routePath}/${this.props.hash}`}
contentType={get(this.props.menuData[0], ['items', findIndex(get(this.props.menuData[0], 'items'), ['name', this.props.modelName])])}
form={this.props.form}
showRelation={includes(this.props.hash, 'defineRelation')}
handleChange={this.handleChange}
values={this.props.modifiedDataAttribute}
/>
);
}

1
packages/strapi-plugin-content-type-builder/admin/src/translations/en.json
View File

@ -33,6 +33,7 @@
"form.attribute.item.maximumLength": "Maximum length",
"form.attribute.item.requiredField.description": "You won't be able to create an entry if this field is empty",
"form.attribute.item.uniqueField.description": "You won't be able to create an entry if there is an existing entry with identical content",
"form.attribute.item.defineRelation.fieldName": "Field name",
"form.button.cancel": "Cancel",
"form.button.continue": "Continue",