some fix and style improvements

editor/src/app/components/Info.js

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { show } from "../store/infobox";
+
+const ReadMore = props => {
+  if (!props.description) return null;
+  let partial = ellipsis(props.description);
+  return <small className="form-text text-muted">{partial}</small>;
+};
+
+const ellipsis = descr => {
+  let partial = descr;
+  if (descr.length > MAX_LEN) {
+    partial = descr.substring(0, MAX_LEN - 1) + "...";
+  }
+  return partial;
+};
+
+const MAX_LEN = 100;
+
+const mapStateToProps = state => {
+  return {};
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    show: data => dispatch(show(data))
+  };
+};
+
+@connect(
+  mapStateToProps,
+  mapDispatchToProps
+)
+export default class InfoBox extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    if (!(this.props.title || this.props.description)) return null;
+    let { title, description } = this.props;
+    let partial = ellipsis(description);
+    return (
+      <div className="field_info">
+        <small className="form-text text-muted">
+          <span>{partial}</span>
+          {description.length > MAX_LEN && (
+            <span>
+              <a
+                href="#"
+                className="link"
+                onClick={() => {
+                  console.log("CLICK", description);
+                  this.props.show({  title,  description });
+                }}
+              >
+                Read more
+              </a>
+            </span>
+          )}
+        </small>
+      </div>
+    );
+  }
+}

editor/src/app/components/InfoBox.js

@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { show, hide } from "../store/infobox";
+import classNames from "classnames";
+import img_close from "../../asset/img/close.svg";
+
+const mapStateToProps = state => {
+  return {
+    infobox: state.infobox
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    show: data => dispatch(show(data)),
+    hide: () => dispatch(hide())
+  };
+};
+
+@connect(
+  mapStateToProps,
+  mapDispatchToProps
+)
+export default class InfoBox extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    const { title, description, visible } = this.props.infobox;
+    const className = classNames([
+      "info__box",
+      { info__box__visible: visible }
+    ]);
+
+    console.log("CLASSNAME", className);
+    return (
+      <div className={className}>
+        <div className="info__box__body">
+          <div className="info__box__close">
+            <a
+              href="#"
+              className="link"
+              onClick={() => this.props.hide(description)}
+            >
+              <img src={img_close} />
+            </a>
+          </div>
+
+          <div className="info__box__content">
+            <p className="info__box__title">{title}</p>
+            <p>{description}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

editor/src/app/components/editor.js

@@ -15,12 +15,14 @@ import jsyaml from "../../../node_modules/js-yaml/dist/js-yaml.js";
 
 import _ from "lodash";
 import u from "updeep";
-import validator from "validator";
+import moment from "moment";
+
 import cleanDeep from "clean-deep";
 
 import Head from "./head";
 import Foot from "./foot";
 import EditorForm from "./editorForm";
+import InfoBox from "./InfoBox";
 
 import LanguageSwitcher from "./languageSwitcher";
 import Sidebar from "./sidebar";
@@ -64,7 +66,8 @@ export default class Index extends Component {
       blocks: null,
       elements: null,
       activeSection: 0,
-      allFields: null
+      allFields: null,
+      lastGen: null
     };
   }
 
@@ -75,24 +78,28 @@ export default class Index extends Component {
     $('[data-toggle="dropdown"]').dropdown();
   }
 
