feat(ui): update record menu

undb-io · Sep 5, 2023 · c4331dd · c4331dd
1 parent 008a643
commit c4331dd
Showing 1 changed file with 76 additions and 68 deletions.
diff --git a/apps/frontend/src/lib/record/UpdateRecordMenu.svelte b/apps/frontend/src/lib/record/UpdateRecordMenu.svelte
@@ -5,8 +5,9 @@
 	import { canCreateRecord, canDeleteRecord, currentRecordId, getTable } from '$lib/store/table'
 	import { trpc } from '$lib/trpc/client'
 	import type { Record } from '@undb/core'
-	import { Dropdown, DropdownDivider, DropdownItem, Modal, Spinner } from 'flowbite-svelte'
 	import { Button } from '$lib/components/ui/button'
+	import * as AlertDialog from '$lib/components/ui/alert-dialog'
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 
 	let confirmDeleteOpen = false
 
@@ -28,73 +29,80 @@
 </script>
 
 {#if $canCreateRecord || $canDeleteRecord}
-	<button>
-		<i class="ti ti-dots" />
-	</button>
-	<Dropdown style="z-index: 50;" class="w-[200px]">
-		{#if $canCreateRecord}
-			<DropdownItem
-				on:click={() => {
-					if (record) {
-						$duplicateRecord.mutate({ tableId: $table.id.value, id: record.id.value })
-					}
-				}}
-				class="inline-flex items-center gap-2"
-			>
-				<i class="ti ti-copy" />
-				<span class="text-xs">{$t('Duplicate Record')}</span>
-			</DropdownItem>
-		{/if}
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger>
+			<button>
+				<i class="ti ti-dots" />
+			</button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content class="w-56">
+			{#if $canCreateRecord}
+				<DropdownMenu.Item
+					on:click={() => {
+						if (record) {
+							$duplicateRecord.mutate({ tableId: $table.id.value, id: record.id.value })
+						}
+					}}
+					class="flex items-center gap-2"
+				>
+					<i class="ti ti-copy" />
+					<span class="text-xs">{$t('Duplicate Record')}</span>
+				</DropdownMenu.Item>
+			{/if}
 
-		{#if $canDeleteRecord}
-			<DropdownDivider />
-			<DropdownItem on:click={() => (confirmDeleteOpen = true)} class="inline-flex items-center gap-2 text-red-400">
-				<i class="ti ti-trash" />
-				<span class="text-xs">{$t('Delete Record')}</span>
-			</DropdownItem>
-		{/if}
-	</Dropdown>
+			{#if $canDeleteRecord}
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item on:click={() => (confirmDeleteOpen = true)} class="flex items-center gap-2 text-red-400">
+					<i class="ti ti-trash" />
+					<span class="text-xs">{$t('Delete Record')}</span>
+				</DropdownMenu.Item>
+			{/if}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
 {/if}
 
-<Modal bind:open={confirmDeleteOpen} size="xs">
-	<div class="text-center">
-		<svg
-			aria-hidden="true"
-			class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-			/></svg
-		>
-		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-200">
-			{$t('Confirm Delete Record')}
-		</h3>
-		<Button
-			variant="destructive"
-			class="mr-2 gap-2 whitespace-nowrap"
-			disabled={$deleteRecord.isLoading}
-			size="lg"
-			on:click={() => {
-				if (record) {
-					$deleteRecord.mutate({ tableId: $table.id.value, id: record.id.value })
-				}
-			}}
-		>
-			{#if $deleteRecord.isLoading}
-				<Spinner size="xs" />
-			{:else}
-				<i class="ti ti-circle-check text-sm" />
-			{/if}
-			{$t('Confirm Yes', { ns: 'common' })}</Button
-		>
-		<Button size="md" color="alternative" on:click={() => ($currentRecordId = undefined)}>
-			{$t('Confirm No', { ns: 'common' })}
-		</Button>
-	</div>
-</Modal>
+<AlertDialog.Root bind:open={confirmDeleteOpen}>
+	<AlertDialog.Content>
+		<div class="text-center">
+			<svg
+				aria-hidden="true"
+				class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/></svg
+			>
+			<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-200">
+				{$t('Confirm Delete Record')}
+			</h3>
+			<AlertDialog.Footer>
+				<Button variant="secondary" on:click={() => ($currentRecordId = undefined)}>
+					{$t('Confirm No', { ns: 'common' })}
+				</Button>
+				<Button
+					variant="destructive"
+					class="mr-2 gap-2 whitespace-nowrap"
+					disabled={$deleteRecord.isLoading}
+					on:click={() => {
+						if (record) {
+							$deleteRecord.mutate({ tableId: $table.id.value, id: record.id.value })
+						}
+					}}
+				>
+					{#if $deleteRecord.isLoading}
+						<i class="ti ti-rotate animate-spin"></i>
+					{:else}
+						<i class="ti ti-circle-check text-sm" />
+					{/if}
+					{$t('Confirm Yes', { ns: 'common' })}</Button
+				>
+			</AlertDialog.Footer>
+		</div>
+	</AlertDialog.Content>
+</AlertDialog.Root>