From 2a310137a26ec8c56d077ce7bf3792a87ad86a10 Mon Sep 17 00:00:00 2001 From: JiriUhlir <149317995+JiriUhlir@users.noreply.github.com> Date: Wed, 2 Sep 2026 12:29:18 +0200 Subject: [PATCH] Detail ticketu ma rozradovace, ne tri karty pod sebou MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Navrh v documentation/25 mel detail jako jednu slozku s rozradovaci, ale v aplikaci zustaly tri karty pod sebou: obsah, prichozi udalosti a log prubehu. Detail byl tri obrazovky dlouhy a to podstatne, tedy obsah pozadavku, se v tom ztracelo. Ted jsou to listy jedne karty: - Pozadavek - obsah a pole na komentar, vychozi - Log prubehu - co delala automatizace a co ji sluzby vratily - Udalosti - co presne prislo zvenku - Vlastni pole - hodnoty poli typu ticketu U kazdeho je pocet, takze je videt, jestli se tam vubec vyplati kliknout. Vlastni pole se nenabizeji, kdyz zadna nejsou - prazdny rozradovac je jen dalsi vec k prehlednuti. Vychozi je vzdycky Pozadavek: to je duvod, proc clovek ticket otevrel. Log a udalosti jsou hloubkova data, na ta se sahá, az kdyz neco nesedi. Vlastni pole se do te doby nedala zobrazit vubec, i kdyz je ticket nesl - to je ten ctvrty rozradovac. Kresli je tatáz tabulka jako obsah ticketu (DataTable v TicketBody.tsx), takze se struktura vsude vypisuje stejne. Rozradovace pouzivaji tentyz vzhled zalozek jako zbytek portalu, ne tvar slozky z navrhu. Druhy styl zalozek na jedne obrazovce je presne ten drift, ktery jsme uklizeli u vstupnich poli. Overeno na bezici instanci: ticket z automatizace ma 5 kroku logu, 2 udalosti a zadna vlastni pole, takze se ctvrty rozradovac skryje. Co-Authored-By: Claude Opus 5 (1M context) --- documentation/99-zmeny.md | 31 +++ web/src/components/dashboard/TicketBody.tsx | 2 +- web/src/pages/dashboard/TicketDetail.tsx | 212 ++++++++++++++------ 3 files changed, 178 insertions(+), 67 deletions(-) diff --git a/documentation/99-zmeny.md b/documentation/99-zmeny.md index b1db969..c2f330f 100644 --- a/documentation/99-zmeny.md +++ b/documentation/99-zmeny.md @@ -2,6 +2,37 @@ Nejnovejsi nahore. +## 2026-09-02 - Detail ticketu ma rozradovace, ne tri karty pod sebou + +Navrh v [25](25-navrh-pristupny-portal.md) mel detail jako jednu slozku +s rozradovaci, ale v aplikaci zustaly tri karty pod sebou: obsah, prichozi +udalosti a log prubehu. Detail byl tri obrazovky dlouhy a to podstatne, tedy +obsah pozadavku, se v tom ztracelo. + +Ted jsou to listy jedne karty: + +| Rozradovac | Co je na nem | +| ------------ | ------------------------------------------------- | +| Požadavek | obsah a pole na komentar, vychozi | +| Log průběhu | co delala automatizace a co ji sluzby vratily | +| Události | co presne prislo zvenku | +| Vlastní pole | hodnoty poli typu ticketu | + +U kazdeho je pocet, takze je videt, jestli se tam vubec vyplati kliknout. +**Vlastni pole se nenabizeji, kdyz zadna nejsou** - prazdny rozradovac je jen +dalsi vec k prehlednuti. + +Vychozi je vzdycky Pozadavek: to je duvod, proc clovek ticket otevrel. Log +a udalosti jsou hloubkova data, na ta se sahá, az kdyz neco nesedi. + +Vlastni pole se do te doby nedala zobrazit vubec, i kdyz je ticket nesl - to +je ten ctvrty rozradovac. Kresli je tatáz tabulka jako obsah ticketu +(`DataTable` v `TicketBody.tsx`), takze se struktura vsude vypisuje stejne. + +Rozradovace pouzivaji **tentyz vzhled zalozek jako zbytek portalu**, ne tvar +slozky z navrhu. Druhy styl zalozek na jedne obrazovce je presne ten drift, +ktery jsme uklizeli u vstupnich poli. + ## 2026-09-02 - Hierarchie firmy: kdo co vidi, a zalozka Firma Pohled na celou firmu dostal kazdy, kdo do ni patril: `scopes.push('tenant')` diff --git a/web/src/components/dashboard/TicketBody.tsx b/web/src/components/dashboard/TicketBody.tsx index 1206953..6555f6f 100644 --- a/web/src/components/dashboard/TicketBody.tsx +++ b/web/src/components/dashboard/TicketBody.tsx @@ -113,7 +113,7 @@ export function TicketBody({ body, sourceRef }: { body: string; sourceRef?: stri * porovnavaji mezi sebou. Vsechno ostatni je dvojice klic a hodnota - u jedne * struktury nikdo nesrovnava sloupce, cte se shora dolu. */ -function DataTable({ value }: { value: unknown }) { +export function DataTable({ value }: { value: unknown }) { if (Array.isArray(value) && value.length > 0 && value.every(isPlainObject)) { const columns = [...new Set(value.flatMap((row) => Object.keys(row)))]; return ( diff --git a/web/src/pages/dashboard/TicketDetail.tsx b/web/src/pages/dashboard/TicketDetail.tsx index a40399a..07d2109 100644 --- a/web/src/pages/dashboard/TicketDetail.tsx +++ b/web/src/pages/dashboard/TicketDetail.tsx @@ -18,7 +18,7 @@ import { TicketStatusBadge, } from '@/components/dashboard/StatusBadge'; import { TicketActions } from '@/components/dashboard/TicketActions'; -import { TicketBody } from '@/components/dashboard/TicketBody'; +import { DataTable, TicketBody } from '@/components/dashboard/TicketBody'; import { TicketEvents } from '@/components/dashboard/TicketEvents'; import { TicketTrace, TraceSummary } from '@/components/dashboard/TicketTrace'; import { Badge } from '@/components/ui/Badge'; @@ -98,6 +98,34 @@ export default function TicketDetail() { */ const [statusDraft, setStatusDraft] = useState(null); + /** + * Ktery list detailu je navrchu. + * + * Vychozi je vzdycky pozadavek: to je duvod, proc clovek ticket otevrel. + * Log a udalosti jsou hloubkova data, na ta se sahá, az kdyz neco nesedi. + */ + const [activeSheet, setSheet] = useState('pozadavek'); + + const fieldCount = Object.keys(ticket.data?.fields ?? {}).length; + + /** Rozradovace. Vlastni pole se nenabizeji, kdyz zadna nejsou. */ + const sheets = [ + { key: 'pozadavek', label: 'Požadavek', count: undefined, show: true }, + { + key: 'log', + label: 'Log průběhu', + count: ticket.data?.trace.length ?? 0, + show: true, + }, + { + key: 'udalosti', + label: 'Události', + count: ticket.data?.events.length ?? 0, + show: true, + }, + { key: 'pole', label: 'Vlastní pole', count: fieldCount, show: fieldCount > 0 }, + ].filter((sheet) => sheet.show); + usePageMeta({ title: `${ticket.data ? ticket.data.id : 'Ticket'}`, area: 'portal' }); // Po zmene ticketu zmizi stara chyba, at nevisi u uz opraveneho stavu. @@ -194,74 +222,126 @@ export default function TicketDetail() {
-
-
-

