diff options
Diffstat (limited to 'fe/src/lib/Table.svelte')
-rw-r--r-- | fe/src/lib/Table.svelte | 138 |
1 files changed, 69 insertions, 69 deletions
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte index 4b81800..3a66e0d 100644 --- a/fe/src/lib/Table.svelte +++ b/fe/src/lib/Table.svelte | |||
@@ -1,105 +1,105 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import {afterUpdate} from 'svelte'; | 2 | export let data: Array<any> | undefined = undefined; |
3 | export let data: Array<any> | undefined = undefined; | 3 | export let nofooter: boolean = false; |
4 | export let nofooter: boolean = false; | 4 | export let noheader: boolean = false; |
5 | export let noheader: boolean = false; | 5 | export let omit: string[] = ["id"]; |
6 | export let omit: string[] = ['id']; | 6 | export let title: string | undefined = undefined; |
7 | export let title: string | undefined = undefined; | ||
8 | 7 | ||
9 | function getDataKeys(data: any[]): string[] { | 8 | function getDataKeys(data: any[]): string[] { |
10 | if (!data || data.length === 0) return []; | 9 | if (!data || data.length === 0) return []; |
11 | return Object.keys(data[0]).map(k => k.split('_').join(' ')).filter(k => !omit.includes(k)); | 10 | return Object.keys(data[0]) |
12 | } | 11 | .map((k) => k.split("_").join(" ")) |
12 | .filter((k) => !omit.includes(k)); | ||
13 | } | ||
13 | 14 | ||
14 | function getRow(row: Record<string, any>): Array<any> { | 15 | function getRow(row: Record<string, any>): Array<any> { |
15 | return Object.entries(row).filter(r => !omit.includes(r[0])); | 16 | return Object.entries(row).filter((r) => !omit.includes(r[0])); |
16 | } | 17 | } |
17 | 18 | ||
18 | const formatter = new Intl.DateTimeFormat('en', { | 19 | const formatter = new Intl.DateTimeFormat("en", { |
19 | year: 'numeric', | 20 | year: "numeric", |
20 | month: 'numeric', | 21 | month: "numeric", |
21 | day: 'numeric', | 22 | day: "numeric", |
22 | hour: 'numeric', | 23 | hour: "numeric", |
23 | minute: '2-digit', | 24 | minute: "2-digit", |
24 | second: '2-digit', | 25 | second: "2-digit", |
25 | timeZone: "America/New_York" | 26 | timeZone: "America/New_York", |
26 | }); | 27 | }); |
27 | 28 | ||
28 | function formatDatum([key, value]: any[]) { | 29 | function formatDatum([key, value]: any[]) { |
29 | if (key === 'date') { | 30 | if (key === "date") { |
30 | const parsedDate = new Date(value); | 31 | const parsedDate = new Date(value); |
31 | return formatter.format(parsedDate); | 32 | return formatter.format(parsedDate); |
32 | } | 33 | } |
33 | 34 | ||
34 | if (key === 'user') { | 35 | if (key === "user") { |
35 | return value['name']; | 36 | return value["name"]; |
36 | } | 37 | } |
37 | 38 | ||
38 | return value; | 39 | return value; |
39 | } | 40 | } |
40 | |||
41 | </script> | 41 | </script> |
42 | |||
42 | <table> | 43 | <table> |
43 | {#if title} | 44 | {#if title} |
44 | <h2>{title}</h2> | 45 | <h2>{title}</h2> |
45 | {/if} | 46 | {/if} |
46 | {#if !noheader} | 47 | {#if !noheader && data} |
47 | <thead> | 48 | <thead> |
48 | <tr> | 49 | <tr> |
49 | {#each getDataKeys(data) as header} | 50 | {#each getDataKeys(data) as header} |
50 | <th>{header}</th> | 51 | <th>{header}</th> |
51 | {/each} | 52 | {/each} |
52 | </tr> | 53 | </tr> |
53 | </thead> | 54 | </thead> |
54 | {/if} | 55 | {/if} |
55 | <tbody> | 56 | <tbody> |
56 | {#if data} | 57 | {#if data} |
57 | {#each data as row} | 58 | {#each data as row} |
58 | <tr> | 59 | <tr> |
59 | {#each getRow(row) as datum} | 60 | {#each getRow(row) as datum} |
60 | |||
61 | <td>{formatDatum(datum)}</td> | 61 | <td>{formatDatum(datum)}</td> |
62 | {/each} | 62 | {/each} |
63 | </tr> | 63 | </tr> |
64 | {/each} | 64 | {/each} |
65 | {:else} | 65 | {:else} |
66 | <tr> | 66 | <tr> There is not data. </tr> |
67 | There is not data. | 67 | {/if} |
68 | </tr> | 68 | </tbody> |
69 | {/if} | 69 | {#if !nofooter} |
70 | </tbody> | ||
71 | {#if !nofooter} | ||
72 | <slot name="footer"> | 70 | <slot name="footer"> |
73 | <tfoot> | 71 | <tfoot> |
74 | <tr> | 72 | <tr> |
75 | <td>Table Footer</td> | 73 | <td>Table Footer</td> |
76 | </tr> | 74 | </tr> |
77 | </tfoot> | 75 | </tfoot> |
78 | </slot> | 76 | </slot> |
79 | {/if} | 77 | {/if} |
80 | </table> | 78 | </table> |
79 | |||
81 | <style> | 80 | <style> |
82 | table { | 81 | table { |
83 | padding: 16px; | 82 | padding: 16px; |
84 | margin: 8px; | 83 | margin: 8px; |
85 | border: solid 1px black; | 84 | border: solid 1px black; |
86 | border-collapse: collapse; | 85 | border-collapse: collapse; |
87 | } | 86 | } |
88 | 87 | ||
89 | th { | 88 | th { |
90 | text-transform: capitalize; | 89 | text-transform: capitalize; |
91 | } | 90 | } |
92 | 91 | ||
93 | thead tr { | 92 | thead tr { |
94 | background: rgba(0,0,23, 0.34); | 93 | background: rgba(0, 0, 23, 0.34); |
95 | } | 94 | } |
96 | 95 | ||
97 | tbody tr:nth-child(odd) { | 96 | tbody tr:nth-child(odd) { |
98 | background: rgba(0,0,23,0.14); | 97 | background: rgba(0, 0, 23, 0.14); |
99 | } | 98 | } |
100 | 99 | ||
101 | th, td { | 100 | th, |
101 | td { | ||
102 | padding: 1em; | 102 | padding: 1em; |
103 | border: 1px solid rgba(0,0,0, 1); | 103 | border: 1px solid rgba(0, 0, 0, 1); |
104 | } | 104 | } |
105 | </style> | 105 | </style> |