Simplifying boolean maps values

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue

@@ -28,14 +28,6 @@
       :inputHandler="(value) => { selectedValues = value }"
     ></slot>
 
-    <component
-      :is="inputComponent"
-      v-model="selectedValues"
-      expanded
-      hideLabel
-      :nodeIds="nodeIds"
-    />
-
     <span v-if="error" class="red--text">
       {{ error }}
     </span>
@@ -82,18 +74,6 @@
         type: Array,
         default: () => [],
       },
-      /**
-       * inputComponent is a component that will be used to render the input(s)
-       * that will be used to edit the boolean map field.
-       * It should be a component that accepts a v-model prop and a nodeIds prop.
-       *
-       * The v-model prop should support an object with the same structure as the
-       * `this.selectedValues` data property.
-       */
-      inputComponent: {
-        type: Object,
-        required: true,
-      },
     },
     data() {
       return {
@@ -102,11 +82,9 @@
         /**
          * selectedValues is an object with the following structure:
          * {
-         *  [optionId]: true | [nodeId1, nodeId2, ...]
+         *  [optionId]: [nodeId1, nodeId2, ...]
          * }
-         * If the value is true, it means that the option is selected for all nodes
-         * If the value is an array of nodeIds, it means that the option is selected
-         * just for those nodes
+         * Where nodeIds is the id of the nodes that have the option selected
          */
         selectedValues: {},
       };
@@ -144,13 +122,7 @@
           });
       });
 
