aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/Table.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/Table.svelte')
-rw-r--r--fe/src/lib/Table.svelte138
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">
2import {afterUpdate} from 'svelte'; 2 export let data: Array<any> | undefined = undefined;
3export let data: Array<any> | undefined = undefined; 3 export let nofooter: boolean = false;
4export let nofooter: boolean = false; 4 export let noheader: boolean = false;
5export let noheader: boolean = false; 5 export let omit: string[] = ["id"];
6export let omit: string[] = ['id']; 6 export let title: string | undefined = undefined;
7export let title: string | undefined = undefined;
8 7
9function 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
14function 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
18const 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
28function 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>
82table { 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
89th { 88 th {
90 text-transform: capitalize; 89 text-transform: capitalize;
91} 90 }
92 91
93thead tr { 92 thead tr {
94 background: rgba(0,0,23, 0.34); 93 background: rgba(0, 0, 23, 0.34);
95} 94 }
96 95
97tbody 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
101th, 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>