refactor(web): ConfirmDialog and dialogController ()

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback
This commit is contained in:
Alex 2024-05-28 09:10:43 +07:00 committed by GitHub
parent f020d29ab6
commit bce916e4c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 281 additions and 317 deletions
web/src/lib/components/user-settings-page

View file

@ -7,15 +7,14 @@
import Button from '../elements/buttons/button.svelte';
import APIKeyForm from '../forms/api-key-form.svelte';
import APIKeySecret from '../forms/api-key-secret.svelte';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
export let keys: ApiKeyResponseDto[];
let newKey: Partial<ApiKeyResponseDto> | null = null;
let editKey: ApiKeyResponseDto | null = null;
let deleteKey: ApiKeyResponseDto | null = null;
let secret = '';
const format: Intl.DateTimeFormatOptions = {
@ -59,22 +58,26 @@
}
};
const handleDelete = async () => {
if (!deleteKey) {
const handleDelete = async (key: ApiKeyResponseDto) => {
const isConfirmed = await dialogController.show({
id: 'delete-api-key',
prompt: 'Are you sure you want to delete this API key?',
});
if (!isConfirmed) {
return;
}
try {
await deleteApiKey({ id: deleteKey.id });
await deleteApiKey({ id: key.id });
notificationController.show({
message: `Removed API Key: ${deleteKey.name}`,
message: `Removed API Key: ${key.name}`,
type: NotificationType.Info,
});
} catch (error) {
handleError(error, 'Unable to remove API Key');
} finally {
await refreshKeys();
deleteKey = null;
}
};
</script>
@ -103,15 +106,6 @@
/>
{/if}
{#if deleteKey}
<ConfirmDialogue
id="confirm-api-key-delete-modal"
prompt="Are you sure you want to delete this API key?"
onConfirm={() => handleDelete()}
onClose={() => (deleteKey = null)}
/>
{/if}
<section class="my-4">
<div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
<div class="mb-2 flex justify-end">
@ -156,7 +150,7 @@
icon={mdiTrashCanOutline}
title="Delete key"
size="16"
on:click={() => (deleteKey = key)}
on:click={() => handleDelete(key)}
/>
</td>
</tr>