feat(Node Authoring): Disable component buttons when none selected (#…

…1198)
WISE-Community · Apr 23, 2023 · f9f8ed1 · f9f8ed1
1 parent 7de414f
commit f9f8ed1
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 86 deletions.
diff --git a/src/assets/wise5/authoringTool/i18n/i18n_en.json b/src/assets/wise5/authoringTool/i18n/i18n_en.json
@@ -118,6 +118,7 @@
   "constraints": "Constraints",
   "contentPreview": "Content Preview",
   "copy": "Copy",
+  "copyComponent": "Copy Component",
   "copyNodeIdAndComponentIdToMilestone": "Copy Node ID and Component ID to Milestone",
   "copyingProject": "Copying Unit",
   "copyProjectURLToClipboard": "Copy Unit URL to Clipboard",
@@ -130,6 +131,7 @@
   "creatingProject": "Creating Unit",
   "customScoreKey": "Custom Score Key",
   "customScoreValues": "Custom Score Values",
+  "deleteComponent": "Delete Component",
   "deleteConstraint": "Delete Constraint",
   "deleteCustomScoreValues": "Delete Custom Score Values",
   "deleteLocation": "Delete Location",
@@ -238,6 +240,7 @@
   "milestoneName": "Milestone Name",
   "milestoneSatisfyCriteria": "Milestone Satisfy Criteria",
   "move": "Move",
+  "moveComponent": "Move Component",
   "moveDown": "Move Down",
   "moveUp": "Move Up",
   "myProjects": "My Units",

diff --git a/src/assets/wise5/authoringTool/node/nodeAuthoring.html b/src/assets/wise5/authoringTool/node/nodeAuthoring.html
@@ -48,42 +48,48 @@
           >{{ ::'importComponent' | translate }}</md-tooltip
         >
       </md-button>
-      <md-button
-        id="moveComponentButton"
-        ng-if="$ctrl.showStepButtons && !$ctrl.isGroupNode"
-        class="topButton md-raised md-primary"
-        ng-click="$ctrl.moveButtonClicked()"
-        ng-disabled="$ctrl.insertComponentMode"
-      >
-        <md-icon>redo</md-icon>
+      <div>
+        <md-button
+          id="moveComponentButton"
+          ng-if="$ctrl.showStepButtons && !$ctrl.isGroupNode"
+          class="topButton md-raised md-primary"
+          ng-click="$ctrl.moveButtonClicked()"
+          ng-disabled="!$ctrl.isAnyComponentSelected || $ctrl.insertComponentMode"
+        >
+          <md-icon>redo</md-icon>
+        </md-button>
         <md-tooltip md-direction="top" class="projectButtonTooltip"
-          >{{ ::'move' | translate }}</md-tooltip
+          >{{ ::'moveComponent' | translate }}</md-tooltip
         >
-      </md-button>
-      <md-button
-        id="copyComponentButton"
-        ng-if="$ctrl.showStepButtons && !$ctrl.isGroupNode"
-        class="topButton md-raised md-primary"
-        ng-click="$ctrl.copyButtonClicked()"
-        ng-disabled="$ctrl.insertComponentMode"
-      >
-        <md-icon>content_copy</md-icon>
+      </div>
+      <div>
+        <md-button
+          id="copyComponentButton"
+          ng-if="$ctrl.showStepButtons && !$ctrl.isGroupNode"
+          class="topButton md-raised md-primary"
+          ng-click="$ctrl.copyButtonClicked()"
+          ng-disabled="!$ctrl.isAnyComponentSelected || $ctrl.insertComponentMode"
+        >
+          <md-icon>content_copy</md-icon>
+        </md-button>
         <md-tooltip md-direction="top" class="projectButtonTooltip"
-          >{{ ::'copy' | translate }}</md-tooltip
+          >{{ ::'copyComponent' | translate }}</md-tooltip
         >
-      </md-button>
-      <md-button
-        id="deleteComponentButton"
-        ng-if="$ctrl.showStepButtons && !$ctrl.isGroupNode"
-        class="topButton md-raised md-primary"
-        ng-click="$ctrl.deleteButtonClicked()"
-        ng-disabled="$ctrl.insertComponentMode"
-      >
-        <md-icon>delete</md-icon>
+      </div>
+      <div>
+        <md-button
+          id="deleteComponentButton"
+          ng-if="$ctrl.showStepButtons && !$ctrl.isGroupNode"
+          class="topButton md-raised md-primary"
+          ng-click="$ctrl.deleteButtonClicked()"
+          ng-disabled="!$ctrl.isAnyComponentSelected || $ctrl.insertComponentMode"
+        >
+          <md-icon>delete</md-icon>
+        </md-button>
         <md-tooltip md-direction="top" class="projectButtonTooltip"
-          >{{ ::'DELETE' | translate }}</md-tooltip
+          >{{ ::'deleteComponent' | translate }}</md-tooltip
         >
-      </md-button>
+      </div>
       <md-button
         id="editStepRubricButton"
         class="topButton md-raised md-primary"
@@ -212,6 +218,7 @@ <h6 translate="chooseNewLocation"></h6>
         <md-checkbox
           ng-model="$ctrl.componentsToChecked[component.id]"
           ng-disabled="$ctrl.insertComponentMode"
+          ng-change="$ctrl.componentCheckboxClicked()"
           class="md-primary"
         >
           <span style="font-weight: bold; margin-right: 10px"

diff --git a/src/assets/wise5/authoringTool/node/nodeAuthoringComponent.ts b/src/assets/wise5/authoringTool/node/nodeAuthoringComponent.ts
@@ -34,6 +34,7 @@ class NodeAuthoringController {
     'tag'
   ];
   insertComponentMode: boolean = false;
