updates selectorusage to work with stories

Datawheel · Oct 11, 2021 · a683573 · a683573
1 parent ee52abd
commit a683573
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 18 deletions.
diff --git a/packages/cms/src/api/cmsRoute.js b/packages/cms/src/api/cmsRoute.js
@@ -123,7 +123,7 @@ const sortStorySection = (db, storysection) => {
   storysection.stats = flatSort(db.storysection_stat, storysection.stats);
   storysection.descriptions = flatSort(db.storysection_description, storysection.descriptions);
   // ordering is nested in section_selector - bubble for top-level sorting
-  storysection.selectors = bubbleSortSelectors(db.storysection_selector, storysection.selectors);
+  storysection.selectors = bubbleSortSelectors(db.storysection_selector, storysection.selectors, "storysection_selector");
   return storysection;
 };
 

diff --git a/packages/cms/src/components/interface/SelectorUsage.jsx b/packages/cms/src/components/interface/SelectorUsage.jsx
@@ -9,6 +9,8 @@ import scaffoldDynamic from "../../utils/selectors/scaffoldDynamic";
 import {newEntity, deleteEntity, swapEntity} from "../../actions/profiles";
 import {setStatus} from "../../actions/status";
 
+import {SELECTOR_TYPES} from "../../utils/consts/cms";
+
 import "./SelectorUsage.css";
 
 class SelectorUsage extends Component {
@@ -22,13 +24,19 @@ class SelectorUsage extends Component {
   }
 
   removeItem(id) {
-    const {minData} = this.props;
-    this.props.deleteEntity("section_selector", {section_id: minData.id, selector_id: id});
+    const {minData, type} = this.props;
+    const payload = type === SELECTOR_TYPES.STORYSECTION_SELECTOR
+      ? {storysection_id: minData.id, story_selector_id: id}
+      : {section_id: minData.id, selector_id: id};
+    this.props.deleteEntity(type, payload);
   }
 
   addItem(id) {
-    const {minData} = this.props;
-    this.props.newEntity("section_selector", {section_id: minData.id, selector_id: id});
+    const {minData, type} = this.props;
+    const payload = type === SELECTOR_TYPES.STORYSECTION_SELECTOR
+      ? {storysection_id: minData.id, story_selector_id: id}
+      : {section_id: minData.id, selector_id: id};
+    this.props.newEntity(type, payload);
   }
 
   onChange(name, e) {
@@ -40,7 +48,8 @@ class SelectorUsage extends Component {
   }
 
   swapSelector(id) {
-    this.props.swapEntity("section_selector", id);
+    const {type} = this.props;
+    this.props.swapEntity(type, id);
   }
 
   render() {
@@ -59,7 +68,7 @@ class SelectorUsage extends Component {
       if (selector.dynamic) {
         if (validateDynamic(variables[selector.dynamic]) === "valid") {
           return {...selector, options: scaffoldDynamic(variables[selector.dynamic])};
-        } 
+        }
         else return {...selector, options: []};
       }
       else return selector;
@@ -103,12 +112,12 @@ class SelectorUsage extends Component {
             </ul>
             : <p className="u-font-xs">All available selectors have been activated</p>
           }
-          {(showMore || inactiveSelectors.length > inactiveSelectorsVisible.length) && 
-            <Button 
+          {(showMore || inactiveSelectors.length > inactiveSelectorsVisible.length) &&
+            <Button
               fontSize="xxs"
               onClick={() => this.setState({showMore: !this.state.showMore})}
             >
-              {showMore ? "Hide Full List" : "Show Full List..."} 
+              {showMore ? "Hide Full List" : "Show Full List..."}
             </Button>
           }
         </div>
@@ -184,10 +193,16 @@ class SelectorUsage extends Component {
   }
 }
 
-const mapStateToProps = state => ({
+SelectorUsage.defaultProps = {
+  type: SELECTOR_TYPES.SECTION_SELECTOR
+};
+
+const mapStateToProps = (state, ownProps) => ({
   variables: state.cms.variables,
   status: state.cms.status,
-  allSelectors: state.cms.profiles.find(p => p.id === state.cms.status.currentPid).selectors
+  allSelectors: ownProps.type === SELECTOR_TYPES.STORYSECTION_SELECTOR
+    ? state.cms.stories.find(p => p.id === state.cms.status.currentStoryPid).selectors
+    : state.cms.profiles.find(p => p.id === state.cms.status.currentPid).selectors
 });
 
 const mapDispatchToProps = dispatch => ({

diff --git a/packages/cms/src/db/section.js b/packages/cms/src/db/section.js
@@ -22,7 +22,7 @@ module.exports = function(sequelize, db) {
       type: {
         type: db.STRING,
         defaultValue: "TextViz"
-      }, 
+      },
       ordering: db.INTEGER,
       allowed: {
         type: db.STRING,
@@ -36,7 +36,7 @@ module.exports = function(sequelize, db) {
         type: db.STRING,
         defaultValue: ""
       }
-    }, 
+    },
     {
       tableName: "canon_cms_section",
       freezeTableName: true,

diff --git a/packages/cms/src/db/storysection_selector.js b/packages/cms/src/db/storysection_selector.js
@@ -7,7 +7,7 @@ module.exports = function(sequelize, db) {
         primaryKey: true,
         autoIncrement: true
       },
-      section_id: {
+      storysection_id: {
         type: db.INTEGER,
         onDelete: "cascade",
         references: {

diff --git a/packages/cms/src/profile/SectionEditor.jsx b/packages/cms/src/profile/SectionEditor.jsx
@@ -24,6 +24,8 @@ import ProfileRenderer from "../components/ProfileRenderer.jsx";
 import {newEntity, updateEntity} from "../actions/profiles";
 import {setStatus} from "../actions/status";
 
+import {PARENT_TYPES, SELECTOR_TYPES} from "../utils/consts/cms";
+
 import "./SectionEditor.css";
 
 const buttonGroupProps = {
@@ -269,7 +271,7 @@ class SectionEditor extends Component {
                 key={s.id}
                 minData={s}
                 fields={["subtitle"]}
-                type="section_subtitle"
+                type={"section_subtitle"}
                 showReorderButton={minData.subtitles[minData.subtitles.length - 1].id !== s.id}
               />
             )}
@@ -280,6 +282,7 @@ class SectionEditor extends Component {
           <Deck title="Selector activation" entity="selectorUsage">
             <SelectorUsage
               key="selector-usage"
+              type={SELECTOR_TYPES.SECTION_SELECTOR}
               minData={minData}
             />
           </Deck>

diff --git a/packages/cms/src/story/StorySectionEditor.jsx b/packages/cms/src/story/StorySectionEditor.jsx
@@ -6,6 +6,7 @@ import Deck from "../components/interface/Deck";
 import TextCard from "../components/cards/TextCard";
 import Loading from "components/Loading";
 import VisualizationCard from "../components/cards/VisualizationCard";
+import SelectorUsage from "../components/interface/SelectorUsage";
 import deepClone from "../utils/deepClone";
 
 import {newEntity, updateEntity} from "../actions/profiles";

diff --git a/packages/cms/src/utils/consts/cms.js b/packages/cms/src/utils/consts/cms.js
@@ -10,5 +10,11 @@ module.exports = {
     MATERIALIZER: "materializer",
     STORY_GENERATOR: "story_generator",
     STORY_MATERIALIZER: "story_materializer"
+  },
+
+  SELECTOR_TYPES: {
+    SECTION_SELECTOR: "section_selector",
+    STORYSECTION_SELECTOR: "storysection_selector"
   }
+
 };
diff --git a/packages/cms/src/utils/sequelize/models.js b/packages/cms/src/utils/sequelize/models.js
@@ -40,7 +40,8 @@ const storyReqFull = {
         {association: "subtitles", include: [{association: "content", separate: true}], separate: true},
         {association: "descriptions", include: [{association: "content", separate: true}], separate: true},
         {association: "stats", include: [{association: "content", separate: true}], separate: true},
-        {association: "visualizations", separate: true}
+        {association: "visualizations", separate: true},
+        {association: "selectors"}
       ]
     }
   ]
@@ -63,7 +64,8 @@ const storysectionReqFull = {
     {association: "subtitles", include: [{association: "content", separate: true}], separate: true},
     {association: "descriptions", include: [{association: "content", separate: true}], separate: true},
     {association: "stats", include: [{association: "content", separate: true}], separate: true},
-    {association: "visualizations", separate: true}
+    {association: "visualizations", separate: true},
+    {association: "selectors"}
   ]
 };