Move moveModal and clean COntentNodeOptions

AlexVelezLl · AlexVelezLl · commit 56d9c29d0fce · 2024-03-25T09:23:51.000-05:00
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -91,11 +91,8 @@
         </template>
 
         <template #context-menu="{ showContextMenu, positionX, positionY }">
-          <ContentNodeContextMenu
-            v-if="false"
-            :show="showContextMenu"
-            :positionX="positionX"
-            :positionY="positionY"
+          <ContentNodeOptions
+            isContextMenu
             :nodeId="nodeId"
           />
         </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeOptions.vue
@@ -1,63 +1,22 @@
 <template>
 
   <KDropdownMenu
+    :isContextMenu="isContextMenu"
     :options="menuOptions"
-    @select="onSelect"
+    @select="handleSelect"
   />
-  <!-- <div
-    style="max-height: 80vh"
-  >
-    <VList ref="optionsList">
-      <template
-        v-for="(group, groupIndex) in groupedOptions"
-      >
-        <VListTile
-          v-for="(option, index) in group"
-          :key="groupIndex + '-' + index"
-          class="options-list-item"
-          ripple
-          :to="option.to"
-          tabindex="0"
-          @click="option.onClick($event)"
-          @keydown.enter="option.onClick($event)"
-          @keydown.tab="checkTabBoundaries($event)"
-        >
-          <VListTileTitle>
-            {{ option.label }}
-          </VListTileTitle>
-        </VListTile>
-        <VDivider
-          v-if="groupIndex < groupedOptions.length - 1"
-          :key="groupIndex + '-divider'"
-          class="divider"
-        />
-      </template>
-    </VList>
-
-    <MoveModal
-      v-if="moveModalOpen"
-      ref="moveModal"
-      v-model="moveModalOpen"
-      :moveNodeIds="[nodeId]"
-      @target="moveNode"
-    />
-  </div> -->
 
 </template>
 
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
   import { RouteNames, TabNames, QuickEditModals } from '../constants';
-  import MoveModal from './move/MoveModal';
   import { withChangeTracker } from 'shared/data/changes';
   import { RELATIVE_TREE_POSITIONS } from 'shared/data/constants';
 
   export default {
     name: 'ContentNodeOptions',
-    components: {
-      MoveModal,
-    },
     props: {
       nodeId: {
         type: String,
@@ -71,11 +30,10 @@
         type: Boolean,
         default: false,
       },
-    },
-    data() {
-      return {
-        moveModalOpen: false,
-      };
+      isContextMenu: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       ...mapGetters('currentChannel', ['canEdit', 'trashId']),
@@ -117,7 +75,8 @@
               label: this.$tr('move'),
               onClick: $event => {
                 $event.stopPropagation();
-                this.moveModalOpen = true;
+                this.trackAction('Move');
+                this.setMoveNodesIds([this.nodeId]);
               },
               condition: this.canEdit,
             },
@@ -228,22 +187,6 @@
         };
       },
     },
-    watch: {
-      moveModalOpen(open) {
-        if (open) {
-          this.trackAction('Move');
-        }
-      },
-    },
-    beforeMount() {
-      this.lastFocus = document.activeElement;
-    },
-    mounted() {
-      this.focusFirstOption();
-    },
-    destroyed() {
-      this.lastFocus && this.lastFocus.focus();
-    },
     methods: {
       ...mapActions(['showSnackbar', 'clearSnackbar']),
       ...mapActions('contentNode', [
@@ -252,33 +195,12 @@
         'copyContentNode',
         'waitForCopyingStatus',
         'setQuickEditModal',
+        'setMoveNodesIds',
       ]),
       ...mapActions('clipboard', ['copy']),
-      async focusFirstOption() {
-        // const { optionsList } = this.$refs;
-        // const firstOption = optionsList.$el.querySelector('a');
-        // let tries = 0;
-        // while (document.activeElement !== firstOption && tries++ < 20) {
-        //   await new Promise(resolve => setTimeout(resolve, 0));
-        //   firstOption.focus();
-        // }
-      },
-      checkTabBoundaries($event) {
-        const optionsList = this.$refs.optionsList;
-        const options = optionsList.$el.querySelectorAll('a');
-        const index = Array.from(options).indexOf($event.target);
-        if (
-          (index === 0 && $event.shiftKey) ||
-          (index === options.length - 1 && !$event.shiftKey)
-        ) {
-          // destroy component
-          $event.preventDefault();
-          this.$destroy();
-        }
-      },
-      onSelect(option) {
+      handleSelect(option, $event) {
         if (option.onClick) {
-          option.onClick();
+          option.onClick($event);
         }
         if (option.to) {
           this.$router.push(option.to);
@@ -301,11 +223,6 @@
           });
         });
       },
