Update communication between DoiListPanel and DoiListItem around sele…

…ction state
ewhanson · May 27, 2021 · a067c18 · a067c18
1 parent 1b08667
commit a067c18
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 24 deletions.
diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
@@ -9,6 +9,7 @@
 						name="submissions[]"
 						:value="item.id"
 						v-model="isSelected"
+						@click="toggleSelected"
 					/>
 				</div>
 			</label>
@@ -427,8 +428,7 @@ export default {
 		 * Toggles item as selected and notifies DoiListPanel
 		 */
 		toggleSelected() {
-			// Notifies DoiListPanel of selection toggle
-			this.$emit('toggleDoiSelected', this.item.id, this.isSelected);
+			this.$emit('selectItem', this.item.id, !this.isSelected);
 		}
 	},
 	mounted: function() {
@@ -449,9 +449,6 @@ export default {
 		isAllExpanded() {
 			this.isExpanded = this.isAllExpanded;
 		},
-		isSelected(newVal, oldVal) {
-			this.toggleSelected();
-		},
 		selected(newVal, oldVal) {
 			this.isSelected = this.selected.includes(this.item.id);
 		}

diff --git a/src/components/ListPanel/doi/DoiListPanel.vue b/src/components/ListPanel/doi/DoiListPanel.vue
@@ -19,7 +19,7 @@
 										Take action on {{ selected.length }} selected item(s)
 									</div>
 									<button class="-linkButton" @click="toggleSelectAll">
-										{{ isSelectAllOn ? 'Deselect all' : 'Select all' }}
+										{{ isAllSelected ? 'Deselect all' : 'Select all' }}
 									</button>
 									<br />
 									<button class="-linkButton" @click="toggleExpandAll">
@@ -129,7 +129,7 @@
 							:crossrefPluginEnabled="crossrefPluginEnabled"
 							:isSubmission="isSubmission"
 							:hasDOIs="hasDOIs"
-							@toggleDoiSelected="toggleDoiSelected"
+							@selectItem="selectItem"
 							@deposit-triggered="openDepositDialog"
 						/>
 					</slot>
@@ -229,7 +229,7 @@ export default {
 		return {
 			activeFilters: {},
 			isAllExpanded: false,
-			isSelectAllOn: false,
+			isAllSelected: false,
 			isSidebarVisible: true,
 			selected: []
 		};
@@ -250,20 +250,17 @@ export default {
 		},
 		// Toggles
 		/**
-		 * Toggle DoiListItem status in DoiListPanel
+		 * Select a DoiListItem in the DoiListPanel
 		 *
 		 * @param {Number} itemId
-		 * @param {Boolean} isSelected Item selection status
+		 * @param {Boolean} select Whether it should be selected or deselected
 		 */
-		toggleDoiSelected(itemId, isSelected) {
-			if (isSelected) {
-				if (!this.selected.includes(itemId)) {
-					this.selected.push(itemId);
-				}
-			} else {
-				if (this.selected.includes(itemId)) {
-					this.selected = this.selected.filter(item => item !== itemId);
-				}
+		selectItem(itemId, select) {
+			const selected = this.selected.includes(itemId);
+			if (select && !selected) {
+				this.selected.push(itemId);
+			} else if (!select && selected) {
+				this.selected = this.selected.filter(item => item !== itemId);
 			}
 		},
 		/**
@@ -276,12 +273,12 @@ export default {
 		 * Toggle select all for Ids in selected
 		 */
 		toggleSelectAll() {
-			if (this.isSelectAllOn) {
+			if (this.isAllSelected) {
 				this.selected = [];
-				this.isSelectAllOn = false;
+				this.isAllSelected = false;
 			} else {
 				this.selected = this.items.map(i => i.id);
-				this.isSelectAllOn = true;
+				this.isAllSelected = true;
 			}
 		},
 		/**
@@ -489,13 +486,13 @@ export default {
 	},
 	watch: {
 		/**
-		 * Sets isSelectAllOn value based on items in `selected` array
+		 * Sets isAllSelected value based on items in `selected` array
 		 *
 		 * @param newVal
 		 * @param oldVal
 		 */
 		selected(newVal, oldVal) {
-			this.isSelectAllOn =
+			this.isAllSelected =
 				this.selected.length && this.selected.length === this.items.length;
 		}
 	},