mehrfach markierung mit shift im datatree

public/js/components/LVVerwaltung/Setup/Table.js

@@ -69,6 +69,8 @@ export default {
 	},
 	data() {
 		return {
+			selectedRange: false,
+			lastClickedRowIndex: null,
 			expanded: [],
 			selectedColumnValues: [],
 			tagEndpoint: ApiTag,
@@ -96,8 +98,44 @@ export default {
 					handler: (data) => {
 						this.getExpandedRows()
 					}
-				}
+				},
+				{
+					event: 'rowClick',
+					handler: (e, row) => {
+						const tabulator = this.$refs.table.tabulator;
 
+						if (e.shiftKey && this.lastClickedRowIndex !== null)
+						{
+							this.selectedRange = true;
+							const allRows = tabulator.rowManager.getDisplayRows().filter(r => r.type === 'row').map(r => r.getComponent());
+							const anchorIdx = allRows.findIndex(r => r.getData().uniqueindex === this.lastClickedRowIndex);
+							const currentIdx = allRows.findIndex(r => r.getData().uniqueindex === row.getData().uniqueindex);
+
+							if (anchorIdx === -1 || currentIdx === -1)
+								return;
+
+							const from = Math.min(anchorIdx, currentIdx);
+							const to = Math.max(anchorIdx, currentIdx);
+
+							tabulator.deselectRow();
+							allRows.slice(from, to + 1).forEach(r => r.select());
+							this.$nextTick(() => {
+								this.selectedRange = false;
+							});
+
+						}
+						else if (e.ctrlKey || e.metaKey)
+						{
+							this.lastClickedRowIndex = row.getData().uniqueindex;
+						}
+						else
+						{
+							tabulator.deselectRow();
+							row.select();
+							this.lastClickedRowIndex = row.getData().uniqueindex;
+						}
+					}
+				},
 			],
 			formData: {},
 			lv_info: false,
@@ -140,8 +178,7 @@ export default {
 					headerFilterFunc: extendedHeaderFilter,
 				},
 				layout: 'fitDataStretch',
-				persistenceID: 'lehrveranstaltungen_2025_07_31_v1',
-				selectableRowsRangeMode: 'click',
+				persistenceID: 'lehrveranstaltungen_2026_05_04_v1',
 				selectableRows: true,
 				rowContextMenu: (component, e) => {
 
@@ -298,10 +335,13 @@ export default {
 				this.$refs.table.reloadTable();
 			}
 		},
-		rowSelectionChanged(data) {
+		rowSelectionChanged(data)
+		{
 			this.selectedRows = this.$refs.table.tabulator.getSelectedRows();
 			this.selectedColumnValues = this.selectedRows.filter(row => row.getData().lehreinheit_id !== undefined && row.getData().lehreinheit_id).map(row => row.getData().lehreinheit_id);
 
+			if (this.selectedRange)
+				return;
 			if (data[0]?.lehreinheit_id !== undefined && this.selectedColumnValues.length === 1)
 			{
 				this.$emit('update:selected', [data[0]]);

public/js/helpers/TagHelper.js

@@ -3,10 +3,12 @@ export function addTagInTable(addedTag, rows, matchKey, tagsKey = "tags")
 	if (!addedTag || !Array.isArray(addedTag.response))
 		return;
 
+	const { response, ...baseTag } = addedTag;
 	rows.forEach(row =>
 	{
 		const rowData = row.getData();
-		let updated = false;
+		let updates = {};
+		let changed = false;
 
 		addedTag.response.forEach(tag =>
 		{
@@ -26,16 +28,17 @@ export function addTagInTable(addedTag, rows, matchKey, tagsKey = "tags")
 			if (tags.some(t => t?.id === tag.id))
 				return;
 
-			let newTag = { ...addedTag, id: tag.id };
+			tags.unshift({...baseTag, ...tag});
 
-			tags.unshift(newTag);
-
-			rowData[tagsKey] = JSON.stringify(tags);
-			updated = true;
+			updates[tagsKey] = JSON.stringify(tags);
+			changed = true;
 		});
 
-		if (updated)
-			row.update(rowData);
+		if (changed)
+		{
+			row.update(updates);
+			row.reformat();
+		}
 	});
 }
 
@@ -86,39 +89,37 @@ export function updateTagInTable(updatedTag, rows, fields = ['tags'])
 	rows.forEach(row =>
 	{
 		const rowData = row.getData();
-		let updated = false;
+		const updates = {};
+		let changed = false;
 
 		fields.forEach(field =>
 		{
-			if (!rowData[field])
-				return;
+			let tags;
 
-			let fieldData;
 			try {
-				fieldData = JSON.parse(rowData[field] || "[]");
+				tags = JSON.parse(rowData[field] || "[]");
 			} catch (e) {
 				return;
 			}
 
-			if (!Array.isArray(fieldData))
+			if (!Array.isArray(tags))
 				return;
 
-			let index = fieldData.findIndex(tag => tag?.id === updatedTag.id);
+			const index = tags.findIndex(tag => String(tag?.id) === String(updatedTag.id));
 
-			if (index !== -1)
-			{
-				fieldData[index] = { ...updatedTag };
-				let updatedFieldData = JSON.stringify(fieldData);
+			if (index === -1)
+				return;
 
-				if (updatedFieldData !== rowData[field])
-				{
-					rowData[field] = updatedFieldData;
-					updated = true;
-				}
-			}
+			tags[index] = {...tags[index], ...updatedTag};
+
+			updates[field] = JSON.stringify(tags);
+			changed = true;
 		});
 
-		if (updated)
-			row.update(rowData);
+		if (changed)
+		{
+			row.update(updates);
+			row.reformat();
+		}
 	});
-}
+}