adds level checkboxs to replace level multiselect (WIP)

Datawheel · May 30, 2019 · 360d046 · 360d046
1 parent 8fedfc8
commit 360d046
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/packages/cms/src/cms.css b/packages/cms/src/cms.css
@@ -268,6 +268,19 @@
   }
 }
 
+.cms-fieldset {
+  border: none;
+  padding: 0.25rem 0 0 0;
+
+  & > .cms-checkbox-label {
+    display: inline-block;
+
+    &:not(:last-child) {
+      margin-right: 1.5em;
+    }
+  }
+}
+
 /* alerts */
 .cms-alert {
   padding: 0.5em 1em;

diff --git a/packages/cms/src/components/DimensionCreator.jsx b/packages/cms/src/components/DimensionCreator.jsx
@@ -15,7 +15,8 @@ class DimensionCreator extends Component {
         hierarchies: [],
         levels: []
       },
-      selectedDimension: {}
+      selectedDimension: {},
+      selectedLevels: new Map()
     };
   }
 
@@ -34,7 +35,11 @@ class DimensionCreator extends Component {
     profileData.dimName = selectedDimension.dimName;
     profileData.hierarchies = selectedDimension.hierarchies;
     profileData.levels = selectedDimension.hierarchies.map(h => h.level);
-    this.setState({profileData, selectedDimension});
+    this.setState({
+      profileData,
+      selectedDimension,
+      selectedLevels: profileData.levels // all levels selected by default
+    });
 
   }
 
@@ -58,6 +63,14 @@ class DimensionCreator extends Component {
     this.setState({profileData});
   }
 
+  // placeholder function
+  toggleLevel(level) {
+    const {selectedLevels} = this.state;
+
+    console.log("level", level);
+    console.log("selectedLevels", selectedLevels);
+  }
+
   createProfile() {
     const {profileData} = this.state;
     if (this.props.onAddDimension) this.props.onAddDimension(profileData);
@@ -94,10 +107,26 @@ class DimensionCreator extends Component {
         { profileData.dimension &&
           <div className="cms-field-container">
             Levels:
+
+            {/* new hotness */}
+            <fieldset className="cms-fieldset">
+              {profileData.levels.map(level =>
+                <label className="cms-checkbox-label" key={level}>
+                  <input
+                    className="cms-checkbox"
+                    type="checkbox"
+                    checked={ this.state.selectedLevels.filter(l => l === level) }
+                    onChange={ this.toggleLevel.bind(this, level) }
+                  /> {level}
+                </label>
+              )}
+            </fieldset>
+
+            {/* old and busted */}
             <MultiSelect
               items={levelList}
               itemPredicate={(q, o) => `${o.toLowerCase()}`.indexOf(q.toLowerCase()) >= 0}
-              itemRenderer={(i, {handleClick, modifiers, query}) => 
+              itemRenderer={(i, {handleClick, modifiers, query}) =>
                 <MenuItem
                   key={i}
                   onClick={handleClick}