Ver código fonte

fix(AdvancedTable): bulk popup could go out of bounds by resizing the page

Kristian Vos 3 anos atrás
pai
commit
16e2c82630
1 arquivos alterados com 25 adições e 0 exclusões
  1. 25 0
      frontend/src/components/AdvancedTable.vue

+ 25 - 0
frontend/src/components/AdvancedTable.vue

@@ -739,6 +739,13 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
+	watch: {
+		selectedRows(newSelectedRows, oldSelectedRows) {
+			// If selected rows goes from zero to one or more selected, trigger onWindowResize, as otherwise the popup could be out of bounds
+			if (oldSelectedRows.length === 0 && newSelectedRows.length > 0)
+				this.onWindowResize();
+		}
+	},
 	mounted() {
 		const tableSettings = this.getTableSettings();
 
@@ -860,8 +867,16 @@ export default {
 
 		this.resetBulkActionsPosition();
 
+		this.$nextTick(() => {
+			this.onWindowResize();
+			window.addEventListener("resize", this.onWindowResize);
+		});
+
 		ws.onConnect(this.init);
 	},
+	unmounted() {
+		window.removeEventListener("resize", this.onWindowResize);
+	},
 	methods: {
 		init() {
 			this.getData();
@@ -1256,6 +1271,16 @@ export default {
 					})
 				);
 			}, 250);
+		},
+		onWindowResize() {
+			// Only change the position if the popup is actually visible
+			if (this.selectedRows.length === 0) return;
+			if (this.bulkPopup.top < 0) this.bulkPopup.top = 0;
+			if (this.bulkPopup.top > document.body.clientHeight - 50)
+				this.bulkPopup.top = document.body.clientHeight - 50;
+			if (this.bulkPopup.left < 0) this.bulkPopup.left = 0;
+			if (this.bulkPopup.left > document.body.clientWidth - 400)
+				this.bulkPopup.left = document.body.clientWidth - 400;
 		}
 	}
 };