+  isAnyComponentSelected: boolean = false;
   isGroupNode: boolean;
   items: any[];
   moveComponentMode: boolean = false;
@@ -295,6 +296,7 @@ class NodeAuthoringController {
 
   clearComponentsToChecked() {
     this.componentsToChecked = {};
+    this.isAnyComponentSelected = false;
   }
 
   /**
@@ -327,69 +329,55 @@ class NodeAuthoringController {
   }
 
   moveButtonClicked() {
-    if (this.getSelectedComponentIds().length === 0) {
-      alert(this.$translate('pleaseSelectAComponentToMoveAndThenClickTheMoveButtonAgain'));
-    } else {
-      this.showDefaultComponentsView();
-      this.turnOnMoveComponentMode();
-      this.turnOnInsertComponentMode();
-      this.hideComponentAuthoring();
-    }
+    this.showDefaultComponentsView();
+    this.turnOnMoveComponentMode();
+    this.turnOnInsertComponentMode();
+    this.hideComponentAuthoring();
   }
 
   copyButtonClicked() {
-    if (this.getSelectedComponentIds().length === 0) {
-      alert(this.$translate('pleaseSelectAComponentToCopyAndThenClickTheCopyButtonAgain'));
-    } else {
-      this.showDefaultComponentsView();
-      this.turnOnCopyComponentMode();
-      this.turnOnInsertComponentMode();
-      this.hideComponentAuthoring();
-    }
+    this.showDefaultComponentsView();
+    this.turnOnCopyComponentMode();
+    this.turnOnInsertComponentMode();
+    this.hideComponentAuthoring();
   }
 
   deleteButtonClicked() {
-    if (this.getSelectedComponentIds().length === 0) {
-      alert(this.$translate('pleaseSelectAComponentToDeleteAndThenClickTheDeleteButtonAgain'));
-    } else {
-      this.scrollToTopOfPage();
-      this.hideComponentAuthoring();
-
-      /*
-       * Use a timeout to allow the effects of hideComponentAuthoring() to
-       * take effect. If we don't use a timeout, the user won't see any change
-       * in the UI.
-       */
-      this.$timeout(() => {
-        let confirmMessage = '';
-        const selectedComponentNumbersAndTypes = this.getSelectedComponentNumbersAndTypes();
-        if (selectedComponentNumbersAndTypes.length == 1) {
-          confirmMessage = this.$translate('areYouSureYouWantToDeleteThisComponent');
-        } else if (selectedComponentNumbersAndTypes.length > 1) {
-          confirmMessage = this.$translate('areYouSureYouWantToDeleteTheseComponents');
-        }
-        for (let c = 0; c < selectedComponentNumbersAndTypes.length; c++) {
-          confirmMessage += '\n' + selectedComponentNumbersAndTypes[c];
-        }
-        if (confirm(confirmMessage)) {
-          const selectedComponents = this.getSelectedComponentIds();
-          const data = {
-            componentsDeleted: this.getComponentObjectsForEventData(selectedComponents)
-          };
-          for (const componentId of selectedComponents) {
-            this.ProjectService.deleteComponent(this.nodeId, componentId);
-          }
-          this.saveEvent('componentDeleted', 'Authoring', data);
-          this.checkIfNeedToShowNodeSaveOrNodeSubmitButtons();
-          this.ProjectService.saveProject();
-        } else {
-          this.clearComponentsToChecked();
+    this.scrollToTopOfPage();
+    this.hideComponentAuthoring();
+
+    /*
+     * Use a timeout to allow the effects of hideComponentAuthoring() to
+     * take effect. If we don't use a timeout, the user won't see any change
+     * in the UI.
+     */
+    this.$timeout(() => {
+      let confirmMessage = '';
+      const selectedComponentNumbersAndTypes = this.getSelectedComponentNumbersAndTypes();
+      if (selectedComponentNumbersAndTypes.length == 1) {
+        confirmMessage = this.$translate('areYouSureYouWantToDeleteThisComponent');
+      } else if (selectedComponentNumbersAndTypes.length > 1) {
+        confirmMessage = this.$translate('areYouSureYouWantToDeleteTheseComponents');
+      }
+      for (let c = 0; c < selectedComponentNumbersAndTypes.length; c++) {
+        confirmMessage += '\n' + selectedComponentNumbersAndTypes[c];
+      }
+      if (confirm(confirmMessage)) {
+        const selectedComponents = this.getSelectedComponentIds();
+        const data = {
+          componentsDeleted: this.getComponentObjectsForEventData(selectedComponents)
+        };
+        for (const componentId of selectedComponents) {
+          this.ProjectService.deleteComponent(this.nodeId, componentId);
         }
-        this.turnOffInsertComponentMode();
-        this.clearComponentsToChecked();
-        this.showComponentAuthoring();
-      });
-    }
+        this.saveEvent('componentDeleted', 'Authoring', data);
+        this.checkIfNeedToShowNodeSaveOrNodeSubmitButtons();
+        this.ProjectService.saveProject();
+      }
+      this.turnOffInsertComponentMode();
+      this.clearComponentsToChecked();
+      this.showComponentAuthoring();
+    });
   }
 
   cancelInsertClicked() {
@@ -588,6 +576,10 @@ class NodeAuthoringController {
       clickOutsideToClose: true
     });
   }
+
+  componentCheckboxClicked(): void {
+    this.isAnyComponentSelected = Object.values(this.componentsToChecked).some((value) => value);
+  }
 }
 
 export const NodeAuthoringComponent = {