ulinja/fastapi-svelte-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(frontend): make data-table fully responsive

Browse source
This commit is contained in:
Julian Lobbes 2023-06-02 13:08:40 +01:00
parent 2882db284d
commit b3d291c3ee
9 changed files with 325 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/docs/theme/colorscheme.gpl vendored
View file

@ -42,3 +42,6 @@ Columns: 1
163 163 163 background-700
112 112 112 background-800
51 51 51 background-900
0 204 0 success
237 192 0 warning
228 0 0 failure

63
frontend/src/app.css
View file

@ -70,7 +70,36 @@
}
button:disabled {
@apply opacity-25;
@apply bg-neutral-100;
@apply cursor-not-allowed;
}
button:disabled:hover {
@apply bg-accent;
@apply text-primary-400 font-semibold;
@apply cursor-not-allowed;
}
button.outlineButton {
@apply bg-secondary/20;
@apply border-2 border-secondary;
@apply text-secondary font-medium;
}
button.outlineButton:hover {
@apply bg-secondary;
@apply text-secondary-900 font-bold;
}
button.outlineButton:active {
@apply bg-secondary-600;
@apply text-secondary-900;
}
button.outlineButton:focus {
@apply ring-secondary-400;
}
button.outlineButton:disabled {
@apply opacity-25;
}
button.outlineButton:disabled:hover {
@apply bg-secondary/20;
@apply text-secondary font-medium;
@apply cursor-not-allowed;
}
a.button {
@apply p-2;
@ -114,24 +143,27 @@
tr:last-of-type td:last-of-type {
@apply rounded-br-md;
}
tr {
@apply hover:bg-secondary-300/50;
@apply border-y border-primary/50;
@apply bg-secondary-100/10;
}
tr:first-of-type, tr:last-of-type {
@apply border-y-0;
}
tr:nth-child(odd) {
@apply bg-secondary/5;
}
tr:nth-child(even) {
@apply bg-secondary/20;
}
tr {
@apply hover:bg-accent/25;
}
th {
@apply bg-primary font-semibold text-secondary-100;
}
caption, th, td {
@apply p-1;
}
@media screen(sm) {
caption, th, td {
@apply p-2 text-start;
}
td {
@apply p-1;
}
caption {
@apply p-1 text-start font-semibold text-xl;
}
fieldset {
@ -158,4 +190,11 @@
label {
@apply text-sm text-secondary font-light;
}
select {
@apply text-primary font-semibold;
@apply border border-secondary;
@apply bg-secondary/20;
@apply rounded-md;
@apply p-1;
}
}

219
frontend/src/lib/components/data-table/Table.svelte
View file

@ -31,17 +31,34 @@
args: [],
}
export let defaultSortField: string = columns[0].field;
export let defaultSortOrder: 'asc' | 'desc' = 'asc';
let viewportWidth: number = 0;
let table: Element;
let tableMaxWidth: number = 0;
let compactView = false;
function checkForTableResize() {
if (!table) return;
if (table.scrollWidth > tableMaxWidth) {
tableMaxWidth = table.scrollWidth;
}
compactView = tableMaxWidth >= viewportWidth;
}
type SortEvent = {
detail: {
order: null | 'asc' | 'desc',
field: string,
}
}
let currentSortField: string = columns[0].field;
let currentSortOrder: 'asc' | 'desc' = 'asc';
let currentSortField: string = defaultSortField;
let currentSortOrder: 'asc' | 'desc' = defaultSortOrder;
let currentState: 'finished' | 'loading' | 'error' = 'finished';
let errorMessages: string[] = [];
let errorMessage: string;
let currentItems: any[] = []; // TODO apply generics here
let totalItemCount: number | null = null;
@ -134,15 +151,12 @@
);
currentState = 'finished';
} catch (error: any) {
if (!errorMessages.length) {
// Make sure we have an error message to show to the user
if (typeof error.message === 'string') {
errorMessages.push(error.message);
} else {
errorMessages.push("An unknown error occurred.");
}
if (typeof error.body.message === 'string') {
errorMessage = error.body.message;
} else {
errorMessage = "An unknown error occurred.";
}
console.log(error)
currentState = 'error';
}
}
@ -155,73 +169,140 @@
}
onMount(async () => {
checkForTableResize();
await updateTable();
checkForTableResize();
});
</script>
<table>
{#if caption !== null}
<caption>{caption}</caption>
{/if}
<thead>
<tr>
<svelte:window bind:outerWidth={viewportWidth} on:resize={checkForTableResize} />
<div id="table-container"
class="flex flex-col items-center gap-2"
class:compact-view={compactView}
class:extended-view={!compactView}
>
<table
bind:this={table}
>
{#if caption !== null}
<caption>{caption}</caption>
{/if}
{#if compactView}
<div class="table-controls m-2">
<span>Sort by:</span>
<select bind:value={currentSortField} on:change={updateTable} class="mr-2">
{#each columns as column}
<Th
on:sortEvent={handleSortEvent}
field={column.field}
heading={column.heading}
order={currentSortField === column.field ? currentSortOrder : null}
sortable={column.sortable ?? true}
/>
<option selected={column.field === currentSortField} value={column.field}>{column.heading}</option>
{/each}
</tr>
</thead>
<tbody>
{#if currentState === 'finished'}
{#each currentItems as item}
</select>
<span>Order:</span>
<select bind:value={currentSortOrder} on:change={updateTable}>
<option selected={currentSortOrder === 'asc'} value={'asc'}>Ascending</option>
<option selected={currentSortOrder === 'desc'} value={'desc'}>Descending</option>
</select>
</div>
{/if}
{#if !compactView}
<thead>
<tr>
{#each columns as column}
<Td
data={item[column.field]}
type={column.type ?? 'string'}
isLink={column.isLink ?? false}
linkTarget={i(column.linkTarget, item) ?? ''}
<Th
on:sortEvent={handleSortEvent}
field={column.field}
heading={column.heading}
order={currentSortField === column.field ? currentSortOrder : null}
sortable={column.sortable ?? true}
/>
{/each}
</tr>
{/each}
{:else if currentState === 'loading'}
<tr>
<td colspan={columns.length}>Loading...</td>
</tr>
{:else if currentState === 'error'}
{#each errorMessages as message}
<tr>
<td colspan={columns.length} class="text-center text-red-500">{message}</td>
</tr>
{/each}
</thead>
{/if}
</tbody>
</table>
<button on:click={handleGotoFirstPage} disabled={gotoFirstPageDisabled}>
<Icon src={ChevronDoubleLeft} mini class="w-6 h-6" />
</button>
<button on:click={handleGotoPrevPage} disabled={gotoPrevPageDisabled}>
<Icon src={ChevronLeft} mini class="w-6 h-6" />
</button>
<input
type=number bind:value={selectedCurrentPage} min=0 max={lastPage} disabled={lastPage === 0}
on:change={handleCurrentPageInputChanged} on:focus={handleCurrentPageInputFocussed}
>
<span>of {lastPage + 1}</span>
<button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled}>
<Icon src={ChevronRight} mini class="w-6 h-6" />
</button>
<button on:click={handleGotoLastPage} disabled={gotoLastPageDisabled}>
<Icon src={ChevronDoubleRight} mini class="w-6 h-6" />
</button>
<select bind:value={selectedItemsPerPage} on:change={handleItemsPerPageChange}>
{#each itemsPerPageOptions as option}
<option selected={option === currentItemsPerPage} value={option}>{option}</option>
{/each}
</select>
<tbody
class:compact-view={compactView}
class:extended-view={!compactView}
>
{#if currentState === 'finished'}
{#each currentItems as item}
<tr>
{#each columns as column}
<Td
fieldName={column.heading}
data={item[column.field]}
type={column.type ?? 'string'}
isLink={column.isLink ?? false}
linkTarget={i(column.linkTarget, item) ?? ''}
compactView={compactView}
/>
{/each}
</tr>
{/each}
{:else if currentState === 'loading'}
<tr>
<td colspan={columns.length}>Loading...</td>
</tr>
{:else if currentState === 'error'}
<tr>
<td colspan={columns.length} class="text-center text-failure font-bold">{errorMessage}</td>
</tr>
{/if}
</tbody>
</table>
<div class="table-controls">
<label for="itemsPerPageSelector" class="text-lg">Items per page</label>
<select id="itemsPerPageSelector" bind:value={selectedItemsPerPage} on:change={handleItemsPerPageChange} class="mr-2">
{#each itemsPerPageOptions as option}
<option selected={option === currentItemsPerPage} value={option}>{option}</option>
{/each}
</select>
<span>Total: <b>{totalItemCount}</b></span>
</div>
<div class="table-controls">
<button on:click={handleGotoFirstPage} disabled={gotoFirstPageDisabled} class="outlineButton">
<Icon src={ChevronDoubleLeft} mini class="w-6 h-6" />
</button>
<button on:click={handleGotoPrevPage} disabled={gotoPrevPageDisabled} class="outlineButton">
<Icon src={ChevronLeft} mini class="w-6 h-6" />
</button>
<label for="currentPageNumberInput" class="text-lg">Page</label>
<input id="currentPageNumberInput"
type=number bind:value={selectedCurrentPage} min=0 max={lastPage} disabled={lastPage === 0}
on:change={handleCurrentPageInputChanged} on:focus={handleCurrentPageInputFocussed}
class="text-center"
>
<span>of {lastPage + 1}</span>
<button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled} class="outlineButton">
<Icon src={ChevronRight} mini class="w-6 h-6" />
</button>
<button on:click={handleGotoLastPage} disabled={gotoLastPageDisabled} class="outlineButton">
<Icon src={ChevronDoubleRight} mini class="w-6 h-6" />
</button>
</div>
</div>
<style>
option {
@apply text-center;
}
#table-container.compact-view {
@apply max-w-fit;
@apply p-4;
}
#table-container.extended-view {
@apply max-w-max;
}
.compact-view caption {
@apply text-center;
}
.compact-view tr {
@apply border border-primary;
}
div.table-controls {
@apply flex gap-1 items-center justify-center;
}
.table-controls span {
@apply text-lg text-secondary font-light;
}
</style>

82
frontend/src/lib/components/data-table/Td.svelte
View file

@ -1,30 +1,76 @@
<script lang="ts">
import { Icon, Check, XMark } from 'svelte-hero-icons';
import { Icon, Check, Minus, XMark } from 'svelte-hero-icons';
export let fieldName: string;
export let data: any;
export let type: 'string' | 'date' | 'boolean' = 'string';
export let type: 'string' | 'date' | 'number' | 'boolean' = 'string';
export let isLink: boolean = false;
export let linkTarget: string = "";
export let compactView = false;
$: extendedView = !compactView;
</script>
<td>
{#if type === 'date'}
{#if data !== null && data !== undefined}
{new Date(data).toLocaleDateString()}
{:else}
<!-- date undefined -->
{/if}
{:else if type === 'boolean'}
{#if data}
<Icon src={Check} mini class="w-6 h-6" />
{:else}
<Icon src={XMark} mini class="w-6 h-6" />
{/if}
<td
class:compact-view={compactView}
class:extended-view={extendedView}
class:boolean-data={type === 'boolean'}
class:string-data={type === 'string'}
class:number-data={type === 'number'}
class:date-data={type === 'date'}
class:empty-data={data === null || data === undefined}
>
{#if compactView}
<p class="field-name">{fieldName}:</p>
{/if}
{#if data === null || data === undefined}
<Icon src={Minus} mini class="field-data w-6 h-6 text-primary/40" />
{:else}
{#if isLink}
<a href={linkTarget}>{data}</a>
{#if type === 'date'}
<p class="field-data">{new Date(data).toLocaleDateString()}</p>
{:else if type === 'boolean'}
{#if data}
<Icon src={Check} mini class="field-data w-6 h-6 text-success/50" />
{:else}
<Icon src={XMark} mini class="field-data w-6 h-6 text-failure/50" />
{/if}
{:else}
{data}
{#if isLink}
<a href={linkTarget} class="field-data">{data}</a>
{:else}
<p class="field-data">{data}</p>
{/if}
{/if}
{/if}
</td>
<style>
td.compact-view {
@apply grid grid-cols-2 items-center justify-start gap-x-2;
}
.compact-view .field-name {
@apply text-primary/50 font-light;
@apply text-end;
}
.compact-view .field-data {
@apply truncate;
@apply font-medium;
}
td.compact-view.date-data .field-data, td.compact-view.number-data .field-data {
@apply text-start;
}
td.extended-view {
@apply table-cell;
}
td.extended-view.boolean-data, td.extended-view.empty-data {
@apply flex justify-center;
}
td.extended-view.date-data .field-data, td.extended-view.number-data .field-data {
@apply text-end;
}
</style>

64
frontend/src/lib/components/navbar/Navbar.svelte
View file

@ -29,7 +29,7 @@
}
</script>
<svelte:window bind:outerWidth={viewportWidth}/>
<svelte:window bind:outerWidth={viewportWidth} />
<nav
class="sticky top-0 transition-transform ease-linear z-40"
@ -37,15 +37,8 @@
bind:clientHeight={currentHeight}
>
{#if !largeScreen}
<div id="navHead"
class="flex"
class:smallScreen={!largeScreen}
>
<a
href="/"
on:click={closeMenu}
class="group"
>
<div id="navHead" class="flex" class:smallScreen={!largeScreen}>
<a href="/" on:click={closeMenu} class="group">
<img
src="/images/common/logo.svg"
alt="Dewit Logo"
@ -71,41 +64,16 @@
</a>
{/if}
{#if user}
<a
href={`/users/${user.id}/todos`}
on:click={closeMenu}
>
Todos
</a>
<a
href={`/users/${user.id}`}
on:click={closeMenu}
>
My Profile
</a>
<a href={`/users/${user.id}`} on:click={closeMenu}>Profile</a>
<a href={`/users/${user.id}/todos`} on:click={closeMenu}>Todos</a>
{#if user.isAdmin}
<a
href={`/users/all`}
on:click={closeMenu}
>
All Users
</a>
<a href={`/users/all`} on:click={closeMenu}>All Users</a>
{/if}
{#if largeScreen}<div class="grow" aria-hidden />{/if}
<button
class="outlineButton"
on:click={handleLogout}
>
Log Out
</button>
<button class="outlineButton" on:click={handleLogout}>Log Out</button>
{:else}
{#if largeScreen}<div class="grow" aria-hidden />{/if}
<a
href="/login"
on:click={closeMenu}
>
Log In
</a>
<a href="/login" on:click={closeMenu}>Log In</a>
{/if}
</div>
{/if}
@ -132,20 +100,4 @@
.navbarHidden {
@apply -translate-y-full;
}
.outlineButton {
@apply bg-primary-400/50;
@apply border-2 border-secondary;
@apply text-secondary font-medium;
}
.outlineButton:hover {
@apply bg-secondary;
@apply text-secondary-900 font-bold;
}
.outlineButton:active {
@apply bg-secondary-600;
@apply text-secondary-900;
}
.outlineButton:focus {
@apply ring-secondary-400;
}
</style>

8
frontend/src/routes/+layout.svelte
View file

@ -28,7 +28,6 @@
import { loadUserIntoStore } from '$lib/auth/session';
import Navbar from '$lib/components/navbar/Navbar.svelte';
import Footer from '$lib/components/footer/Footer.svelte';
import { slide } from 'svelte/transition';
export let title = import.meta.env.PUBLIC_TITLE;
export let description = import.meta.env.PUBLIC_DESCRIPTION;
@ -40,9 +39,10 @@
let lastKnownScrollPosY = 0;
const navbarToggleThreshold = 32;
let navbarHeight: number;
let viewportWidth: number;
function handleScroll(event: Event): void {
if (window.scrollY <= navbarHeight) {
if (viewportWidth >= 640 || window.scrollY <= navbarHeight) {
navbarHidden = false;
} else {
let scrollDistance = Math.abs(window.scrollY - lastKnownScrollPosY);
@ -65,10 +65,10 @@
});
</script>
<svelte:window on:scroll={handleScroll} />
<svelte:window bind:outerWidth={viewportWidth} on:scroll={handleScroll} />
<Navbar bind:isHidden={navbarHidden} bind:currentHeight={navbarHeight} />
<div class="flex flex-col grow justify-center">
<div class="flex flex-col grow justify-center items-center">
<slot />
</div>
<Footer />

41
frontend/src/routes/users/[user]/todos/+page.svelte
View file

@ -3,44 +3,47 @@
import type { Column } from '$lib/components/data-table/types';
import type { UserTodosPage } from "./+page";
import { readTodos, readTodoCount } from '$lib/api/endpoints';
import { getUserFromLocalstorage as getUser } from '$lib/auth/session';
export let data: UserTodosPage;
const user = getUser();
const columns: Column[] = [
{
field: "id",
heading: "ID",
field: 'id',
heading: 'ID',
type: 'number,'
},
{
field: "title",
heading: "Title",
field: 'title',
heading: 'Title',
isLink: true,
linkTarget: '/todos/%id%',
},
{
field: "done",
heading: "Done",
type: "boolean",
field: 'done',
heading: 'Done',
type: 'boolean',
},
{
field: "created",
heading: "Created",
type: "date",
field: 'created',
heading: 'Created',
type: 'date',
},
{
field: "updated",
heading: "Updated",
type: "date",
field: 'updated',
heading: 'Updated',
type: 'date',
},
{
field: "finished",
heading: "Finished",
type: "date",
field: 'finished',
heading: 'Finished',
type: 'date',
},
];
const table = {
caption: `List of TODOs for user ${data.user.first_name} ${data.user.last_name}`,
caption: user.id === data.user.id ? 'My TODOs' : `${data.user.first_name} ${data.user.last_name}'s TODOs`,
columns: columns,
getItemsEndpoint: {
callable: readTodos,
@ -53,7 +56,9 @@
args: [
data.user.id
]
}
},
defaultSortField: 'updated',
defaultSortOrder: 'desc',
};
</script>

34
frontend/src/routes/users/all/+page.svelte
View file

@ -2,39 +2,41 @@
import Table from '$lib/components/data-table/Table.svelte';
import type { Column } from '$lib/components/data-table/types';
import { readUsers, readUserCount } from '$lib/api/endpoints';
import { onMount } from 'svelte';
const columns: Column[] = [
{
field: "id",
heading: "ID",
field: 'id',
heading: 'ID',
type: 'number',
},
{
field: "email",
heading: "Email",
field: 'email',
heading: 'Email',
isLink: true,
linkTarget: '/users/%id%',
},
{
field: "first_name",
heading: "First Name",
field: 'first_name',
heading: 'First Name',
},
{
field: "last_name",
heading: "Last Name",
field: 'last_name',
heading: 'Last Name',
},
{
field: "created",
heading: "Created",
field: 'created',
heading: 'Created',
type: 'date',
},
{
field: "updated",
heading: "Updated",
field: 'updated',
heading: 'Updated',
type: 'date',
},
{
field: "is_admin",
heading: "Admin",
field: 'is_admin',
heading: 'Admin',
type: 'boolean',
},
]
@ -49,7 +51,9 @@
getItemCountEndpoint: {
callable: readUserCount,
args: []
}
},
defaultSortField: 'id',
defaultSortOrder: 'asc',
};
</script>

3
frontend/tailwind.config.js
View file

@ -65,6 +65,9 @@ export default {
800: "#707070",
900: "#333333",
},
success: "#00CC00",
warning: "#EDC000",
failure: "#E40000",
},
screens: {
'3xl': '1920px',