feat: move "delete" actions to popover

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>
junobuild · Nov 19, 2023 · 64767c4 · 64767c4
1 parent b88800e
commit 64767c4
Show file tree

Hide file tree

Showing 16 changed files with 201 additions and 106 deletions.
diff --git a/src/frontend/src/lib/components/assets/Asset.svelte b/src/frontend/src/lib/components/assets/Asset.svelte
@@ -10,12 +10,13 @@
 	import { formatToDate } from '$lib/utils/date.utils';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import DataToolbar from '$lib/components/data/DataToolbar.svelte';
 	import { toasts } from '$lib/stores/toasts.store';
 	import { deleteAsset } from '$lib/api/satellites.api';
 	import { satelliteUrl } from '$lib/utils/satellite.utils';
 	import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context';
 	import ExternalLink from '$lib/components/ui/ExternalLink.svelte';
+	import DataHeader from '$lib/components/data/DataHeader.svelte';
+	import DataDelete from '$lib/components/data/DataDelete.svelte';
 
 	const { store, resetData }: DataContext<AssetNoContent> =
 		getContext<DataContext<AssetNoContent>>(DATA_CONTEXT_KEY);
@@ -68,7 +69,18 @@
 	};
 </script>
 
-<p class="title doc">{key ?? ''}</p>
+<div class="title doc">
+	<DataHeader>
+		{key ?? ''}
+
+		<svelte:fragment slot="actions">
+			<DataDelete {deleteData}>
+				<svelte:fragment slot="title">{$i18n.asset.delete}</svelte:fragment>
+				{key}
+			</DataDelete>
+		</svelte:fragment>
+	</DataHeader>
+</div>
 
 {#if nonNullish(asset)}
 	<article class="doc">
@@ -126,11 +138,6 @@
 				{formatToDate(asset.updated_at)}
 			</Value>
 		</div>
-
-		<DataToolbar {deleteData}>
-			<svelte:fragment slot="del-title">{$i18n.asset.delete}</svelte:fragment>
-			<svelte:fragment slot="del-content">{key}</svelte:fragment>
-		</DataToolbar>
 	</article>
 {/if}
 

diff --git a/src/frontend/src/lib/components/assets/Assets.svelte b/src/frontend/src/lib/components/assets/Assets.svelte
@@ -13,7 +13,7 @@
 	import { DATA_CONTEXT_KEY } from '$lib/types/data.context';
 	import DataPaginator from '$lib/components/data/DataPaginator.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import DataList from '$lib/components/data/DataList.svelte';
+	import DataCollectionHeader from '$lib/components/data/DataCollectionHeader.svelte';
 	import { listParamsStore } from '$lib/stores/data.store';
 	import CollectionEmpty from '$lib/components/collections/CollectionEmpty.svelte';
 	import type { ListParams } from '$lib/types/list';
@@ -97,9 +97,9 @@
 </script>
 
 <div class="title">
-	<DataList>
+	<DataCollectionHeader>
 		{$i18n.storage.assets}
-	</DataList>
+	</DataCollectionHeader>
 </div>
 
 {#if !emptyCollection}

diff --git a/src/frontend/src/lib/components/core/Actions.svelte b/src/frontend/src/lib/components/core/Actions.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
 	import Popover from '$lib/components/ui/Popover.svelte';
 	import IconMore from '$lib/components/icons/IconMore.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
 
-	export let visible: boolean | undefined;
+	export let visible: boolean | undefined = undefined;
 
 	let button: HTMLButtonElement | undefined;
 </script>
 
-<button class="square" bind:this={button} on:click={() => (visible = true)}><IconMore /></button>
+<button
+	class="square"
+	bind:this={button}
+	on:click={() => (visible = true)}
+	aria-label={$i18n.core.more}><IconMore /></button
+>
 
 <Popover bind:visible anchor={button} direction="rtl">
 	<div class="container">

diff --git a/src/frontend/src/lib/components/core/Confirmation.svelte b/src/frontend/src/lib/components/core/Confirmation.svelte
@@ -30,6 +30,7 @@
 <style lang="scss">
 	.content {
 		padding: var(--padding-2x);
+		max-width: 100%;
 	}
 
 	h3 {

diff --git a/src/frontend/src/lib/components/data/DataActions.svelte b/src/frontend/src/lib/components/data/DataActions.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Popover from '$lib/components/ui/Popover.svelte';
+	import IconMore from '$lib/components/icons/IconMore.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	export let visible: boolean | undefined = undefined;
+
+	let button: HTMLButtonElement | undefined;
+</script>
+
+<button
+	class="icon"
+	aria-label={$i18n.core.more}
+	type="button"
+	on:click={() => (visible = true)}
+	bind:this={button}><IconMore size="20px" /></button
+>
+
+<Popover bind:visible anchor={button} direction="rtl">
+	<div class="container">
+		<slot />
+	</div>
+</Popover>
+
+<style lang="scss">
+	@use '../../styles/mixins/overlay';
+
+	@include overlay.popover-container;
+
+	button.icon {
+		padding: 0;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataCollectionHeader.svelte b/src/frontend/src/lib/components/data/DataCollectionHeader.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import DataOrder from '$lib/components/data/DataOrder.svelte';
+	import DataFilter from '$lib/components/data/DataFilter.svelte';
+	import DataActions from '$lib/components/data/DataActions.svelte';
+	import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context';
+	import { getContext } from 'svelte';
+	import { nonNullish } from '@dfinity/utils';
+	import { fade } from 'svelte/transition';
+
+	const { store }: RulesContext = getContext<RulesContext>(RULES_CONTEXT_KEY);
+
+	let collectionSelected = false;
+	$: collectionSelected = nonNullish($store.rule);
+</script>
+
+<div class="actions">
+	<span><slot /></span>
+
+	{#if collectionSelected}
+		<div transition:fade>
+			<DataFilter />
+			<DataOrder />
+			<!--			<DataActions>TODO</DataActions>-->
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.actions {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	div {
+		display: flex;
+		gap: var(--padding-1_5x);
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataDelete.svelte b/src/frontend/src/lib/components/data/DataDelete.svelte
@@ -15,7 +15,6 @@
 
 	export let deleteData: (params: { collection: string; satelliteId: Principal }) => Promise<void>;
 
-	let button: HTMLButtonElement | undefined;
 	let visible: boolean | undefined;
 
 	const close = () => (visible = false);
@@ -56,12 +55,8 @@
 	};
 </script>
 
-<button
-	class="square"
-	aria-label={$i18n.core.delete}
-	type="button"
-	on:click={() => (visible = true)}
-	bind:this={button}><IconDelete size="20px" /></button
+<button class="menu" type="button" on:click={() => (visible = true)}
+	><IconDelete size="20px" /> {$i18n.core.delete}</button
 >
 
 <Confirmation bind:visible on:junoYes={deleteSelectedData} on:junoNo={close}>
@@ -72,3 +67,11 @@
 		<p><slot /></p>
 	</Value>
 </Confirmation>
+
+<style lang="scss">
+	@use '../../styles/mixins/text';
+
+	p {
+		@include text.truncate;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataHeader.svelte b/src/frontend/src/lib/components/data/DataHeader.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" generics="T">
+	import DataActions from '$lib/components/data/DataActions.svelte';
+	import {
+		DATA_CONTEXT_KEY,
+		type DataContext,
+		type DataStoreAction
+	} from '$lib/types/data.context';
+	import { getContext } from 'svelte';
+	import { nonNullish } from '@dfinity/utils';
+	import { fade } from 'svelte/transition';
+
+	const { store }: DataContext<T> = getContext<DataContext<T>>(DATA_CONTEXT_KEY);
+
+	let action: DataStoreAction | undefined;
+	$: action = $store?.action;
+</script>
+
+{#if nonNullish(action)}
+	<div class="actions" transition:fade>
+		<span><slot /></span>
+
+		<DataActions>
+			<slot name="actions" />
+		</DataActions>
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '../../styles/mixins/text';
+
+	.actions {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--padding-2x);
+	}
+
+	span {
+		@include text.truncate;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/data/DataList.svelte b/src/frontend/src/lib/components/data/DataList.svelte
diff --git a/src/frontend/src/lib/components/data/DataToolbar.svelte b/src/frontend/src/lib/components/data/DataToolbar.svelte
diff --git a/src/frontend/src/lib/components/docs/Doc.svelte b/src/frontend/src/lib/components/docs/Doc.svelte
@@ -7,18 +7,15 @@
 	import type { Doc } from '$declarations/satellite/satellite.did';
 	import { getContext } from 'svelte';
 	import type { Principal } from '@dfinity/principal';
-	import { fromNullable, isNullish, nonNullish } from '@dfinity/utils';
+	import { fromNullable, nonNullish } from '@dfinity/utils';
 	import { fromArray } from '$lib/utils/did.utils';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import { formatToDate } from '$lib/utils/date.utils';
 	import Json from '$lib/components/ui/Json.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
-	import { deleteDoc } from '$lib/api/satellites.api';
-	import { toasts } from '$lib/stores/toasts.store';
-	import DataToolbar from '$lib/components/data/DataToolbar.svelte';
 
-	const { store, resetData }: DataContext<Doc> = getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
+	const { store }: DataContext<Doc> = getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
 
 	let key: string | undefined;
 	$: key = $store?.key;
@@ -36,24 +33,6 @@
 	let obj: unknown | undefined = undefined;
 	$: (async () =>
 		(obj = nonNullish(doc) && nonNullish(doc?.data) ? await fromArray(doc.data) : undefined))();
-
-	let deleteData: (params: { collection: string; satelliteId: Principal }) => Promise<void>;
-	$: deleteData = async (params: { collection: string; satelliteId: Principal }) => {
-		if (isNullish(key) || key === '') {
-			toasts.error({
-				text: $i18n.errors.key_invalid
-			});
-			return;
-		}
-
-		await deleteDoc({
-			...params,
-			key,
-			doc
-		});
-
-		resetData();
-	};
 </script>
 
 {#if nonNullish(doc) && action === 'view'}
@@ -96,11 +75,6 @@
 				<div class="json"><Json json={obj} /></div>
 			</Value>
 		</div>
-
-		<DataToolbar {deleteData}>
-			<svelte:fragment slot="del-title">{$i18n.document.delete}</svelte:fragment>
-			<svelte:fragment slot="del-content">{key}</svelte:fragment>
-		</DataToolbar>
 	</article>
 {/if}