-  componentDidMount() {
-    this.initData();
+  async componentDidMount() {
+    await this.initData();
     this.switchLang("eng");
+    this.switchCountry("it");
   }
 
-  initData(country = null) {
+  async initData(country = null) {
     //has state
-    let { elements, blocks, allFields } = getData(country);
+    console.log("initData");
+    let { elements, blocks, allFields } = await getData(country);
     this.setState({ elements, blocks, country, allFields });
     this.initBootstrap();
   }
 
   parseYml(yaml) {
     //HAS STATE
-
+    this.setState({ loading: true });
     let obj = null;
     try {
       obj = jsyaml.load(yaml);
+      // let errors =   fv.validatePubliccodeYml(obj);
+      // if (errors) alert(errors);
     } catch (e) {
       alert("Error loading yaml");
       return;
@@ -113,7 +120,8 @@ export default class Index extends Component {
       yaml,
       languages,
       values,
-      country
+      country,
+      loading: false
     });
 
     //RESET FORM
@@ -122,11 +130,16 @@ export default class Index extends Component {
   }
 
   generate(formValues) {
+    let lastGen = moment();
+    this.setState({ loading: true, lastGen });
     //has state
     let { values, currentLanguage, country } = this.state;
     //values[currentLanguage] = formValues;
     let obj = ft.transform(values, country);
 
+    // let errors = await fv.validatePubliccodeYml(obj);
+    // if (errors) alert(errors);
+
     //SET  TIMESTAMP
     this.showResults(obj);
     //this.showResults(obj);
@@ -136,7 +149,7 @@ export default class Index extends Component {
     //has state
     try {
       let yaml = jsyaml.dump(values);
-      this.setState({ yaml });
+      this.setState({ yaml, loading: false });
     } catch (e) {
       console.error(e);
     }
@@ -172,10 +185,14 @@ export default class Index extends Component {
     //has state
     let errors = {};
     let { values, currentLanguage, elements } = this.state;
+
     //CHECK REQUIRED FIELDS
-    errors = fv.validateRequired(contents, elements, errors);
+    let required = fv.validateRequired(contents, elements);
     //VALIDATE TYPES AND SUBOBJECT
-    errors = fv.validateSubTypes(contents, elements, errors);
+    let objs_n_arrays = fv.validateSubTypes(contents, elements);
+    errors = Object.assign(required, objs_n_arrays);
+    // console.log(errors);
+
     //UPDATE STATE
     values[currentLanguage] = contents;
     this.setState({
@@ -188,7 +205,7 @@ export default class Index extends Component {
     return errors;
   }
 
-  reset() {
+  async reset() {
     //has state
     this.props.initialize(APP_FORM, null);
     this.setState({
@@ -207,7 +224,7 @@ export default class Index extends Component {
       activeSection: null
     });
     this.props.notify({ type: "info", msg: "Reset" });
-    this.initData();
+    await this.initData();
   }
 
   renderFoot() {
@@ -317,10 +334,10 @@ export default class Index extends Component {
     this.props.initialize(APP_FORM, currentValues);
   }
 
-  switchCountry(country) {
+  async switchCountry(country) {
     //has state
     let { currentValues } = this.state;
-    this.initData(country);
+    await this.initData(country);
     this.props.initialize(APP_FORM, currentValues);
   }
 
@@ -346,7 +363,8 @@ export default class Index extends Component {
       blocks,
       activeSection,
       country,
-      allFields
+      allFields,
+      lastGen
     } = this.state;
 
     let errors = null;
@@ -363,7 +381,7 @@ export default class Index extends Component {
     return (
       <Fragment>
         <div className="content">
-          <Head />
+          <Head lastGen={lastGen} />
           {this.langSwitcher()}
           <div className="content__main" id="content__main">
             {currentLanguage &&
@@ -382,6 +400,7 @@ export default class Index extends Component {
               )}
           </div>
           {currentLanguage && this.renderFoot()}
+          <InfoBox />
         </div>
         {this.renderSidebar()}
       </Fragment>

editor/src/app/components/editorForm.js

@@ -37,7 +37,7 @@ const renderBlockItems = (items, id) => {
 
 const renderHeader = props => {
   let img_arrow = img_accordion_closed;
-  if (props.activeSection == (props.block.index-1)) {
+  if (props.activeSection == props.block.index - 1) {
     img_arrow = img_accordion_open;
   }
   return (

editor/src/app/components/foot.js

@@ -28,17 +28,17 @@ export default class foot extends Component {
       <div className="content__foot">
         <div className="content__foot_item">
           <button
-            className="btn btn-lg btn-outline-primary"
+            className="editor_button  editor_button--custom"
             onClick={() => this.props.reset()}
           >
             Reset
           </button>
         </div>
-        <div className="content__foot_item" />
         <div className="content__foot_item">
           <button
             type="button"
-            className="btn btn-lg btn-primary"
+            className="editor_button  editor_button--primary"
+
             onClick={() => {
               this.props.submit(APP_FORM);
               setTimeout(() => {
@@ -53,4 +53,4 @@ export default class foot extends Component {
     );
   }
 }
-//   disabled={form[APP_FORM].submitFailed && form[APP_FORM].syncErrors}
+//disabled={form[APP_FORM].submitFailed && form[APP_FORM].syncErrors}