mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-25 08:34:29 +00:00
WIP
This commit is contained in:
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) {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
Reference in New Issue
Block a user