- Enhance IMS Content Package Import UI

Author: Manav Aggarwal

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

@@ -7,11 +7,11 @@
       class="mb-2 ml-1 mt-0 px-3 py-2"
       :label="$tr('selectAllLabel')"
     />
-    <EditListItem
-      v-for="nodeId in nodeIds"
-      :key="nodeId"
+    <EditListItems
       v-model="selected"
-      :nodeId="nodeId"
+      :nodeId="parentId"
+      :nodes="nodes"
+      :nodeIds="nodeIds"
       @input="trackSelect"
       @removed="handleRemoved"
     />
@@ -22,13 +22,14 @@
 
 <script>
 
-  import EditListItem from './EditListItem';
+  import { mapGetters } from 'vuex';
+  import EditListItems from './EditListItems';
   import Checkbox from 'shared/views/form/Checkbox';
 
   export default {
     name: 'EditList',
     components: {
-      EditListItem,
+      EditListItems,
       Checkbox,
     },
     props: {
@@ -40,14 +41,25 @@
         type: Array,
         default: () => [],
       },
+      parentId: {
+        type: String,
+        require: true,
+        default: null,
+      },
     },
     computed: {
+      ...mapGetters('contentNode', ['getContentNode']),
       selected: {
         get() {
           return this.value;
         },
         set(items) {
-          this.$emit('input', items);
+          if (this.selected.includes(items[0])) {
+            this.selected = [];
+          } else {
+            this.getChildren(items[0]).forEach(item => items.push(item));
+            this.$emit('input', items);
+          }
         },
       },
       selectAll: {
@@ -63,11 +75,34 @@
           }
         },
       },
+      nodes() {
+        const nodes = {};
+        this.nodeIds.forEach(nodeId => {
+          const parentId = this.getContentNode(nodeId).parent;
+          nodes[`${nodeId}`] = this.nodeIds.includes(parentId) ? parentId : null;
+        });
+        return nodes;
+      },
     },
     methods: {
+      ...mapGetters('contentNode', ['deleteContentNode']),
+      getChildren(parent) {
+        const childrens = [];
+        Object.keys(this.nodes).forEach(nodeId => {
+          if (this.nodes[nodeId] === parent) {
+            childrens.push(...this.getChildren(nodeId));
+            childrens.push(nodeId);
+          }
+        });
+        return childrens;
+      },
       handleRemoved(nodeId) {
-        const nodeIds = this.$route.params.detailNodeIds.split(',').filter(id => id !== nodeId);
-
+        const removedNodes = this.getChildren(nodeId);
+        removedNodes.push(nodeId);
+        removedNodes.forEach(nodeId => this.deleteContentNode(nodeId));
+        const nodeIds = this.$route.params.detailNodeIds
+          .split(',')
+          .filter(id => !removedNodes.includes(id));
         this.$router.push({
           name: this.$route.name,
           params: {

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

@@ -71,7 +71,7 @@
 
 <script>
 
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapGetters } from 'vuex';
   import { RouteNames } from '../../constants';
   import { fileSizeMixin, fileStatusMixin } from 'shared/mixins';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
@@ -166,11 +166,8 @@
       },
     },
     methods: {
-      ...mapActions('contentNode', ['deleteContentNode']),
       removeNode() {
-        this.deleteContentNode(this.nodeId).then(() => {
-          this.$emit('removed', this.nodeId);
-        });
+        this.$emit('removed', this.nodeId);
       },
     },
     $trs: {

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

@@ -0,0 +1,92 @@
+<template>
+
+  <VList two-line class="pl-3">
+    <EditListItem
+      :key="nodeId"
+      v-model="selected"
+      :nodeId="nodeId"
+      @input="trackSelect"
+      @removed="handleRemoved"
+    />
+    <div v-if="getChildren !== undefined">
+      <EditListItems
+        v-for="childId in getChildren"
+        :key="childId"
+        v-model="selected"
+        :nodeId="childId"
+        :nodes="nodes"
+        :nodeIds="nodeIds"
+        @input="trackSelect"
+        @removed="handleRemoved"
+      />
+    </div>
+  </VList>
+
+</template>
+
+<script>
+
+  import EditListItem from './EditListItem';
+
+  export default {
+    name: 'EditListItems',
+    components: {
+      EditListItem,
+    },
+    props: {
+      value: {
+        type: Array,
+        default: () => [],
+      },
+      nodeIds: {
+        type: Array,
+        default: () => [],
+      },
+      nodeId: {
+        type: String,
+        require: true,
+        default: null,
+      },
+      nodes: {
+        type: Object,
+        default: () => {},
+      },
+    },
+    computed: {
+      selected: {
+        get() {
+          return this.value;
+        },
+        set(items) {
+          this.$emit('input', items);
+        },
+      },
+      getChildren() {
+        const childrens = [];
+        Object.keys(this.nodes).forEach(nodeId => {
+          if (this.nodes[nodeId] === this.nodeId) {
+            childrens.push(nodeId);
+          }
+        });
+        return childrens;
+      },
+    },
+    methods: {
+      handleRemoved(nodeId) {
+        this.$emit('removed', nodeId);
+      },
+      trackSelect(value) {
+        this.$emit('input', value);
+      },
+    },
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+  .v-divider {
+    margin-top: 0;
+  }
+
+</style>