-      Object.entries(optionsNodes).forEach(([key, nodeIds]) => {
-        if (nodeIds.length === this.nodeIds.length) {
-          this.selectedValues[key] = true;
-        } else {
-          this.selectedValues[key] = nodeIds;
-        }
-      });
+      this.selectedValues = optionsNodes;
     },
     methods: {
       ...mapActions('contentNode', ['updateContentNode', 'updateContentNodeDescendants']),
@@ -161,7 +133,8 @@
         if (this.validators && this.validators.length) {
           this.error = getInvalidText(
             this.validators,
-            Object.keys(this.selectedValues).filter(key => this.selectedValues[key] === true)
+            Object.keys(this.selectedValues)
+              .filter(key => this.selectedValues[key].length === this.nodes.length)
           );
         } else {
           this.error = '';
@@ -177,7 +150,7 @@
           this.nodes.map(node => {
             const fieldValue = {};
             Object.entries(this.selectedValues).forEach(([key, value]) => {
-              if (value === true || value.includes(node.id)) {
+              if (value.includes(node.id)) {
                 fieldValue[key] = true;
               }
             });

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue

@@ -6,7 +6,6 @@
     :title="$tr('editLearningActivitiesTitle')"
     :nodeIds="nodeIds"
     :validators="learningActivityValidators"
-    :inputComponent="LearningActivityOptionsComponent"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
     @close="() => $emit('close')"
   >

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js

@@ -62,7 +62,6 @@ const options = Object.entries(Categories).map(([key, value]) => {
 const makeWrapper = ({
   nodeIds,
   field = 'categories',
-  inputComponent = CategoryOptions,
   ...restOptions
 }) => {
   return mount(EditBooleanMapModal, {
@@ -72,7 +71,6 @@ const makeWrapper = ({
       options,
       title: 'Edit Categories',
       field,
-      inputComponent,
       autocompleteLabel: 'Select option',
       confirmationMessage: 'edited',
       ...restOptions,

contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue

@@ -65,20 +65,23 @@
                 ref="learning_activities"
                 v-model="contentLearningActivities"
                 :disabled="anyIsTopic"
+                :nodeIds="nodeIds"
                 @focus="trackClick('Learning activities')"
               />
               <!-- Level -->
               <LevelsOptions
                 v-if="oneSelected"
                 ref="contentLevel"
                 v-model="contentLevel"
+                :nodeIds="nodeIds"
                 @focus="trackClick('Levels dropdown')"
               />
               <!-- What you will need -->
               <ResourcesNeededOptions
                 v-if="oneSelected"
                 ref="resourcesNeeded"
                 v-model="resourcesNeeded"
+                :nodeIds="nodeIds"
                 @focus="trackClick('What you will need')"
               />
               <!-- Tags -->
@@ -111,7 +114,12 @@
             </VFlex>
           </VLayout>
           <!-- Category -->
-          <CategoryOptions v-if="oneSelected" ref="categories" v-model="categories" />
+          <CategoryOptions
+            v-if="oneSelected"
+            ref="categories"
+            v-model="categories"
+            :nodeIds="nodeIds"
+          />
         </VFlex>
       </VLayout>
 
@@ -434,14 +442,10 @@
   }
 
   /**
-   * This function is used to generate getter/setters for new metadata fields that are boolean maps:
-   * - `grade_levels` (sometimes referred to as `content_levels`)
-   * - `learner_needs` (resources needed)
+   * This function is used to generate getter/setters having its value as
+   * an array for metadata fields that are boolean maps:
    * - `accessibility_labels` (accessibility options)
-   * - `learning_activities` (learning activities)
-   * - `categories` (categories)
    */
-
   function generateNestedNodesGetterSetter(key) {
     return {
       get() {
@@ -475,6 +479,42 @@
     };
   }
 
+  /**
+   * This function is used to generate getter/setters having its value as
+   * an object for metadata fields that are boolean maps:
+   * - `grade_levels` (sometimes referred to as `content_levels`)
+   * - `learner_needs` (resources needed)
+   * - `learning_activities` (learning activities)
+   * - `categories` (categories)
+   */
+  function generateNestedNodesGetterSetterObject(key) {
+    return {
+      get() {
+        const value = {};
+        for (const node of this.nodes) {
+          const diffTrackerNode = this.diffTracker[node.id] || {};
+          const currentValue = diffTrackerNode[key] || node[key] || {};
+          Object.entries(currentValue).forEach(([option, optionValue]) => {
+            if (optionValue) {
+              value[option] = value[option] || [];
+              value[option].push(node.id);
+            }
+          });
+        }
+        return value;
+      },
+      set(value) {
+        const newMap = {};
+        for (const option in value) {
+          if (value[option].length === this.nodes.length) {
+            newMap[option] = true;
+          }
+        }
+        this.update({ [key]: newMap });
+      },
+    };
+  }
+
   export default {
     name: 'DetailsTabView',
     components: {
@@ -584,24 +624,31 @@
       role: generateGetterSetter('role_visibility'),
       language: generateGetterSetter('language'),
       accessibility: generateNestedNodesGetterSetter('accessibility_labels'),
-      contentLevel: generateNestedNodesGetterSetter('grade_levels'),
-      resourcesNeeded: generateNestedNodesGetterSetter('learner_needs'),
+      contentLevel: generateNestedNodesGetterSetterObject('grade_levels'),
+      resourcesNeeded: generateNestedNodesGetterSetterObject('learner_needs'),
       forBeginners: {
         get() {
-          return this.resourcesNeeded.includes(ResourcesNeededTypes.FOR_BEGINNERS);
+          const value = this.resourcesNeeded[ResourcesNeededTypes.FOR_BEGINNERS];
+          return (
+            value &&
+            value.length === this.nodes.length
+          );
         },
         set(value) {
           if (value) {
-            this.resourcesNeeded = [...this.resourcesNeeded, ResourcesNeededTypes.FOR_BEGINNERS];
+            this.resourcesNeeded = {
+              ...this.resourcesNeeded,
+              [ResourcesNeededTypes.FOR_BEGINNERS]: this.nodeIds,
+            };
           } else {
-            this.resourcesNeeded = this.resourcesNeeded.filter(
-              r => r !== ResourcesNeededTypes.FOR_BEGINNERS
-            );
+            const newMap = { ...this.resourcesNeeded };
+            delete newMap[ResourcesNeededTypes.FOR_BEGINNERS];
+            this.resourcesNeeded = newMap;
           }
         },
       },
-      contentLearningActivities: generateNestedNodesGetterSetter('learning_activities'),
-      categories: generateNestedNodesGetterSetter('categories'),
+      contentLearningActivities: generateNestedNodesGetterSetterObject('learning_activities'),
+      categories: generateNestedNodesGetterSetterObject('categories'),
       license() {
         return this.getValueFromNodes('license');
       },

contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue

@@ -110,18 +110,15 @@
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
-       * It can receive a value as an array of strings of the selected categories, or
-       * an object with the following structure:
+       * This prop receives an object with the following structure:
        * {
-       *  [categoryId]: true | [nodeId1, nodeId2, ...]
+       *  [categoryId]: [nodeId1, nodeId2, ...]
        * }
-       * If the value is true, it means that the option is selected for all nodes
-       * If the value is an array of nodeIds, it means that the option is selected
-       * just for those nodes
+       * Where nodeId is the id of the node that has the category selected
        */
       value: {
-        type: [Array, Object],
-        default: () => [],
+        type: Object,
+        required: true,
       },
       /**
        * An array of nodeIds that we are editing. If none, we will asume that we
@@ -160,7 +157,7 @@
       },
       autocompleteOptions() {
         const options = [...this.categoriesList];
-        if (!Array.isArray(this.selected)) {
+        if (this.expanded) {
           // Just boolean maps can have indeterminate values
           options.push({
             value: MIXED,
@@ -171,13 +168,14 @@
         return options;
       },
       autocompleteValues() {
-        if (Array.isArray(this.selected)) {
-          return this.selected;
-        }
         const selectedValues = Object.entries(this.selected)
-          .filter(entry => entry[1] === true) // no mixed values for boolean maps
+          .filter(entry => entry[1].length === this.nodeIds.length)
           .map(([key]) => key);
-        if (Object.values(this.selected).some(value => value !== true)) {
+        if (
+          this.expanded &&
+          Object.values(this.selected)
+            .some(value => value.length < this.nodeIds.length)
+        ) {
           selectedValues.push(MIXED);
         }
         return selectedValues;
@@ -201,17 +199,12 @@
         return this.nested ? { [rule]: `${item.level * 24}px` } : {};
       },
       add(value) {
-        if (Array.isArray(this.selected)) {
-          this.selected = [...this.selected, value];
-          return;
-        }
-        this.selected = { ...this.selected, [value]: true };
+        this.selected = {
+          ...this.selected,
+          [value]: this.nodeIds,
+        };
       },
       remove(value) {
-        if (Array.isArray(this.selected)) {
-          this.selected = this.selected.filter(i => !i.startsWith(value));
-          return;
-        }
         const newSelected = { ...this.selected };
         Object.keys(this.selected)
           .filter(selectedValue => selectedValue.startsWith(value))
@@ -221,10 +214,6 @@
         this.selected = newSelected;
       },
       removeAll() {
-        if (Array.isArray(this.selected)) {
-          this.selected = [];
-          return;
-        }
         this.selected = {};
       },
       tooltipText(optionId) {
@@ -253,15 +242,12 @@
         return val.split('.').length - 1;
       },
       isSelected(value) {
-        if (Array.isArray(this.selected)) {
-          return this.selected.some(v => v.startsWith(value));
-        }
-        // If not, this.selected is a boolean map
-
         // If the value is truthy (true or an array of nodeIds) then
         // it is selected just if it is true (not an array)
-        if (this.selected[value]) {
-          return this.selected[value] === true;
+        if (
+          this.selected[value] &&
+          this.selected[value].length === this.nodeIds.length) {
+          return true;
         }
 
         return this.isCheckboxSelectedByChildren(value);
@@ -274,9 +260,6 @@
        *   child options, together they constitute the same array of selected contentNodes.
        */
       isCheckboxSelectedByChildren(optionId) {
-        if (!this.nodeIds || !this.nodeIds.length) {
-          return false;
-        }
         const childrenOptions = Object.keys(this.selected)
           .filter(selectedValue => selectedValue.startsWith(optionId))
           .map(selectedValue => this.selected[selectedValue]);
@@ -285,11 +268,11 @@
           return false; // No childen options
         } else if (childrenOptions.length === 1) {
           // just one child option, the value is deterrmined by if it is selected
-          return childrenOptions[0] === true;
+          return childrenOptions[0].length === this.nodeIds.length;
         }
 
         // Here multiple children are selected or indeterminate
-        if (childrenOptions.some(value => value === true)) {
+        if (childrenOptions.some(value => value.length === this.nodeIds.length)) {
           // if some child value is selected for all nodes, then the parent option is selected
           return true;
         }
@@ -303,12 +286,8 @@
         return nodeIds.size === this.nodeIds.length;
       },
       isCheckboxIndeterminate(optionId) {
-        // Just boolean maps can have indeterminate values
-        if (Array.isArray(this.selected)) {
-          return false;
-        }
-        if (this.selected[optionId]) {
-          return this.selected[optionId] !== true;
+        if (this.selected[optionId] && this.selected[optionId].length < this.nodeIds.length) {
+          return true;
         }
         return (
           Object.keys(this.selected).some(selectedValue => selectedValue.startsWith(optionId)) &&