ethan.chen/score-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement delete confirmation modal for media items, enhance MediaItem component with delete functionality, and update App component to manage deletion state

Browse Source
This commit is contained in:
ethan.chen
2025-05-27 18:06:19 +08:00
parent 5811739409
commit dcb95f35f8
5 changed files with 142 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/MediaFormModal.svelte
View File

@@ -2,11 +2,10 @@
import type { Media } from './interfaces';
import { fade, scale } from 'svelte/transition';
let {show, mode, submitMedia, handleClose, media: initialMedia} = $props();
let {show, mode, submitMedia, handleClose, media: initialMedia, itemType} = $props();
let media: Media = $state({
title: '',
type: '',
status: 'plan_to_watch',
type: itemType,
date: '',
rating: 0,
platform: '',
@@ -19,8 +18,7 @@
} else {
media = {
title: '',
type: '',
status: 'plan_to_watch',
type: itemType,
date: '',
rating: 0,
platform: '',
@@ -94,9 +92,9 @@
</div>
<div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="status">类别</label>
<label class="font-medium text-gray-700 whitespace-nowrap" for="type">类别</label>
<select
id="status"
id="type"
bind:value={media.type}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
required
@@ -108,21 +106,6 @@
</select>
</div>
<div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="status">状态</label>
<select
id="status"
bind:value={media.status}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
required
aria-required="true"
>
{#each statusOptions as option}
<option value={option.value}>{option.label}</option>
{/each}
</select>
</div>
<div class="flex justify-between items-center gap-6">
<label class="font-medium text-gray-700 whitespace-nowrap" for="date">日期</label>
<input