mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: apply review feedback
This commit is contained in:
AbhiVarde
@@ -19,11 +19,11 @@ import {
|
||||
} from './components';
|
||||
|
||||
export const columns = writable<Column[]>([
|
||||
{ id: '$id', title: 'Provider ID', type: 'string' },
|
||||
{ id: 'name', title: 'Name', type: 'string' },
|
||||
{ id: 'provider', title: 'Provider', type: 'string' },
|
||||
{ id: 'type', title: 'Type', type: 'string' },
|
||||
{ id: 'enabled', title: 'Status', type: 'boolean' }
|
||||
{ id: '$id', title: 'Provider ID', type: 'string', width: 200 },
|
||||
{ id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
|
||||
{ id: 'provider', title: 'Provider', type: 'string', width: { min: 120 } },
|
||||
{ id: 'type', title: 'Type', type: 'string', width: { min: 120 } },
|
||||
{ id: 'enabled', title: 'Status', type: 'boolean', width: { min: 120 } }
|
||||
]);
|
||||
|
||||
export type ProviderInput = {
|
||||
|
||||
@@ -39,68 +39,51 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="table-scroll-wrapper">
|
||||
<MultiSelectionTable
|
||||
resource="provider"
|
||||
columns={$columns}
|
||||
onDelete={handleDelete}
|
||||
allowSelection={$canWriteProviders}>
|
||||
{#snippet header(root)}
|
||||
{#each $columns as { id, title }}
|
||||
<Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
|
||||
{/each}
|
||||
{/snippet}
|
||||
<MultiSelectionTable
|
||||
resource="provider"
|
||||
columns={$columns}
|
||||
onDelete={handleDelete}
|
||||
allowSelection={$canWriteProviders}>
|
||||
{#snippet header(root)}
|
||||
{#each $columns as { id, title }}
|
||||
<Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
|
||||
{/each}
|
||||
{/snippet}
|
||||
|
||||
{#snippet children(root)}
|
||||
{@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
|
||||
{#each data.providers.providers as provider (provider.$id)}
|
||||
{@const href = $canWriteProviders
|
||||
? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
|
||||
: undefined}
|
||||
<TableRowComponent {href} {root} id={provider.$id}>
|
||||
{#each $columns as column}
|
||||
<Table.Cell column={column.id} {root}>
|
||||
{#if column.id === '$id'}
|
||||
{#key $columns}
|
||||
<Id value={provider.$id}>{provider.$id}</Id>
|
||||
{/key}
|
||||
{:else if column.id === 'provider'}
|
||||
<Provider provider={provider.provider} />
|
||||
{:else if column.id === 'type'}
|
||||
<ProviderType type={provider.type} size="xs" />
|
||||
{:else if column.id === 'enabled'}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
type={provider.enabled ? 'success' : undefined}
|
||||
content={provider.enabled ? 'enabled' : 'disabled'}>
|
||||
<svelte:fragment slot="start">
|
||||
{#if provider.enabled}
|
||||
<Icon icon={IconCheckCircle} size="s" />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Badge>
|
||||
{:else}
|
||||
{provider[column.id]}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
{/each}
|
||||
</TableRowComponent>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</MultiSelectionTable>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.table-scroll-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
:global([role='table']) {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(60px, 0.5fr) minmax(200px, 2.5fr) minmax(120px, 1fr) minmax(120px, 1fr)
|
||||
minmax(120px, 1fr) minmax(120px, 1.5fr);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{#snippet children(root)}
|
||||
{@const TableRowComponent = $canWriteProviders ? Table.Row.Link : Table.Row.Base}
|
||||
{#each data.providers.providers as provider (provider.$id)}
|
||||
{@const href = $canWriteProviders
|
||||
? `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
|
||||
: undefined}
|
||||
<TableRowComponent {href} {root} id={provider.$id}>
|
||||
{#each $columns as column}
|
||||
<Table.Cell column={column.id} {root}>
|
||||
{#if column.id === '$id'}
|
||||
{#key $columns}
|
||||
<Id value={provider.$id}>{provider.$id}</Id>
|
||||
{/key}
|
||||
{:else if column.id === 'provider'}
|
||||
<Provider provider={provider.provider} />
|
||||
{:else if column.id === 'type'}
|
||||
<ProviderType type={provider.type} size="xs" />
|
||||
{:else if column.id === 'enabled'}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
type={provider.enabled ? 'success' : undefined}
|
||||
content={provider.enabled ? 'enabled' : 'disabled'}>
|
||||
<svelte:fragment slot="start">
|
||||
{#if provider.enabled}
|
||||
<Icon icon={IconCheckCircle} size="s" />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</Badge>
|
||||
{:else}
|
||||
{provider[column.id]}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
{/each}
|
||||
</TableRowComponent>
|
||||
{/each}
|
||||
{/snippet}
|
||||
</MultiSelectionTable>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts" context="module">
|
||||
import { columns } from './store';
|
||||
import { wizard } from '$lib/stores/wizard';
|
||||
import CreateAndroid from './createAndroid.svelte';
|
||||
import CreateApple from './createApple.svelte';
|
||||
@@ -121,43 +122,42 @@
|
||||
</script>
|
||||
|
||||
{#if data.platforms.platforms.length}
|
||||
<div class="table-scroll-wrapper">
|
||||
<Table.Root columns={4} let:root>
|
||||
<svelte:fragment slot="header" let:root>
|
||||
<Table.Header.Cell {root}>Name</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Platform type</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Identifier</Table.Header.Cell>
|
||||
<Table.Header.Cell {root}>Last updated</Table.Header.Cell>
|
||||
</svelte:fragment>
|
||||
{#each data.platforms.platforms as platform}
|
||||
<Table.Row.Link href={`${path}/${platform.$id}`} {root}>
|
||||
<Table.Cell {root}>
|
||||
{platform.name}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
<Layout.Stack direction="row" gap="s" alignItems="center">
|
||||
<Icon icon={getPlatformInfo(platform.type)} />
|
||||
{PlatformTypes[platform.type]}
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.type.includes('web') || platform.type === 'web'}
|
||||
{platform.hostname || '—'}
|
||||
{:else}
|
||||
{platform.key || platform.hostname || '—'}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.$updatedAt}
|
||||
<DualTimeView time={platform.$updatedAt} />
|
||||
{:else}
|
||||
never
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
</Table.Row.Link>
|
||||
<Table.Root columns={$columns} let:root>
|
||||
<svelte:fragment slot="header" let:root>
|
||||
{#each $columns as column}
|
||||
<Table.Header.Cell {root} column={column.id}>
|
||||
{column.title}
|
||||
</Table.Header.Cell>
|
||||
{/each}
|
||||
</Table.Root>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
{#each data.platforms.platforms as platform}
|
||||
<Table.Row.Link href={`${path}/${platform.$id}`} {root}>
|
||||
<Table.Cell {root}>
|
||||
{platform.name}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
<Layout.Stack direction="row" gap="s" alignItems="center">
|
||||
<Icon icon={getPlatformInfo(platform.type)} />
|
||||
{PlatformTypes[platform.type]}
|
||||
</Layout.Stack>
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.type.includes('web') || platform.type === 'web'}
|
||||
{platform.hostname || '—'}
|
||||
{:else}
|
||||
{platform.key || platform.hostname || '—'}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell {root}>
|
||||
{#if platform.$updatedAt}
|
||||
<DualTimeView time={platform.$updatedAt} />
|
||||
{:else}
|
||||
never
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
</Table.Row.Link>
|
||||
{/each}
|
||||
</Table.Root>
|
||||
{:else}
|
||||
<Card.Base padding="none">
|
||||
<Empty
|
||||
@@ -205,19 +205,3 @@
|
||||
</Empty>
|
||||
</Card.Base>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.table-scroll-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
:global([role='table']) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr)
|
||||
minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr)
|
||||
minmax(calc(180px + var(--p-table-cell-padding-inline)), 2fr)
|
||||
minmax(calc(120px + var(--p-table-cell-padding-inline)), 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
import type { ComponentType } from 'svelte';
|
||||
import { PlatformType } from '@appwrite.io/console';
|
||||
import { writable } from 'svelte/store';
|
||||
import type { Column } from '$lib/helpers/types';
|
||||
|
||||
export const columns = writable<Column[]>([
|
||||
{ id: 'name', title: 'Name', type: 'string', width: { min: 120 } },
|
||||
{ id: 'type', title: 'Platform type', type: 'string', width: { min: 120 } },
|
||||
{ id: 'identifier', title: 'Identifier', type: 'string', width: { min: 120 } },
|
||||
{ id: '$updatedAt', title: 'Last updated', type: 'string', width: { min: 120 } }
|
||||
]);
|
||||
|
||||
export type PlatformProps = {
|
||||
key?: string;
|
||||
|
||||
+7
-10
@@ -411,15 +411,13 @@
|
||||
<svelte:fragment slot="aside">
|
||||
<Layout.Stack gap="s">
|
||||
{#key extensions.length}
|
||||
<div style="min-width: 0; width: 100%;">
|
||||
<InputTags
|
||||
id="user-labels"
|
||||
label="Labels"
|
||||
placeholder="Select or type user labels"
|
||||
bind:tags={extensions} />
|
||||
</div>
|
||||
<InputTags
|
||||
id="user-labels"
|
||||
label="Labels"
|
||||
placeholder="Select or type user labels"
|
||||
bind:tags={extensions} />
|
||||
{/key}
|
||||
<Layout.Stack direction="row" style="flex-wrap: wrap; overflow-x: auto;">
|
||||
<Layout.Stack direction="row" wrap="wrap">
|
||||
{#each suggestedExtensions as ext}
|
||||
<Tag
|
||||
size="s"
|
||||
@@ -465,8 +463,7 @@
|
||||
on:click={() => {
|
||||
showDelete = true;
|
||||
trackEvent(Click.StorageBucketDeleteClick);
|
||||
}}
|
||||
>Delete</Button>
|
||||
}}>Delete</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user