From add274be1b9f5ff30d1bcfcbc3bbb661440cc56d Mon Sep 17 00:00:00 2001
From: SquidSpirit <squid@squidspirit.com>
Date: Wed, 15 Oct 2025 22:01:25 +0800
Subject: [PATCH] feat: implement update label functionality with associated
 stores and API integration

---
 frontend/src/lib/container.ts                 | 12 +++++
 .../label/adapter/gateway/labelApiService.ts  |  2 +
 .../adapter/gateway/labelRepositoryImpl.ts    |  8 +++
 .../adapter/gateway/updateLabelRequestDto.ts  | 26 ++++++++++
 .../adapter/presenter/labelUpdatedStore.ts    | 47 ++++++++++++++++++
 .../application/gateway/labelRepository.ts    |  6 +++
 .../application/useCase/updateLabelUseCase.ts | 13 +++++
 .../framework/api/labelApiServiceImpl.ts      | 18 +++++++
 .../ui/LabelContentDashboardPage.svelte       | 49 ++++++++++++++++---
 .../routes/dashboard/label/[id]/+page.svelte  |  8 ++-
 10 files changed, 180 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/label/adapter/gateway/updateLabelRequestDto.ts
 create mode 100644 frontend/src/lib/label/adapter/presenter/labelUpdatedStore.ts
 create mode 100644 frontend/src/lib/label/application/useCase/updateLabelUseCase.ts

diff --git a/frontend/src/lib/container.ts b/frontend/src/lib/container.ts
index 1d2822f..5b61dc4 100644
--- a/frontend/src/lib/container.ts
+++ b/frontend/src/lib/container.ts
@@ -7,11 +7,13 @@ import { AuthApiServiceImpl } from '$lib/auth/framework/api/authApiServiceImpl';
 import type { LabelApiService } from '$lib/label/adapter/gateway/labelApiService';
 import { LabelRepositoryImpl } from '$lib/label/adapter/gateway/labelRepositoryImpl';
 import { LabelCreatedStore } from '$lib/label/adapter/presenter/labelCreatedStore';
+import { LabelUpdatedStore } from '$lib/label/adapter/presenter/labelUpdatedStore';
 import type { LabelViewModel } from '$lib/label/adapter/presenter/labelViewModel';
 import { LabelsListedStore } from '$lib/label/adapter/presenter/labelsListedStore';
 import type { LabelRepository } from '$lib/label/application/gateway/labelRepository';
 import { CreateLabelUseCase } from '$lib/label/application/useCase/createLabelUseCase';
 import { GetAllLabelsUseCase } from '$lib/label/application/useCase/getAllLabelsUseCase';
+import { UpdateLabelUseCase } from '$lib/label/application/useCase/updateLabelUseCase';
 import { LabelApiServiceImpl } from '$lib/label/framework/api/labelApiServiceImpl';
 import type { ImageApiService } from '$lib/image/adapter/gateway/imageApiService';
 import { ImageRepositoryImpl } from '$lib/image/adapter/gateway/imageRepositoryImpl';
