From c720955269853d41093f1e27c48fb61fb789b24c Mon Sep 17 00:00:00 2001 From: cyril lopez Date: Tue, 7 Nov 2017 16:33:15 +0100 Subject: [PATCH] Design EditPage top block, started design inputSearch and add change dynamic --- .../admin/src/components/InputSearch/index.js | 60 +++++++++ .../src/components/InputSearch/styles.scss | 45 +++++++ .../admin/src/components/ListRow/index.js | 23 +++- .../admin/src/containers/App/index.js | 6 + .../admin/src/containers/EditPage/actions.js | 15 ++- .../src/containers/EditPage/constants.js | 3 +- .../admin/src/containers/EditPage/index.js | 126 ++++++++++++++++-- .../admin/src/containers/EditPage/reducer.js | 29 +++- .../admin/src/containers/EditPage/styles.scss | 20 +++ .../admin/src/containers/HomePage/data.json | 33 +++-- .../admin/src/containers/HomePage/index.js | 7 +- .../admin/src/translations/en.json | 13 ++ .../admin/src/translations/fr.json | 13 ++ 13 files changed, 357 insertions(+), 36 deletions(-) create mode 100644 packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js create mode 100644 packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss create mode 100644 packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/styles.scss diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js new file mode 100644 index 0000000000..9ca7b42579 --- /dev/null +++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js @@ -0,0 +1,60 @@ +/** +* +* InputSearch +* +*/ + +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { isEmpty } from 'lodash'; +import cn from 'classnames'; +import PropTypes from 'prop-types'; + +import styles from './styles.scss'; + +class InputSearch extends React.Component { // eslint-disable-line react/prefer-stateless-function + state = { errors: [] }; + + render() { + return ( +
+ +
+ + + {(message) => ( + + )} + +
+
+ ); + } +} + +InputSearch.defaultProps = { + labelValues: { + number: 0, + }, + value: '', +} + +InputSearch.proptypes = { + label: PropTypes.string.isRequired, + labelValues: PropTypes.object, + name: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + value: PropTypes.string, +}; + +export default InputSearch; diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss new file mode 100644 index 0000000000..3547a1c5f0 --- /dev/null +++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss @@ -0,0 +1,45 @@ +.addon { + width: 3.2rem; + height: 3.4rem; + margin-top: .9rem; + background-color: rgba(16, 22, 34, 0.02); + border: 1px solid #E3E9F3; + border-radius: 0.25rem; + color: rgba(16, 22, 34, 0.5); + line-height: 3.2rem; + font-size: 1.3rem; + font-family: 'Lato'; + font-weight: 600!important; + text-transform: capitalize; + -moz-appearance: none; + -webkit-appearance: none; + &:before { + content: '\f002'; + display: inline-table; + font-family: 'FontAwesome'; + } +} + +.inputSearch { + min-width: 200px; + margin-bottom: 1.5rem; + font-size: 1.3rem; + + label { + margin-bottom: 0; + font-weight: 500; + text-transform: capitalize; + } + + input { + height: 3.4rem; + margin-top: .9rem; + padding-left: 1rem; + background-size: 0 !important; + border: 1px solid #E3E9F3; + border-radius: 0.25rem; + line-height: 3.4rem; + font-size: 1.3rem; + font-family: 'Lato' !important; + } +} diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js index ff1e778693..9639cdc885 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js @@ -7,6 +7,7 @@ import React from 'react'; import cn from 'classnames'; import PropTypes from 'prop-types'; +import { router } from 'app'; // Design import IcoContainer from 'components/IcoContainer'; @@ -23,13 +24,11 @@ class ListRow extends React.Component { // eslint-disable-line react/prefer-stat } } - handleDelete = () => this.props.deleteData(this.props.item, this.props.settingType); - generateContent = () => { let icons = [ { icoType: 'pencil', - onClick: () => { console.log('edit') }, + onClick: this.handleClick, }, { icoType: 'trash', @@ -90,7 +89,7 @@ class ListRow extends React.Component { // eslint-disable-line react/prefer-stat icons = [ { icoType: 'pencil', - onClick: () => { console.log('edit') }, + onClick: this.handleClick, }, ]; @@ -117,9 +116,23 @@ class ListRow extends React.Component { // eslint-disable-line react/prefer-stat } } + handleClick = () => { + switch (this.props.settingType) { + case 'roles': + return router.push(`${router.location.pathname}/${this.props.item.id}`); + case 'providers': + case 'email-templates': + return console.log('click'); + default: + return; + } + } + + handleDelete = () => this.props.deleteData(this.props.item, this.props.settingType); + render() { return ( -
  • +
  • {this.generateContent()}
    diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js index 5758b7e2be..3e17f042a4 100755 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/App/index.js @@ -27,6 +27,12 @@ class App extends React.Component { } } + componentDidUpdate() { + if (!this.props.location.pathname.split('/')[3]) { + this.props.history.push('/plugins/users-permissions/roles'); + } + } + render() { return (
    diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/actions.js b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/actions.js index a07aca9651..915d4dde7c 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/actions.js +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/actions.js @@ -5,11 +5,20 @@ */ import { - DEFAULT_ACTION, + ON_CANCEL, + ON_CHANGE_INPUT, } from './constants'; -export function defaultAction() { +export function onCancel() { return { - type: DEFAULT_ACTION, + type: ON_CANCEL, + }; +} + +export function onChangeInput({ target }) { + return { + type: ON_CHANGE_INPUT, + key: target.name, + value: target.value, }; } diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/constants.js b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/constants.js index 0a291a1aaf..0e04e1468a 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/constants.js +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/constants.js @@ -4,4 +4,5 @@ * */ -export const DEFAULT_ACTION = 'UsersPermissions/EditPage/DEFAULT_ACTION'; +export const ON_CANCEL = 'UsersPermissions/EditPage/ON_CANCEL'; +export const ON_CHANGE_INPUT = 'UsersPermissions/EditPage/ON_CHANGE_INPUT'; diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js index 36a22bda97..61072de4a8 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js @@ -5,42 +5,150 @@ */ import React from 'react'; -// import PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { Helmet } from 'react-helmet'; import { createStructuredSelector } from 'reselect'; import { bindActionCreators, compose } from 'redux'; +import { FormattedMessage } from 'react-intl'; +import { get } from 'lodash'; +import cn from 'classnames'; + +// Design +import BackHeader from 'components/BackHeader'; +import Input from 'components/Input'; +import InputSearch from 'components/InputSearch'; +import PluginHeader from 'components/PluginHeader'; import injectSaga from 'utils/injectSaga'; import injectReducer from 'utils/injectReducer'; + +// Actions +import { + onCancel, + onChangeInput, +} from './actions'; + +// Selectors import makeSelectEditPage from './selectors'; + import reducer from './reducer'; import saga from './saga'; +import styles from './styles.scss'; + export class EditPage extends React.Component { // eslint-disable-line react/prefer-stateless-function + pluginHeaderActions = [ + { + label: 'users-permissions.EditPage.cancel', + kind: 'secondary', + onClick: this.props.onCancel, + type: 'button', + }, + { + kind: 'primary', + label: 'users-permissions.EditPage.submit', + onClick: () => console.log('submit'), + type: 'submit', + }, + ]; + render() { + const pluginHeaderTitle = this.props.match.params.id === 'create' ? + 'users-permissions.EditPage.header.title.create' + : 'users-permissions.EditPage.header.title'; + const pluginHeaderDescription = this.props.match.params.id === 'create' ? + 'users-permissions.EditPage.header.description.create' + : 'users-permissions.EditPage.header.description'; + + const pluginHeaderActions = this.props.editPage.showButtons ? this.pluginHeaderActions : []; return (
    - - EditPage - - + this.props.history.goBack()} /> +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + console.log('change')} + type="text" + validations={{ required: true }} + value="" + name="users" + /> +
    +
    +
    +
    +
    +
    ); } } EditPage.propTypes = { + history: PropTypes.object.isRequired, + onCancel: PropTypes.func.isRequired, + onChangeInput: PropTypes.func.isRequired, }; const mapStateToProps = createStructuredSelector({ - editpage: makeSelectEditPage(), + editPage: makeSelectEditPage(), }); function mapDispatchToProps(dispatch) { return bindActionCreators( - {}, - dispatch + { + onCancel, + onChangeInput, + }, + dispatch, ); } diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/reducer.js b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/reducer.js index c5b099a6f0..e351ed0ff9 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/reducer.js +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/reducer.js @@ -4,17 +4,36 @@ * */ -import { fromJS } from 'immutable'; +import { fromJS, List, Map } from 'immutable'; import { - DEFAULT_ACTION, + ON_CANCEL, + ON_CHANGE_INPUT, } from './constants'; -const initialState = fromJS({}); +const initialState = fromJS({ + initialData: Map({ + name: '', + description: '', + users: List([]), + }), + modifiedData: Map({ + name: '', + description: '', + users: List([]), + }), + showButtons: false, +}); function editPageReducer(state = initialState, action) { switch (action.type) { - case DEFAULT_ACTION: - return state; + case ON_CANCEL: + return state + .set('showButtons', false) + .set('modifiedData', state.get('initialData')); + case ON_CHANGE_INPUT: + return state + .set('showButtons', true) + .setIn(['modifiedData', action.key], action.value); default: return state; } diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/styles.scss b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/styles.scss new file mode 100644 index 0000000000..e01f3c38a8 --- /dev/null +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/styles.scss @@ -0,0 +1,20 @@ +.containerFluid { + padding: 18px 30px; +} + +.form { + padding-top: 2rem; +} + +.main_wrapper{ + background: #ffffff; + padding: 22px 10px; + border-radius: 2px; + box-shadow: 0 2px 4px #E3E9F3; +} + +.titleContainer { + font-size: 18px; + font-weight: bold; + line-height: 18px; +} diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/data.json b/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/data.json index ed669297a0..4f6ae1f606 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/data.json +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/data.json @@ -3,58 +3,69 @@ { "name": "Owner", "description": "Rule them all. This role can't be deleted", - "nb_users": 1 + "nb_users": 1, + "id": 1 }, { "name": "Administrator", "description": "Full access to everything", - "nb_users": 3 + "nb_users": 3, + "id": 2 }, { "name": "Moderator", "description": "Allow editing and deleting (except users)", - "nb_users": 12 + "nb_users": 12, + "id": 3 }, { "name": "Editor", "description": "Allow creating and editing your entries", - "nb_users": 429 + "nb_users": 429, + "id": 4 } ], "providers": [ { "name": "email", "enabled": true, - "ico": "envelope" + "ico": "envelope", + "id": 1 }, { "name": "facebook", "enabled": false, - "ico": "facebook" + "ico": "facebook", + "id": 2 }, { "name": "twitter", "enabled": true, - "ico": "twitter" + "ico": "twitter", + "id": 3 }, { "name": "google", "enabled": false, - "ico": "google" + "ico": "google", + "id": 4 } ], "email-templates": [ { "name": "Email address validation", - "ico": "envelope" + "ico": "envelope", + "id": 1 }, { "name": "Reset password", - "ico": "refresh" + "ico": "refresh", + "id": 2 }, { "name": "Successfull sign-in", - "ico": "check" + "ico": "check", + "id": 3 } ] } diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js index 775ce978f9..b50aa19c08 100755 --- a/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js @@ -47,16 +47,19 @@ export class HomePage extends React.Component { } } + onButtonClick = () => this.props.history.push(`${this.props.location.pathname}/create`); + render() { const noButtonList = this.props.match.params.settingType === 'email-templates'; const component = this.props.match.params.settingType === 'advanced-settings' ?
    coucou
    : ; return (
    diff --git a/packages/strapi-plugin-users-permissions/admin/src/translations/en.json b/packages/strapi-plugin-users-permissions/admin/src/translations/en.json index 34f3d3e35b..5b1a7e0376 100755 --- a/packages/strapi-plugin-users-permissions/admin/src/translations/en.json +++ b/packages/strapi-plugin-users-permissions/admin/src/translations/en.json @@ -1,4 +1,15 @@ { + "EditPage.cancel": "Cancel", + "EditPage.submit": "Save", + "EditPage.form.roles": "Roles details", + "EditPage.form.roles.label.description": "Description", + "EditPage.form.roles.label.name": "Name", + "EditPage.form.roles.label.users": "Users associated with this role ({number})", + "EditPage.header.title": "{name}", + "EditPage.header.title.create": "Create a new role", + "EditPage.header.description": "{description}", + "EditPage.header.description.create": " ", + "HeaderNav.link.advancedSettings": "Advanced settings", "HeaderNav.link.emailTemplates": "Email templates", "HeaderNav.link.providers": "Providers", @@ -7,6 +18,8 @@ "HomePage.header.title": "Auth & Permissions", "HomePage.header.description": "Define the roles and permissions for every one of them", + "InputSearch.placeholder": "Search for a user", + "List.button.roles": "Add a New Role", "List.button.providers": "Add a New Provider", diff --git a/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json b/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json index d57c0af37c..20e6a7a92e 100755 --- a/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json +++ b/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json @@ -1,4 +1,15 @@ { + "EditPage.cancel": "Cancel", + "EditPage.submit": "Sauvegarder", + "EditPage.form.roles": "Rôles détails", + "EditPage.form.roles.label.description": "Description", + "EditPage.form.roles.label.name": "Nom", + "EditPage.form.roles.label.users": "Utilisateurs associés avec ce rôle ({number})", + "EditPage.header.title": "{name}", + "EditPage.header.title.create": "Créez un nouveau rôle", + "EditPage.header.description": "{description}", + "EditPage.header.description.create": " ", + "HeaderNav.link.advancedSettings": "Paramètres avancés", "HeaderNav.link.emailTemplates": "Templates d'email", "HeaderNav.link.providers": "Fournisseurs", @@ -7,6 +18,8 @@ "HomePage.header.title": "Auth & Permissions", "HomePage.header.description": "Définissez les rôles et permissions pour chacun d'eux", + "InputSearch.placeholder": "Recherez un utilisateur", + "List.button.roles": "Ajouter un Nouveau Rôle", "List.button.providers": "Ajouter Un Nouveau Provider",