Skip to content

Commit 95a8e69

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #2220 from appwrite/fix-SER-278-Old-design-system-table-sessions
2 parents 50fcdef + 22b729d commit 95a8e69

File tree

2 files changed

+80
-87
lines changed

2 files changed

+80
-87
lines changed

‎src/routes/(console)/account/sessions/+page.svelte

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
import type { PageData } from './$types';
1414
import { addNotification } from '$lib/stores/notifications';
1515
import { onMount } from 'svelte';
16-
import { Badge, Layout, Table, Typography } from '@appwrite.io/pink-svelte';
16+
import { Badge, Layout, Table, Typography, Icon } from '@appwrite.io/pink-svelte';
17+
import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
1718
1819
export let data: PageData;
1920
@@ -90,9 +91,9 @@
9091
let:root
9192
columns={[
9293
{ id: 'client' },
93-
{ id: 'location', width: 120 },
94-
{ id: 'ip', width: 120 },
95-
{ id: 'actions', width: 70 }
94+
{ id: 'location', width: 200 },
95+
{ id: 'ip', width: 200 },
96+
{ id: 'actions', width: 100 }
9697
]}>
9798
<svelte:fragment slot="header" let:root>
9899
<Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
@@ -112,13 +113,9 @@
112113
height="20"
113114
width="20"
114115
src={getBrowser(session.clientCode).toString()}
115-
style="--p-text-size: 1.25rem"
116116
alt={session.clientName} />
117117
{:else}
118-
<span
119-
class="icon-globe-alt"
120-
style="--p-text-size: 1.25rem"
121-
aria-hidden="true"></span>
118+
<Icon icon={IconGlobeAlt} size="s" />
122119
{/if}
123120
</div>
124121
<Trim>

‎src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte

Lines changed: 74 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
<script lang="ts">
2-
import { EmptySearch } from '$lib/components';
3-
import { Badge } from '@appwrite.io/pink-svelte';
2+
import { EmptySearch, Trim } from '$lib/components';
3+
import { Badge, Layout, Table, Typography, Icon } from '@appwrite.io/pink-svelte';
4+
import { IconGlobeAlt } from '@appwrite.io/pink-icons-svelte';
45
import { Button } from '$lib/elements/forms';
5-
import {
6-
TableBody,
7-
TableCell,
8-
TableCellHead,
9-
TableCellText,
10-
TableHeader,
11-
TableRow,
12-
TableScroll
13-
} from '$lib/elements/table';
146
import { isValueOfStringEnum } from '$lib/helpers/types';
15-
import { Container, ContainerHeader } from '$lib/layout';
7+
import { Container } from '$lib/layout';
168
import { sdk } from '$lib/stores/sdk';
179
import { Browser } from '@appwrite.io/console';
1810
import DeleteAllSessions from '../deleteAllSessions.svelte';
@@ -33,77 +25,81 @@
3325
</script>
3426

