adds visual split and locale dropdown to builder

packages/cms/src/Builder.jsx

@@ -20,6 +20,7 @@ class Builder extends Component {
       currentTab: "profiles",
       // formatters,
       theme: "cms-light",
+      locale: "pt",
 
       formatters: (props.formatters || []).reduce((acc, d) => {
         const f = Function("n", "libs", "formatters", d.logic);
@@ -52,8 +53,12 @@ class Builder extends Component {
     this.setState({theme: e.target.value});
   }
 
+  handleLocaleSelect(e) {
+    this.setState({locale: e.target.value});
+  }
+
   render() {
-    const {currentTab, theme} = this.state;
+    const {currentTab, theme, locale} = this.state;
     const {isEnabled} = this.props;
     const navLinks = ["profiles", "stories", "formatters"];
 
@@ -69,6 +74,19 @@ class Builder extends Component {
               {navLink}
             </button>
           )}
+          <label className="cms-select-label cms-theme-select">second language: 
+            <select
+              className="cms-select"
+              name="select-theme"
+              id="select-theme"
+              value={locale}
+              onChange={this.handleLocaleSelect.bind(this)}
+            >
+              <option value="pt">pt</option>
+              <option value="es">es</option>
+              <option value="ru">ru</option>
+            </select>
+          </label>
           <label className="cms-select-label cms-theme-select">theme: 
             <select
               className="cms-select"
@@ -82,8 +100,8 @@ class Builder extends Component {
             </select>
           </label>
         </div>
-        {currentTab === "profiles" && <ProfileBuilder />}
-        {currentTab === "stories" && <StoryBuilder />}
+        {currentTab === "profiles" && <ProfileBuilder locale={locale}/>}
+        {currentTab === "stories" && <StoryBuilder locale={locale}/>}
         {currentTab === "formatters" && <FormatterEditor />}
       </div>
     );

packages/cms/src/api/cmsRoute.js

@@ -50,6 +50,7 @@ const profileReqProfileOnly = {
 
 const storyReqStoryOnly = {
   include: [
+    {association: "content"},
     {association: "authors", attributes: ["id", "ordering"]},
     {association: "descriptions", attributes: ["id", "ordering"]},
     {association: "footnotes", attributes: ["id", "ordering"]}
@@ -58,6 +59,7 @@ const storyReqStoryOnly = {
 
 const topicReqTopicOnly = {
   include: [
+    {association: "content"},
     {association: "subtitles", attributes: ["id", "ordering"]},
     {association: "descriptions", attributes: ["id", "ordering"]},
     {association: "visualizations", attributes: ["id", "ordering"]},
@@ -68,6 +70,7 @@ const topicReqTopicOnly = {
 
 const storyTopicReqStoryTopicOnly = {
   include: [
+    {association: "content"},
     {association: "subtitles", attributes: ["id", "ordering"]},
     {association: "descriptions", attributes: ["id", "ordering"]},
     {association: "visualizations", attributes: ["id", "ordering"]},

packages/cms/src/components/cards/Flag.jsx

@@ -0,0 +1,31 @@
+import React, {Component} from "react";
+
+class Flag extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+
+    };
+  }
+
+  render() {
+
+    const {locale} = this.props;
+
+    const lookup = {
+      pt: "🇧🇷",
+      es: "🇪🇸",
+      ru: "🇷🇺"
+    };
+
+    return (
+      <div className="cms-flag">
+        {lookup[locale]}       
+      </div>
+    );
+  }
+
+}
+
+export default Flag;

packages/cms/src/components/cards/TextCard.css

@@ -21,6 +21,11 @@
   padding: 1rem;
   width: 18rem;
   max-width: calc(100% - 2rem);
+
+  /* flag icon */
+  & .cms-flag {
+    position: absolute;
+  }
 }
 
 
@@ -154,3 +159,5 @@
     font-size: 24px;
   }
 }
+
+

packages/cms/src/components/cards/TextCard.jsx

@@ -9,6 +9,7 @@ import TextEditor from "../editors/TextEditor";
 import PlainTextEditor from "../editors/PlainTextEditor";
 import deepClone from "../../utils/deepClone";
 import PropTypes from "prop-types";
+import Flag from "./Flag";
 import "./TextCard.css";
 
 class TextCard extends Component {
@@ -28,10 +29,10 @@ class TextCard extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.state.minData && (prevProps.variables !== this.props.variables || this.props.selectors !== prevProps.selectors)) {
+    if (this.state.minData && (JSON.stringify(prevProps.variables) !== JSON.stringify(this.props.variables) || JSON.stringify(this.props.selectors) !== JSON.stringify(prevProps.selectors))) {
       this.formatDisplay.bind(this)();
     }
-    if (prevProps.item.id !== this.props.item.id) {
+    if (prevProps.item.id !== this.props.item.id || prevProps.locale !== this.props.locale) {
       this.hitDB.bind(this)();
     }
   }
@@ -79,9 +80,9 @@ class TextCard extends Component {
     const {type, fields, plainfields, locale} = this.props;
     const {minData} = this.state;
     const payload = {id: minData.id};
+    const thisLocale = minData.content.find(c => c.lang === locale);
     // For some reason, an empty quill editor reports its contents as <p><br></p>. Do not save
     // this to the database - save an empty string instead.
-    const thisLocale = minData.content.find(c => c.lang === locale);
     fields.forEach(field => thisLocale[field] = thisLocale[field] === "<p><br></p>" ? "" : thisLocale[field]);
     if (plainfields) plainfields.forEach(field => thisLocale[field] = thisLocale[field] === "<p><br></p>" ? "" : thisLocale[field]);
     payload.allowed = minData.allowed;
@@ -169,10 +170,12 @@ class TextCard extends Component {
           {alertObj.message}
         </Alert>
 
+        <Flag locale={locale} />
+
         {/* title & edit toggle button */}
         <h5 className="cms-card-header">
           <button className="cms-button" onClick={this.openEditor.bind(this)}>
-            Edit <span className="pt-icon pt-icon-cog" />
+            Edit <span className="pt-icon pt-icon-cog" /> 
           </button>
         </h5>
 

packages/cms/src/profile/ProfileBuilder.jsx

@@ -475,6 +475,7 @@ class ProfileBuilder extends Component {
   render() {
 
     const {nodes, currentNode, variablesHash, currentSlug, preview, profileModalOpen, cubeData, nodeToDelete} = this.state;
+    const {locale} = this.props;
 
     if (!nodes) return <div>Loading</div>;
 
@@ -539,6 +540,7 @@ class ProfileBuilder extends Component {
           { currentNode
             ? <Editor
               id={currentNode.data.id}
+              locale={locale}
               masterSlug={currentNode.masterSlug}
               preview={preview}
               fetchVariables={this.fetchVariables.bind(this)}

packages/cms/src/profile/ProfileEditor.jsx

@@ -22,8 +22,7 @@ class ProfileEditor extends Component {
     this.state = {
       minData: null,
       variables: null,
-      recompiling: true,
-      locale: "en"
+      recompiling: true
     };
   }
 
@@ -111,8 +110,8 @@ class ProfileEditor extends Component {
 
   render() {
 
-    const {minData, recompiling, locale} = this.state;
-    const {children, variables, preview} = this.props;
+    const {minData, recompiling} = this.state;
+    const {children, variables, preview, locale} = this.props;
 
     if (!minData || !variables) return <Loading />;
 
@@ -197,6 +196,13 @@ class ProfileEditor extends Component {
           style={{backgroundImage: `url("/api/profile/${minData.slug}/${preview}/thumb")`}}
         >
           <div className="cms-card-list cms-profile-header">
+            <TextCard
+              locale="en"
+              item={minData}
+              fields={["title", "subtitle"]}
+              type="profile"
+              variables={variables}
+            />
             <TextCard
               locale={locale}
               item={minData}

packages/cms/src/profile/TopicEditor.jsx

@@ -111,7 +111,7 @@ class TopicEditor extends Component {
   render() {
 
     const {minData, recompiling} = this.state;
-    const {variables, preview, children} = this.props;
+    const {variables, preview, children, locale} = this.props;
 
     if (!minData || !variables) return <Loading />;
 
@@ -180,6 +180,15 @@ class TopicEditor extends Component {
         <div className="cms-card-list">
           <TextCard
             item={minData}
+            locale="en"
+            fields={["title"]}
+            onSave={this.onSave.bind(this)}
+            type="topic"
+            variables={variables}
+          />
+          <TextCard
+            item={minData}
+            locale={locale}
             fields={["title"]}
             onSave={this.onSave.bind(this)}
             type="topic"
@@ -199,6 +208,24 @@ class TopicEditor extends Component {
             <TextCard
               key={s.id}
               item={s}
+              locale="en"
+              fields={["subtitle"]}
+              type="topic_subtitle"
+              onDelete={this.onDelete.bind(this)}
+              variables={variables}
+              selectors={minData.selectors.map(s => Object.assign({}, s))}
+              parentArray={minData.subtitles}
+              onMove={this.onMove.bind(this)}
+            />
+          )}
+        </div>
+        <hr />
+        <div className="cms-card-list">
+          { minData.subtitles && minData.subtitles.map(s =>
+            <TextCard
+              key={s.id}
+              item={s}
+              locale={locale}
               fields={["subtitle"]}
               type="topic_subtitle"
               onDelete={this.onDelete.bind(this)}
@@ -245,6 +272,24 @@ class TopicEditor extends Component {
             <TextCard
               key={s.id}
               item={s}
+              locale="en"
+              fields={["title", "subtitle", "value", "tooltip"]}
+              type="topic_stat"
+              onDelete={this.onDelete.bind(this)}
+              variables={variables}
+              selectors={minData.selectors.map(s => Object.assign({}, s))}
+              parentArray={minData.stats}
+              onMove={this.onMove.bind(this)}
+            />
+          )}
+        </div>
+        <hr/>
+        <div className="cms-card-list">
+          { minData.stats && minData.stats.map(s =>
+            <TextCard
+              key={s.id}
+              item={s}
+              locale={locale}
               fields={["title", "subtitle", "value", "tooltip"]}
               type="topic_stat"
               onDelete={this.onDelete.bind(this)}
@@ -268,6 +313,24 @@ class TopicEditor extends Component {
             <TextCard
               key={d.id}
               item={d}
+              locale="en"
+              fields={["description"]}
+              type="topic_description"
+              onDelete={this.onDelete.bind(this)}
+              variables={variables}
+              selectors={minData.selectors.map(s => Object.assign({}, s))}
+              parentArray={minData.descriptions}
+              onMove={this.onMove.bind(this)}
+            />
+          )}
+        </div>
+        <hr/>
+        <div className="cms-card-list">
+          { minData.descriptions && minData.descriptions.map(d =>
+            <TextCard
+              key={d.id}
+              item={d}
+              locale={locale}
               fields={["description"]}
               type="topic_description"
               onDelete={this.onDelete.bind(this)}