Skip to content

Commit c90c935

Browse files
manankarnikmanankarnik
committed
feat: remove asset from ui on deletion
1 parent db26b2c commit c90c935

File tree

2 files changed

+60
-56
lines changed

2 files changed

+60
-56
lines changed

‎src/lib/components/asset-card.svelte

Lines changed: 6 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,32 @@
11
<script>
22
import { page } from "$app/stores";
3-
import { User, Heart, MoreVertical, Pencil, Trash, Loader2, CheckCircle2 } from "lucide-svelte";
3+
import { User, Heart, MoreVertical, Pencil, Trash } from "lucide-svelte";
44
import { Button } from "$lib/components/ui/button";
55
import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
6-
import * as Dialog from "$lib/components/ui/dialog";
76
import * as Avatar from "$lib/components/ui/avatar";
87
import * as Tooltip from "$lib/components/ui/tooltip";
9-
import * as Alert from "$lib/components/ui/alert";
108
119
export let asset;
1210
export let manage = false;
13-
let open = false;
14-
let title;
11+
export let deleteDialog = () => {};
1512
let animate;
16-
let loading;
17-
let alert;
18-
19-
async function deleteAsset(id) {
20-
loading = true;
21-
await fetch("/asset", { method: "DELETE", body: JSON.stringify({ id }) });
22-
loading = false;
23-
open = false;
24-
alert = true;
25-
setTimeout(() => {
26-
alert = false;
27-
}, 2000);
28-
}
2913
async function changeLikeStatus() {
3014
animate = true;
3115
setTimeout(() => {
3216
animate = false;
3317
}, 250);
34-
const response = await fetch("/like", {
18+
asset.liked = !asset.liked;
19+
asset.likes = asset.liked ? asset.likes + 1 : asset.likes - 1;
20+
await fetch("/like", {
3521
method: "POST",
3622
body: JSON.stringify({
3723
assetId: asset.id,
3824
userId: $page.data.userId
3925
})
4026
});
41-
asset.liked = (await response.json()).liked;
42-
asset.likes = asset.liked ? asset.likes + 1 : asset.likes - 1;
4327
}
4428
</script>
4529

46-
<div class={`top-20 left-0 fixed flex h-20 w-full justify-center ${alert ? "" : "hidden"}`}>
47-
<Alert.Root variant="success" class="w-30 bg-slate-100 dark:bg-slate-900">
48-
<CheckCircle2 class="h-4 w-4 text-green-500" />
49-
<Alert.Title>Success</Alert.Title>
50-
<Alert.Description>Asset deleted successfully!</Alert.Description>
51-
</Alert.Root>
52-
</div>
5330
<div class="animate-gradient rounded-xl p-[4px] hover:border-transparent hover:bg-gradient-to-r">
5431
<div class="h-full w-full rounded-lg bg-slate-100 p-4 dark:bg-slate-900">
5532
<svelte:element
@@ -96,10 +73,7 @@
9673
</DropdownMenu.Item>
9774
<DropdownMenu.Item
9875
class="flex flex-row items-center gap-2 text-destructive hover:bg-destructive"
99-
on:click={() => {
100-
title = asset.title;
101-
open = true;
102-
}}
76+
on:click={() => deleteDialog(asset.id)}
10377
>
10478
<Trash size={20} />
10579
Delete Asset
@@ -150,25 +124,3 @@
150124
</svelte:element>
151125
</div>
152126
</div>
153-
154-
<Dialog.Root {open}>
155-
<Dialog.Content>
156-
<Dialog.Header>
157-
<Dialog.Title>Delete Asset</Dialog.Title>
158-
<Dialog.Description>
159-
Are you sure you want to <span class="font-bold text-destructive">DELETE</span> the asset
160-
<span class="font-bold text-primary">{title}</span>?
161-
</Dialog.Description>
162-
</Dialog.Header>
163-
<div class="flex justify-end gap-4">
164-
<Button variant="outline" on:click={() => (open = false)}>Cancel</Button>
165-
{#if loading}
166-
<Button disabled variant="destructive">
167-
<Loader2 class="animate-spin" />
168-
</Button>
169-
{:else}
170-
<Button variant="destructive" on:click={deleteAsset(asset.id)}>Delete</Button>
171-
{/if}
172-
</div>
173-
</Dialog.Content>
174-
</Dialog.Root>

‎src/routes/manage/+page.svelte

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
11
<script>
2-
import background from "$lib/assets/gradient.png";
2+
import { page } from "$app/stores";
3+
import { Loader2, CheckCircle2 } from "lucide-svelte";
4+
import { Button } from "$lib/components/ui/button";
5+
import * as Dialog from "$lib/components/ui/dialog";
6+
import * as Alert from "$lib/components/ui/alert";
37
import AssetCard from "$lib/components/asset-card.svelte";
48
import SearchFilter from "$lib/components/search-filter.svelte";
59
610
export let data;
711
let filteredAssets = data.assets;
12+
let open = false;
13+
let loading;
14+
let alert;
15+
let currentAsset;
16+
17+
function deleteDialog(id) {
18+
open = true;
19+
currentAsset = data.assets.find(asset => asset.id == id);
20+
}
21+
async function deleteAsset(id) {
22+
loading = true;
23+
await fetch("/asset", { method: "DELETE", body: JSON.stringify({ id }) });
24+
loading = false;
25+
open = false;
26+
data.assets = data.assets.filter(asset => asset.id != id);
27+
alert = true;
28+
setTimeout(() => {
29+
alert = false;
30+
}, 2000);
31+
}
832
</script>
933

34+
<div class={`fixed left-0 top-20 flex h-20 w-full justify-center ${alert ? "" : "hidden"}`}>
35+
<Alert.Root variant="success" class="w-30 bg-slate-100 dark:bg-slate-900">
36+
<CheckCircle2 class="h-4 w-4 text-green-500" />
37+
<Alert.Title>Success</Alert.Title>
38+
<Alert.Description>Asset deleted successfully!</Alert.Description>
39+
</Alert.Root>
40+
</div>
1041
<section class="container p-8">
1142
<h1
1243
class="animate-gradient bg-gradient-to-r bg-clip-text text-2xl font-extrabold text-transparent sm:text-3xl md:text-4xl lg:pb-1 lg:text-5xl"
@@ -20,8 +51,29 @@
2051
{:else}
2152
<div class="grid-col-1 my-4 mt-2 grid gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
2253
{#each filteredAssets as asset}
23-
<AssetCard {asset} manage={true} />
54+
<AssetCard {asset} manage={true} {deleteDialog} />
2455
{/each}
2556
</div>
2657
{/if}
2758
</section>
59+
<Dialog.Root bind:open>
60+
<Dialog.Content>
61+
<Dialog.Header>
62+
<Dialog.Title>Delete Asset</Dialog.Title>
63+
<Dialog.Description>
64+
Are you sure you want to <span class="font-bold text-destructive">DELETE</span> the asset
65+
<span class="font-bold text-primary">{currentAsset.title}</span>?
66+
</Dialog.Description>
67+
</Dialog.Header>
68+
<div class="flex justify-end gap-4">
69+
<Button variant="outline" on:click={() => (open = false)}>Cancel</Button>
70+
{#if loading}
71+
<Button disabled variant="destructive">
72+
<Loader2 class="animate-spin" />
73+
</Button>
74+
{:else}
75+
<Button variant="destructive" on:click={deleteAsset(currentAsset.id)}>Delete</Button>
76+
{/if}
77+
</div>
78+
</Dialog.Content>
79+
</Dialog.Root>

0 commit comments

Comments
 (0)