@@ -116,7 +116,7 @@
>
X
diff --git a/src/app/layout/ui/layout-footer/layout-footer.component.ts b/src/app/layout/ui/layout-footer/layout-footer.component.ts
index 9e73fc7..c98fe41 100644
--- a/src/app/layout/ui/layout-footer/layout-footer.component.ts
+++ b/src/app/layout/ui/layout-footer/layout-footer.component.ts
@@ -1,7 +1,7 @@
import { Component, inject, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgIconComponent } from '@ng-icons/core';
-import { simpleDiscord, simpleGithub, simpleInstagram, simpleTwitter, simpleYoutube } from '@ng-icons/simple-icons';
+import { simpleDiscord, simpleGithub, simpleInstagram, simpleX, simpleYoutube } from '@ng-icons/simple-icons';
import { TranslateModule } from '@ngx-translate/core';
import { VersionService } from '../../../shared/data-access/version.service';
@@ -19,7 +19,7 @@ export class LayoutFooterComponent {
protected readonly simpleDiscord = simpleDiscord;
protected readonly simpleGithub = simpleGithub;
protected readonly simpleInstagram = simpleInstagram;
- protected readonly simpleTwitter = simpleTwitter;
+ protected readonly simpleX = simpleX;
protected readonly simpleYoutube = simpleYoutube;
protected readonly version = this._versionService.appVersion;
diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts
index ecbc82a..c49d90b 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/list/list.component.ts
@@ -31,11 +31,13 @@ export default class ListComponent {
protected readonly heroPlusMini = heroPlusMini;
protected async deletePalette(palette: PaletteListItem): Promise
{
- const shouldDelete = await this._dialogService.confirm(
- this._translateService.instant('list.delete.dialog', {
+ const shouldDelete = await this._dialogService.confirm({
+ title: 'list.delete.hover',
+ message: this._translateService.instant('list.delete.dialog', {
name: palette.name
- })
- );
+ }),
+ confirmLabel: 'common.delete'
+ });
if (shouldDelete) {
this._listService.remove(palette.id);
}
@@ -45,9 +47,23 @@ export default class ListComponent {
// Load the palette to duplicate
this._paletteService.loadPaletteFromLocalStorage(palette.id);
+ const name = await this._dialogService.prompt({
+ title: 'list.duplicate.hover',
+ message: this._translateService.instant('list.duplicate.dialog', {
+ name: palette.name
+ }),
+ confirmLabel: 'common.duplicate',
+ label: 'common.name',
+ placeholder: 'common.name'
+ });
+
+ if (!name) {
+ return;
+ }
+
try {
// Create a copy of the palette and open it
- const copyId = this._paletteService.duplicatePalette();
+ const copyId = this._paletteService.duplicatePalette(name);
await this._router.navigate(['/view', copyId], {
info: {
palette: 'new'
diff --git a/src/app/shared/constants/palette-scheme.ts b/src/app/shared/constants/palette-scheme.ts
index 01aed5c..5c70607 100644
--- a/src/app/shared/constants/palette-scheme.ts
+++ b/src/app/shared/constants/palette-scheme.ts
@@ -22,3 +22,13 @@ export const PALETTE_SCHEMES = [
{ value: PaletteScheme.TRIADIC, label: 'scheme.triadic' },
{ value: PaletteScheme.COMPOUND, label: 'scheme.compound' }
];
+
+/**
+ * Get a random color palette scheme.
+ */
+export function randomScheme(): { value: PaletteScheme; label: string } {
+ // Exclude the surprise scheme as it doesn't make sense here
+ const schemes = PALETTE_SCHEMES.filter((scheme) => scheme.value !== PaletteScheme.SURPRISE);
+
+ return schemes[Math.floor(Math.random() * schemes.length)];
+}
diff --git a/src/app/shared/data-access/confetti.service.spec.ts b/src/app/shared/data-access/confetti.service.spec.ts
new file mode 100644
index 0000000..bb03198
--- /dev/null
+++ b/src/app/shared/data-access/confetti.service.spec.ts
@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { ConfettiService } from './confetti.service';
+import { PaletteService, PaletteServiceMock } from './palette.service';
+
+describe('ConfettiService', () => {
+ let service: ConfettiService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [
+ {
+ provide: PaletteService,
+ useClass: PaletteServiceMock
+ }
+ ]
+ });
+ service = TestBed.inject(ConfettiService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/data-access/confetti.service.ts b/src/app/shared/data-access/confetti.service.ts
new file mode 100644
index 0000000..e4d0c94
--- /dev/null
+++ b/src/app/shared/data-access/confetti.service.ts
@@ -0,0 +1,38 @@
+import { computed, inject, Injectable } from '@angular/core';
+import confetti from 'canvas-confetti';
+import { PaletteService } from './palette.service';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ConfettiService {
+ readonly #paletteService = inject(PaletteService);
+
+ /**
+ * Hex colors of the current palette
+ */
+ readonly #colors = computed | undefined>(() => {
+ // Check if palette is present
+ const palette = this.#paletteService.palette();
+ if (!palette || !palette.colors) {
+ return undefined;
+ }
+
+ // Get all hex codes of all shades in palette
+ return palette.colors.flatMap((color) => color.shades.map((shade) => shade.hex));
+ });
+
+ /**
+ * Shoot confetti in the colors of the current palette
+ */
+ public confetti(configs: Array>): void {
+ // Trigger all given confetti configs
+ for (const config of configs) {
+ confetti({ ...config, colors: this.#colors(), zIndex: 1001 });
+ }
+ }
+}
+
+export class ConfettiServiceMock {
+ public confetti(_configs: Array>): void {}
+}
diff --git a/src/app/shared/data-access/dialog.service.spec.ts b/src/app/shared/data-access/dialog.service.spec.ts
index 1f7e377..ec0703a 100644
--- a/src/app/shared/data-access/dialog.service.spec.ts
+++ b/src/app/shared/data-access/dialog.service.spec.ts
@@ -1,41 +1,72 @@
+import { Dialog } from '@angular/cdk/dialog';
import { TestBed } from '@angular/core/testing';
+import { DialogMock } from '../utils/dialog-mock';
import { DialogService } from './dialog.service';
describe('DialogService', () => {
- let service: DialogService;
+ it('should prompt', async () => {
+ // Setup dialog for prompt test
+ const dialog = new DialogMock('Test');
- beforeEach(() => {
- TestBed.configureTestingModule({});
- service = TestBed.inject(DialogService);
- });
+ TestBed.configureTestingModule({
+ providers: [{ provide: Dialog, useValue: dialog }]
+ });
+ const service = TestBed.inject(DialogService);
- it('should be created', () => {
- expect(service).toBeTruthy();
- });
-
- it('should prompt', async () => {
- spyOn(window, 'prompt').and.returnValue('Test');
+ // Test
+ spyOn(dialog, 'open').and.callThrough();
- const result = await service.prompt('message', 'default');
+ const result = await service.prompt({
+ title: 'title',
+ message: 'message',
+ confirmLabel: 'confirm',
+ initialValue: 'initial'
+ });
+ expect(dialog.open).toHaveBeenCalledTimes(1);
expect(result).toBe('Test');
- expect(window.prompt).toHaveBeenCalledWith('message', 'default');
});
it('should confirm', async () => {
- spyOn(window, 'confirm').and.returnValue(true);
+ // Setup dialog for confirm test
+ const dialog = new DialogMock(true);
- const result = await service.confirm('message');
+ TestBed.configureTestingModule({
+ providers: [{ provide: Dialog, useValue: dialog }]
+ });
+ const service = TestBed.inject(DialogService);
+ // Test
+ spyOn(dialog, 'open').and.callThrough();
+
+ const result = await service.confirm({
+ title: 'title',
+ message: 'message',
+ confirmLabel: 'confirm'
+ });
+
+ expect(dialog.open).toHaveBeenCalledTimes(1);
expect(result).toBeTrue();
- expect(window.confirm).toHaveBeenCalledWith('message');
});
it('should alert', async () => {
- spyOn(window, 'alert');
+ // Setup dialog for alert test
+ const dialog = new DialogMock(undefined);
+
+ TestBed.configureTestingModule({
+ providers: [{ provide: Dialog, useValue: dialog }]
+ });
+ const service = TestBed.inject(DialogService);
+
+ // Test
+ spyOn(dialog, 'open').and.callThrough();
- await service.alert('message');
+ const result = await service.alert({
+ title: 'title',
+ message: 'message'
+ });
- expect(window.alert).toHaveBeenCalledWith('message');
+ expect(dialog.open).toHaveBeenCalledTimes(1);
+ expect(result).toBeUndefined();
});
});
diff --git a/src/app/shared/data-access/dialog.service.ts b/src/app/shared/data-access/dialog.service.ts
index b778ecc..22dfc49 100644
--- a/src/app/shared/data-access/dialog.service.ts
+++ b/src/app/shared/data-access/dialog.service.ts
@@ -1,32 +1,70 @@
-import { Injectable } from '@angular/core';
+import { Dialog } from '@angular/cdk/dialog';
+import { inject, Injectable } from '@angular/core';
+import { firstValueFrom, map } from 'rxjs';
+import { AlertConfig, ConfirmConfig, PromptConfig } from '../types/dialog-config';
@Injectable({
providedIn: 'root'
})
export class DialogService {
- public async prompt(message: string, defaultValue: string): Promise {
- return window.prompt(message, defaultValue) ?? undefined;
+ private readonly _dialog = inject(Dialog);
+
+ public async prompt(config: Omit): Promise {
+ const promptComponent = await import('../ui/dialog/dialog.component').then((c) => c.DialogComponent);
+ const dialogRef = this._dialog.open(promptComponent, {
+ backdropClass: 'rp-modal-backdrop',
+ data: {
+ ...config,
+ type: 'prompt'
+ },
+ panelClass: 'rp-modal-panel',
+ width: 'inherit'
+ });
+
+ return await firstValueFrom(dialogRef.closed.pipe(map((result) => result ?? undefined)));
}
- public async confirm(message: string): Promise {
- return window.confirm(message);
+ public async confirm(config: Omit): Promise {
+ const confirmComponent = await import('../ui/dialog/dialog.component').then((c) => c.DialogComponent);
+ const dialogRef = this._dialog.open(confirmComponent, {
+ backdropClass: 'rp-modal-backdrop',
+ data: {
+ ...config,
+ type: 'confirm'
+ },
+ panelClass: 'rp-modal-panel',
+ width: 'inherit'
+ });
+
+ return await firstValueFrom(dialogRef.closed.pipe(map((result) => !!result)));
}
- public async alert(message: string): Promise {
- window.alert(message);
+ public async alert(config: Omit): Promise {
+ const alertComponent = await import('../ui/dialog/dialog.component').then((c) => c.DialogComponent);
+ const dialogRef = this._dialog.open(alertComponent, {
+ backdropClass: 'rp-modal-backdrop',
+ data: {
+ ...config,
+ type: 'alert'
+ },
+ panelClass: 'rp-modal-panel',
+ width: 'inherit'
+ });
+
+ return await firstValueFrom(dialogRef.closed);
}
}
export class DialogServiceMock {
- public async prompt(_: string, value: string): Promise {
- return `${value}_test`;
+ public async prompt(config: Omit): Promise {
+ return `${config.initialValue}_test`;
}
- public async confirm(_: string): Promise {
+ public async confirm(_config: Omit): Promise {
return true;
}
- public async alert(_: string): Promise {
+ public async alert(_config: Omit): Promise {
return;
}
}
diff --git a/src/app/shared/data-access/export.service.spec.ts b/src/app/shared/data-access/export.service.spec.ts
index b4240d9..60ee21c 100644
--- a/src/app/shared/data-access/export.service.spec.ts
+++ b/src/app/shared/data-access/export.service.spec.ts
@@ -49,15 +49,21 @@ describe('ExportService', () => {
expect(analyticsService.trackPaletteExport).toHaveBeenCalledTimes(2);
});
- it('should copy palette to clipboard', async () => {
- spyOn(navigator.clipboard, 'writeText').and.resolveTo();
-
- const format = ExportFormat.CSS;
- const result = await service.exportPalette(palette, format, 'copy');
-
- expect(result).toBe(true);
- expect(navigator.clipboard.writeText).toHaveBeenCalled();
- });
+ /*
+ * Disable clipboard test in non-secure context (not HTTPS), because it will fail.
+ * See: https://stackoverflow.com/a/51823007
+ */
+ if (window.isSecureContext) {
+ it('should copy palette to clipboard', async () => {
+ spyOn(navigator.clipboard, 'writeText').and.resolveTo();
+
+ const format = ExportFormat.CSS;
+ const result = await service.exportPalette(palette, format, 'copy');
+
+ expect(result).toBe(true);
+ expect(navigator.clipboard.writeText).toHaveBeenCalled();
+ });
+ }
it('should download palette as file', async () => {
const link = document.createElement('a');
diff --git a/src/app/shared/data-access/export.service.ts b/src/app/shared/data-access/export.service.ts
index b48748d..44b7c59 100644
--- a/src/app/shared/data-access/export.service.ts
+++ b/src/app/shared/data-access/export.service.ts
@@ -57,7 +57,7 @@ export class ExportService {
console.error(error);
this._toastService.showToast({
type: 'error',
- message: 'export.error.copy-failed'
+ message: 'toast.error.copy-clipboard'
});
return false;
}
diff --git a/src/app/shared/data-access/language.service.spec.ts b/src/app/shared/data-access/language.service.spec.ts
index 74e85e6..9456bd1 100644
--- a/src/app/shared/data-access/language.service.spec.ts
+++ b/src/app/shared/data-access/language.service.spec.ts
@@ -18,10 +18,6 @@ describe('LanguageService', () => {
expect(service).toBeTruthy();
});
- it('should have default language en', () => {
- expect(service.language()).toBe('en');
- });
-
it('should change language', () => {
service.setLanguage('de');
expect(service.language()).toBe('de');
diff --git a/src/app/shared/data-access/palette.service.spec.ts b/src/app/shared/data-access/palette.service.spec.ts
index 3e495c4..aa234c7 100644
--- a/src/app/shared/data-access/palette.service.spec.ts
+++ b/src/app/shared/data-access/palette.service.spec.ts
@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
import { PaletteScheme } from '../constants/palette-scheme';
import { TailwindGrays } from '../constants/tailwind-colors';
import { LocalStorageKey } from '../enums/local-storage-keys';
-import { Palette } from '../model';
+import { Palette, Shade } from '../model';
import { ColorNameService, ColorNameServiceMock } from './color-name.service';
import { ColorService, ColorServiceMock } from './color.service';
import { ListService, ListServiceMock } from './list.service';
@@ -39,7 +39,6 @@ describe('PaletteService', () => {
service = TestBed.inject(PaletteService);
spyOn(colorService, 'regenerateShades').and.callThrough();
- spyOn(colorNameService, 'getColorName').and.callThrough();
spyOn(toastService, 'showToast').and.callThrough();
});
@@ -48,6 +47,12 @@ describe('PaletteService', () => {
});
it('should generate a palette', async () => {
+ spyOn(colorNameService, 'getColorName').and.callFake(async (shade: Shade) => {
+ expect(service.isGenerating()).toBeTrue();
+
+ return shade.hex.substring(1);
+ });
+
await service.generatePalette('#ffffff', PaletteScheme.ANALOGOUS);
expect(service.palette()).toBeTruthy();
@@ -56,6 +61,8 @@ describe('PaletteService', () => {
});
it('should save palette to local storage', async () => {
+ spyOn(colorNameService, 'getColorName').and.callThrough();
+
await service.generatePalette('#ffffff', PaletteScheme.COMPLEMENTARY);
service.savePaletteToLocalStorage();
@@ -93,10 +100,11 @@ describe('PaletteService', () => {
await service.generatePalette('#ffffff', PaletteScheme.ANALOGOUS);
const originalPalette = service.palette();
- const id = service.duplicatePalette();
+ const id = service.duplicatePalette('duplicate');
expect(id).toBeTruthy();
expect(id).not.toBe(originalPalette!.id);
+ expect(service.palette()?.name).toBe('duplicate');
expect(service.palette()?.id).toBe(id);
});
diff --git a/src/app/shared/data-access/palette.service.ts b/src/app/shared/data-access/palette.service.ts
index f42aedb..b0cbf40 100644
--- a/src/app/shared/data-access/palette.service.ts
+++ b/src/app/shared/data-access/palette.service.ts
@@ -1,5 +1,5 @@
-import { Injectable, Signal, effect, inject, signal } from '@angular/core';
-import { PaletteScheme } from '../constants/palette-scheme';
+import { Injectable, effect, inject, signal } from '@angular/core';
+import { PaletteScheme, randomScheme } from '../constants/palette-scheme';
import { LocalStorageKey } from '../enums/local-storage-keys';
import { Value } from '../model';
import { Color } from '../model/color.model';
@@ -20,10 +20,10 @@ export class PaletteService {
private readonly _listService = inject(ListService);
private readonly _palette = signal(undefined);
+ private readonly _isGenerating = signal(false);
- public get palette(): Signal {
- return this._palette.asReadonly();
- }
+ public readonly palette = this._palette.asReadonly();
+ public readonly isGenerating = this._isGenerating.asReadonly();
public constructor() {
// Migrate single palette to list
@@ -93,7 +93,7 @@ export class PaletteService {
}
}
- public duplicatePalette(): string {
+ public duplicatePalette(name?: string): string {
const palette = this._palette();
if (!palette) {
throw new Error('No palette to duplicate');
@@ -101,7 +101,11 @@ export class PaletteService {
// Copy palette with new id and name
const copy = palette.copy(false);
- copy.name = `${copy.name} (copy)`;
+ if (name) {
+ copy.name = name;
+ } else {
+ copy.name = `${copy.name} (copy)`;
+ }
// Load the copy
this._palette.set(copy);
@@ -109,19 +113,25 @@ export class PaletteService {
}
public async generatePalette(hex: string, scheme: PaletteScheme): Promise {
- const palette = await this._generatePalette(hex, scheme);
+ this._isGenerating.set(true);
- for (const color of palette.colors) {
- // Get the color name
- color.name = await this._colorNameService.getColorName(color.shades[0]);
+ try {
+ const palette = await this._generatePalette(hex, scheme);
- // Regenerate the shades
- await this._colorService.regenerateShades(color);
- }
+ for (const color of palette.colors) {
+ // Get the color name
+ color.name = await this._colorNameService.getColorName(color.shades[0]);
- this._palette.set(palette);
+ // Regenerate the shades
+ await this._colorService.regenerateShades(color);
+ }
+
+ this._palette.set(palette);
- return palette.id;
+ return palette.id;
+ } finally {
+ this._isGenerating.set(false);
+ }
}
private async _generatePalette(hex: string, scheme: PaletteScheme): Promise {
@@ -141,15 +151,10 @@ export class PaletteService {
case PaletteScheme.COMPOUND:
return this._generateCompoundPalette(hex);
default:
- return this._generatePalette(hex, this._getRandomScheme());
+ return this._generatePalette(hex, randomScheme().value);
}
}
- private _getRandomScheme(): PaletteScheme {
- const schemes = Object.values(PaletteScheme);
- return schemes[Math.floor(Math.random() * schemes.length)];
- }
-
private _generateRainbowPalette(hex: string): Palette {
const shade = new Shade(-1, Value.fromHEX(hex), true);
let index = 0;
@@ -539,6 +544,7 @@ export class PaletteServiceMock {
public palette = signal(
new Palette('Mock', [new Color([Shade.random()], 'MockColor')], 'test-id')
);
+ public isGenerating = signal(false);
public loadPaletteFromLocalStorage(): void {}
public savePaletteToLocalStorage(): void {}
public generatePalette(_hex: string, _scheme: PaletteScheme): string {
diff --git a/src/app/shared/data-access/pwa.service.spec.ts b/src/app/shared/data-access/pwa.service.spec.ts
index 4668b93..8f24e74 100644
--- a/src/app/shared/data-access/pwa.service.spec.ts
+++ b/src/app/shared/data-access/pwa.service.spec.ts
@@ -5,6 +5,7 @@ import { TrackingEventAction, TrackingEventCategory } from '../enums/tracking-ev
import { IS_RUNNING_TEST } from '../utils/is-running-test';
import { SwUpdateMock } from '../utils/sw-update-mock';
import { AnalyticsService, AnalyticsServiceMock } from './analytics.service';
+import { ConfettiService, ConfettiServiceMock } from './confetti.service';
import { DialogService, DialogServiceMock } from './dialog.service';
import { PaletteService, PaletteServiceMock } from './palette.service';
import { PwaService } from './pwa.service';
@@ -36,7 +37,8 @@ describe('PwaService', () => {
{ provide: DialogService, useValue: dialogService },
{ provide: ToastService, useValue: toastService },
{ provide: PaletteService, useValue: paletteService },
- { provide: VersionService, useClass: VersionServiceMock }
+ { provide: VersionService, useClass: VersionServiceMock },
+ { provide: ConfettiService, useClass: ConfettiServiceMock }
]
});
service = TestBed.inject(PwaService);
diff --git a/src/app/shared/data-access/pwa.service.ts b/src/app/shared/data-access/pwa.service.ts
index b943d9e..8750179 100644
--- a/src/app/shared/data-access/pwa.service.ts
+++ b/src/app/shared/data-access/pwa.service.ts
@@ -1,15 +1,26 @@
-import { Injectable, Signal, effect, inject, signal } from '@angular/core';
+import { Injectable, effect, inject, signal } from '@angular/core';
import { SwUpdate, VersionEvent } from '@angular/service-worker';
import { TranslateService } from '@ngx-translate/core';
import { LocalStorageKey } from '../enums/local-storage-keys';
import { TrackingEventAction, TrackingEventCategory } from '../enums/tracking-event';
import { IS_RUNNING_TEST } from '../utils/is-running-test';
import { AnalyticsService } from './analytics.service';
+import { ConfettiService } from './confetti.service';
import { DialogService } from './dialog.service';
import { PaletteService } from './palette.service';
import { ToastService } from './toast.service';
import { VersionService } from './version.service';
+interface AppData {
+ version: string;
+}
+
+declare const window: Window & {
+ navigator: Navigator & {
+ standalone: boolean;
+ };
+};
+
@Injectable({
providedIn: 'root'
})
@@ -22,12 +33,13 @@ export class PwaService {
private readonly _dialogService = inject(DialogService);
private readonly _paletteService = inject(PaletteService);
private readonly _versionService = inject(VersionService);
+ private readonly _confettiService = inject(ConfettiService);
private readonly _isPwa = signal(false);
+ private readonly _doingUpdate = signal(false);
- public get isPwa(): Signal {
- return this._isPwa.asReadonly();
- }
+ public readonly isPwa = this._isPwa.asReadonly();
+ public readonly doingUpdate = this._doingUpdate.asReadonly();
public constructor() {
effect(() => {
@@ -35,11 +47,7 @@ export class PwaService {
});
// Check if the app is currently running as a PWA
- if (
- window.matchMedia('(display-mode: standalone)').matches ||
- //@ts-expect-error - Navigator standalone is not a standard web api, but we try to use it anyway
- window.navigator.standalone
- ) {
+ if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone) {
this._isPwa.set(true);
}
@@ -56,17 +64,26 @@ export class PwaService {
// Listen for broken service worker
this._SwUpdate.unrecoverable.subscribe(() => {
- this._dialogService.alert(this._translateService.instant('pwa.broken'));
+ this._dialogService.alert({ title: 'common.error', message: 'pwa.broken' });
});
// Check if the app is currently updating
if (localStorage.getItem(LocalStorageKey.UPGRADING)) {
+ // Remove upgrading flag from local storage
localStorage.removeItem(LocalStorageKey.UPGRADING);
+
+ // Show toast about successful update
this._toastService.showToast({
type: 'info',
message: 'pwa.update-success',
parameters: { version: this._versionService.appVersion }
});
+
+ // Shoot confetti to celebrate the update
+ this._confettiService.confetti([
+ { particleCount: 150, spread: 70, angle: 45, origin: { x: 0 }, startVelocity: 75 },
+ { particleCount: 150, spread: 70, angle: 135, origin: { x: 1 }, startVelocity: 75 }
+ ]);
}
}
@@ -82,8 +99,7 @@ export class PwaService {
type: 'info',
message: 'pwa.update-available',
parameters: {
- // @ts-expect-error - `appData` is filled by the prebuilt script to contain the current app version
- version: event.version.appData?.version
+ version: (event.version.appData as AppData | undefined)?.version
}
});
return;
@@ -97,23 +113,21 @@ export class PwaService {
type: 'error',
message: 'pwa.update-failed',
parameters: {
- // @ts-expect-error - `appData` is filled by the prebuilt script to contain the current app version
- version: event.version.appData?.version
+ version: (event.version.appData as AppData | undefined)?.version
}
});
return;
}
// Update was downloaded and can be installed through restart
- const restart = await this._dialogService.confirm(
- this._translateService.instant('pwa.restart', {
- old:
- // @ts-expect-error - `appData` is filled by the prebuilt script to contain the current app version
- event.currentVersion.appData?.version ?? this._versionService.appVersion,
- // @ts-expect-error - `appData` is filled by the prebuilt script to contain the current app version
- new: event.latestVersion.appData?.version
- })
- );
+ const restart = await this._dialogService.confirm({
+ title: 'pwa.update',
+ message: this._translateService.instant('pwa.restart', {
+ old: (event.currentVersion.appData as AppData | undefined)?.version ?? this._versionService.appVersion,
+ new: (event.latestVersion.appData as AppData | undefined)?.version
+ }),
+ confirmLabel: 'common.yes'
+ });
// Continue without updating
if (!restart) {
@@ -125,6 +139,7 @@ export class PwaService {
// Set the flag to indicate that the app is currently updating
localStorage.setItem(LocalStorageKey.UPGRADING, 'true');
+ this._doingUpdate.set(true);
// Track the update
this._analyticsService.trackEvent(TrackingEventCategory.PWA, TrackingEventAction.PWA_UPDATE_COMPLETED);
@@ -136,4 +151,7 @@ export class PwaService {
}
}
-export class PwaServiceMock {}
+export class PwaServiceMock {
+ public readonly isPwa = signal(false).asReadonly();
+ public readonly doingUpdate = signal(false).asReadonly();
+}
diff --git a/src/app/shared/data-access/toast.service.ts b/src/app/shared/data-access/toast.service.ts
index 62be5b4..b533f0c 100644
--- a/src/app/shared/data-access/toast.service.ts
+++ b/src/app/shared/data-access/toast.service.ts
@@ -60,12 +60,15 @@ export class ToastService {
public showToast(toast: Toast): number {
const timestamp = Date.now();
toast.id = timestamp;
- toast.timeout = setTimeout(
- () => {
- this.hideToast(timestamp);
- },
- ToastTimeouts[toast.type ?? 'default']
- );
+
+ if (toast.duration !== 0) {
+ toast.timeout = setTimeout(
+ () => {
+ this.hideToast(timestamp);
+ },
+ toast.duration ?? ToastTimeouts[toast.type ?? 'default']
+ );
+ }
this._toastStack.update((stack) => [...stack, toast]);
return timestamp;
diff --git a/src/app/shared/interfaces/toast.interface.ts b/src/app/shared/interfaces/toast.interface.ts
index cba1690..92940e8 100644
--- a/src/app/shared/interfaces/toast.interface.ts
+++ b/src/app/shared/interfaces/toast.interface.ts
@@ -35,4 +35,11 @@ export interface Toast {
* The timeout for the toast.
*/
timeout?: ReturnType;
+ /**
+ * Optional duration for the toast.
+ * If provided, the toast will be displayed for the specified duration.
+ * If not provided, the toast will use the default timeout based on the type.
+ * If the duration is set to 0, the toast will not be automatically hidden.
+ */
+ duration?: number;
}
diff --git a/src/app/shared/model/palette.model.spec.ts b/src/app/shared/model/palette.model.spec.ts
index efa9c8e..5641207 100644
--- a/src/app/shared/model/palette.model.spec.ts
+++ b/src/app/shared/model/palette.model.spec.ts
@@ -57,4 +57,34 @@ describe('Palette', () => {
expect(palette.toString()).toBe(JSON.stringify(palette.toJSON()));
});
+
+ it('should add color', () => {
+ const palette = new Palette('Test', []);
+ const color = new Color([Shade.random()], 'TestColor');
+
+ palette.addColor(color);
+
+ expect(palette.colors.length).toBe(1);
+ expect(palette.colors[0]).toBe(color);
+ });
+
+ it('should remove color', () => {
+ const color = new Color([Shade.random()], 'TestColor');
+ const palette = new Palette('Test', [color]);
+
+ palette.removeColor(color);
+
+ expect(palette.colors.length).toBe(0);
+ });
+
+ it('should reorder color', () => {
+ const color1 = new Color([Shade.random()], 'TestColor1');
+ const color2 = new Color([Shade.random()], 'TestColor2');
+ const palette = new Palette('Test', [color1, color2]);
+
+ palette.reorderColor(0, 1);
+
+ expect(palette.colors[0]).toBe(color2);
+ expect(palette.colors[1]).toBe(color1);
+ });
});
diff --git a/src/app/shared/model/palette.model.ts b/src/app/shared/model/palette.model.ts
index 3e24d71..e0da8e6 100644
--- a/src/app/shared/model/palette.model.ts
+++ b/src/app/shared/model/palette.model.ts
@@ -1,3 +1,4 @@
+import { moveItemInArray } from '@angular/cdk/drag-drop';
import { generateId } from '../utils/generate-id';
import { Color } from './color.model';
@@ -24,6 +25,14 @@ export class Palette {
}
}
+ public reorderColor(fromIndex: number, toIndex: number): void {
+ if (fromIndex < 0 || fromIndex >= this.colors.length || toIndex < 0 || toIndex >= this.colors.length) {
+ throw new Error(`Invalid index: ${toIndex}`);
+ }
+
+ moveItemInArray(this.colors, fromIndex, toIndex);
+ }
+
public copy(shouldCopyId: boolean): Palette {
return new Palette(
this.name,
diff --git a/src/app/shared/types/dialog-config.ts b/src/app/shared/types/dialog-config.ts
new file mode 100644
index 0000000..94c1794
--- /dev/null
+++ b/src/app/shared/types/dialog-config.ts
@@ -0,0 +1,24 @@
+export type AlertConfig = {
+ type: 'alert';
+ title: string;
+ message: string;
+};
+
+export type ConfirmConfig = {
+ type: 'confirm';
+ title: string;
+ message: string;
+ confirmLabel: string;
+};
+
+export type PromptConfig = {
+ type: 'prompt';
+ title: string;
+ message: string;
+ confirmLabel: string;
+ label?: string;
+ placeholder?: string;
+ initialValue?: string;
+};
+
+export type DialogConfig = AlertConfig | ConfirmConfig | PromptConfig;
diff --git a/src/app/shared/ui/color-input/color-input.component.html b/src/app/shared/ui/color-input/color-input.component.html
index 9b34bc7..2c54ea8 100644
--- a/src/app/shared/ui/color-input/color-input.component.html
+++ b/src/app/shared/ui/color-input/color-input.component.html
@@ -1,13 +1,13 @@