Group Management
+
+ {{ state.message()?.text }}
+
+
Create New Group
@@ -38,6 +45,7 @@ import { Group } from '../../models/group.model';
*ngIf="i > 0"
(click)="moveUp(group.id)"
class="action-btn"
+ [disabled]="state.busy()"
title="Move up"
>
↑
@@ -80,7 +88,7 @@ import { Group } from '../../models/group.model';
class="group-input"
/>
-
+
@@ -273,18 +281,46 @@ import { Group } from '../../models/group.model';
.cancel-btn:hover {
background: var(--accent-secondary-hover);
}
+
+ .message {
+ padding: 1rem;
+ border-radius: 4px;
+ margin-bottom: 1rem;
+ }
+
+ .error-message {
+ background: light-dark(#f8d7da, #721c24);
+ color: light-dark(#721c24, #f8d7da);
+ border: 1px solid light-dark(#f5c6cb, #721c24);
+ }
+
+ .success-message {
+ background: light-dark(#d4edda, #155724);
+ color: light-dark(#155724, #d4edda);
+ border: 1px solid light-dark(#c3e6cb, #155724);
+ }
`]
})
export class GroupManagerComponent implements OnInit {
+ private readonly storageService = inject(StorageService);
+ private readonly groupService = inject(GroupService);
+
+ state = createAsyncAction();
groups = signal
([]);
editingGroup = signal(null);
editGroupName = '';
newGroupName = '';
- constructor(private groupService: GroupService) {}
+ constructor() {
+ effect(() => {
+ const data = this.storageService.data();
+ if (data) {
+ this.loadGroups();
+ }
+ });
+ }
ngOnInit(): void {
- this.loadGroups();
}
loadGroups(): void {
@@ -295,68 +331,85 @@ export class GroupManagerComponent implements OnInit {
return [...this.groups()].sort((a, b) => a.order - b.order);
}
- createGroup(): void {
- if (!this.newGroupName.trim()) {
- return;
- }
- this.groupService.createGroup(this.newGroupName.trim());
- this.newGroupName = '';
- this.loadGroups();
- }
+ async createGroup(): Promise {
+ if (!this.newGroupName.trim()) {
+ return;
+ }
+ await withAsyncAction(
+ async () => {
+ await this.groupService.createGroup(this.newGroupName.trim());
+ this.newGroupName = '';
+ },
+ this.state
+ );
+ }
editGroup(group: Group): void {
this.editingGroup.set(group);
this.editGroupName = group.name;
}
- saveEdit(): void {
- const group = this.editingGroup();
- if (group && this.editGroupName.trim()) {
- this.groupService.updateGroup({
- ...group,
- name: this.editGroupName.trim()
- });
- this.cancelEdit();
- this.loadGroups();
- }
- }
+ async saveEdit(): Promise {
+ const group = this.editingGroup();
+ if (group && this.editGroupName.trim()) {
+ await withAsyncAction(
+ async () => {
+ await this.groupService.updateGroup({
+ ...group,
+ name: this.editGroupName.trim()
+ });
+ this.cancelEdit();
+ },
+ this.state
+ );
+ }
+ }
cancelEdit(): void {
this.editingGroup.set(null);
this.editGroupName = '';
}
- deleteGroup(groupId: string): void {
- if (confirm('Are you sure you want to delete this group? Items will be moved to "Ungrouped".')) {
- try {
- this.groupService.deleteGroup(groupId);
- this.loadGroups();
- } catch (error) {
- alert('Cannot delete the ungrouped group');
- }
- }
- }
-
- moveUp(groupId: string): void {
- const sorted = this.sortedGroups();
- const index = sorted.findIndex(g => g.id === groupId);
- if (index > 0) {
- const groupIds = sorted.map(g => g.id);
- [groupIds[index], groupIds[index - 1]] = [groupIds[index - 1], groupIds[index]];
- this.groupService.reorderGroups(groupIds);
- this.loadGroups();
- }
- }
-
- moveDown(groupId: string): void {
- const sorted = this.sortedGroups();
- const index = sorted.findIndex(g => g.id === groupId);
- if (index < sorted.length - 1) {
- const groupIds = sorted.map(g => g.id);
- [groupIds[index], groupIds[index + 1]] = [groupIds[index + 1], groupIds[index]];
- this.groupService.reorderGroups(groupIds);
- this.loadGroups();
- }
- }
+ async deleteGroup(groupId: string): Promise {
+ if (!confirm('Are you sure you want to delete this group? Items will be moved to "Ungrouped".')) {
+ return;
+ }
+ await withAsyncAction(
+ async () => {
+ await this.groupService.deleteGroup(groupId);
+ },
+ this.state
+ );
+ }
+
+ async moveUp(groupId: string): Promise {
+ const sorted = this.sortedGroups();
+ const index = sorted.findIndex(g => g.id === groupId);
+ if (index > 0) {
+ const groupIds = sorted.map(g => g.id);
+ [groupIds[index], groupIds[index - 1]] = [groupIds[index - 1], groupIds[index]];
+ await withAsyncAction(
+ async () => {
+ await this.groupService.reorderGroups(groupIds);
+ },
+ this.state
+ );
+ }
+ }
+
+ async moveDown(groupId: string): Promise {
+ const sorted = this.sortedGroups();
+ const index = sorted.findIndex(g => g.id === groupId);
+ if (index < sorted.length - 1) {
+ const groupIds = sorted.map(g => g.id);
+ [groupIds[index], groupIds[index + 1]] = [groupIds[index + 1], groupIds[index]];
+ await withAsyncAction(
+ async () => {
+ await this.groupService.reorderGroups(groupIds);
+ },
+ this.state
+ );
+ }
+ }
}
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index de1e8a3..dcd9be2 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,9 +1,11 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal, effect } from '@angular/core';
import { RoundRobinService } from '../../services/round-robin.service';
import { WatchListService } from '../../services/watch-list.service';
+import { StorageService } from '../../services/storage.service';
import { Item } from '../../models/item.model';
import { ItemCardComponent } from '../item-card/item-card.component';
import { NgIf } from '@angular/common';
+import { createAsyncAction, withAsyncAction } from '../../utils/async-action';
@Component({
selector: 'app-home',
@@ -12,6 +14,8 @@ import { NgIf } from '@angular/common';
What should I watch now?
+
{{ state.message()?.text }}
+
Next Series
@@ -20,6 +24,7 @@ import { NgIf } from '@angular/common';
[item]="nextSeries()!"
(onMarkWatched)="markSeriesWatched()"
(onMarkCompleted)="markSeriesCompleted()"
+ [disabled]="state.busy()"
/>
@@ -34,6 +39,7 @@ import { NgIf } from '@angular/common';
[item]="nextMovie()!"
(onMarkWatched)="markMovieWatched()"
(onMarkCompleted)="markMovieCompleted()"
+ [disabled]="state.busy()"
/>
@@ -86,17 +92,32 @@ import { NgIf } from '@angular/common';
background: light-dark(var(--light-bg-primary), var(--dark-bg-primary));
border-radius: 8px;
}
+
+ .error-message {
+ padding: 1rem;
+ background: light-dark(#f8d7da, #721c24);
+ color: light-dark(#721c24, #f8d7da);
+ border-radius: 4px;
+ margin-bottom: 1rem;
+ }
`]
})
export class HomeComponent {
+ private readonly roundRobinService = inject(RoundRobinService);
+ private readonly watchListService = inject(WatchListService);
+ private readonly storageService = inject(StorageService);
+
+ state = createAsyncAction();
nextSeries = signal- (null);
nextMovie = signal
- (null);
- constructor(
- private roundRobinService: RoundRobinService,
- private watchListService: WatchListService
- ) {
- this.updateNextItems();
+ constructor() {
+ effect(() => {
+ const data = this.storageService.data();
+ if (data) {
+ this.updateNextItems();
+ }
+ });
}
updateNextItems(): void {
@@ -104,35 +125,43 @@ export class HomeComponent {
this.nextMovie.set(this.roundRobinService.getNextMovieToWatch());
}
- markSeriesWatched(): void {
- const series = this.nextSeries();
- if (series) {
- this.watchListService.markWatched(series.id);
- this.updateNextItems();
- }
- }
+ markSeriesWatched = withAsyncAction(
+ async () => {
+ const series = this.nextSeries();
+ if (series) {
+ await this.watchListService.markWatched(series.id);
+ }
+ },
+ this.state
+ );
- markSeriesCompleted(): void {
- const series = this.nextSeries();
- if (series) {
- this.watchListService.markCompleted(series.id);
- this.updateNextItems();
- }
- }
+ markSeriesCompleted = withAsyncAction(
+ async () => {
+ const series = this.nextSeries();
+ if (series) {
+ await this.watchListService.markCompleted(series.id);
+ }
+ },
+ this.state
+ );
- markMovieWatched(): void {
- const movie = this.nextMovie();
- if (movie) {
- this.watchListService.markWatched(movie.id);
- this.updateNextItems();
- }
- }
+ markMovieWatched = withAsyncAction(
+ async () => {
+ const movie = this.nextMovie();
+ if (movie) {
+ await this.watchListService.markWatched(movie.id);
+ }
+ },
+ this.state
+ );
- markMovieCompleted(): void {
- const movie = this.nextMovie();
- if (movie) {
- this.watchListService.markCompleted(movie.id);
- this.updateNextItems();
- }
- }
+ markMovieCompleted = withAsyncAction(
+ async () => {
+ const movie = this.nextMovie();
+ if (movie) {
+ await this.watchListService.markCompleted(movie.id);
+ }
+ },
+ this.state
+ );
}
\ No newline at end of file
diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts
index b957feb..b9d6a31 100644
--- a/src/app/components/item-card/item-card.component.ts
+++ b/src/app/components/item-card/item-card.component.ts
@@ -41,10 +41,10 @@ import { WatchListService } from '../../services/watch-list.service';
-
@@ -156,6 +156,7 @@ import { WatchListService } from '../../services/watch-list.service';
})
export class ItemCardComponent {
item = input.required- ();
+ disabled = input(false);
onMarkWatched = output();
onMarkCompleted = output();
diff --git a/src/app/components/item-detail/item-detail.component.ts b/src/app/components/item-detail/item-detail.component.ts
index 4d36e5c..260c1b8 100644
--- a/src/app/components/item-detail/item-detail.component.ts
+++ b/src/app/components/item-detail/item-detail.component.ts
@@ -1,19 +1,24 @@
-import { Component, OnInit, signal, computed } from '@angular/core';
+import { Component, signal, computed, effect, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterLink, ActivatedRoute } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { WatchListService } from '../../services/watch-list.service';
import { GroupService } from '../../services/group.service';
+import { StorageService } from '../../services/storage.service';
import { Item, ItemType } from '../../models/item.model';
import { Group } from '../../models/group.model';
import { ProgressBarComponent } from '../progress-bar/progress-bar.component';
import { TimeAgoComponent } from '../time-ago/time-ago.component';
+import { createAsyncAction, withAsyncAction } from '../../utils/async-action';
@Component({
selector: 'app-item-detail',
imports: [CommonModule, FormsModule, RouterLink, ProgressBarComponent, TimeAgoComponent],
template: `
+
+ {{ state.message()?.text }}
+
-
-
- No items in this group
-
+
No items in this group