Merge pull request #16 from appwrite/feat-table-row-link

feat: table row link
This commit is contained in:
Torsten Dittmann
2022-06-30 15:59:38 +02:00
committed by GitHub
13 changed files with 56 additions and 55 deletions
+14 -14
View File
@@ -8,8 +8,8 @@
"name": "@appwrite/console",
"version": "0.0.1",
"dependencies": {
"@aw-labs/icons": "^0.0.0-20",
"@aw-labs/ui": "^0.0.0-20",
"@aw-labs/icons": "^0.0.0-22",
"@aw-labs/ui": "^0.0.0-22",
"echarts": "^5.3.3"
},
"devDependencies": {
@@ -58,14 +58,14 @@
}
},
"node_modules/@aw-labs/icons": {
"version": "0.0.0-20",
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-20.tgz",
"integrity": "sha512-NgUu2b6ZKtK96uI5XQ1omo+4/2Qa1p6dnJgDzAMwXSNkU2r0OXAk2XPDuLy1FKGvF4j5EvZ8pzgUb/LDstBN1w=="
"version": "0.0.0-22",
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-22.tgz",
"integrity": "sha512-lSMJ2+muE3tiNtEh5I5FhK89nq06OIkzHnvYHGKTm4mnQWLIDRI8N63LjFmddhLjAuiet6QeuTv/YDMe6IvkHA=="
},
"node_modules/@aw-labs/ui": {
"version": "0.0.0-20",
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-20.tgz",
"integrity": "sha512-yCd8zdqvbGQwhUSIIoWktEX31t+sL+ZrRFl4lyN+1rziozDJpvZd4PMeQsiO03LZYJDbuYYNLEjhk52xI1mAVw==",
"version": "0.0.0-22",
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-22.tgz",
"integrity": "sha512-0Pux3lVJ3YL4f++aAmpEj21qlU6l2+qRSoYTITGyGFXz0bL7a3ejrlUsM91uG6zo23danbaJy8MfnGvFQ8Qtpg==",
"dependencies": {
"@aw-labs/icons": "*"
}
@@ -7807,14 +7807,14 @@
}
},
"@aw-labs/icons": {
"version": "0.0.0-20",
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-20.tgz",
"integrity": "sha512-NgUu2b6ZKtK96uI5XQ1omo+4/2Qa1p6dnJgDzAMwXSNkU2r0OXAk2XPDuLy1FKGvF4j5EvZ8pzgUb/LDstBN1w=="
"version": "0.0.0-22",
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-22.tgz",
"integrity": "sha512-lSMJ2+muE3tiNtEh5I5FhK89nq06OIkzHnvYHGKTm4mnQWLIDRI8N63LjFmddhLjAuiet6QeuTv/YDMe6IvkHA=="
},
"@aw-labs/ui": {
"version": "0.0.0-20",
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-20.tgz",
"integrity": "sha512-yCd8zdqvbGQwhUSIIoWktEX31t+sL+ZrRFl4lyN+1rziozDJpvZd4PMeQsiO03LZYJDbuYYNLEjhk52xI1mAVw==",
"version": "0.0.0-22",
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-22.tgz",
"integrity": "sha512-0Pux3lVJ3YL4f++aAmpEj21qlU6l2+qRSoYTITGyGFXz0bL7a3ejrlUsM91uG6zo23danbaJy8MfnGvFQ8Qtpg==",
"requires": {
"@aw-labs/icons": "*"
}
+2 -2
View File
@@ -19,8 +19,8 @@
"e2e": "playwright test tests/e2e"
},
"dependencies": {
"@aw-labs/icons": "^0.0.0-20",
"@aw-labs/ui": "^0.0.0-20",
"@aw-labs/icons": "^0.0.0-22",
"@aw-labs/ui": "^0.0.0-22",
"echarts": "^5.3.3"
},
"devDependencies": {
+2 -2
View File
@@ -1,3 +1,3 @@
<tbody class="table-tbody">
<div class="table-tbody" role="rowgroup">
<slot />
</tbody>
</div>
+6 -2
View File
@@ -3,6 +3,10 @@
export let width: number = null;
</script>
<td width={width?.toString() ?? ''} class="table-col" class:is-only-desktop={onlyDesktop}>
<div
width={width?.toString() ?? ''}
class="table-col"
class:is-only-desktop={onlyDesktop}
role="cell">
<slot />
</td>
</div>
+3 -9
View File
@@ -2,14 +2,8 @@
export let width: number = null;
</script>
<th width={width?.toString() ?? ''} class="table-thead-col">
<span class="text">
<div style={`width: ${width?.toString() + 'px' ?? ''}`} class="table-thead-col" role="columnheader">
<span class="eyebrow-heading-3">
<slot />
</span>
</th>
<style>
th {
text-transform: uppercase;
}
</style>
</div>
+2 -2
View File
@@ -3,6 +3,6 @@
export let title: string;
</script>
<td class="table-col is-main" data-title={title}>
<div class="table-col is-main" data-title={title} role="cell">
<a role="button" tabindex="0" class="link" {href}><slot /></a>
</td>
</div>
+2 -2
View File
@@ -2,6 +2,6 @@
export let title: string;
</script>
<td class="table-col is-main" data-title={title}>
<div class="table-col is-main" data-title={title} role="cell">
<span class="text"><slot /></span>
</td>
</div>
+4 -4
View File
@@ -1,5 +1,5 @@
<thead class="table-thead">
<tr class="table-row">
<div class="table-thead" role="rowheader">
<div class="table-row" role="row">
<slot />
</tr>
</thead>
</div>
</div>
+1
View File
@@ -3,6 +3,7 @@ export { default as TableBody } from './body.svelte';
export { default as TableHeader } from './header.svelte';
export { default as TableFooter } from './footer.svelte';
export { default as TableRow } from './row.svelte';
export { default as TableRowLink } from './rowLink.svelte';
export { default as TableCell } from './cell.svelte';
export { default as TableCellHead } from './cellHead.svelte';
export { default as TableCellLink } from './cellLink.svelte';
+2 -2
View File
@@ -1,3 +1,3 @@
<tr class="table-row">
<div class="table-row" role="row">
<slot />
</tr>
</div>
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
export let href: string;
</script>
<a class="table-row" role="row" {href}>
<slot />
</a>
+2 -2
View File
@@ -1,3 +1,3 @@
<table class="table is-vertical u-margin-block-start-32 ">
<div class="table is-vertical u-margin-block-start-32" role="table">
<slot />
</table>
</div>
@@ -7,10 +7,9 @@
Table,
TableHeader,
TableBody,
TableRow,
TableCellHead,
TableCellLink,
TableCellText
TableCellText,
TableRowLink
} from '$lib/elements/table';
import Create from './_createUser.svelte';
import type { Models } from 'src/sdk';
@@ -68,15 +67,13 @@
</TableHeader>
<TableBody>
{#each $usersList.response.users as user}
<TableRow>
<TableCellLink
href={`${base}/console/${project}/users/user/${user.$id}`}
title="Name">
<div class="u-flex u-gap-12">
<TableRowLink href={`${base}/console/${project}/users/user/${user.$id}`}>
<TableCellText title="Name">
<div class="u-flex u-gap-12 u-cross-center">
<Avatar size={40} src={getAvatar(user.name)} name={user.name} />
<span>{user.name ? user.name : 'n/a'}</span>
<span class="text">{user.name ? user.name : 'n/a'}</span>
</div>
</TableCellLink>
</TableCellText>
<TableCellText title="E-Mail">{user.email}</TableCellText>
<TableCellText title="Status">
{#if user.status}
@@ -95,13 +92,11 @@
<TableCellText title="Joined">
{toLocaleDateTime(user.registration)}
</TableCellText>
</TableRow>
</TableRowLink>
{/each}
</TableBody>
</Table>
<div
class="u-flex u-margin-block-start-32
u-main-space-between">
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {$usersList.response.total}</p>
<Pagination {limit} bind:offset sum={$usersList.response.total} />
</div>