Kundenansicht neu (Aufträge): Logik der Zeitleiste (Fortschritt, Reihenfolge, Gruppierung, Kürzen, Kurztexte)
Reine Funktionen in public/neu/auftrags-zeitleiste.js: laufende Aufträge vor erledigten (jeweils jüngste Aktivität zuerst, Storniertes zuletzt), höchstens fünf Aufträge offen, vier Fortschrittsabschnitte aus status.step, Zeilen der Zeitleiste neueste zuerst mit Datum TT.MM. und Kurztext. Test zuerst (rot: Modul fehlte), dann grün. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5cd49d6a4a
commit
f231f4b887
2 files changed
+245
No files matched your search
@@ -0,0 +1,113 @@
|
||||
/* Kundenansicht neu: „Was wir zuletzt erledigt haben“ als Zeitleiste (Variante C, Pilot-Feedback 17.10.).
|
||||
Je Auftrag aus GET /api/activity: Überschrift mit Status-Pille, schmaler Fortschrittsbalken, bei Rückfrage der Hinweis zum Chat und eine
|
||||
kompakte Zeitleiste der Einträge. Dieser Teil ist reine Logik (Reihenfolge, Gruppierung, Kürzen, Fortschritt, Kurztexte) ohne DOM-Zugriff.
|
||||
Antwortform laut server/routes/customerData.js und services/customerProjectView.js:
|
||||
{ number, topic, status: { label, tone, step }, createdAt, entries: [{ kind, label, date: 'JJJJ-MM-TT', minutes, person, text | changes }] }. */
|
||||
|
||||
import { berlinTag } from './ansicht-hilfen.js'
|
||||
import { AUFTRAG_SCHRITTE } from './website-details.js'
|
||||
|
||||
/** Die vier Abschnitte des Balkens (dieselben Namen wie der Fortschritt der Projektdetails). */
|
||||
export const STUFEN = AUFTRAG_SCHRITTE
|
||||
/** So viele Aufträge stehen offen, der Rest hinter „Ältere Aufträge anzeigen“. */
|
||||
export const MAX_AUFTRAEGE = 5
|
||||
/** So viele Zeilen der Zeitleiste stehen offen, der Rest hinter „mehr anzeigen“. */
|
||||
export const MAX_ZEILEN = 3
|
||||
const MAX_KURZTEXT = 90
|
||||
|
||||
/* ---------------------------------------------------------------- Fortschritt --- */
|
||||
|
||||
/** Die vier Abschnitte des Balkens: erreicht bis zum aktuellen Stand; Stufe 0 (pausiert, storniert) und Unbekanntes erreichen nichts. */
|
||||
export function fortschritt(status) {
|
||||
const schritt = Number(status?.step)
|
||||
const gueltig = Number.isInteger(schritt) && schritt >= 1 && schritt <= STUFEN.length
|
||||
return STUFEN.map((name, i) => ({ name, erreicht: gueltig && i < schritt, aktuell: gueltig && i === schritt - 1 }))
|
||||
}
|
||||
|
||||
/** Braucht der Auftrag eine Info vom Kunden? Der Server meldet das mit dem Ton „waiting“ (Ticketstatus „awaiting“, „Wartet auf deine Rückmeldung“). */
|
||||
export const braucheInfo = (auftrag) => auftrag?.status?.tone === 'waiting'
|
||||
|
||||
/* ---------------------------------------------------------- Reihenfolge, Kürzen --- */
|
||||
|
||||
const eintraegeVon = (auftrag) => (Array.isArray(auftrag?.entries) ? auftrag.entries.filter((e) => e && typeof e === 'object') : [])
|
||||
|
||||
// 'JJJJ-MM-TT' (auch als Anfang eines ISO-Zeitpunkts) → { j, m, t } ohne Zeitzonen-Umrechnung; sonst null
|
||||
function tagTeile(wert) {
|
||||
const treffer = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(wert ?? ''))
|
||||
if (!treffer) return null
|
||||
const [j, m, t] = [Number(treffer[1]), Number(treffer[2]), Number(treffer[3])]
|
||||
return m >= 1 && m <= 12 && t >= 1 && t <= 31 ? { j, m, t } : null
|
||||
}
|
||||
|
||||
const zweistellig = (zahl) => String(zahl).padStart(2, '0')
|
||||
const isoTag = (wert) => { const tag = tagTeile(wert); return tag ? `${tag.j}-${zweistellig(tag.m)}-${zweistellig(tag.t)}` : '' }
|
||||
|
||||
/** Zeitpunkt der jüngsten Aktivität (ms): der späteste Eintrag oder die Anlage des Auftrags; 0, wenn nichts lesbar ist. */
|
||||
export function letzteAktivitaet(auftrag) {
|
||||
const zeiten = [Date.parse(String(auftrag?.createdAt ?? '')), ...eintraegeVon(auftrag).map((e) => { const tag = isoTag(e.date); return tag ? Date.parse(`${tag}T00:00:00Z`) : NaN })]
|
||||
return Math.max(0, ...zeiten.filter((zeit) => Number.isFinite(zeit)))
|
||||
}
|
||||
|
||||
// 0 = laufend (auch pausiert), 1 = erledigt, 2 = storniert oder abgebrochen
|
||||
const rang = (auftrag) => (auftrag?.status?.tone === 'done' ? 1 : auftrag?.status?.tone === 'stopped' ? 2 : 0)
|
||||
|
||||
/** Laufende Aufträge zuerst, dann erledigte, Storniertes zuletzt; innerhalb jeder Gruppe die jüngste Aktivität vorn, bei Gleichstand die Reihenfolge des Servers. */
|
||||
export function sortiereAuftraege(tickets) {
|
||||
const liste = Array.isArray(tickets) ? tickets.filter((t) => t && typeof t === 'object') : []
|
||||
return liste
|
||||
.map((auftrag, i) => ({ auftrag, i, rang: rang(auftrag), zeit: letzteAktivitaet(auftrag) }))
|
||||
.sort((a, b) => a.rang - b.rang || b.zeit - a.zeit || a.i - b.i)
|
||||
.map((e) => e.auftrag)
|
||||
}
|
||||
|
||||
/** Die ersten n sichtbar, der Rest getrennt; die Eingabe bleibt unverändert. */
|
||||
export function kuerze(liste, max) {
|
||||
const alle = Array.isArray(liste) ? liste : []
|
||||
return { sichtbar: alle.slice(0, max), rest: alle.slice(max) }
|
||||
}
|
||||
|
||||
/** Sortierte Aufträge: höchstens max offen, der Rest als „älter“. */
|
||||
export function gruppiereAuftraege(tickets, max = MAX_AUFTRAEGE) {
|
||||
const { sichtbar, rest } = kuerze(sortiereAuftraege(tickets), max)
|
||||
return { sichtbar, aeltere: rest }
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- Zeitleiste --- */
|
||||
|
||||
/** 'TT.MM.' für einen Tag 'JJJJ-MM-TT'; fällt er nicht ins laufende Jahr, steht 'TT.MM.JJ' da. Unlesbares ergibt ''. */
|
||||
export function datumKurz(wert, jetzt = new Date()) {
|
||||
const tag = tagTeile(wert)
|
||||
if (!tag) return ''
|
||||
const laufend = berlinTag(jetzt)?.j ?? jetzt.getUTCFullYear()
|
||||
const jahr = tag.j === laufend ? '' : zweistellig(tag.j % 100)
|
||||
return `${zweistellig(tag.t)}.${zweistellig(tag.m)}.${jahr}`
|
||||
}
|
||||
|
||||
// erste nichtleere Zeile, Leerraum zusammengezogen
|
||||
const ersteZeile = (text) => String(text ?? '').split(/\r?\n/).map((zeile) => zeile.replace(/\s+/g, ' ').trim()).find(Boolean) ?? ''
|
||||
|
||||
function kuerzeText(text, max) {
|
||||
if (text.length <= max) return text
|
||||
const schnitt = text.slice(0, max)
|
||||
const leer = schnitt.lastIndexOf(' ')
|
||||
return `${(leer > max * 0.6 ? schnitt.slice(0, leer) : schnitt).replace(/[\s,;:.–-]+$/, '')}…`
|
||||
}
|
||||
|
||||
/** Kurzer Text einer Zeile: die erste Änderung (mit „und n weitere“), sonst der freie Text der Arbeit, sonst die Art der Arbeit. Nie lang, nie ein Name. */
|
||||
export function eintragsKurztext(eintrag) {
|
||||
const aenderungen = Array.isArray(eintrag?.changes) ? eintrag.changes.map(ersteZeile).filter(Boolean) : []
|
||||
if (aenderungen.length) {
|
||||
const rest = aenderungen.length - 1
|
||||
const erste = kuerzeText(aenderungen[0], MAX_KURZTEXT)
|
||||
return rest ? `${erste} und ${rest} weitere ${rest === 1 ? 'Änderung' : 'Änderungen'}` : erste
|
||||
}
|
||||
return kuerzeText(ersteZeile(eintrag?.text), MAX_KURZTEXT) || ersteZeile(eintrag?.label) || 'Arbeit am Projekt'
|
||||
}
|
||||
|
||||
/** Zeilen der Zeitleiste eines Auftrags, neueste zuerst; Einträge ohne lesbares Datum stehen unten. */
|
||||
export function zeitleistenZeilen(auftrag, jetzt = new Date()) {
|
||||
return eintraegeVon(auftrag)
|
||||
.map((e, i) => ({ i, iso: isoTag(e.date), datum: datumKurz(e.date, jetzt), text: eintragsKurztext(e) }))
|
||||
.sort((a, b) => (a.iso === b.iso ? a.i - b.i : !a.iso ? 1 : !b.iso ? -1 : b.iso.localeCompare(a.iso)))
|
||||
.map(({ datum, iso, text }) => ({ datum, iso, text }))
|
||||
}
|
||||
Reference in new issue
Block a user