Merge pull request #63 from dew326/cotf-config

EZP-28936/EZP-29000/EZP-29001/EZP-29002/EZP-29003/EZP-29004/EZP-29005/EZP-29007 - Content on the Fly configuration

src/modules/universal-discovery/components/content-creator/css/content.creator.component.css

@@ -5,7 +5,8 @@
 }
 
 .c-content-creator .m-ud__content {
-    padding: 0
+    padding: 0;
+    background: #eee;
 }
 
 .c-content-creator .m-ud__actions {

src/modules/universal-discovery/components/create/create.choose.content.type.component.js → src/modules/universal-discovery/components/create/choose.content.type.component.js

@@ -1,28 +1,57 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import './css/create.choose.content.type.component.css';
+import './css/choose.content.type.component.css';
 
 export default class ChooseContentTypeComponent extends Component {
     constructor(props) {
         super(props);
 
+        let selectedContentType = {};
+        const isForcedContentType = props.allowedContentTypes.length === 1;
+        const hasPreselectedAllowedContentType = !props.allowedContentTypes.length || props.allowedContentTypes.includes(props.preselectedContentType);
+        const isPreselectedContentType = props.preselectedContentType && hasPreselectedAllowedContentType;
+
         this._filterTimeout = null;
 
         this.updateFilterQuery = this.updateFilterQuery.bind(this);
         this.renderGroup = this.renderGroup.bind(this);
         this.renderItem = this.renderItem.bind(this);
 
+        if (isForcedContentType) {
+            selectedContentType = this.findContentType(props.allowedContentTypes[0]);
+        } else if (isPreselectedContentType) {
+            selectedContentType = this.findContentType(props.preselectedContentType);
+        }
+
         this.state = {
-            selected: {},
+            selectedContentType,
             filterQuery: ''
         };
     }
 
-    updateSelectedItem(item) {
-        this.props.onContentTypeSelected(item);
+    componentDidMount() {
+        this.props.onContentTypeSelected(this.state.selectedContentType);
+    }
+
+    findContentType(identifier) {
+        let contentType = null;
+
+        Object.values(this.props.contentTypes).forEach(group => {
+            const result = group.find(contentType => contentType.identifier === identifier);
+
+            if (result) {
+                contentType = result;
+            }
+        });
+
+        return contentType;
+    }
+
+    updateSelectedItem(selectedContentType) {
+        this.props.onContentTypeSelected(selectedContentType);
 
-        this.setState(state => Object.assign({}, state, {selected: item}));
+        this.setState(state => Object.assign({}, state, { selectedContentType }));
     }
 
     updateFilterQuery(event) {
@@ -36,16 +65,24 @@ export default class ChooseContentTypeComponent extends Component {
     }
 
     renderItem(item, index) {
+        const isNotSelectable = this.props.allowedContentTypes.length && !this.props.allowedContentTypes.includes(item.identifier);
         const attrs = {
             className: 'c-choose-content-type__group-item',
-            onClick: this.updateSelectedItem.bind(this, item),
             key: index
         };
 
-        if (this.state.selected.identifier === item.identifier) {
+        if (this.state.selectedContentType.identifier === item.identifier) {
             attrs.className = `${attrs.className} is-selected`;
         }
 
+        if (isNotSelectable) {
+            attrs.className = `${attrs.className} is-not-selectable`;
+        }
+
+        if (!isNotSelectable) {
+            attrs.onClick = this.updateSelectedItem.bind(this, item);
+        }
+
         if (this.state.filterQuery && !item.name.toLowerCase().includes(this.state.filterQuery)) {
             attrs.hidden = true;
         }
@@ -96,5 +133,7 @@ ChooseContentTypeComponent.propTypes = {
     maxHeight: PropTypes.number.isRequired,
     labels: PropTypes.object.isRequired,
     contentTypes: PropTypes.object.isRequired,
-    onContentTypeSelected: PropTypes.func.isRequired
+    onContentTypeSelected: PropTypes.func.isRequired,
+    preselectedContentType: PropTypes.string.isRequired,
+    allowedContentTypes: PropTypes.array.isRequired
 };

src/modules/universal-discovery/components/create/choose.language.component.js

@@ -0,0 +1,112 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './css/choose.language.component.css';
+
+export default class ChooseLanguageComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.updateSelection = this.updateSelection.bind(this);
+        this.renderOption = this.renderOption.bind(this);
+
+        let selectedLanguageCode = props.allowedLanguages.length ? props.allowedLanguages[0] : props.languages.priority[0];
+
+        if (props.preselectedLanguage) {
+            selectedLanguageCode = props.preselectedLanguage;
+        }
+
+        if (props.forcedLanguage) {
+            console.warn('[DEPRECATED] cotfForcedLanguage parameter is deprecated');
+            console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui-modules 2.0');
+            console.warn('[DEPRECATED] use cotfAllowedLanguages instead');
+
+            selectedLanguageCode = props.forcedLanguage;
+        }
+
+        if (props.allowedLanguages.length === 1) {
+            selectedLanguageCode = props.allowedLanguages[0];
+        }
+
+        this.state = {
+            selectedLanguage: props.languages.mappings[selectedLanguageCode]
+        };
+    }
+
+    componentDidMount() {
+        this.props.onLanguageSelected(this.state.selectedLanguage);
+    }
+
+    updateSelection(event) {
+        const languageCode = event.target.value;
+        const selectedLanguage = this.props.languages.mappings[languageCode];
+
+        this.props.onLanguageSelected(selectedLanguage);
+
+        this.setState(state => Object.assign({}, state, { selectedLanguage }));
+    }
+
+    renderOption(languageCode, index) {
+        const language = this.props.languages.mappings[languageCode];
+        const attrs = {
+            key: index,
+            value: language.languageCode
+        };
+
+        if (this.state.selectedLanguage.languageCode === languageCode) {
+            attrs.selected = true;
+        }
+
+        return (
+            <option {...attrs}>{language.name}</option>
+        );
+    }
+
+    renderOptions() {
+        const { allowedLanguages, languages } = this.props;
+        const languagesList = allowedLanguages.length ? allowedLanguages : languages.priority;
+
+        return (
+            languagesList.map(this.renderOption)
+        );
+    }
+
+    render() {
+        const selectAttrs = {
+            className: 'form-control',
+            onChange: this.updateSelection
+        };
+
+        if (this.props.forcedLanguage) {
+            console.warn('[DEPRECATED] forcedLanguage parameter is deprecated');
+            console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui-modules 2.0');
+            console.warn('[DEPRECATED] use allowedLanguages instead');
+        }
+
+        // @Deprecated - `forcedLanguage` will be removed in 2.0
+        if (this.props.allowedLanguages.length === 1 || this.props.forcedLanguage) {
+            selectAttrs.disabled = true;
+        }
+
+        return (
+            <div className="c-choose-language">
+                <p className="c-choose-language__title">{this.props.labels.contentOnTheFly.selectLanguage}</p>
+                <div className="c-choose-lagauge__select-wrapper">
+                    <select {...selectAttrs}>
+                        {this.renderOptions()}
+                    </select>
+                </div>
+            </div>
+        );
+    }
+}
+
+ChooseLanguageComponent.propTypes = {
+    maxHeight: PropTypes.number.isRequired,
+    labels: PropTypes.object.isRequired,
+    languages: PropTypes.object.isRequired,
+    onLanguageSelected: PropTypes.func.isRequired,
+    forcedLanguage: PropTypes.string.isRequired,
+    allowedLanguages: PropTypes.array.isRequired,
+    preselectedLanguage: PropTypes.string.isRequired
+};

src/modules/universal-discovery/components/create/create.component.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
-import ChooseLanguageComponent from './create.choose.language.component';
-import ChooseContentTypeComponent from './create.choose.content.type.component';
+import ChooseLanguageComponent from './choose.language.component';
+import ChooseContentTypeComponent from './choose.content.type.component';
 
 import './css/create.component.css';
 
@@ -21,7 +21,11 @@ CreateComponent.propTypes = {
     contentTypes: PropTypes.object.isRequired,
     onLanguageSelected: PropTypes.func.isRequired,
     onContentTypeSelected: PropTypes.func.isRequired,
-    forcedLanguage: PropTypes.string.isRequired
+    forcedLanguage: PropTypes.string.isRequired,
+    allowedLanguages: PropTypes.array.isRequired,
+    preselectedContentType: PropTypes.string.isRequired,
+    allowedContentTypes: PropTypes.array.isRequired,
+    preselectedLanguage: PropTypes.sttring.isRequired
 };
 
 export default CreateComponent;

src/modules/universal-discovery/components/create/css/create.choose.content.type.component.css → src/modules/universal-discovery/components/create/css/choose.content.type.component.css

@@ -35,3 +35,8 @@
 .c-choose-content-type__group-item.is-selected {
     background-color: #2b84b1;
 }
+
+.c-choose-content-type__group-item.is-not-selectable {
+    background-color: #eee;
+    cursor: not-allowed;
+}

src/modules/universal-discovery/components/finder/css/finder.tree.branch.component.css

@@ -31,3 +31,8 @@
     color: #fff;
     outline: none;
 }
+
+.c-finder-tree-branch--collapsed {
+    flex: 0 0 3ch;
+    cursor: pointer;
+}

src/modules/universal-discovery/components/finder/css/finder.tree.leaf.component.css

@@ -31,6 +31,13 @@
     transform: translateY(-50%);
 }
 
+.c-finder-tree-leaf--not-selectable,
+.c-finder-tree-leaf--not-selectable:hover,
+.c-finder-tree-leaf--not-selectable:focus {
+    background-color: #eee;
+    cursor: not-allowed;
+}
+
 .c-finder-tree-leaf--selected,
 .c-finder-tree-leaf--selected:hover,
 .c-finder-tree-leaf--selected:focus {
@@ -61,10 +68,3 @@
     right: 12px;
     top: 5px;
 }
-
-.c-finder-tree-leaf--not-selectable,
-.c-finder-tree-leaf--not-selectable:hover,
-.c-finder-tree-leaf--not-selectable:focus {
-    background-color: #eee;
-    cursor: not-allowed;
-}