From 4c7639ee4cfc071220ec5aa8fb7bb4650dd5b1b4 Mon Sep 17 00:00:00 2001 From: Jan Szumotalski Date: Sun, 15 Jun 2025 11:41:02 +0200 Subject: [PATCH] fix: Remade menu editor loading logic --- .../account-mgmt/account-mgmt.component.ts | 2 +- .../menu-edit/menu-edit.component.html | 172 ++++++++++-------- .../menu-edit/menu-edit.component.scss | 16 ++ .../menu-edit/menu-edit.component.ts | 37 ++-- .../admin-view/menu-edit/menu-edit.service.ts | 62 +++++-- src/app/types/menu.ts | 2 + 6 files changed, 177 insertions(+), 114 deletions(-) diff --git a/src/app/admin-view/account-mgmt/account-mgmt.component.ts b/src/app/admin-view/account-mgmt/account-mgmt.component.ts index c131192..8b877ac 100644 --- a/src/app/admin-view/account-mgmt/account-mgmt.component.ts +++ b/src/app/admin-view/account-mgmt/account-mgmt.component.ts @@ -43,7 +43,7 @@ export class AccountMgmtComponent implements AfterViewInit { } this.ac.refresh() this.ac.accs.subscribe(d => { - this.users.data = d ?? [] + this.users.data = d }) } diff --git a/src/app/admin-view/menu-edit/menu-edit.component.html b/src/app/admin-view/menu-edit/menu-edit.component.html index 0ded946..124dc67 100644 --- a/src/app/admin-view/menu-edit/menu-edit.component.html +++ b/src/app/admin-view/menu-edit/menu-edit.component.html @@ -1,96 +1,110 @@
- + Wybierz tydzień - - + + - +
@if (loading) { } - -
-
- - -
-
- - -
-
- - -
-
- - + } + @case (2) { +
Dzień - {{element.day.toFormat('dd.LL.yyyy')}}r. -

{{element.day.toFormat('cccc') | titlecase }}

-
- - 		Śniadanie -
    - @for (i of ls.defaultItems.sn; track i) { -
  • {{i}}
    • - } -
-
-
    -
    • -
- 		Obiad -
    -
    • -
    • -
    • -
-
-
    -
    • -
- - - 		Kolacja -
- @switch (element.day.weekday) { - @default { -
-
    - @for (i of ls.defaultItems.kol; track i) { -
  • {{i}}
    • - } -
-
    -
    • -
- -
- } - @case (5) { -
-

Kolacja w domu!

-

(Nie edytowalne)

-
- } - } +
+ @switch (ac.state()) { + @case (0) { +

Wybierz zakres dat powyżej i kliknij szukaj

+ } + @case (1) { + -
+
+
+ + +
+
+ + +
+
+ + +
+
+ + - - -
Dzień + {{element.day.toFormat('dd.LL.yyyy')}}r. +

{{element.day.toFormat('cccc') | titlecase }}

+
+ + 		Śniadanie +
    + @for (i of ls.defaultItems.sn; track i) { +
  • {{i}}
    • + } +
+
+
    +
    • +
+ 		Obiad +
    +
    • +
    • +
    • +
+
+
    +
    • +
+ + + 		Kolacja +
+ @switch (element.day.weekday) { + @default { +
+
    + @for (i of ls.defaultItems.kol; track i) { +
  • {{i}}
    • + } +
+
    +
    • +
+ +
+ } + @case (5) { +
+

Kolacja w domu!

+

(Nie edytowalne)

+
+ } + } +
+
+ + + + } + } + @if (options) { @@ -138,4 +152,4 @@ } -} \ No newline at end of file +} diff --git a/src/app/admin-view/menu-edit/menu-edit.component.scss b/src/app/admin-view/menu-edit/menu-edit.component.scss index 078bdcb..a4b6743 100644 --- a/src/app/admin-view/menu-edit/menu-edit.component.scss +++ b/src/app/admin-view/menu-edit/menu-edit.component.scss @@ -16,3 +16,19 @@ button[mat-icon-button] { color: gray; font-style: italic; } + +.mainc { + height: 100%; + position: relative; +} + +.spinner { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/app/admin-view/menu-edit/menu-edit.component.ts b/src/app/admin-view/menu-edit/menu-edit.component.ts index d9ae406..8f41a6a 100644 --- a/src/app/admin-view/menu-edit/menu-edit.component.ts +++ b/src/app/admin-view/menu-edit/menu-edit.component.ts @@ -33,11 +33,18 @@ export class MenuEditComponent { public options: any constructor( - private ac: MenuEditService, + protected ac: MenuEditService, private dialog: MatDialog, private sb: MatSnackBar, readonly ls: LocalStorageService - ) {} + ) { + this.range.valueChanges.subscribe(v => { + ac.setDates(v.start!, v.end!) + }) + ac.menuItems.subscribe(v => { + this.dataSource.data = v + }) + } print() { this.ac @@ -74,7 +81,7 @@ export class MenuEditComponent { .subscribe(s => this.refreshIfGood(s)) break case 'file': - this.requestData() + this.refresh() break default: break @@ -83,29 +90,15 @@ export class MenuEditComponent { }) } - requestData() { - this.loading = true + refresh() { + this.ac.refresh() this.ac.getOpts().subscribe(o => { this.options = o }) - this.ac - .getMenu(this.range.value.start, this.range.value.end) - ?.subscribe(data => { - this.loading = false - this.dataSource.data = data.map(v => { - let newMenu: Menu = { - ...v, - day: DateTime.fromISO(v.day), - } - return newMenu - }) - }) } private refreshIfGood(s: Status) { - if (s.status.toString().match(/2\d\d/)) { - this.requestData() - } + if (s.status.toString().match(/2\d\d/)) this.refresh() } activateUpload() { @@ -113,9 +106,7 @@ export class MenuEditComponent { .open(MenuUploadComponent) .afterClosed() .subscribe(data => { - if (data) { - this.requestData() - } + if (data) this.refresh() }) } diff --git a/src/app/admin-view/menu-edit/menu-edit.service.ts b/src/app/admin-view/menu-edit/menu-edit.service.ts index b29e650..ef60a73 100644 --- a/src/app/admin-view/menu-edit/menu-edit.service.ts +++ b/src/app/admin-view/menu-edit/menu-edit.service.ts @@ -1,7 +1,9 @@ import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { DateTime } from 'luxon'; -import { Menu } from 'src/app/types/menu'; +import { BehaviorSubject, catchError, map, of } from 'rxjs'; +import { Menu, MenuAPI } from 'src/app/types/menu'; +import { STATE } from 'src/app/types/state'; import { Status } from 'src/app/types/status'; import { environment } from 'src/environments/environment'; @@ -10,19 +12,57 @@ import { environment } from 'src/environments/environment'; }) export class MenuEditService { - constructor(private http: HttpClient) { } + private _menuItems = new BehaviorSubject([]) + public readonly menuItems = this._menuItems.asObservable() + private _state = signal(STATE.NOT_LOADED); + public readonly state = this._state.asReadonly(); + private _error = signal(undefined); + public readonly error = this._error.asReadonly(); - getMenu(start?: DateTime | null, end?: DateTime | null) { - if (start && end) { - const body = { start: start.toString(), end: end.toString() } - return this.http.get<(Omit & { day: string })[]>( - environment.apiEndpoint + '/admin/menu', - { withCredentials: true, params: body } - ) + private seDates: { + start: DateTime | null, + end: DateTime | null + } = { + start: null, + end: null } - return + + public setDates(start: DateTime | null, end: DateTime | null) { + this.seDates.start = start + this.seDates.end = end } + public refresh() { + this.getMenu() + } + + private getMenu() { + if (!(this.seDates.start && this.seDates.end)) return + this._state.set(STATE.PENDING) + const body = { start: this.seDates.start.toString(), end: this.seDates.end.toString() } + this.http.get + + (environment.apiEndpoint + `/admin/menu`, { withCredentials: true, params: body }) + .pipe( + catchError((err: Error) => { + this._state.set(STATE.ERROR) + this._error.set(err.message) + return of() + }), + map(v => + v.map(i => ({ + ...i, + day: DateTime.fromISO(i.day) + }))) + ).subscribe(v => { + this._error.set(undefined) + this._menuItems.next(v ?? []) + this._state.set(STATE.LOADED) + }) + } + + constructor(private http: HttpClient) { } + getOpts() { return this.http.get(environment.apiEndpoint + `/admin/menu/opts`, { withCredentials: true, diff --git a/src/app/types/menu.ts b/src/app/types/menu.ts index 115cb0b..2829c2c 100644 --- a/src/app/types/menu.ts +++ b/src/app/types/menu.ts @@ -1,5 +1,7 @@ import { DateTime } from 'luxon' +export type MenuAPI = Omit & {day: string} + export interface Menu { _id: string day: DateTime