3527
<Container>
36-
<ContainerHeader title="Sessions">
28+
<Layout.Stack direction="row" justifyContent="space-between">
29+
<Typography.Title>Sessions</Typography.Title>
3730
{#if data.sessions.total}
38-
<Button secondary on:click={() => (showDeleteAll = true)}>
39-
<span class="text">Delete All</span>
40-
</Button>
31+
<Button secondary on:click={() => (showDeleteAll = true)}>Sign out all sessions</Button>
4132
{/if}
42-
</ContainerHeader>
33+
</Layout.Stack>
34+
4335
{#if data.sessions.total}
44-
<TableScroll>
45-
<TableHeader>
46-
<TableCellHead width={140}>Browser and device</TableCellHead>
47-
<TableCellHead width={140}>Session</TableCellHead>
48-
<TableCellHead width={140}>Location</TableCellHead>
49-
<TableCellHead width={140}>IP</TableCellHead>
50-
<TableCellHead width={30} />
51-
</TableHeader>
52-
<TableBody>
53-
{#each data.sessions.sessions as session}
54-
{@const browser = getBrowser(session.clientCode)}
55-
<TableRow>
56-
<TableCell title="Client">
57-
<div class="u-flex u-gap-12 u-cross-center">
58-
<div class="avatar">
59-
{#if browser}
60-
<img
61-
height="20"
62-
width="20"
63-
src={getBrowser(session.clientCode).toString()}
64-
style="--p-text-size: 1.25rem"
65-
alt={session.clientName} />
66-
{:else}
67-
<span
68-
class="icon-globe-alt"
69-
style="--p-text-size: 1.25rem"
70-
aria-hidden="true">
71-
</span>
72-
{/if}
73-
</div>
74-
<p class="text">
75-
{session.clientName}
76-
{session.clientVersion} on {session.osName}
77-
{session.osVersion}
78-
</p>
79-
{#if session.current}
80-
<Badge
81-
variant="secondary"
82-
type="success"
83-
content="current session" />
36+
<Table.Root
37+
let:root
38+
columns={[
39+
{ id: 'client' },
40+
{ id: 'location', width: 200 },
41+
{ id: 'ip', width: 200 },
42+
{ id: 'actions', width: 100 }
43+
]}>
44+
<svelte:fragment slot="header" let:root>
45+
<Table.Header.Cell column="client" {root}>Client</Table.Header.Cell>
46+
<Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
47+
<Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
48+
<Table.Header.Cell column="actions" {root} />
49+
</svelte:fragment>
50+
{#each data.sessions.sessions as session}
51+
{@const browser = getBrowser(session.clientCode)}
52+
<Table.Row.Base {root}>
53+
<Table.Cell column="client" {root}>
54+
<Layout.Stack direction="row" alignItems="center">
55+
<div class="avatar is-size-small">
56+
{#if browser}
57+
<img
58+
height="20"
59+
width="20"
60+
src={getBrowser(session.clientCode).toString()}
61+
alt={session.clientName} />
62+
{:else}
63+
<Icon icon={IconGlobeAlt} size="s" />
8464
{/if}
8565
</div>
86-
</TableCell>
87-
88-
<TableCellText title="Session">{session.clientType}</TableCellText>
89-
<TableCellText title="Location">{session.countryName}</TableCellText>
90-
<TableCellText title="IP">{session.ip}</TableCellText>
91-
<TableCell>
92-
<Button
93-
text
94-
icon
95-
ariaLabel="Delete item"
96-
on:click={() => {
97-
selectedSessionId = session.$id;
98-
showDelete = true;
99-
}}>
100-
<span class="icon-trash" aria-hidden="true"></span>
101-
</Button>
102-
</TableCell>
103-
</TableRow>
104-
{/each}
105-
</TableBody>
106-
</TableScroll>
66+
<Trim>
67+
{session.clientName}
68+
{session.clientVersion} on {session.osName}
69+
{session.osVersion}
70+
</Trim>
71+
{#if session.current}
72+
<Badge
73+
type="success"
74+
variant="secondary"
75+
content="current session" />
76+
{/if}
77+
</Layout.Stack>
78+
</Table.Cell>
79+
<Table.Cell column="location" {root}>
80+
{#if session.countryCode !== '--'}
81+
{session.countryName}
82+
{:else}
83+
Unknown
84+
{/if}
85+
</Table.Cell>
86+
<Table.Cell column="ip" {root}>
87+
{session.ip}
88+
</Table.Cell>
89+
<Table.Cell column="actions" {root}>
90+
<Button
91+
size="xs"
92+
secondary
93+
on:click={() => {
94+
selectedSessionId = session.$id;
95+
showDelete = true;
96+
}}>
97+
Sign out
98+
</Button>
99+
</Table.Cell>
100+
</Table.Row.Base>
101+
{/each}
102+
</Table.Root>
107103
{:else}
108104
<EmptySearch>
109105
<div class="u-flex u-flex-vertical u-cross-center u-gap-24">

0 commit comments

Comments
 (0)