Conversation
|
The preview deployment for Eventownik Frontend Preview is ready. 🟢 Open Preview | Open Build Logs | Open Application Logs Last updated at: 2026-04-02 18:39:34 CET |
maciejkrol18
changed the title
There was a problem hiding this comment.
Infinite scroll: Nie wykorzystujemy wirtualizacji. Gdy powiedzmy że załadowanych jest wszystkich 500 wierszy to wydajność resizingu kolumn bardzo cierpi. Choć ogólnie z taką ilością wierszy scrollowanie działa płynnie, no to właśnie przy resizingu zaczyna się wszystko zacinać. Chciałbym zobaczyć refaktor z użyciem TanStack Virtual - powinno pomóc.
UI: Nie ma fade outu na ostatnim widocznym rzędzie jak na designie.
Konflikty: Trzeba rozwiązać.
| useEffect(() => { | ||
| if (!isEditing) { | ||
| return; | ||
| } | ||
| function handleKeyDown(e: KeyboardEvent) { | ||
| if (e.key === "Escape") { | ||
| cancelEdit(); | ||
| } | ||
| } | ||
| document.addEventListener("keydown", handleKeyDown); | ||
| return () => { | ||
| document.removeEventListener("keydown", handleKeyDown); | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [isEditing]); |
There was a problem hiding this comment.
- Zamysł jest spoko ale teraz jeśli kilka rzędów jest w trybie edycji to escape zamyka każdy a nie ten, który jest aktywny
- Musi być możliwość anulowania edycji również przez kliknięcie w jakiś przycisk (chociażby przez to że teraz nie ma jak anulować edycji na telefonie). Spróbowałbym w miejscu aktualnego przycisku z save'em zrobić dwa wąskie przyciski nad sobą pt. "Zapisz" i "Anuluj" z odpowiednio ikonką zapisu i x'em
| } else { | ||
| toast({ | ||
| variant: "destructive", | ||
| title: t("bulkEditError"), | ||
| }); | ||
| } |
There was a problem hiding this comment.
Dobrze by było tutaj też wykorzystać failedCount i poinformować użytkownika ilu ze wszystkich wybranych uczestników nie zaktualizowało się
| const editColumn = columnHelper.display({ | ||
| id: "edit", | ||
| cell: ({ row, table }) => <EditParticipantButton row={row} table={table} />, | ||
| size: 48, | ||
| minSize: 48, | ||
| maxSize: 48, | ||
| enableSorting: false, | ||
| enableHiding: false, | ||
| enableResizing: false, | ||
| }); |
There was a problem hiding this comment.
Ta kolumna powinna być widoczna cały czas tak jak było to zrobione w dotychczasowej implementacji, tzn. nie powinno być trzeba scrollować w bok do końca tabeli w przypadku posiadania wielu kolumn po to, żeby kogoś zedytować.
Przed dojściem scrolla do końca przycisk ma lewitować nad innymi kolumnami a po dojechaniu do końca ma być jak zwykła kolumna, jak na screenie:
src/hooks/use-participants-table.ts
Outdated
| setColumnOrder(JSON.parse(stored) as string[]); | ||
| } | ||
| } catch { | ||
| // ignore |
There was a problem hiding this comment.
Można by było dodać przynajmniej toast że nie udało się przywrócić kolejności kolumn
| <InputGroupInput | ||
| placeholder={t("searchPlaceholder")} | ||
| value={globalFilter} | ||
| onChange={(event) => { | ||
| table.setGlobalFilter(event.target.value); | ||
| }} | ||
| /> |
There was a problem hiding this comment.
Tło inputu nie pokrywa się z resztą inputów w aplikacji
| if (success) { | ||
| toast({ | ||
| title: "Zapisano zmiany w uczestniku", | ||
| }); | ||
| table.options.meta?.updateData(row.index, { | ||
| ...participant, | ||
| mode: "view", | ||
| }); | ||
| } else { | ||
| toast({ | ||
| variant: "destructive", | ||
| title: "Nie udało się zapisać zmian w uczestniku!", | ||
| }); | ||
| } | ||
| } |
There was a problem hiding this comment.
Jeśli dobrze rozumiem, ten komponent zastąpił table-row-form.tsx.
- Myląca nazwa: "Przycisk edycji" brzmi dla mnie jakby tylko kontrolował stan edit mode'a, a równocześnie kontroluje jeszcze wysyłkę danych na backend. Myślę że coś z "form" byłoby lepsze, np. "EditParticipantForm"
- Nie ma żadnego alertu o niezapisanych zmianach - można wejść w tryb edycji, coś powpisywać w inputy i anulować zmiany bez żadnego alertu. Trzeba to przywrócić
| {sorted === "asc" && <ArrowUp />} | ||
| {sorted === "desc" && <ArrowDown />} |
There was a problem hiding this comment.
Ikonki sortowania mogą zniknąć jeśli wystarczająco zmniejszy się szerokość kolumny z aktywnym sortowaniem. Ikonka powinna mieć "przewagę" nad tekstem, tzn. to tekst powinien zanikać wraz ze zmniejszem szerokości zamiast ikony, tak aby było cały czas wiadomo jakie sortowanie jest aktywne
| minWidth: cell.column.getSize(), | ||
| maxWidth: cell.column.getSize(), | ||
| }} | ||
| className="overflow-hidden text-ellipsis whitespace-nowrap" |
There was a problem hiding this comment.
Nie możemy całkowicie ukrywać długich wartości - z aktualną implementacją przeglądanie takiego eventu jak rekrutacja byłoby niemożliwe. Ewentualnie dałoby się wszędzie włączyć edycje żeby móc porównywać np. dwa bloki tekstu ale wtedy istnieje ryzyko przypadkowej edycji itd.
Alternatywne rozwiązanie jeszcze do ustalenia - na teraz w przypadku długich tekstów mają zostać wysokie wiersze tak jak to działa teraz na prodzie
| /> | ||
| <InputGroup className="h-10 w-64"> | ||
| <InputGroupInput | ||
| placeholder={t("searchPlaceholder")} |
There was a problem hiding this comment.
Nigdzie nie widać łącznej liczby uczestników w tabeli. Dotychczas było to obok selektora ilości wierszy na stronę (w usuniętym table-pagination.tsx), ale teraz nie ma nigdzie. Proponuję zrobić dynamiczny placeholder na search barze gdzie byłoby "Szukaj {liczba} uczestników..."
…ticipants in table
ShadowCatP
force-pushed
the
feature/participants-table-redesign
branch
from
be6b54b to
57ba630
Compare
2 participants
I still need to adjust css style of things, but the functionality is finished. Also Imo participant details page should be moved to a separate issue, because there is still not enough info on how it will function and it is strictly related to the table itself.