- - Obsah požadavku -

-
- -
-
- -
-
-

- - Příchozí události -

- - {ticket.data.events.length} - {ticket.data.externalId - ? ` k externímu ID ${ticket.data.externalId}` - : ''} - -
- -
- -
-
-

- - Průběh a log -

- + {/* + Rozradovace misto tri karet pod sebou. Log prubehu a prichozi + udalosti jsou hloubkova data: dulezita, ale ne pokazde. Kdyz + stály na strance vsechny naraz, byl detail tri obrazovky dlouhy + a to podstatne, tedy obsah pozadavku, se v tom ztracelo. + */} +
+
+ {sheets.map((sheet) => ( + + ))}
- +
+ {activeSheet === 'pozadavek' && ( + <> +

+ + Obsah požadavku +

+
+ +
-
void submitComment(event)} - className="mt-5 border-t border-ink-600/50 pt-5" - > - -
- setComment(event.target.value)} - placeholder="Co jste zjistili nebo udělali..." - className="min-w-0 flex-1 rounded-xl border border-ink-600/70 bg-ink-850/70 px-3.5 py-2.5 text-sm text-white placeholder:text-white/30 focus:border-brand-400/70 focus:outline-none" - /> - -
-

- Komentář se zapíše do stejné časové osy jako běh automatizace. -

-
+
void submitComment(event)} + className="mt-5 border-t border-ink-600/50 pt-5" + > + +
+ setComment(event.target.value)} + placeholder="Co jste zjistili nebo udělali..." + className="min-w-0 flex-1 rounded-xl border border-ink-600/70 bg-ink-850/70 px-3.5 py-2.5 text-sm text-white placeholder:text-white/30 focus:border-brand-400/70 focus:outline-none" + /> + +
+

+ Komentář se zapíše do stejné časové osy jako běh automatizace. +

+
+ + )} + + {activeSheet === 'log' && ( + <> +
+

+ + Průběh a log +

+ +
+ + + )} + + {activeSheet === 'udalosti' && ( + <> +
+

+ + Příchozí události +

+ + {ticket.data.externalId + ? `k externímu ID ${ticket.data.externalId}` + : ''} + +
+ + + )} + + {activeSheet === 'pole' && ( + <> +

+ + Vlastní pole typu +

+

+ Klíče se sčítají, další zpráva o téže věci je jen doplní. +

+ + + )}