Просмотр исходного кода

feat(AdvancedTable): Removed row event handling

Owen Diffey 3 лет назад
Родитель
Сommit
0fd66d2aa5

+ 42 - 5
frontend/src/components/AdvancedTable.vue

@@ -437,7 +437,9 @@
 											<input
 												type="checkbox"
 												:checked="
-													rows.length ===
+													rows.filter(
+														row => !row.removed
+													).length ===
 													selectedRows.length
 												"
 												@click="toggleAllRows()"
@@ -548,8 +550,15 @@
 										@click="
 											toggleSelectedRow(itemIndex, $event)
 										"
+										:disabled="item.removed"
 									/>
 								</p>
+								<span
+									v-if="item.removed"
+									class="removed-overlay"
+									content="Item removed"
+									v-tippy="{ theme: 'info' }"
+								></span>
 								<div
 									class="resizer"
 									v-if="column.resizable"
@@ -1182,10 +1191,19 @@ export default {
 			this.rows[itemIndex].highlighted = true;
 		},
 		toggleAllRows() {
-			if (this.rows.length > this.selectedRows.length) {
-				this.rows = this.rows.map(row => ({ ...row, selected: true }));
+			if (
+				this.rows.filter(row => !row.removed).length >
+				this.selectedRows.length
+			) {
+				this.rows = this.rows.map(row => {
+					if (row.removed) return row;
+					return { ...row, selected: true };
+				});
 			} else {
-				this.rows = this.rows.map(row => ({ ...row, selected: false }));
+				this.rows = this.rows.map(row => {
+					if (row.removed) return row;
+					return { ...row, selected: false };
+				});
 			}
 		},
 		addFilterItem() {
@@ -1525,7 +1543,11 @@ export default {
 			this.rows[index] = { ...this.rows[index], ...data, updated: true };
 		},
 		removeData(index) {
-			this.rows[index] = { ...this.rows[index], removed: true };
+			this.rows[index] = {
+				...this.rows[index],
+				selected: false,
+				removed: true
+			};
 		}
 	}
 };
@@ -1683,6 +1705,21 @@ export default {
 							}
 						}
 					}
+
+					&.removed {
+						filter: grayscale(100%);
+						cursor: not-allowed;
+						user-select: none;
+
+						td .removed-overlay {
+							position: absolute;
+							top: 0;
+							left: 0;
+							bottom: 0;
+							right: 0;
+							z-index: 5;
+						}
+					}
 				}
 			}
 		}

+ 4 - 1
frontend/src/pages/Admin/tabs/News.vue

@@ -30,7 +30,10 @@
 						>
 							edit
 						</button>
-						<quick-confirm @confirm="remove(slotProps.item._id)">
+						<quick-confirm
+							@confirm="remove(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
+						>
 							<button
 								class="
 									button

+ 1 - 0
frontend/src/pages/Admin/tabs/Playlists.vue

@@ -22,6 +22,7 @@
 								material-icons
 							"
 							@click="edit(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 							content="Edit Playlist"
 							v-tippy
 						>

+ 1 - 0
frontend/src/pages/Admin/tabs/Punishments.vue

@@ -20,6 +20,7 @@
 								material-icons
 							"
 							@click="view(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 							content="View Punishment"
 							v-tippy
 						>

+ 2 - 0
frontend/src/pages/Admin/tabs/Reports.vue

@@ -20,6 +20,7 @@
 								material-icons
 							"
 							@click="view(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 							content="View Report"
 							v-tippy
 						>
@@ -33,6 +34,7 @@
 								material-icons
 							"
 							@click="resolve(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 							content="Resolve Report"
 							v-tippy
 						>

+ 1 - 0
frontend/src/pages/Admin/tabs/Songs.vue

@@ -42,6 +42,7 @@
 								material-icons
 							"
 							@click="editOne(slotProps.item)"
+							:disabled="slotProps.item.removed"
 							content="Edit Song"
 							v-tippy
 						>

+ 1 - 0
frontend/src/pages/Admin/tabs/Stations.vue

@@ -28,6 +28,7 @@
 								material-icons
 							"
 							@click="edit(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 							content="Manage Station"
 							v-tippy
 						>

+ 2 - 0
frontend/src/pages/Admin/tabs/Users.vue

@@ -18,6 +18,7 @@
 						<quick-confirm
 							placement="right"
 							@confirm="resolveDataRequest(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 						>
 							<button
 								class="
@@ -80,6 +81,7 @@
 								material-icons
 							"
 							@click="edit(slotProps.item._id)"
+							:disabled="slotProps.item.removed"
 							content="Edit User"
 							v-tippy
 						>