Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

add: multiSelectTable to messaging > providers.

Browse Source
This commit is contained in:
Darshan
2025-10-26 14:15:49 +05:30
parent c68fd85eef
commit ad67a511e4
1 changed files with 60 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/project-[region]-[project]/messaging/providers/table.svelte
+60 -104
View File
@@ -1,134 +1,90 @@
<script lang="ts">
import { base } from '$app/paths';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { Id } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { type DeleteOperationState, Id, MultiSelectionTable } from '$lib/components';
import type { PageData } from './$types';
import { columns } from './store';
import { project } from '$routes/(console)/project-[region]-[project]/store';
import Provider from '../provider.svelte';
import ProviderType from '../providerType.svelte';
import { invalidate } from '$app/navigation';
import { Dependencies } from '$lib/constants';
import { sdk } from '$lib/stores/sdk';
import { canWriteProviders } from '$lib/stores/roles';
import { Badge, FloatingActionBar, Icon, Table, Typography } from '@appwrite.io/pink-svelte';
import { Badge, Icon, Table } from '@appwrite.io/pink-svelte';
import { IconCheckCircle } from '@appwrite.io/pink-icons-svelte';
import Confirm from '$lib/components/confirm.svelte';
import { page } from '$app/state';
export let data: PageData;
const {
data
}: {
data: PageData;
} = $props();
let selectedIds: string[] = [];
let showDelete = false;
let deleting = false;
async function handleDelete() {
showDelete = false;
const promises = selectedIds.map((id) =>
sdk
async function handleDelete(selectedRows: string[]): Promise<DeleteOperationState> {
const promises = selectedRows.map((id) => {
return sdk
.forProject(page.params.region, page.params.project)
.messaging.deleteProvider({ providerId: id })
);
.messaging.deleteProvider({ providerId: id });
});
try {
await Promise.all(promises);
trackEvent(Submit.MessagingProviderDelete, {
total: selectedIds.length
});
addNotification({
type: 'success',
message: `${selectedIds.length} provider${
selectedIds.length > 1 ? 's' : ''
} deleted`
});
await invalidate(Dependencies.MESSAGING_PROVIDERS);
trackEvent(Submit.MessagingProviderDelete, { total: selectedRows.length });
return true;
} catch (error) {
addNotification({
type: 'error',
message: error.message
});
trackError(error, Submit.MessagingProviderDelete);
} finally {
invalidate(Dependencies.MESSAGING_PROVIDERS);
selectedIds = [];
showDelete = false;
return error.message;
}
}
</script>
<Table.Root
<MultiSelectionTable
resource="provider"
columns={$columns}
allowSelection={$canWriteProviders}
let:root
bind:selectedRows={selectedIds}>
<svelte:fragment slot="header" let:root>
onDelete={handleDelete}
allowSelection={$canWriteProviders}>
{#snippet header(root)}
{#each $columns as { id, title }}
<Table.Header.Cell column={id} {root}>{title}</Table.Header.Cell>
{/each}
</svelte:fragment>
{#each data.providers.providers as provider (provider.$id)}
<svelte:component
this={$canWriteProviders ? Table.Row.Link : Table.Row.Base}
id={provider.$id}
href={$canWriteProviders
? `${base}/project-${$project.region}-${$project.$id}/messaging/providers/provider-${provider.$id}`
{/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}
{root}>
{#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}
</svelte:component>
{/each}
</Table.Root>
{#if selectedIds.length > 0}
<FloatingActionBar>
<svelte:fragment slot="start">
<Badge content={selectedIds.length.toString()} />
<span>
{selectedIds.length > 1 ? 'providers' : 'provider'}
selected
</span>
</svelte:fragment>
<svelte:fragment slot="end">
<Button text on:click={() => (selectedIds = [])}>Cancel</Button>
<Button secondary on:click={() => (showDelete = true)}>Delete</Button>
</svelte:fragment>
</FloatingActionBar>
{/if}
<Confirm
title="Delete providers"
bind:open={showDelete}
onSubmit={handleDelete}
disabled={deleting}>
<Typography.Text>
Are you sure you want to delete <b>{selectedIds.length}</b>
{selectedIds.length > 1 ? 'providers' : 'provider'}?
</Typography.Text>
</Confirm>
<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>