From 3465e299f7ec81bd373d9806d14c31e1a437d19f Mon Sep 17 00:00:00 2001
From: ma0048 <ma0048@technikum-wien.at>
Date: Thu, 12 Feb 2026 08:16:31 +0100
Subject: [PATCH] tag - helper and formatter

---
 public/js/helpers/TagHelper.js                | 124 ++++++++++++++++++
 .../tabulator/filters/extendedHeaderFilter.js |   2 +-
 public/js/tabulator/formatter/tags.js         |  67 ++++++++++
 3 files changed, 192 insertions(+), 1 deletion(-)
 create mode 100644 public/js/helpers/TagHelper.js
 create mode 100644 public/js/tabulator/formatter/tags.js

diff --git a/public/js/helpers/TagHelper.js b/public/js/helpers/TagHelper.js
new file mode 100644
index 000000000..9282aa167
--- /dev/null
+++ b/public/js/helpers/TagHelper.js
@@ -0,0 +1,124 @@
+export function addTagInTable(addedTag, rows, matchKey, tagsKey = "tags")
+{
+	if (!addedTag || !Array.isArray(addedTag.response))
+		return;
+
+	rows.forEach(row =>
+	{
+		const rowData = row.getData();
+		let updated = false;
+
+		addedTag.response.forEach(tag =>
+		{
+			if (rowData[matchKey] !== tag[matchKey])
+				return;
+
+			let tags;
+			try {
+				tags = JSON.parse(rowData[tagsKey] || "[]");
+			} catch (e) {
+				tags = [];
+			}
+
+			if (!Array.isArray(tags))
+				tags = [];
+
+			if (tags.some(t => t?.id === tag.id))
+				return;
+
+			let newTag = { ...addedTag, id: tag.id };
+
+			tags.unshift(newTag);
+
+			rowData[tagsKey] = JSON.stringify(tags);
+			updated = true;
+		});
+
+		if (updated)
+			row.update(rowData);
+	});
+}
+
+export function deleteTagInTable(deletedTag, rows, tagsKeys = ['tags'])
+{
+	if (!Array.isArray(tagsKeys))
+		tagsKeys = [tagsKeys];
+
+	rows.forEach(row => {
+		let rowData = row.getData();
+		let updates = {};
+		let changed = false;
+
+		tagsKeys.forEach(key => {
+			let tags;
+
+			try {
+				tags = JSON.parse(rowData[key] || "[]");
+			} catch (e) {
+				tags = [];
+			}
+
+			if (!Array.isArray(tags))
+				return;
+
+			let filtered = tags.filter(tag => tag?.id !== deletedTag);
+
+			if (filtered.length !== tags.length)
+			{
+				updates[key] = JSON.stringify(filtered);
+				changed = true;
+			}
+		});
+
+		if (changed) {
+			row.update(updates);
+			row.reformat();
+		}
+	});
+}
+
+
+export function updateTagInTable(updatedTag, rows, fields = ['tags'])
+{
+	if (!Array.isArray(fields))
+		fields = [fields];
+
+	rows.forEach(row =>
+	{
+		const rowData = row.getData();
+		let updated = false;
+
+		fields.forEach(field =>
+		{
+			if (!rowData[field])
+				return;
+
+			let fieldData;
+			try {
+				fieldData = JSON.parse(rowData[field] || "[]");
+			} catch (e) {
+				return;
+			}
+
+			if (!Array.isArray(fieldData))
+				return;
+
+			let index = fieldData.findIndex(tag => tag?.id === updatedTag.id);
+
+			if (index !== -1)
+			{
+				fieldData[index] = { ...updatedTag };
+				let updatedFieldData = JSON.stringify(fieldData);
+
+				if (updatedFieldData !== rowData[field])
+				{
+					rowData[field] = updatedFieldData;
+					updated = true;
+				}
+			}
+		});
+
+		if (updated)
+			row.update(rowData);
+	});
+}
diff --git a/public/js/tabulator/filters/extendedHeaderFilter.js b/public/js/tabulator/filters/extendedHeaderFilter.js
index 7bf86c119..35b66dc1c 100644
--- a/public/js/tabulator/filters/extendedHeaderFilter.js
+++ b/public/js/tabulator/filters/extendedHeaderFilter.js
@@ -146,7 +146,7 @@ export function tagHeaderFilter(headerValue, rowValue, rowData, filterParams)
 	if (Array.isArray(data))
 	{
 		combinedText = data
-			.filter(item => item?.done === false)
+			.filter(item => item?.done !== true)
 			.map(item => `${item?.beschreibung} ${item?.notiz}`)
 			.join(' ');
 	}
diff --git a/public/js/tabulator/formatter/tags.js b/public/js/tabulator/formatter/tags.js
new file mode 100644
index 000000000..0d2f5004c
--- /dev/null
+++ b/public/js/tabulator/formatter/tags.js
@@ -0,0 +1,67 @@
+export function tagFormatter(cell, tagComponent)
+{
+	let tags = cell.getValue();
+	if (!tags) return;
+
+	let container = document.createElement('div');
+	container.className = "d-flex gap-1";
+
+	let parsedTags = JSON.parse(tags);
+	let maxVisibleTags = 2;
+
+	const rowData = cell.getRow().getData();
+	if (rowData._tagExpanded === undefined) {
+		rowData._tagExpanded = false;
+	}
+
+	const renderTags = () => {
+		container.innerHTML = '';
+		parsedTags = parsedTags.filter(item => item !== null);
+
+		parsedTags.sort((a, b) => {
+			let adone = a.done ? 1 : 0;
+			let bbone = b.done ? 1 : 0;
+
+			if (adone !== bbone)
+			{
+				return adone - bbone;
+			}
+			return b.id - a.id;
+		});
+		const tagsToShow = rowData._tagExpanded ? parsedTags : parsedTags.slice(0, maxVisibleTags);
+
+		tagsToShow.forEach(tag => {
+			if (!tag) return;
+			let tagElement = document.createElement('span');
+			tagElement.innerText = tag.beschreibung;
+			tagElement.title = tag.notiz;
+			tagElement.className = "tag " + tag.style;
+			if (tag.done) tagElement.className += " tag_done";
+
+			tagElement.addEventListener('click', (event) => {
+				event.stopPropagation();
+				event.preventDefault();
+				tagComponent.editTag(tag.id);
+			});
+
+			container.appendChild(tagElement);
+		});
+
+		if (parsedTags.length > maxVisibleTags) {
+			let toggle = document.createElement('button');
+			toggle.innerText = (rowData._tagExpanded ? '- ' : '+ ') + (parsedTags.length - maxVisibleTags);
+			toggle.className = "display_all";
+			toggle.title = rowData._tagExpanded ? "Tags ausblenden" : "Tags einblenden";
+
+			toggle.addEventListener('click', () => {
+				rowData._tagExpanded = !rowData._tagExpanded;
+				renderTags();
+			});
+
+			container.appendChild(toggle);
+		}
+	};
+
+	renderTags();
+	return container;
+}
\ No newline at end of file