This commit is contained in:
Ivymaster
2026-06-25 15:23:41 +02:00
parent c7bac03429
commit c47ac926d2
4 changed files with 1177 additions and 679 deletions
File diff suppressed because it is too large Load Diff
@@ -132,9 +132,9 @@ export function extendedHeaderFilter(headerValue, rowValue, rowData, filterParam
}
export function tagHeaderFilter(headerValue, rowValue, rowData, filterParams)
{
console.log('tagHeaderFilter', headerValue, rowValue, rowData, filterParams);
let data;
console.log('rowValue', rowValue);
try {
data = typeof rowValue === 'string' ? JSON.parse(rowValue) : rowValue;
} catch (error) {
+110 -68
View File
@@ -1,86 +1,128 @@
export function tagFormatter(cell, tagComponent)
{
const mappedData = tagComponent.tags.map(tag => ({
typ_kurzbz: tag.tag_typ_kurzbz,
automatisiert: tag.automatisiert
}));
export function tagFormatter(cell, tagComponent, onRendered) {
const mappedData = tagComponent.tags.map((tag) => ({
typ_kurzbz: tag.tag_typ_kurzbz,
automatisiert: tag.automatisiert,
}));
let tags = cell.getValue();
if (!tags) return;
let tags = cell.getValue();
if (!tags) return;
let container = document.createElement("div");
container.className = "d-flex gap-1";
let container = document.createElement('div');
container.className = "d-flex gap-1";
let parsedTags = [];
if (typeof tags === "string") {
parsedTags = JSON.parse(tags);
} else if (Array.isArray(tags)) {
parsedTags = tags;
}
let parsedTags = [];
if (typeof tags === 'string') {
parsedTags = JSON.parse(tags);
} else if (Array.isArray(tags)) {
parsedTags = tags;
}
let maxVisibleTags = 3;
let maxVisibleTags = 2;
const rowData = cell.getRow().getData();
if (rowData._tagExpanded === undefined) {
rowData._tagExpanded = false;
}
const rowData = cell.getRow().getData();
if (rowData._tagExpanded === undefined) {
rowData._tagExpanded = false;
}
const renderTags = () => {
container.innerHTML = "";
parsedTags = parsedTags.filter((item) => item !== null);
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;
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);
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";
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";
const tagDef = mappedData.find((t) => t.typ_kurzbz === tag.typ_kurzbz);
const tagDef = mappedData.find(t => t.typ_kurzbz === tag.typ_kurzbz);
if (
(!tagDef && tag.typ_kurzbz?.includes("_auto")) ||
tagDef?.automatisiert
) {
tagElement.className += " tag_auto";
tagElement.innerHTML =
"<i class='fa-solid fa-lock'></i> " + tag.beschreibung;
}
if (!tagDef && tag.typ_kurzbz?.includes("_auto") || tagDef?.automatisiert) {
tagElement.className += " tag_auto";
tagElement.innerHTML = "<i class='fa-solid fa-lock'></i> " + tag.beschreibung;
}
tagElement.addEventListener("click", (event) => {
event.stopPropagation();
event.preventDefault();
tagComponent.editTag(tag.id);
});
tagElement.addEventListener('click', (event) => {
event.stopPropagation();
event.preventDefault();
tagComponent.editTag(tag.id)
});
container.appendChild(tagElement);
});
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";
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();
});
toggle.addEventListener('click', () => {
rowData._tagExpanded = !rowData._tagExpanded;
renderTags();
});
container.appendChild(toggle);
}
};
container.appendChild(toggle);
}
};
const fitTags = () => {
if (rowData._tagExpanded) {
renderTags();
return;
}
renderTags();
return container;
}
maxVisibleTags = parsedTags.length;
renderTags();
while (
maxVisibleTags > 0 &&
container.scrollWidth > container.clientWidth
) {
maxVisibleTags--;
renderTags();
}
};
let animationFrame = null;
container.fitTags = () => {
if (animationFrame !== null) return;
animationFrame = requestAnimationFrame(() => {
animationFrame = null;
fitTags();
});
};
if (onRendered) {
onRendered(() => {
container.fitTags();
});
}
console.log("tagFormatter called with:")
renderTags();
return container;
}
+4
View File
@@ -0,0 +1,4 @@
node_modules
.env
.env.*
!.env.example