chmln-app-dev/kbcrm
5
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Listen: einheitliche Zeilen-Markierung und kompakte Aktions-Buttons

Browse Source 
Alle App-Listen (kundenliste, call_log_liste, kontaktliste, kontaktadresseliste,
TagList) auf das isSelected-Callback der Treetable umgestellt — die Markierung
erfolgt jetzt auf der gesamten <tr>-Zeile via w3-theme-l4 statt per-Zell-Inline-Style.
In der kundenliste sind die 3 Aktions-Buttons (edit, Projekte, Kontakte) kompakt
in einer Zelle zusammengefasst, analog zur projektliste. Auth-Listen unberührt.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed 2026-09-01 10:45:48 +02:00
1 parent 3e1791d316
commit ad24981a0b
5 files changed
+51 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/Components/call_log.ts
+12 -13
View File
@@ -77,18 +77,16 @@ export const call_log_liste: m.ClosureComponent = (vnode) => {
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => { const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
let log: iCallLog = node.nodevalue let log: iCallLog = node.nodevalue
const isSelected = selectedNode === node
const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
return [ return [
m("div", {style: cellStyle}, m("strong", log.kundenName + ": " + log.projektName)), m("div", m("strong", log.kundenName + ": " + log.projektName)),
m("span", {style: cellStyle}, log.datum), m("span", log.datum),
m("span", {style: cellStyle}, log.uhrzeitBeginn), m("span", log.uhrzeitBeginn),
m("span", {style: cellStyle}, log.dauer + " min"), m("span", log.dauer + " min"),
m("span", {style: cellStyle}, log.betreff), m("span", log.betreff),
m("span", {style: cellStyle}, log.wiedervorlageDatum), m("span", log.wiedervorlageDatum),
m("span", {style: cellStyle}, log.erledigt ? "Erledigt" : "Offen"), m("span", log.erledigt ? "Erledigt" : "Offen"),
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editCallLog(log, e)}, m("i.material-icons", "edit")) m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editCallLog(log, e)}, m("i.material-icons", "edit"))
] ]
} }
@@ -124,12 +122,13 @@ export const call_log_liste: m.ClosureComponent = (vnode) => {
'overflow-y': 'inherit'}}, 'overflow-y': 'inherit'}},
m("h1", "Gesprächsnotizen"), m("h1", "Gesprächsnotizen"),
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}}, m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
m(Treetable, m(Treetable,
{ {
treenodes: treenodes, treenodes: treenodes,
columnmapper: columnmapper, columnmapper: columnmapper,
filter: filterFunction, filter: filterFunction,
onRowMarked: handleRowMarked onRowMarked: handleRowMarked,
isSelected: (node: iTreenode) => node === selectedNode
} as iTreetable, } as iTreetable,
m(TopbarButton, {onclick: addCallLogRoute, tooltip: "Neue Gesprächsnotiz anlegen"} as iTopbarButton, m(TopbarButton, {onclick: addCallLogRoute, tooltip: "Neue Gesprächsnotiz anlegen"} as iTopbarButton,
m("i.material-icons", "add_call") m("i.material-icons", "add_call")
Client/Components/kontakt.ts
+8 -9
View File
@@ -61,16 +61,14 @@ export const kontaktliste: m.ClosureComponent = (vnode) => {
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => { const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
let kontakt: iKontakt = node.nodevalue let kontakt: iKontakt = node.nodevalue
const isSelected = selectedNode === node
const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
return [ return [
m("div", {style: cellStyle}, m("strong", kontakt.name)), m("div", m("strong", kontakt.name)),
m("span", {style: cellStyle}, kontakt.position), m("span", kontakt.position),
m("span", {style: cellStyle}, kontakt.telefon), m("span", kontakt.telefon),
m("span", {style: cellStyle}, kontakt.email), m("span", kontakt.email),
m("span", {style: cellStyle}, kontakt.kundenName), m("span", kontakt.kundenName),
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKontakt(kontakt, e)}, m("i.material-icons", "edit")) m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontakt(kontakt, e)}, m("i.material-icons", "edit"))
] ]
} }
@@ -108,7 +106,8 @@ export const kontaktliste: m.ClosureComponent = (vnode) => {
treenodes: treenodes, treenodes: treenodes,
columnmapper: columnmapper, columnmapper: columnmapper,
filter: filterFunction, filter: filterFunction,
onRowMarked: handleRowMarked onRowMarked: handleRowMarked,
isSelected: (node: iTreenode) => node === selectedNode
} as iTreetable, } as iTreetable,
m(TopbarButton, {onclick: addKontaktRoute, tooltip: "Neuen Kontakt anlegen"} as iTopbarButton, m(TopbarButton, {onclick: addKontaktRoute, tooltip: "Neuen Kontakt anlegen"} as iTopbarButton,
m("i.material-icons", "person_add") m("i.material-icons", "person_add")
Client/Components/kontaktadresse.ts
+9 -10
View File
@@ -69,17 +69,15 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => { const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
let kontaktadresse: iKontaktadresse = node.nodevalue let kontaktadresse: iKontaktadresse = node.nodevalue
const isSelected = selectedNode === node
const cellStyle = isSelected ? {backgroundColor: '#e6f7ff'} : {}
return [ return [
m("div", {style: cellStyle}, m("strong", kontaktadresse.name)), m("div", m("strong", kontaktadresse.name)),
m("span", {style: cellStyle}, kontaktadresse.firma), m("span", kontaktadresse.firma),
m("span", {style: cellStyle}, kontaktadresse.telefon), m("span", kontaktadresse.telefon),
m("span", {style: cellStyle}, kontaktadresse.email), m("span", kontaktadresse.email),
m("span", {style: cellStyle}, kontaktadresse.ort), m("span", kontaktadresse.ort),
m("span", {style: cellStyle}, kontaktadresse.projektName), m("span", kontaktadresse.projektName),
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKontaktadresse(kontaktadresse, e)}, m("i.material-icons", "edit")) m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKontaktadresse(kontaktadresse, e)}, m("i.material-icons", "edit"))
] ]
} }
@@ -118,7 +116,8 @@ export const kontaktadresseliste: m.ClosureComponent = (vnode) => {
treenodes: treenodes, treenodes: treenodes,
columnmapper: columnmapper, columnmapper: columnmapper,
filter: filterFunction, filter: filterFunction,
onRowMarked: handleRowMarked onRowMarked: handleRowMarked,
isSelected: (node: iTreenode) => node === selectedNode
} as iTreetable, } as iTreetable,
m(TopbarButton, {onclick: addKontaktadresseRoute, tooltip: "Neue Kontaktadresse anlegen"} as iTopbarButton, m(TopbarButton, {onclick: addKontaktadresseRoute, tooltip: "Neue Kontaktadresse anlegen"} as iTopbarButton,
m("i.material-icons", "person_add") m("i.material-icons", "person_add")
Client/Components/kunde.ts
+14 -13
View File
@@ -115,18 +115,18 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => { const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
let kunde: iKunde = node.nodevalue let kunde: iKunde = node.nodevalue
const isSelected = selectedNode === node
const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {}
return [ return [
m("div", {style: cellStyle}, m("strong", kunde.name)), m("div", m("strong", kunde.name)),
m("span", {style: cellStyle}, kunde.strasse), m("span", kunde.strasse),
m("span", {style: cellStyle}, kunde.plz), m("span", kunde.plz),
m("span", {style: cellStyle}, kunde.ort), m("span", kunde.ort),
m("span", {style: cellStyle}, kunde.land), m("span", kunde.land),
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")), m("div", {style: {display: 'flex', gap: '0', 'white-space': 'nowrap'}},
m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books")), m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
m("button.w3-button.w3-small", {title: "Kontakte anzeigen", style: cellStyle, onclick: (e: Event) => showKontakte(kunde, e)}, m("i.material-icons", "contact_page")) m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books")),
m("button.w3-button.w3-small", {title: "Kontakte anzeigen", style: {padding: '0 2px'}, onclick: (e: Event) => showKontakte(kunde, e)}, m("i.material-icons", "contact_page"))
)
] ]
} }
@@ -150,12 +150,13 @@ export const kundenliste: m.ClosureComponent = (vnode) => {
'overflow-y': 'inherit'}}, 'overflow-y': 'inherit'}},
m("h1", "Kundenliste"), m("h1", "Kundenliste"),
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}}, m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
m(Treetable, m(Treetable,
{ {
treenodes: treenodes, treenodes: treenodes,
columnmapper: columnmapper, columnmapper: columnmapper,
filter: filterFunction, filter: filterFunction,
onRowMarked: handleRowMarked onRowMarked: handleRowMarked,
isSelected: (node: iTreenode) => node === selectedNode
} as iTreetable, } as iTreetable,
m(TopbarButton, {onclick: addKundeRoute, tooltip: "Neuen Kunden anlegen"} as iTopbarButton, m(TopbarButton, {onclick: addKundeRoute, tooltip: "Neuen Kunden anlegen"} as iTopbarButton,
m("i.material-icons", "person_add") m("i.material-icons", "person_add")
Client/Components/tags.ts
+8 -9
View File
@@ -598,11 +598,9 @@ export const TagList: m.ClosureComponent = (vnode) => {
const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => { const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
let tag: iTag = node.nodevalue; let tag: iTag = node.nodevalue;
const isSelected = selectedNode === node;
const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {};
return [ return [
m("span", {style: cellStyle}, m("span",
m("span", { m("span", {
style: { style: {
backgroundColor: tag.color, backgroundColor: tag.color,
@@ -615,9 +613,9 @@ export const TagList: m.ClosureComponent = (vnode) => {
} }
}, tag.name) }, tag.name)
), ),
m("span", {style: cellStyle}, tag.description), m("span", tag.description),
m("div", {style: cellStyle}, m("div",
m("button.w3-button.w3-small", {onclick: (e: Event) => editTag(tag, e)}, m("button.w3-button.w3-small", {style: {padding: '0 2px'}, onclick: (e: Event) => editTag(tag, e)},
m("i.material-icons", "edit") m("i.material-icons", "edit")
) )
) )
@@ -647,12 +645,13 @@ export const TagList: m.ClosureComponent = (vnode) => {
m("h1", "Tags"), m("h1", "Tags"),
m("p.w3-text-grey", "Hierarchie: Tags können beliebig verschachtelt werden (z. B. Backend → Python → Flask)."), m("p.w3-text-grey", "Hierarchie: Tags können beliebig verschachtelt werden (z. B. Backend → Python → Flask)."),
m("div", {style: {flex: '1', 'overflow-y': 'inherit'}}, m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
m(Treetable, m(Treetable,
{ {
treenodes: treenodes, treenodes: treenodes,
columnmapper: columnmapper, columnmapper: columnmapper,
filter: filterFunction, filter: filterFunction,
onRowMarked: handleRowMarked onRowMarked: handleRowMarked,
isSelected: (node: iTreenode) => node === selectedNode
} as iTreetable } as iTreetable
) )
) )