-      moveNode(target) {
-        return this.moveContentNodes({ id__in: [this.nodeId], parent: target }).then(
-          this.$refs.moveModal.moveComplete
-        );
-      },
       getRemoveNodeRedirect() {
         // Returns a callback to do appropriate post-removal navigation
         const { detailNodeId, nodeId } = this.$route.params;
@@ -329,7 +246,8 @@
         return () => {};
       },
       quickEditModalFactory(modal) {
-        return () => {
+        return $event => {
+          $event.preventDefault();
           this.setQuickEditModal({
             modal,
             nodeIds: [this.nodeId],
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -228,6 +228,12 @@
     <AboutLicensesModal
       v-if="isAboutLicensesModalOpen"
     />
+    <MoveModal
+      ref="moveModal"
+      v-model="moveModalDialog"
+      :moveNodeIds="moveNodeIds"
+      @target="moveNodes"
+    />
     <MessageDialog
       v-model="showDeleteModal"
       :header="$tr('deleteTitle')"
@@ -317,6 +323,7 @@
   import ProgressModal from '../progress/ProgressModal';
   import PublishModal from '../../components/publish/PublishModal';
   import QuickEditModal from '../../components/QuickEditModal';
+  import MoveModal from '../../components/move/MoveModal';
   import SavingIndicator from '../../components/edit/SavingIndicator';
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
@@ -348,6 +355,7 @@
       DraggablePlaceholder,
       MessageDialog,
       SavingIndicator,
+      MoveModal,
       QuickEditModal,
       AboutLicensesModal,
     },
@@ -374,7 +382,10 @@
         offline: state => !state.connection.online,
       }),
       ...mapGetters(['isAboutLicensesModalOpen']),
-      ...mapGetters('contentNode', ['getContentNode']),
+      ...mapGetters('contentNode', [
+        'getContentNode',
+        'getMoveNodesIds',
+      ]),
       ...mapGetters('currentChannel', ['currentChannel', 'canEdit', 'canManage', 'rootId']),
       rootNode() {
         return this.getContentNode(this.rootId);
@@ -473,9 +484,28 @@
       dropEffect() {
         return DropEffect.COPY;
       },
+      moveNodeIds() {
+        return this.getMoveNodesIds();
+      },
+      moveModalDialog: {
+        get() {
+          return (
+            this.moveNodeIds && this.moveNodeIds.length > 0
+          )
+        },
+        set(value) {
+          if (!value) {
+            this.setMoveNodesIds([]);
+          }
+        },
+      },
     },
     methods: {
       ...mapActions('channel', ['deleteChannel']),
+      ...mapActions('contentNode', [
+        'setMoveNodesIds',
+        'moveContentNodes',
+      ]),
       handleDelete() {
         this.deleteChannel(this.currentChannel.id).then(() => {
           localStorage.snackbar = this.$tr('channelDeletedSnackbar');
@@ -497,6 +527,11 @@
         this.showPublishModal = true;
         this.trackClickEvent('Publish');
       },
+      moveNodes(target) {
+        return this.moveContentNodes({ id__in: [this.nodeId], parent: target }).then(
+          this.$refs.moveModal.moveComplete
+        );
+      },
       trackClickEvent(eventLabel) {
         this.$analytics.trackClick('channel_editor_toolbar', eventLabel);
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
@@ -546,6 +546,10 @@ export async function checkSavingProgress(
   return Boolean(query);
 }
 
+export function setMoveNodesIds(context, ids) {
+  context.commit('SET_MOVE_NODES', ids);
+}
+
 export function setQuickEditModal(context, open) {
   context.commit('SET_QUICK_EDIT_MODAL', open);
 }
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/getters.js
@@ -357,3 +357,9 @@ export function getQuickEditModalOpen(state) {
     return state.quickEditModalOpen;
   };
 }
+
+export function getMoveNodesIds(state) {
+  return function() {
+    return state.moveNodes;
+  }
+}
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "3.1.0",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
@@ -9123,10 +9123,9 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-kolibri-design-system@3.1.0:
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.0.tgz#b8cfeeba3c41b0d2c43b4098732367e6732763a8"
-  integrity sha512-Xynv24J0uKJFQvhTgbOOWZdRRUMO3NSsobCCrD6R6lvzUqCEqcrJTLgK0ls6LX0MZu2dzxMGA0riLZx4qwikJw==
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system.git#8b8808f35a330e0e25103720ea63f42154f6e678"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

Original file line number	Diff line number	Diff line change
`@@ -546,6 +546,10 @@ export async function checkSavingProgress(`
`546`	`546`	`return Boolean(query);`
`547`	`547`	`}`
`548`	`548`
	`549`	`+export function setMoveNodesIds(context, ids) {`
	`550`	`+ context.commit('SET_MOVE_NODES', ids);`
	`551`	`+}`
	`552`	`+`
`549`	`553`	`export function setQuickEditModal(context, open) {`
`550`	`554`	`context.commit('SET_QUICK_EDIT_MODAL', open);`
`551`	`555`	`}`