Merge branch 'master' of github.com:strapi/strapi into add/inputs-to-users

docs/3.x.x/en/plugin-development/ui-components.md

@@ -403,6 +403,12 @@ export default Foo;
 
 ***
 
+## InputDate
+
+Please refer to the [InputText documentation](#InputText);
+
+***
+
 ## InputEmail
 
 Please refer to the [InputText documentation](#InputText);
@@ -430,6 +436,26 @@ InputNumber component.
 
 ***
 
+## InputSearch
+
+InputSearch component.
+
+| Property | Type | Required | Description |
+| -------- | ---- | -------- | ----------- |
+| autoFocus | bool | no | Sets the input's autoFocus |
+| className | string | no | custom className for the input |
+| deactivateErrorHighlight | bool | no | Allow to deactivate the red border on the input when there is an error |
+| disabled | bool | no | Disables the input |
+| error | bool | no | Sets the red border on the input |
+| onBlur | func | no | Function executed when the user leaves the input |
+| onChange | func | yes | Handler to modify the input's value |
+| onFocus | func | no | Function executed when the user enters the input |
+| name | string | yes | The name of the input |
+| placeholder | string | no | Input's placeholder, works with i18n |
+| style | object | no | Input's style property |
+| tabIndex | string | no | Input's tabIndex |
+| value | string | yes | Input's value |
+
 ***
 
 ## InputSelect
@@ -517,6 +543,12 @@ Input type: 'toggle' component
 
 ***
 
+## InputDateWithErrors
+
+Please refer to the [InputTextWithErrors](#InputTextWithErrors) documentation.
+
+***
+
 ## InputEmailWithErrors
 
 Please refer to the [InputTextWithErrors](#InputTextWithErrors) documentation.
@@ -529,6 +561,12 @@ Please refer to the [InputTextWithErrors](#InputTextWithErrors) documentation.
 
 ***
 
+## InputSearchWithErrors
+
+Please refer to the [InputTextWithErrors](#InputTextWithErrors) documentation.
+
+***
+
 ## InputSelectWithErrors
 
 Component integrates Label, InputSelect, InputDescription and InputErrors.

packages/strapi-helper-plugin/lib/src/components/InputDate/index.js

@@ -0,0 +1,89 @@
+/**
+ *
+ * InputDate
+ *
+ */
+
+import React from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import DateTimeStyle from 'react-datetime/css/react-datetime.css';
+import DateTime from 'react-datetime';
+import { FormattedMessage } from 'react-intl';
+import { isEmpty, isObject } from 'lodash';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+function InputDate(props) {
+  const value = isObject(props.value) && props.value._isAMomentObject === true ? props.value : moment(props.value);
+
+  return (
+    <FormattedMessage id={props.placeholder} defaultMessage={props.placeholder}>
+      {(placeholder) => (
+        <DateTime
+          dateFormat='YYYY-MM-DD'
+          inputProps={{
+            autoFocus: props.autoFocus,
+            className: cn(
+              'form-control',
+              styles.inputDate,
+              !props.deactivateErrorHighlight && props.error && 'is-invalid',
+              !isEmpty(props.className) && props.className,
+            ),
+            disabled: props.disabled,
+            id: props.name,
+            name: props.name,
+            placeholder,
+            style: props.style,
+          }}
+          onBlur={props.onBlur}
+          onChange={(moment) => props.onChange({ target: {
+            name: props.name,
+            value: moment
+          }})}
+          onFocus={props.onFocus}
+          tabIndex={props.tabIndex}
+          timeFormat='HH:mm:ss'
+          utc={true}
+          value={value}
+          style={props.style}
+        />
+      )}
+    </FormattedMessage>
+  );
+}
+
+InputDate.defaultProps = {
+  autoFocus: true,
+  className: '',
+  deactivateErrorHighlight: false,
+  disabled: false,
+  error: false,
+  onBlur: () => {},
+  onFocus: () => {},
+  placeholder: 'app.utils.placeholder.defaultMessage',
+  style: {},
+  tabIndex: '0',
+};
+
+InputDate.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  deactivateErrorHighlight: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+};
+
+export default InputDate;

packages/strapi-helper-plugin/lib/src/components/InputDate/styles.scss

@@ -0,0 +1,12 @@
+.inputDate {
+  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;
+  box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
+}

packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js

@@ -0,0 +1,236 @@
+/**
+ *
+ * InputDateWithErrors
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import cn from 'classnames';
+
+// Design
+import Label from 'components/Label';
+import InputDescription from 'components/InputDescription';
+import InputErrors from 'components/InputErrors';
+  import InputDate from 'components/InputDate';
+
+import styles from './styles.scss';
+
+class InputDateWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
+ state = { errors: [], hasInitialValue: false };
+
+ componentDidMount() {
+   const { value, errors } = this.props;
+
+   // Prevent the input from displaying an error when the user enters and leaves without filling it
+   if (value && !isEmpty(value)) {
+     this.setState({ hasInitialValue: true });
+   }
+
+   // Display input error if it already has some
+   if (!isEmpty(errors)) {
+     this.setState({ errors });
+   }
+ }
+
+ componentWillReceiveProps(nextProps) {
+   // Check if errors have been updated during validations
+   if (nextProps.didCheckErrors !== this.props.didCheckErrors) {
+     // Remove from the state the errors that have already been set
+     const errors = isEmpty(nextProps.errors) ? [] : nextProps.errors;
+     this.setState({ errors });
+   }
+ }
+
+ /**
+  * Set the errors depending on the validations given to the input
+  * @param  {Object} target
+  */
+ handleBlur = ({ target }) => {
+   // Prevent from displaying error if the input is initially isEmpty
+   if (!isEmpty(get(target, 'value')) || this.state.hasInitialValue) {
+     const errors = this.validate(target.value);
+     this.setState({ errors, hasInitialValue: true });
+   }
+ }
+
+ render() {
+   const {
+     autoFocus,
+     className,
+     customBootstrapClass,
+     deactivateErrorHighlight,
+     disabled,
+     errorsClassName,
+     errorsStyle,
+     inputClassName,
+     inputDescription,
+     inputDescriptionClassName,
+     inputDescriptionStyle,
+     inputStyle,
+     label,
+     labelClassName,
+     labelStyle,
+     name,
+     noErrorsDescription,
+     onBlur,
+     onChange,
+     onFocus,
+     placeholder,
+     style,
+     tabIndex,
+     value,
+   } = this.props;
+   const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
+
+   let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+
+   if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+     spacer = <div />;
+   }
+
+   return (
+     <div className={cn(
+         !isEmpty(customBootstrapClass) && customBootstrapClass || 'col-md-4',
+         styles.containerDate,
+         !isEmpty(className) && className,
+       )}
+       style={style}
+     >
+       <Label
+         className={labelClassName}
+         htmlFor={name}
+         message={label}
+         style={labelStyle}
+       />
+      <InputDate
+         autoFocus={autoFocus}
+         className={inputClassName}
+         disabled={disabled}
+         deactivateErrorHighlight={deactivateErrorHighlight}
+         error={!isEmpty(this.state.errors)}
+         name={name}
+         onBlur={handleBlur}
+         onChange={onChange}
+         onFocus={onFocus}
+         placeholder={placeholder}
+         style={inputStyle}
+         tabIndex={tabIndex}
+         value={value}
+       />
+       <InputDescription
+         className={inputDescriptionClassName}
+         message={inputDescription}
+         style={inputDescriptionStyle}
+       />
+       <InputErrors
+         className={errorsClassName}
+         errors={!noErrorsDescription && this.state.errors || []}
+         style={errorsStyle}
+       />
+       {spacer}
+     </div>
+   );
+ }
+
+ validate = (value) => {
+   const requiredError = { id: 'components.Input.error.validation.required' };
+   let errors = [];
+
+   mapKeys(this.props.validations, (validationValue, validationKey) => {
+     switch (validationKey) {
+       case 'required': {
+         if (value.length === 0) {
+           errors.push({ id: 'components.Input.error.validation.required' });
+         }
+         break;
+       }
+       default:
+         errors = [];
+     }
+   });
+
+   if (includes(errors, requiredError)) {
+     errors = reject(errors, (error) => error !== requiredError);
+   }
+
+   return errors;
+ }
+}
+
+InputDateWithErrors.defaultProps = {
+ autoFocus: false,
+ className: '',
+ customBootstrapClass: 'col-md-4',
+ deactivateErrorHighlight: false,
+ didCheckErrors: false,
+ disabled: false,
+ onBlur: false,
+ onFocus: () => {},
+ errors: [],
+ errorsClassName: '',
+ errorsStyle: {},
+ inputClassName: '',
+ inputDescription: '',
+ inputDescriptionClassName: '',
+ inputDescriptionStyle: {},
+ inputStyle: {},
+ label: '',
+ labelClassName: '',
+ labelStyle: {},
+ noErrorsDescription: false,
+ placeholder: 'app.utils.placeholder.defaultMessage',
+ style: {},
+ tabIndex: '0',
+ validations: {},
+};
+
+InputDateWithErrors.propTypes = {
+ autoFocus: PropTypes.bool,
+ className: PropTypes.string,
+ customBootstrapClass: PropTypes.string,
+ deactivateErrorHighlight: PropTypes.bool,
+ didCheckErrors: PropTypes.bool,
+ disabled: PropTypes.bool,
+ errors: PropTypes.array,
+ errorsClassName: PropTypes.string,
+ errorsStyle: PropTypes.object,
+ inputClassName: PropTypes.string,
+ inputDescription: PropTypes.oneOfType([
+   PropTypes.string,
+   PropTypes.func,
+   PropTypes.shape({
+     id: PropTypes.string,
+     params: PropTypes.object,
+   }),
+ ]),
+ inputDescriptionClassName: PropTypes.string,
+ inputDescriptionStyle: PropTypes.object,
+ inputStyle: PropTypes.object,
+ label: PropTypes.oneOfType([
+   PropTypes.string,
+   PropTypes.func,
+   PropTypes.shape({
+     id: PropTypes.string,
+     params: PropTypes.object,
+   }),
+ ]),
+ labelClassName: PropTypes.string,
+ labelStyle: PropTypes.object,
+ name: PropTypes.string.isRequired,
+ noErrorsDescription: PropTypes.bool,
+ onBlur: PropTypes.oneOfType([
+   PropTypes.bool,
+   PropTypes.func,
+ ]),
+ onChange: PropTypes.func.isRequired,
+ onFocus: PropTypes.func,
+ placeholder: PropTypes.string,
+ style: PropTypes.object,
+ tabIndex: PropTypes.string,
+ validations: PropTypes.object,
+ value: PropTypes.string.isRequired,
+};
+
+export default InputDateWithErrors;

packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/styles.scss

@@ -0,0 +1,36 @@
+.containerDate {
+  min-width: 200px;
+  margin-bottom: 1.5rem;
+  font-size: 1.3rem;
+
+  > div:first-of-type{
+    &:before{
+      content: '\f073';
+      position: absolute;
+      left: 1px; top: 1px;
+      width: 32px;
+      height: 32px;
+      border-radius: 3px 0px 0px 3px;
+      background: #FAFAFB;
+      color: #B3B5B9;
+      text-align: center;
+      font-family: 'FontAwesome';
+      font-size: 1.4rem;
+      line-height: 32px;
+      -webkit-font-smoothing: none;
+    }
+
+    input {
+      width: 100%;
+      padding-left: 42px;
+      box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
+      &:focus{
+        outline: none;
+      }
+    }
+  }
+}
+
+.spacer {
+  height: .5rem;
+}

packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 
 // Design
 import InputCheckboxWithErrors from 'components/InputCheckboxWithErrors';
+import InputDateWithErrors from 'components/InputDateWithErrors';
 import InputEmailWithErrors from 'components/InputEmailWithErrors';
 import InputNumberWithErrors from 'components/InputNumberWithErrors';
 import InputSearchWithErrors from 'components/InputSearchWithErrors';
@@ -21,6 +22,7 @@ const DefaultInputError = ({ type }) => <div>Your input type: <b>{type}</b> does
 
 const inputs = {
   checkbox: InputCheckboxWithErrors,
+  date: InputDateWithErrors,
   email: InputEmailWithErrors,
   number: InputNumberWithErrors,
   password: InputPasswordWithErrors,
@@ -46,6 +48,7 @@ InputsIndex.propTypes = {
 export default InputsIndex;
 export {
   InputCheckboxWithErrors,
+  InputDateWithErrors,
   InputEmailWithErrors,
   InputNumberWithErrors,
   InputPasswordWithErrors,

packages/strapi-mongoose/lib/utils/index.js

@@ -9,9 +9,12 @@ module.exports = mongoose => {
 
   const SchemaTypes = mongoose.Schema.Types;
 
-  SchemaTypes.Decimal.prototype.cast = function (value) {
-    return value.toString();
-  };
+  // Note: The decimal format isn't well supported by MongoDB.
+  // It's recommended to use Float or Number type instead.
+  //
+  // SchemaTypes.Decimal.prototype.cast = function (value) {
+  //   return value.toString();
+  // };
 
   return {
     convertType: mongooseType => {
@@ -25,9 +28,8 @@ module.exports = mongoose => {
         case 'biginteger':
           return 'Number';
         case 'float':
-          return 'Float';
         case 'decimal':
-          return 'Decimal';
+          return 'Float';
         case 'date':
         case 'time':
         case 'datetime':

packages/strapi-plugin-users-permissions/services/UsersPermissions.js

@@ -17,7 +17,11 @@ module.exports = {
       return new Error('This feature requires to install the Content Manager plugin');
     }
 
-    const role = await strapi.query('role', 'users-permissions').create(_.omit(params, ['users', 'permissions', 'type']));
+    if (!params.type) {
+      params.type = _.snakeCase(_.deburr(_.toLower(params.name)));
+    }
+
+    const role = await strapi.query('role', 'users-permissions').create(_.omit(params, ['users', 'permissions']));
 
     const arrayOfPromises = Object.keys(params.permissions).reduce((acc, type) => {
       Object.keys(params.permissions[type].controllers).forEach(controller => {