gg
bc9b337696
- Position des Ansprechpartners in der Kopfzeile der Tagesworkflow-Maske anzeigen - Neue TagBadge-Komponente (Farbchip, Name, Workflow-Icons: erledigend/ Wiedervorlage) ersetzt die duplizierte Badge-Darstellung in Notiz-Liste, Workflow-Liste, Historie und Tag-Liste - MultiSelect: optionale content-Option rendert ein fertiges Badge des Aufrufers statt Farbpunkt + Label im Auswahl-Modal; Suchfeld wird beim Öffnen des Modals fokussiert - TagBadge-Attribut heißt tagData statt tag, da Mithril attrs-Objekte mit tag-Property als Vnode-Kinder behandelt (führte zu 'color' undefined) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
import m from "mithril"
|
|
import {iTag} from "../models/tag"
|
|
|
|
/**
|
|
* Der Vnode der Komponente 'TagBadge' akzeptiert die folgenden Parameter:
|
|
* @property {iTag} tagData - Der darzustellende Tag. Achtung: Das Attribut
|
|
* darf nicht 'tag' heißen — Mithril behandelt ein attrs-
|
|
* Objekt mit einer 'tag'-Property als Vnode und verschiebt
|
|
* es in die children (siehe hyperscriptVnode.js).
|
|
* @property {boolean} compact (optional) - kompakte Darstellung für dichte
|
|
* Listen/Tabellen (kleinere Schrift, engeres Padding);
|
|
* Default ist die Standarddarstellung (fett)
|
|
* @property {string} title (optional) - Tooltip des Farbchips
|
|
* (Default: Tag-Name)
|
|
*/
|
|
export interface iTagBadge {
|
|
tagData: iTag
|
|
compact?: boolean
|
|
title?: string
|
|
}
|
|
|
|
/**
|
|
* Farbige Badge-Komponente für einen Tag: rendert den Tag-Namen als Chip in
|
|
* der Tag-Farbe und dahinter automatisch die Workflow-Zusatzicons —
|
|
* back_hand (rot) für erledigende Tags, schedule + Tagesabstand (blau) für
|
|
* Tags, die eine Wiedervorlage auslösen (jeweils mit Tooltip). Parent-Tags
|
|
* erhalten keine Zusatzicons.
|
|
*
|
|
* Die Komponente kapselt die Darstellung zentral, damit alle Stellen
|
|
* (Notiz-Listen, Workflow-Liste, Historie, Auswahl-Modals, Tag-Liste)
|
|
* einheitlich aussehen. Aufrufer geben nur den Tag an; Name, Farbe und
|
|
* Zusatzicons ergeben sich aus den Tag-Daten.
|
|
*/
|
|
export const TagBadge: m.ClosureComponent<iTagBadge> = () => {
|
|
return {
|
|
view: (vnode) => {
|
|
const tag = vnode.attrs.tagData
|
|
const compact = vnode.attrs.compact === true
|
|
// Farbiger Chip mit dem Tag-Namen. Bei fehlender Farbe grau.
|
|
const chip = m("span", {
|
|
style: {
|
|
backgroundColor: tag.color || '#999',
|
|
color: 'white',
|
|
padding: compact ? '1px 5px' : '2px 6px',
|
|
'border-radius': '3px',
|
|
'font-size': compact ? '11px' : undefined,
|
|
fontWeight: compact ? undefined : 'bold',
|
|
display: 'inline-block',
|
|
marginRight: '4px'
|
|
},
|
|
title: vnode.attrs.title || tag.name
|
|
}, tag.name)
|
|
// Workflow-Zusatzicons hinter dem Chip — fest programmiert aus
|
|
// den Tag-Flags, nicht per Attribut steuerbar. Parent-Tags sind
|
|
// nicht zuordenbar und erhalten daher keine Icons.
|
|
const icons: m.Child[] = []
|
|
if (!tag.is_parent) {
|
|
if (tag.is_erledigend) {
|
|
icons.push(m("i.material-icons", {
|
|
title: "Erledigend: Kontakt gilt als erledigt",
|
|
style: {
|
|
verticalAlign: 'middle',
|
|
fontSize: '16px',
|
|
color: '#d32f2f'
|
|
}
|
|
}, "back_hand"))
|
|
}
|
|
if (tag.loest_wiedervorlage_aus) {
|
|
icons.push(m("span", {
|
|
title: "Löst Wiedervorlage aus: " + (tag.wiedervorlage_abstand_tage ?? 0) + " Tage",
|
|
style: {
|
|
verticalAlign: 'middle',
|
|
fontSize: '12px',
|
|
color: '#1565c0'
|
|
}
|
|
},
|
|
m("i.material-icons", {
|
|
style: {
|
|
verticalAlign: 'middle',
|
|
marginRight: '2px',
|
|
fontSize: '16px'
|
|
}
|
|
}, "schedule"),
|
|
tag.wiedervorlage_abstand_tage != null ? tag.wiedervorlage_abstand_tage + "d" : ""))
|
|
}
|
|
}
|
|
return m("span", {
|
|
style: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
marginLeft: '4px',
|
|
whiteSpace: 'nowrap'
|
|
}
|
|
}, chip, icons)
|
|
}
|
|
}
|
|
}
|