tag - helper and formatter

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);
+	});
+}

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(' ');
 	}

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;
+}