Fix two parallel content nodes editing logic

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

@@ -1,68 +1,48 @@
 <template>
 
   <EditBooleanMapModal
-    showHierarchy
-    showAutocomplete
     field="categories"
     isDescendantsUpdatable
     :title="$tr('editCategories')"
     :nodeIds="nodeIds"
-    :options="categoriesOptions"
-    :autocompleteLabel="$tr('selectCategory')"
-    :emptyText="$tr('emptyCategoriesSearch')"
     :confirmationMessage="$tr('editedCategories', { count: nodeIds.length })"
-    :optionsListStyle="{
-      height: '250px',
-      overflowY: 'auto',
-    }"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <CategoryOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal.vue';
-  import { metadataTranslationMixin } from 'shared/mixins';
-  import { getSortedCategories } from 'shared/utils/helpers';
+  import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
   export default {
     name: 'EditCategoriesModal',
     components: {
+      CategoryOptions,
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    data() {
-      return {
-        categoriesOptions: [],
-      };
-    },
-    created() {
-      const categories = getSortedCategories();
-      this.categoriesOptions = Object.entries(categories).map(([id, category]) => ({
-        value: id,
-        label: this.translateMetadataString(camelCase(category)),
-      }));
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editCategories: 'Edit Categories',
       editedCategories:
         'Edited categories for {count, number, integer} {count, plural, one {resource} other {resources}}',
-      selectCategory: 'Select / Type Category',
-      emptyCategoriesSearch: 'No categories matches the search',
     },
   };
 

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

@@ -5,51 +5,47 @@
     isDescendantsUpdatable
     :title="$tr('editLearningActivitiesTitle')"
     :nodeIds="nodeIds"
-    :options="learningActivitiesOptions"
     :validators="learningActivityValidators"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <LearningActivityOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { LearningActivities } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators } from 'shared/utils/validation';
+  import LearningActivityOptions from 'shared/views/contentNodeFields/LearningActivityOptions';
 
   export default {
     name: 'EditLearningActivitiesModal',
     components: {
       EditBooleanMapModal,
+      LearningActivityOptions,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
     computed: {
-      learningActivitiesOptions() {
-        return Object.entries(LearningActivities).map(([key, value]) => ({
-          label: this.translateMetadataString(camelCase(key)),
-          value,
-        }));
-      },
       learningActivityValidators() {
         return getLearningActivityValidators();
       },
     },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editLearningActivitiesTitle: 'Edit Learning Activities',
       editedLearningActivities:

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

@@ -5,51 +5,40 @@
     isDescendantsUpdatable
     :title="$tr('editLevelsTitle')"
     :nodeIds="nodeIds"
-    :options="levelsOptions"
     :confirmationMessage="$tr('editedLevels', { count: nodeIds.length })"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <LevelsOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { ContentLevels } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
+  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
 
   export default {
     name: 'EditLevelsModal',
     components: {
+      LevelsOptions,
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    computed: {
-      levelsOptions() {
-        const replaceTranslationMap = {
-          PROFESSIONAL: 'specializedProfessionalTraining',
-          WORK_SKILLS: 'allLevelsWorkSkills',
-          BASIC_SKILLS: 'allLevelsBasicSkills',
-        };
-        return Object.entries(ContentLevels).map(([key, value]) => ({
-          label: this.translateMetadataString(replaceTranslationMap[key] || camelCase(key)),
-          value,
-        }));
-      },
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editLevelsTitle: 'What Levels',
       editedLevels:

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

@@ -5,45 +5,40 @@
     isDescendantsUpdatable
     :title="$tr('editResourcesNeededTitle')"
     :nodeIds="nodeIds"
-    :options="resourcesOptions"
     :confirmationMessage="$tr('editedResourcesNeeded', { count: nodeIds.length })"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <ResourcesNeededOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { ResourcesNeededTypes, ResourcesNeededOptions } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
+  import ResourcesNeededOptions from 'shared/views/contentNodeFields/ResourcesNeededOptions';
 
   export default {
     name: 'EditResourcesNeededModal',
     components: {
       EditBooleanMapModal,
+      ResourcesNeededOptions,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    computed: {
-      resourcesOptions() {
-        return ResourcesNeededOptions.map(key => ({
-          label: this.translateMetadataString(key),
-          value: ResourcesNeededTypes[key],
-        }));
-      },
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editResourcesNeededTitle: 'What will you need?',
       editedResourcesNeeded: