Remove the tree viewset

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/Channel.vue

@@ -38,18 +38,18 @@
     </template>
 
     <transition-group>
-      <template v-for="child in treeChildren">
+      <template v-for="child in children">
         <TopicNode
-          v-if="hasChildren(child.id)"
+          v-if="hasClipboardChildren(child.id)"
           :key="child.id"
           :nodeId="child.id"
-          :sourceId="child.source_id"
+          :level="level + 1"
         />
         <ContentNode
           v-else
           :key="child.id"
           :nodeId="child.id"
-          :sourceId="child.source_id"
+          :level="level + 1"
         />
       </template>
     </transition-group>

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNode.vue

@@ -3,6 +3,7 @@
   <VHover>
     <ContextMenu slot-scope="{ hover }">
       <VListTile
+        v-if="contentNode"
         class="content-item py-2"
         :class="{hover, selected}"
         :style="{'padding-left': indentPadding}"
@@ -48,12 +49,12 @@
               </VBtn>
             </template>
 
-            <ContentNodeOptions :nodeId="nodeId" :sourceId="sourceId" />
+            <ContentNodeOptions :nodeId="nodeId" :ancestorId="ancestorId" />
           </VMenu>
         </VListTileAction>
       </VListTile>
-      <template #menu>
-        <ContentNodeOptions :nodeId="nodeId" :sourceId="sourceId" />
+      <template v-if="contentNode" #menu>
+        <ContentNodeOptions :nodeId="nodeId" :ancestorId="ancestorId" />
       </template>
     </ContextMenu>
   </VHover>
@@ -76,16 +77,18 @@
       ContextMenu,
     },
     mixins: [clipboardMixin],
-    props: {
-      sourceId: {
-        type: String,
-        required: true,
-      },
-    },
     computed: {
       thumbnailAttrs() {
-        const { title, kind, thumbnail_src: src, thumbnail_encoding: encoding } = this.contentNode;
-        return { title, kind, src, encoding };
+        if (this.contentNode) {
+          const {
+            title,
+            kind,
+            thumbnail_src: src,
+            thumbnail_encoding: encoding,
+          } = this.contentNode;
+          return { title, kind, src, encoding };
+        }
+        return {};
       },
     },
     $trs: {},

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/ContentNodeOptions.vue

@@ -7,7 +7,7 @@
     <VListTile @click="duplicateNode()">
       <VListTileTitle>{{ $tr('makeACopy') }}</VListTileTitle>
     </VListTile>
-    <VListTile v-if="canEdit" @click.stop="setMoveNodes([sourceId])">
+    <VListTile v-if="canEdit" @click.stop="moveNode">
       <VListTileTitle>{{ $tr('moveTo') }}</VListTileTitle>
     </VListTile>
     <VListTile @click="removeNode()">
@@ -22,7 +22,6 @@
   import { mapActions, mapGetters, mapMutations } from 'vuex';
   import { RouterNames } from '../../constants';
   import { withChangeTracker } from 'shared/data/changes';
-  import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
   export default {
     name: 'ContentNodeOptions',
@@ -31,44 +30,41 @@
         type: String,
         required: true,
       },
-      sourceId: {
+      ancestorId: {
         type: String,
-        required: true,
+        default: null,
       },
     },
     computed: {
       ...mapGetters('channel', ['getChannel']),
-      ...mapGetters('contentNode', ['getContentNode', 'getTreeNode']),
-      treeNode() {
-        return this.getTreeNode(this.sourceId);
-      },
+      ...mapGetters('clipboard', ['getClipboardNodeForRender', 'getCopyTrees']),
       node() {
-        return this.getContentNode(this.sourceId);
+        return this.getClipboardNodeForRender(this.nodeId);
       },
       channelId() {
-        return this.treeNode.channel_id;
+        return this.node.channel_id;
       },
       viewLink() {
         return {
           name: RouterNames.TREE_VIEW,
           params: {
-            nodeId: this.treeNode.parent,
-            detailNodeId: this.sourceId,
+            nodeId: this.node.parent,
+            detailNodeId: this.node.id,
           },
         };
       },
       canEdit() {
         return this.getChannel(this.channelId) && this.getChannel(this.channelId).edit;
       },
-      isTopic() {
-        return this.node.kind === ContentKindsNames.TOPIC;
-      },
     },
     methods: {
       ...mapActions(['showSnackbar']),
-      ...mapActions('clipboard', ['copy']),
-      ...mapActions('contentNode', ['deleteContentNodes']),
-      ...mapMutations('contentNode', { setMoveNodes: 'SET_MOVE_NODES' }),
+      ...mapActions('clipboard', ['copy', 'deleteClipboardNode']),
+      ...mapMutations('clipboard', { setCopyNodes: 'SET_CLIPBOARD_MOVE_NODES' }),
+      moveNode() {
+        const copyTrees = this.getCopyTrees(this.nodeId, null, this.ancestorId, true);
+        this.setCopyNodes(copyTrees);
+      },
       removeNode: withChangeTracker(function(changeTracker) {
         this.showSnackbar({
           duration: null,
@@ -77,7 +73,10 @@
           actionCallback: () => changeTracker.revert(),
         });
 
-        return this.deleteContentNodes([this.nodeId]).then(() => {
+        return this.deleteClipboardNode({
+          clipboardNodeId: this.nodeId,
+          ancestorId: this.ancestorId,
+        }).then(() => {
           return this.showSnackbar({
             text: this.$tr('removedFromClipboard'),
             actionText: this.$tr('undo'),
@@ -94,8 +93,8 @@
         });
 
         return this.copy({
-          id: this.sourceId,
-          deep: this.isTopic,
+          node_id: this.node.node_id,
+          channel_id: this.node.channel_id,
         }).then(() => {
           return this.showSnackbar({
             text: this.$tr('copiedItemsToClipboard'),

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue

@@ -10,12 +10,12 @@
     <template v-slot:activator>
       <ContentNode
         :nodeId="nodeId"
-        :sourceId="sourceId"
+        :level="level"
       >
         <VListTileContent class="description-col py-2 pl-2 shrink">
           <VBadge color="primary">
             <template #badge>
-              <span class="caption font-weight-bold">{{ descendantCount }}</span>
+              <span class="caption font-weight-bold">{{ contentNode.resource_count }}</span>
             </template>
             <VListTileTitle class="text-truncate notranslate">
               {{ contentNode.title }}
@@ -34,18 +34,20 @@
     </template>
 
     <transition-group>
-      <template v-for="child in treeChildren">
+      <template v-for="child in children">
         <TopicNode
-          v-if="hasChildren(child.id)"
+          v-if="hasClipboardChildren(child.id)"
           :key="child.id"
           :nodeId="child.id"
-          :sourceId="child.source_id"
+          :level="level + 1"
+          :ancestorId="childAncestorId"
         />
         <ContentNode
           v-else
           :key="child.id"
           :nodeId="child.id"
-          :sourceId="child.source_id"
+          :level="level + 1"
+          :ancestorId="childAncestorId"
         />
       </template>
     </transition-group>
@@ -65,16 +67,28 @@
     },
     mixins: [clipboardMixin, parentMixin],
     props: {
-      sourceId: {
+      ancestorId: {
         type: String,
-        required: true,
+        default: null,
       },
     },
     data() {
       return {
         open: false,
       };
     },
+    computed: {
+      childAncestorId() {
+        return this.isClipboardNode(this.nodeId) ? this.nodeId : this.ancestorId;
+      },
+    },
+    mounted() {
+      // Prefetch content node data. Since we're using `lazy` with the
+      // nested VListGroup, this prefetches one level at a time!
+      if (this.contentNode.total_count > 0) {
+        this.loadClipboardNodes({ parent: this.nodeId, ancestorId: this.childAncestorId });
+      }
+    },
   };
 
 </script>

contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue

@@ -139,7 +139,7 @@
         'getCopyTrees',
       ]),
       selectedNodeIds() {
-        return this.selectedNodes.map(n => n.id);
+        return this.selectedNodes.map(([sid]) => sid);
       },
       canEdit() {
         return !this.selectedChannels.find(channel => !channel.edit);
@@ -166,9 +166,8 @@
     },
     methods: {
       ...mapActions(['showSnackbar']),
-      ...mapMutations('contentNode', { setMoveNodes: 'SET_MOVE_NODES' }),
-      ...mapActions('clipboard', ['loadChannels', 'copy']),
-      ...mapActions('contentNode', ['deleteContentNodes']),
+      ...mapMutations('clipboard', { setCopyNodes: 'SET_CLIPBOARD_MOVE_NODES' }),
+      ...mapActions('clipboard', ['loadChannels', 'copy', 'deleteClipboardNodes']),
       refresh() {
         if (this.refreshing) {
           return;
@@ -181,14 +180,15 @@
         this.elevated = this.$refs.nodeList.scrollTop > 0;
       },
       moveNodes() {
-        if (!this.selectedNodeIds.length) {
+        const trees = this.getCopyTrees(this.clipboardRootId);
+        if (!trees.length) {
           return;
         }
 
-        this.setMoveNodes(this.selectedNodes.map(n => n.source_id));
+        this.setCopyNodes(trees);
       },
       duplicateNodes: withChangeTracker(function(changeTracker) {
-        const trees = this.getCopyTrees(this.clipboardRootId);
+        const trees = this.getCopyTrees(this.clipboardRootId, this.clipboardRootId);
 
         if (!trees.length) {
           return Promise.resolve([]);
@@ -213,9 +213,9 @@
         });
       }),
       removeNodes: withChangeTracker(function(changeTracker) {
-        const id__in = this.selectedNodeIds;
+        const selectionIds = this.selectedNodeIds;
 
-        if (!id__in.length) {
+        if (!selectionIds.length) {
           return Promise.resolve([]);
         }
 
@@ -226,7 +226,7 @@
           actionCallback: () => changeTracker.revert(),
         });
 
-        return this.deleteContentNodes(id__in).then(() => {
+        return this.deleteClipboardNodes(selectionIds).then(() => {
           return this.showSnackbar({
             text: this.$tr('removedFromClipboard'),
             actionText: this.$tr('undo'),