@@ -74,6 +76,10 @@ export class Container {
 	createLabelCreatedStore(): LabelCreatedStore {
 		return new LabelCreatedStore(this.useCases.createLabelUseCase);
 	}
+
+	createLabelUpdatedStore(): LabelUpdatedStore {
+		return new LabelUpdatedStore(this.useCases.updateLabelUseCase);
+	}
 }
 
 class ApiServices {
@@ -153,6 +159,7 @@ class UseCases {
 	private _getAllLabelsUseCase?: GetAllLabelsUseCase;
 	private _getLabelUseCase?: GetLabelUseCase;
 	private _createLabelUseCase?: CreateLabelUseCase;
+	private _updateLabelUseCase?: UpdateLabelUseCase;
 
 	constructor(repositories: Repositories) {
 		this.repositories = repositories;
@@ -197,4 +204,9 @@ class UseCases {
 		this._createLabelUseCase ??= new CreateLabelUseCase(this.repositories.labelRepository);
 		return this._createLabelUseCase;
 	}
+
+	get updateLabelUseCase(): UpdateLabelUseCase {
+		this._updateLabelUseCase ??= new UpdateLabelUseCase(this.repositories.labelRepository);
+		return this._updateLabelUseCase;
+	}
 }
diff --git a/frontend/src/lib/label/adapter/gateway/labelApiService.ts b/frontend/src/lib/label/adapter/gateway/labelApiService.ts
index 68d79e5..2ddc196 100644
--- a/frontend/src/lib/label/adapter/gateway/labelApiService.ts
+++ b/frontend/src/lib/label/adapter/gateway/labelApiService.ts
@@ -1,8 +1,10 @@
 import type { CreateLabelRequestDto } from '$lib/label/adapter/gateway/createLabelRequestDto';
 import type { LabelResponseDto } from '$lib/label/adapter/gateway/labelResponseDto';
+import type { UpdateLabelRequestDto } from '$lib/label/adapter/gateway/updateLabelRequestDto';
 
 export interface LabelApiService {
 	getAllLabels(): Promise<LabelResponseDto[]>;
 	getLabelById(id: number): Promise<LabelResponseDto | null>;
 	createLabel(payload: CreateLabelRequestDto): Promise<LabelResponseDto>;
+	updateLabel(id: number, payload: UpdateLabelRequestDto): Promise<LabelResponseDto>;
 }
diff --git a/frontend/src/lib/label/adapter/gateway/labelRepositoryImpl.ts b/frontend/src/lib/label/adapter/gateway/labelRepositoryImpl.ts
index 8ff3642..31c4447 100644
--- a/frontend/src/lib/label/adapter/gateway/labelRepositoryImpl.ts
+++ b/frontend/src/lib/label/adapter/gateway/labelRepositoryImpl.ts
@@ -1,8 +1,10 @@
 import { CreateLabelRequestDto } from '$lib/label/adapter/gateway/createLabelRequestDto';
 import type { LabelApiService } from '$lib/label/adapter/gateway/labelApiService';
+import { UpdateLabelRequestDto } from '$lib/label/adapter/gateway/updateLabelRequestDto';
 import type {
 	CreateLabelParams,
 	LabelRepository,
+	UpdateLabelParams,
 } from '$lib/label/application/gateway/labelRepository';
 import type { Label } from '$lib/label/domain/entity/label';
 
@@ -24,4 +26,10 @@ export class LabelRepositoryImpl implements LabelRepository {
 		const responseDto = await this.labelApiService.createLabel(requestDto);
 		return responseDto.toEntity();
 	}
+
+	async updateLabel(id: number, params: UpdateLabelParams): Promise<Label> {
+		const requestDto = UpdateLabelRequestDto.fromParams(params);
+		const responseDto = await this.labelApiService.updateLabel(id, requestDto);
+		return responseDto.toEntity();
+	}
 }
diff --git a/frontend/src/lib/label/adapter/gateway/updateLabelRequestDto.ts b/frontend/src/lib/label/adapter/gateway/updateLabelRequestDto.ts
new file mode 100644
index 0000000..63905f5
--- /dev/null
+++ b/frontend/src/lib/label/adapter/gateway/updateLabelRequestDto.ts
@@ -0,0 +1,26 @@
+import { ColorDto } from '$lib/label/adapter/gateway/colorDto';
+import type { UpdateLabelParams } from '$lib/label/application/gateway/labelRepository';
+
+export class UpdateLabelRequestDto {
+	readonly name: string;
+	readonly color: ColorDto;
+
+	private constructor(props: { name: string; color: ColorDto }) {
+		this.name = props.name;
+		this.color = props.color;
+	}
+
+	static fromParams(params: UpdateLabelParams): UpdateLabelRequestDto {
+		return new UpdateLabelRequestDto({
+			name: params.name,
+			color: ColorDto.fromEntity(params.color),
+		});
+	}
+
+	toJson() {
+		return {
+			name: this.name,
+			color: this.color.toJson(),
+		};
+	}
+}
diff --git a/frontend/src/lib/label/adapter/presenter/labelUpdatedStore.ts b/frontend/src/lib/label/adapter/presenter/labelUpdatedStore.ts
new file mode 100644
index 0000000..5fe4dc6
--- /dev/null
+++ b/frontend/src/lib/label/adapter/presenter/labelUpdatedStore.ts
@@ -0,0 +1,47 @@
+import { AsyncState } from '$lib/common/adapter/presenter/asyncState';
+import type { BaseStore } from '$lib/common/adapter/presenter/baseStore';
+import { LabelViewModel } from '$lib/label/adapter/presenter/labelViewModel';
+import type { UpdateLabelParams } from '$lib/label/application/gateway/labelRepository';
+import type { UpdateLabelUseCase } from '$lib/label/application/useCase/updateLabelUseCase';
+import { captureException } from '@sentry/sveltekit';
+import { get, writable } from 'svelte/store';
+
+type LabelState = AsyncState<LabelViewModel>;
+
+interface UpdateLabelTriggerParams {
+	id: number;
+	params: UpdateLabelParams;
+}
+
+export class LabelUpdatedStore implements BaseStore<LabelState, UpdateLabelTriggerParams> {
+	static readonly name = 'LabelUpdatedStore';
+
+	private readonly state = writable<LabelState>(AsyncState.idle<LabelViewModel>(null));
+
+	constructor(private readonly updateLabelUseCase: UpdateLabelUseCase) {}
+
+	get subscribe() {
+		return this.state.subscribe;
+	}
+
+	get trigger() {
+		return (params: UpdateLabelTriggerParams) => this.updateLabel(params);
+	}
+
+	private async updateLabel(params: UpdateLabelTriggerParams): Promise<LabelState> {
+		this.state.set(AsyncState.loading(get(this.state).data));
+
+		let result: LabelState;
+		try {
+			const label = await this.updateLabelUseCase.execute(params.id, params.params);
+			const labelViewModel = LabelViewModel.fromEntity(label);
+			result = AsyncState.success(labelViewModel);
+		} catch (error) {
+			captureException(error);
+			result = AsyncState.error(error, get(this.state).data);
+		}
+
+		this.state.set(result);
+		return result;
+	}
+}
diff --git a/frontend/src/lib/label/application/gateway/labelRepository.ts b/frontend/src/lib/label/application/gateway/labelRepository.ts
index 35e9813..f9da164 100644
--- a/frontend/src/lib/label/application/gateway/labelRepository.ts
+++ b/frontend/src/lib/label/application/gateway/labelRepository.ts
@@ -5,9 +5,15 @@ export interface LabelRepository {
 	getAllLabels(): Promise<Label[]>;
 	getLabelById(id: number): Promise<Label | null>;
 	createLabel(params: CreateLabelParams): Promise<Label>;
+	updateLabel(id: number, params: UpdateLabelParams): Promise<Label>;
 }
 
 export interface CreateLabelParams {
 	name: string;
 	color: Color;
 }
+
+export interface UpdateLabelParams {
+	name: string;
+	color: Color;
+}
diff --git a/frontend/src/lib/label/application/useCase/updateLabelUseCase.ts b/frontend/src/lib/label/application/useCase/updateLabelUseCase.ts
new file mode 100644
index 0000000..91df0dc
--- /dev/null
+++ b/frontend/src/lib/label/application/useCase/updateLabelUseCase.ts
@@ -0,0 +1,13 @@
+import type { Label } from '$lib/label/domain/entity/label';
+import type {
+	LabelRepository,
+	UpdateLabelParams,
+} from '$lib/label/application/gateway/labelRepository';
+
+export class UpdateLabelUseCase {
+	constructor(private readonly labelRepository: LabelRepository) {}
+
+	async execute(id: number, params: UpdateLabelParams): Promise<Label> {
+		return this.labelRepository.updateLabel(id, params);
+	}
+}
diff --git a/frontend/src/lib/label/framework/api/labelApiServiceImpl.ts b/frontend/src/lib/label/framework/api/labelApiServiceImpl.ts
index a402458..ce541e5 100644
--- a/frontend/src/lib/label/framework/api/labelApiServiceImpl.ts
+++ b/frontend/src/lib/label/framework/api/labelApiServiceImpl.ts
@@ -3,6 +3,7 @@ import { Environment } from '$lib/environment';
 import type { CreateLabelRequestDto } from '$lib/label/adapter/gateway/createLabelRequestDto';
 import type { LabelApiService } from '$lib/label/adapter/gateway/labelApiService';
 import { LabelResponseDto } from '$lib/label/adapter/gateway/labelResponseDto';
+import type { UpdateLabelRequestDto } from '$lib/label/adapter/gateway/updateLabelRequestDto';
 
 export class LabelApiServiceImpl implements LabelApiService {
 	constructor(private readonly fetchFn: typeof fetch) {}
@@ -52,4 +53,21 @@ export class LabelApiServiceImpl implements LabelApiService {
 		const data = await response.json();
 		return LabelResponseDto.fromJson(data);
 	}
+
+	async updateLabel(id: number, payload: UpdateLabelRequestDto): Promise<LabelResponseDto> {
+		const url = new URL(`label/${id}`, Environment.API_BASE_URL);
+
+		const response = await this.fetchFn(url, {
+			method: 'PUT',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(payload.toJson()),
+		});
+
+		if (!response.ok) {
+			throw new HttpError(response.status, url);
+		}
+
+		const data = await response.json();
+		return LabelResponseDto.fromJson(data);
+	}
 }
diff --git a/frontend/src/lib/label/framework/ui/LabelContentDashboardPage.svelte b/frontend/src/lib/label/framework/ui/LabelContentDashboardPage.svelte
index b58da60..1ab5b7f 100644
--- a/frontend/src/lib/label/framework/ui/LabelContentDashboardPage.svelte
+++ b/frontend/src/lib/label/framework/ui/LabelContentDashboardPage.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { LabelLoadedStore } from '$lib/label/adapter/presenter/labelLoadedStore';
+	import { LabelUpdatedStore } from '$lib/label/adapter/presenter/labelUpdatedStore';
+	import { ColorViewModel } from '$lib/label/adapter/presenter/colorViewModel';
 	import ColorCode from '$lib/label/framework/ui/ColorCode.svelte';
 	import EditLabelDialog, {
 		type EditLabelDialogFormParams,
 	} from '$lib/label/framework/ui/EditLabelDialog.svelte';
 	import PostLabel from '$lib/label/framework/ui/PostLabel.svelte';
 	import { getContext, onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
 
 	const { id }: { id: number } = $props();
 
@@ -14,6 +17,10 @@
 	const { trigger: loadLabel } = labelLoadedStore;
 	const label = $derived(labelLoadedState.data);
 
+	const labelUpdatedStore = getContext<LabelUpdatedStore>(LabelUpdatedStore.name);
+	const labelUpdatedState = $derived($labelUpdatedStore);
+	const { trigger: updateLabel } = labelUpdatedStore;
+
 	const formDefaultValues: EditLabelDialogFormParams | null = $derived.by(() => {
 		if (labelLoadedState.data === null) {
 			return null;
@@ -25,6 +32,32 @@
 	});
 
 	async function onSubmit(params: EditLabelDialogFormParams): Promise<boolean> {
+		if (!label) {
+			toast.error('Label not found');
+			return false;
+		}
+
+		const colorViewModel = ColorViewModel.fromHex(params.color);
+		const color = colorViewModel.toEntity();
+
+		const state = await updateLabel({
+			id: label.id,
+			params: {
+				name: params.name,
+				color: color,
+			},
+		});
+
+		if (state.isSuccess()) {
+			loadLabel(label.id);
+			toast.success('Label updated successfully');
+		} else if (state.isError()) {
+			toast.error('Failed to update label', {
+				description: state.error.message,
+			});
+			return false;
+		}
+
 		return true;
 	}
 
@@ -34,13 +67,15 @@
 <div class="dashboard-container mb-10">
 	<div class="flex flex-row items-center justify-between">
 		<h1 class="py-16 text-5xl font-bold text-gray-800">Label Details</h1>
-		<EditLabelDialog
-			title="Update Label"
-			triggerButtonText="Edit"
-			disabled={!labelLoadedState.isSuccess()}
-			defaultValues={formDefaultValues ?? undefined}
-			{onSubmit}
-		/>
+		{#key formDefaultValues}
+			<EditLabelDialog
+				title="Update Label"
+				triggerButtonText="Edit"
+				disabled={!labelLoadedState.isSuccess() || labelUpdatedState.isLoading()}
+				defaultValues={formDefaultValues ?? undefined}
+				{onSubmit}
+			/>
+		{/key}
 	</div>
 	<div class="grid grid-cols-[auto_1fr] gap-x-8 gap-y-3">
 		<span class="font-medium whitespace-nowrap">ID</span>
diff --git a/frontend/src/routes/dashboard/label/[id]/+page.svelte b/frontend/src/routes/dashboard/label/[id]/+page.svelte
index 31a6e60..e9034c2 100644
--- a/frontend/src/routes/dashboard/label/[id]/+page.svelte
+++ b/frontend/src/routes/dashboard/label/[id]/+page.svelte
@@ -4,6 +4,7 @@
 	import { Container } from '$lib/container';
 	import { LabelViewModel } from '$lib/label/adapter/presenter/labelViewModel';
 	import { LabelLoadedStore } from '$lib/label/adapter/presenter/labelLoadedStore';
+	import { LabelUpdatedStore } from '$lib/label/adapter/presenter/labelUpdatedStore';
 	import LabelContentDashboardPage from '$lib/label/framework/ui/LabelContentDashboardPage.svelte';
 
 	const { data, params }: PageProps = $props();
@@ -13,8 +14,11 @@
 	const container = getContext<Container>(Container.name);
 
 	const initialData = LabelViewModel.rehydrate(data.dehydratedData);
-	const store = container.createLabelLoadedStore(initialData);
-	setContext(LabelLoadedStore.name, store);
+	const labelLoadedStore = container.createLabelLoadedStore(initialData);
+	setContext(LabelLoadedStore.name, labelLoadedStore);
+
+	const labelUpdatedStore = container.createLabelUpdatedStore();
+	setContext(LabelUpdatedStore.name, labelUpdatedStore);
 </script>
 
 <LabelContentDashboardPage id={numericId} />