Merge commit '06316e17152006aa1395930ad76efb0b86d46657' as 'frontend'
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<h1 mat-dialog-title>Tworzenie wpisów do jadłospisu</h1>
|
||||
<mat-dialog-content>
|
||||
<mat-radio-group [(ngModel)]="type">
|
||||
<mat-radio-button value="day">Dzień</mat-radio-button>
|
||||
<mat-radio-button value="week">Tydzień</mat-radio-button>
|
||||
<mat-radio-button value="file">Plik</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div>
|
||||
@switch (type) {
|
||||
@case ("day") {
|
||||
<app-date-selector [filter]="filter" [(date)]="day"></app-date-selector>
|
||||
}
|
||||
@case ("week") {
|
||||
<mat-form-field>
|
||||
<mat-label>Wybierz tydzień</mat-label>
|
||||
<mat-date-range-input [rangePicker]="picker" [formGroup]="range">
|
||||
<input matStartDate formControlName="start">
|
||||
<input matEndDate formControlName="end">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
}
|
||||
@case ("file") {
|
||||
<button mat-flat-button (click)="activateUpload()">Otwórz okno</button>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<button matButton="outlined" (click)="submit()">Utwórz pozycje</button>
|
||||
<button mat-button mat-dialog-close>Anuluj</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,39 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
|
||||
import { MenuAddComponent } from './menu-add.component'
|
||||
import {
|
||||
MAT_DIALOG_DATA,
|
||||
MatDialogModule,
|
||||
MatDialogRef,
|
||||
} from '@angular/material/dialog'
|
||||
import { MatRadioModule } from '@angular/material/radio'
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
|
||||
|
||||
describe('MenuAddComponent', () => {
|
||||
let component: MenuAddComponent
|
||||
let fixture: ComponentFixture<MenuAddComponent>
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [MenuAddComponent],
|
||||
providers: [
|
||||
{ provide: MAT_DIALOG_DATA, useValue: {} },
|
||||
{ provide: MatDialogRef, useValue: {} },
|
||||
],
|
||||
imports: [
|
||||
MatDialogModule,
|
||||
MatRadioModule,
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
],
|
||||
}).compileComponents()
|
||||
|
||||
fixture = TestBed.createComponent(MenuAddComponent)
|
||||
component = fixture.componentInstance
|
||||
fixture.detectChanges()
|
||||
})
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,59 @@
|
||||
import { Component, inject, signal } from '@angular/core'
|
||||
import { MenuUploadComponent } from '../menu-upload/menu-upload.component'
|
||||
import { MatDialog, MatDialogRef } from '@angular/material/dialog'
|
||||
import { FDSelection } from 'src/app/fd.da'
|
||||
import { FormControl, FormGroup } from '@angular/forms'
|
||||
import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker'
|
||||
import { DateTime } from 'luxon'
|
||||
import { weekendFilter } from 'src/app/util'
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-add',
|
||||
templateUrl: './menu-add.component.html',
|
||||
styleUrl: './menu-add.component.scss',
|
||||
providers: [
|
||||
{ provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
|
||||
],
|
||||
standalone: false,
|
||||
})
|
||||
export class MenuAddComponent {
|
||||
public dialogRef: MatDialogRef<MenuAddComponent> = inject(MatDialogRef)
|
||||
private dialog = inject(MatDialog)
|
||||
|
||||
type: string | undefined
|
||||
filter = weekendFilter
|
||||
|
||||
day = signal<DateTime>(DateTime.now())
|
||||
|
||||
range = new FormGroup({
|
||||
start: new FormControl<DateTime | null>(null),
|
||||
end: new FormControl<DateTime | null>(null),
|
||||
})
|
||||
|
||||
submit() {
|
||||
switch (this.type) {
|
||||
case 'day':
|
||||
this.dialogRef.close({ type: 'day', value: this.day() })
|
||||
break
|
||||
case 'week':
|
||||
this.dialogRef.close({
|
||||
type: 'week',
|
||||
value: { start: this.range.value.start, count: 5 },
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
activateUpload() {
|
||||
this.dialog
|
||||
.open(MenuUploadComponent)
|
||||
.afterClosed()
|
||||
.subscribe(data => {
|
||||
if (data) {
|
||||
this.dialogRef.close({ type: 'file', ...data })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
<div id="upper-bar">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Wybierz tydzień</mat-label>
|
||||
<mat-date-range-input [rangePicker]="picker" [formGroup]="range">
|
||||
<input matStartDate formControlName="start">
|
||||
<input matEndDate formControlName="end">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="ac.refresh()"><mat-icon>search</mat-icon></button>
|
||||
<button mat-icon-button (click)="addDate()"><mat-icon>add</mat-icon></button>
|
||||
<button mat-icon-button (click)="print()"><mat-icon>print</mat-icon></button>
|
||||
</div>
|
||||
|
||||
<div class="mainc">
|
||||
@switch (ac.state()) {
|
||||
@case (0) {
|
||||
<p>Wybierz zakres dat powyżej i kliknij szukaj</p>
|
||||
}
|
||||
@case (1) {
|
||||
<div class="spinner">
|
||||
<mat-spinner/>
|
||||
</div>
|
||||
}
|
||||
@case (2) {
|
||||
<table mat-table [dataSource]="dataSource">
|
||||
<div matColumnDef="day">
|
||||
<th mat-header-cell *matHeaderCellDef>Dzień</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span>{{element.day.toFormat('dd.LL.yyyy')}}r.</span>
|
||||
<p>{{element.day.toFormat('cccc') | titlecase }}</p>
|
||||
<app-field-editor category="Nazwa" [(word)]="element.dayTitle" (wordChange)="editTitle(element._id)"/><br><hr>
|
||||
<button (click)="remove(element._id)">Usuń dzień</button>
|
||||
</td>
|
||||
</div>
|
||||
<div matColumnDef="sn">
|
||||
<th mat-header-cell *matHeaderCellDef>Śniadanie</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<ul class="non-editable">
|
||||
@for (i of ls.defaultItems.sn; track i) {
|
||||
<li>{{i}}</li>
|
||||
}
|
||||
</ul><hr>
|
||||
<app-list-editor [(list)]="element.sn.fancy" (edit)="editSn(element._id)" dataList="sn-fancy"/><hr>
|
||||
<ul>
|
||||
<li><app-field-editor category="II Śniadanie" [(word)]="element.sn.second" list="sn-second" (wordChange)="editSn(element._id)"/></li>
|
||||
</ul>
|
||||
</td>
|
||||
</div>
|
||||
<div matColumnDef="ob">
|
||||
<th mat-header-cell *matHeaderCellDef>Obiad</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<ul>
|
||||
<li><app-field-editor category="Zupa" [(word)]="element.ob.soup" list="ob-soup" (wordChange)="editOb(element._id)"/></li>
|
||||
<li><app-field-editor category="Vege" [(word)]="element.ob.vege" list="ob-vege" (wordChange)="editOb(element._id)"/></li>
|
||||
<li><app-field-editor category="Danie główne" [(word)]="element.ob.meal" list="ob-meal" (wordChange)="editOb(element._id)"/></li>
|
||||
</ul><hr>
|
||||
<app-list-editor [(list)]="element.ob.condiments" (edit)="editOb(element._id)" dataList="ob-condiments"/><hr>
|
||||
<ul>
|
||||
<li><app-field-editor category="Napój" [(word)]="element.ob.drink" list="ob-drink" (wordChange)="editOb(element._id)"/></li>
|
||||
</ul><hr>
|
||||
<app-list-editor [(list)]="element.ob.other" (edit)="editOb(element._id)" dataList="ob-other"/>
|
||||
</td>
|
||||
</div>
|
||||
<div matColumnDef="kol">
|
||||
<th mat-header-cell *matHeaderCellDef>Kolacja</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div>
|
||||
@switch (element.day.weekday) {
|
||||
@default {
|
||||
<div>
|
||||
<ul class="non-editable">
|
||||
@for (i of ls.defaultItems.kol; track i) {
|
||||
<li>{{i}}</li>
|
||||
}
|
||||
</ul><hr>
|
||||
<ul>
|
||||
<li><app-field-editor category="Kolacja" [(word)]="element.kol" list="kol" (wordChange)="editKol(element._id)"/></li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
@case (5) {
|
||||
<div class="non-editable">
|
||||
<p>Kolacja w domu!</p>
|
||||
<p>(Nie edytowalne)</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="dcols"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: dcols"></tr>
|
||||
</table>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (options) {
|
||||
<datalist id="sn-fancy">
|
||||
@for (i of options.sn.fancy; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="sn-second">
|
||||
@for (i of options.sn.second; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="ob-soup">
|
||||
@for (i of options.ob.soup; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="ob-vege">
|
||||
@for (i of options.ob.vege; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="ob-meal">
|
||||
@for (i of options.ob.meal; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="ob-condiments">
|
||||
@for (i of options.ob.condiments; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="ob-drink">
|
||||
@for (i of options.ob.drink; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="ob-other">
|
||||
@for (i of options.ob.other; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
<datalist id="kol">
|
||||
@for (i of options.kol; track i) {
|
||||
<option>{{i}}</option>
|
||||
}
|
||||
</datalist>
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
#upper-bar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button[mat-icon-button] {
|
||||
margin-left: 4pt;
|
||||
margin-right: 4pt;
|
||||
margin-top: 4pt;
|
||||
}
|
||||
|
||||
.non-editable {
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
|
||||
import { MenuEditComponent } from './menu-edit.component'
|
||||
import { MatTableModule } from '@angular/material/table'
|
||||
import { MatInputModule } from '@angular/material/input'
|
||||
import {
|
||||
MAT_DATE_RANGE_SELECTION_STRATEGY,
|
||||
MatDatepickerModule,
|
||||
} from '@angular/material/datepicker'
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
|
||||
import { FDSelection } from 'src/app/fd.da'
|
||||
import { ReactiveFormsModule } from '@angular/forms'
|
||||
import { MatDialogModule } from '@angular/material/dialog'
|
||||
import { MatIconModule } from '@angular/material/icon'
|
||||
import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter'
|
||||
import { MenuEditService } from './menu-edit.service'
|
||||
|
||||
xdescribe('MenuEditComponent', () => {
|
||||
let component: MenuEditComponent
|
||||
let fixture: ComponentFixture<MenuEditComponent>
|
||||
|
||||
beforeEach(() => {
|
||||
const acMock = jasmine.createSpyObj('MenuEditService', {})
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [MenuEditComponent],
|
||||
imports: [
|
||||
MatTableModule,
|
||||
MatInputModule,
|
||||
MatDatepickerModule,
|
||||
BrowserAnimationsModule,
|
||||
ReactiveFormsModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
],
|
||||
providers: [
|
||||
provideLuxonDateAdapter(),
|
||||
{ provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
|
||||
{ provide: MenuEditService, useValue: acMock },
|
||||
],
|
||||
})
|
||||
fixture = TestBed.createComponent(MenuEditComponent)
|
||||
component = fixture.componentInstance
|
||||
fixture.detectChanges()
|
||||
})
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,160 @@
|
||||
import { Component, inject, OnDestroy } from '@angular/core'
|
||||
import { FormControl, FormGroup } from '@angular/forms'
|
||||
import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker'
|
||||
import { FDSelection } from 'src/app/fd.da'
|
||||
import { Menu } from 'src/app/types/menu'
|
||||
import { MatTableDataSource } from '@angular/material/table'
|
||||
import { MatDialog } from '@angular/material/dialog'
|
||||
import { MenuUploadComponent } from './menu-upload/menu-upload.component'
|
||||
import { Status } from 'src/app/types/status'
|
||||
import { MatSnackBar } from '@angular/material/snack-bar'
|
||||
import { MenuAddComponent } from './menu-add/menu-add.component'
|
||||
import { LocalStorageService } from 'src/app/services/local-storage.service'
|
||||
import { DateTime } from 'luxon'
|
||||
import { MenuEditService } from './menu-edit.service'
|
||||
import { MenuOptions } from './menu-edit.model'
|
||||
import { ToolbarService } from '../toolbar/toolbar.service'
|
||||
import { ActivatedRoute, Router } from '@angular/router'
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-edit',
|
||||
templateUrl: './menu-edit.component.html',
|
||||
styleUrls: ['./menu-edit.component.scss'],
|
||||
providers: [
|
||||
{ provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
|
||||
],
|
||||
standalone: false,
|
||||
})
|
||||
export class MenuEditComponent implements OnDestroy {
|
||||
protected ac = inject(MenuEditService)
|
||||
private dialog = inject(MatDialog)
|
||||
private sb = inject(MatSnackBar)
|
||||
private tb = inject(ToolbarService)
|
||||
private router = inject(Router)
|
||||
private route = inject(ActivatedRoute)
|
||||
readonly ls = inject(LocalStorageService)
|
||||
|
||||
dcols: string[] = ['day', 'sn', 'ob', 'kol']
|
||||
dataSource: MatTableDataSource<Menu> = new MatTableDataSource<Menu>()
|
||||
range = new FormGroup({
|
||||
start: new FormControl<DateTime | null>(null),
|
||||
end: new FormControl<DateTime | null>(null),
|
||||
})
|
||||
public options?: MenuOptions
|
||||
|
||||
constructor() {
|
||||
this.range.setValue(this.ac.seDates())
|
||||
this.range.valueChanges.subscribe(v => {
|
||||
this.ac.seDates.set({start: v.start!, end: v.end!})
|
||||
})
|
||||
this.ac.menuItems.subscribe(v => {
|
||||
this.dataSource.data = v
|
||||
})
|
||||
this.refresh()
|
||||
this.tb.comp = this
|
||||
this.tb.menu = [
|
||||
{ title: "Badanie opinii", icon: "analytics", fn: "statistics"}
|
||||
]
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.tb.comp = undefined
|
||||
this.tb.menu = undefined
|
||||
}
|
||||
|
||||
statistics() {
|
||||
this.router.navigate(['stats'], { relativeTo: this.route })
|
||||
}
|
||||
|
||||
print() {
|
||||
this.ac
|
||||
.print(this.range.value.start, this.range.value.end)
|
||||
?.subscribe(r => {
|
||||
if (r && r.length > 0) {
|
||||
const mywindow = window.open(
|
||||
undefined,
|
||||
'Drukowanie',
|
||||
'height=400,width=400'
|
||||
)
|
||||
mywindow?.document.write(r)
|
||||
mywindow?.print()
|
||||
mywindow?.close()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
addDate() {
|
||||
this.dialog
|
||||
.open(MenuAddComponent)
|
||||
.afterClosed()
|
||||
.subscribe(data => {
|
||||
if (data) {
|
||||
switch (data.type) {
|
||||
case 'day':
|
||||
this.ac.new
|
||||
.single(data.value)
|
||||
.subscribe(s => this.refreshIfGood(s))
|
||||
break
|
||||
case 'week':
|
||||
this.ac.new
|
||||
.range(data.value.start, data.value.count)
|
||||
.subscribe(s => this.refreshIfGood(s))
|
||||
break
|
||||
case 'file':
|
||||
this.refresh()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.ac.refresh()
|
||||
this.ac.getOpts().subscribe(o => {
|
||||
this.options = o
|
||||
})
|
||||
}
|
||||
|
||||
private refreshIfGood(s: Status) {
|
||||
if (s.status.toString().match(/2\d\d/)) this.refresh()
|
||||
}
|
||||
|
||||
activateUpload() {
|
||||
this.dialog
|
||||
.open(MenuUploadComponent)
|
||||
.afterClosed()
|
||||
.subscribe(data => {
|
||||
if (data) this.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
editSn(id: string) {
|
||||
this.ac
|
||||
.editSn(id, this.dataSource.data.find(v => v._id == id)!.sn)
|
||||
.subscribe(s => this.refreshIfGood(s))
|
||||
}
|
||||
|
||||
editOb(id: string) {
|
||||
this.ac
|
||||
.editOb(id, this.dataSource.data.find(v => v._id == id)!.ob)
|
||||
.subscribe(s => this.refreshIfGood(s))
|
||||
}
|
||||
|
||||
editKol(id: string) {
|
||||
this.ac
|
||||
.editKol(id, this.dataSource.data.find(v => v._id == id)?.kol)
|
||||
.subscribe(s => this.refreshIfGood(s))
|
||||
}
|
||||
|
||||
editTitle(id: string) {
|
||||
this.ac
|
||||
.editTitle(id, this.dataSource.data.find(v => v._id == id)?.dayTitle)
|
||||
.subscribe(s => this.refreshIfGood(s))
|
||||
}
|
||||
|
||||
remove(id: string) {
|
||||
this.ac.rm(id).subscribe(s => this.refreshIfGood(s))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
export interface MenuOptions {
|
||||
sn: {
|
||||
fancy: string[]
|
||||
second: string[]
|
||||
}
|
||||
ob: {
|
||||
soup: string[]
|
||||
vege: string[]
|
||||
meal: string[]
|
||||
condiments: string[]
|
||||
drink: string[]
|
||||
other: string[]
|
||||
}
|
||||
kol: string[]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MenuEditService } from './menu-edit.service';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
import { provideHttpClientTesting } from '@angular/common/http/testing';
|
||||
|
||||
describe('MenuEditService', () => {
|
||||
let service: MenuEditService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
provideHttpClient(),
|
||||
provideHttpClientTesting()
|
||||
]
|
||||
});
|
||||
service = TestBed.inject(MenuEditService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,145 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { inject, Injectable, signal } from '@angular/core';
|
||||
import { DateTime } from 'luxon';
|
||||
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';
|
||||
import { MenuOptions } from './menu-edit.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MenuEditService {
|
||||
private http = inject(HttpClient)
|
||||
|
||||
private _menuItems = new BehaviorSubject<Menu[]>([])
|
||||
public readonly menuItems = this._menuItems.asObservable()
|
||||
private _state = signal(STATE.NOT_LOADED);
|
||||
public readonly state = this._state.asReadonly();
|
||||
private _error = signal<string | undefined>(undefined);
|
||||
public readonly error = this._error.asReadonly();
|
||||
|
||||
seDates = signal<{
|
||||
start: DateTime | null,
|
||||
end: DateTime | null
|
||||
}>({
|
||||
start: null,
|
||||
end: null
|
||||
})
|
||||
|
||||
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
|
||||
<MenuAPI[]>
|
||||
(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<MenuAPI[], Menu[]>(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)
|
||||
})
|
||||
}
|
||||
|
||||
getOpts() {
|
||||
return this.http.get<MenuOptions>(environment.apiEndpoint + `/admin/menu/opts`, {
|
||||
withCredentials: true,
|
||||
})
|
||||
}
|
||||
|
||||
postMenu(file: File) {
|
||||
if (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('menu', file)
|
||||
return this.http.post<Status>(
|
||||
environment.apiEndpoint + '/admin/menu/upload',
|
||||
formData,
|
||||
{ withCredentials: true }
|
||||
)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
editSn(id: string, content: Menu['sn']) {
|
||||
return this.putMenu(id, { sn: content })
|
||||
}
|
||||
|
||||
editOb(id: string, content: Menu['ob']) {
|
||||
return this.putMenu(id, { ob: content })
|
||||
}
|
||||
|
||||
editKol(id: string, content: Menu['kol']) {
|
||||
return this.putMenu(id, { kol: content })
|
||||
}
|
||||
|
||||
editTitle(id: string, content: Menu['dayTitle']) {
|
||||
return this.putMenu(id, { dayTitle: content })
|
||||
}
|
||||
|
||||
print(start?: DateTime | null, end?: DateTime | null) {
|
||||
if (start && end) {
|
||||
const body = { start: start.toString(), end: end.toString() }
|
||||
return this.http.get(environment.apiEndpoint + '/admin/menu/print', {
|
||||
withCredentials: true,
|
||||
params: body,
|
||||
responseType: 'text',
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
stat(day: DateTime, m: 'ob' | 'kol') {
|
||||
return this.http.get<{ y: number; n: number }>(
|
||||
environment.apiEndpoint + `/admin/menu/${day.toISO()}/votes/${m}`,
|
||||
{ withCredentials: true }
|
||||
)
|
||||
}
|
||||
|
||||
new = {
|
||||
single: (day: DateTime) => {
|
||||
return this.http.post<Status>(
|
||||
environment.apiEndpoint + `/admin/menu/${day.toISO()}`,
|
||||
null,
|
||||
{ withCredentials: true }
|
||||
)
|
||||
},
|
||||
range: (start: DateTime, count: number) => {
|
||||
return this.http.post<Status>(
|
||||
environment.apiEndpoint + `/admin/menu/${start.toISO()}/${count}/`,
|
||||
null,
|
||||
{ withCredentials: true }
|
||||
)
|
||||
},
|
||||
}
|
||||
rm(id: string) {
|
||||
return this.http.delete<Status>(
|
||||
environment.apiEndpoint + `/admin/menu/${id}`,
|
||||
{ withCredentials: true }
|
||||
)
|
||||
}
|
||||
|
||||
private putMenu(id: string, update: Partial<Menu>) {
|
||||
return this.http.put<Status>(
|
||||
environment.apiEndpoint + `/admin/menu/${id}`,
|
||||
update,
|
||||
{ withCredentials: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
<h2 mat-dialog-title>
|
||||
{{ data.date.toFormat('dd.LL.yyyy') }}<br />
|
||||
{{ data.item }}
|
||||
</h2>
|
||||
|
||||
<mat-dialog-content>
|
||||
@switch (msi.state()) {
|
||||
@case (1) {
|
||||
<div class="spinner">
|
||||
<mat-spinner />
|
||||
</div>
|
||||
}
|
||||
@case (2) {
|
||||
<p>Ilość opinii: {{ count }}</p>
|
||||
<p>Ocena:</p>
|
||||
<app-star-control [value]="rating" [display]="true"></app-star-control>
|
||||
<p>Komentarze:</p>
|
||||
@for (item of comments; track $index) {
|
||||
<mat-card class="comment">
|
||||
<mat-card-content>
|
||||
{{item}}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
@empty {
|
||||
<p class="gray">Brak</p>
|
||||
}
|
||||
<p>Tagi:</p>
|
||||
<mat-chip-set role="list">
|
||||
@for (tag of tags | keyvalue; track tag.key) {
|
||||
<mat-chip role="listitem">
|
||||
{{tag.key}} — {{tag.value}}
|
||||
</mat-chip>
|
||||
}
|
||||
</mat-chip-set>
|
||||
}
|
||||
@case (3) {
|
||||
<p>Wystąpił błąd podczas ładowania statystyk: {{msi.error()}}</p>
|
||||
}
|
||||
}
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close>Close</button>
|
||||
</mat-dialog-actions>
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
margin: 5px;
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MenuItemStatsDialogComponent } from './menu-item-stats-dialog.component';
|
||||
|
||||
describe('MenuItemStatsDialogComponent', () => {
|
||||
let component: MenuItemStatsDialogComponent;
|
||||
let fixture: ComponentFixture<MenuItemStatsDialogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [MenuItemStatsDialogComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MenuItemStatsDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import { Component, inject, OnInit } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { DateTime } from 'luxon';
|
||||
import { MenuItemStatsService } from './menu-item-stats.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-item-stats-dialog',
|
||||
standalone: false,
|
||||
templateUrl: './menu-item-stats-dialog.component.html',
|
||||
styleUrl: './menu-item-stats-dialog.component.scss'
|
||||
})
|
||||
export class MenuItemStatsDialogComponent implements OnInit {
|
||||
public data: { date: DateTime; item: string } = inject(MAT_DIALOG_DATA)
|
||||
protected msi = inject(MenuItemStatsService)
|
||||
|
||||
protected rating = 0;
|
||||
protected comments: string[] = [];
|
||||
protected tags: Record<string, number> = {}
|
||||
protected count = 0;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.msi.date.set(this.data.date)
|
||||
this.msi.item.set(this.data.item)
|
||||
this.msi.refresh()
|
||||
|
||||
this.msi.menuItems.subscribe(v => {
|
||||
this.rating = v.value.rating ?? 0
|
||||
this.comments = v.value.comments ?? []
|
||||
this.tags = v.value.tags ?? {}
|
||||
this.count = v.value.count ?? 0
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MenuItemStatsService } from './menu-item-stats.service';
|
||||
|
||||
describe('MenuItemStatsService', () => {
|
||||
let service: MenuItemStatsService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(MenuItemStatsService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { inject, Injectable, signal } from '@angular/core';
|
||||
import { DateTime } from 'luxon';
|
||||
import { BehaviorSubject, catchError, of } from 'rxjs';
|
||||
import { MenuStats } from 'src/app/types/menu-stats';
|
||||
import { STATE } from 'src/app/types/state';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class MenuItemStatsService {
|
||||
protected http = inject(HttpClient)
|
||||
|
||||
private _menuItems = new BehaviorSubject<MenuStats>({
|
||||
name: '',
|
||||
type: 'other',
|
||||
value: {
|
||||
count: 0,
|
||||
comments: [],
|
||||
rating: 0,
|
||||
tags: {}
|
||||
}
|
||||
});
|
||||
public readonly menuItems = this._menuItems.asObservable()
|
||||
private _state = signal(STATE.NOT_LOADED);
|
||||
public readonly state = this._state.asReadonly();
|
||||
private _error = signal<string | undefined>(undefined);
|
||||
public readonly error = this._error.asReadonly();
|
||||
|
||||
public date = signal<DateTime | null>(null)
|
||||
public item = signal<string>('')
|
||||
|
||||
public refresh() {
|
||||
this.getStats()
|
||||
}
|
||||
|
||||
private getStats() {
|
||||
if (!(this.date() && this.item())) return
|
||||
this._state.set(STATE.PENDING)
|
||||
const body = { date: this.date()!.toString(), item: this.item() }
|
||||
this.http.get
|
||||
<MenuStats>
|
||||
(environment.apiEndpoint + `/admin/menu/editor/stats`, { withCredentials: true, params: body })
|
||||
.pipe(
|
||||
catchError((err: Error) => {
|
||||
this._state.set(STATE.ERROR)
|
||||
this._error.set(err.message)
|
||||
return of()
|
||||
})
|
||||
).subscribe(v => {
|
||||
this._error.set(undefined)
|
||||
this._menuItems.next(v)
|
||||
this._state.set(STATE.LOADED)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
<div id="upper-bar">
|
||||
<mat-form-field subscriptSizing="dynamic">
|
||||
<mat-label>Wybierz tydzień</mat-label>
|
||||
<mat-date-range-input [rangePicker]="picker" [formGroup]="range">
|
||||
<input matStartDate formControlName="start">
|
||||
<input matEndDate formControlName="end">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="ss.refresh()"><mat-icon>search</mat-icon></button>
|
||||
</div>
|
||||
|
||||
<div class="mainc">
|
||||
@switch (ss.state()) {
|
||||
@case (0) {
|
||||
<p>Wybierz zakres dat powyżej i kliknij szukaj</p>
|
||||
}
|
||||
@case (1) {
|
||||
<div class="spinner">
|
||||
<mat-spinner />
|
||||
</div>
|
||||
}
|
||||
@case (2) {
|
||||
<table mat-table [dataSource]="dataSource">
|
||||
<div matColumnDef="day">
|
||||
<th mat-header-cell *matHeaderCellDef>Dzień</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span>{{element.day.toFormat('dd.LL.yyyy')}}r.</span>
|
||||
<p>{{element.day.toFormat('cccc') | titlecase }}</p>
|
||||
<p>
|
||||
{{element.dayTitle}}
|
||||
</p>
|
||||
</td>
|
||||
</div>
|
||||
<div matColumnDef="sn">
|
||||
<th mat-header-cell *matHeaderCellDef>Śniadanie</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<ul class="non-editable">
|
||||
@for (i of ls.defaultItems.sn; track i) {
|
||||
<li>{{i}}</li>
|
||||
}
|
||||
</ul>
|
||||
<ul>
|
||||
@for (i of element.sn.fancy; track $index) {
|
||||
<li><button mat-button (click)="openDialog(element.day, i)"><mat-icon>bar_chart</mat-icon><span>{{i}}</span></button></li>
|
||||
}
|
||||
</ul>
|
||||
@if (element.sn.second) {
|
||||
<ul class="non-editable">
|
||||
<li>{{element.sn.second}}</li>
|
||||
</ul>
|
||||
}
|
||||
</td>
|
||||
</div>
|
||||
<div matColumnDef="ob">
|
||||
<th mat-header-cell *matHeaderCellDef>Obiad</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<ul>
|
||||
@if (element.ob.soup) {
|
||||
<li><button mat-button (click)="openDialog(element.day, element.ob.soup)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.soup}}</span></button></li>
|
||||
}
|
||||
@if (element.ob.vege) {
|
||||
<li><button mat-button (click)="openDialog(element.day, element.ob.vege)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.vege}}</span></button></li>
|
||||
}
|
||||
@if (element.ob.meal) {
|
||||
<li><button mat-button (click)="openDialog(element.day, element.ob.meal)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.meal}}</span></button></li>
|
||||
}
|
||||
</ul>
|
||||
<ul>
|
||||
@for (i of element.ob.condiments; track $index) {
|
||||
<li><button mat-button (click)="openDialog(element.day, i)"><mat-icon>bar_chart</mat-icon><span>{{i}}</span></button></li>
|
||||
}
|
||||
</ul>
|
||||
<ul>
|
||||
@if (element.ob.drink) {
|
||||
<li><button mat-button (click)="openDialog(element.day, element.ob.drink)"><mat-icon>bar_chart</mat-icon><span>{{element.ob.drink}}</span></button></li>
|
||||
}
|
||||
</ul>
|
||||
<ul>
|
||||
@for (i of element.ob.other; track $index) {
|
||||
<li><button mat-button (click)="openDialog(element.day, i)"><mat-icon>bar_chart</mat-icon><span>{{i}}</span></button></li>
|
||||
}
|
||||
</ul>
|
||||
</td>
|
||||
</div>
|
||||
<div matColumnDef="kol">
|
||||
<th mat-header-cell *matHeaderCellDef>Kolacja</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div>
|
||||
@switch (element.day.weekday) {
|
||||
@default {
|
||||
<div>
|
||||
<ul class="non-editable">
|
||||
@for (i of ls.defaultItems.kol; track i) {
|
||||
<li>{{i}}</li>
|
||||
}
|
||||
</ul>
|
||||
<ul>
|
||||
@if (element.kol) {
|
||||
<li><button mat-button (click)="openDialog(element.day, element.kol)"><mat-icon>bar_chart</mat-icon><span>{{element.kol}}</span></button></li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
@case (5) {
|
||||
<div class="non-editable">
|
||||
<p>Kolacja w domu!</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</div>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="dcols"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: dcols"></tr>
|
||||
</table>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
#upper-bar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button[mat-icon-button] {
|
||||
margin-left: 4pt;
|
||||
margin-right: 4pt;
|
||||
margin-top: 4pt;
|
||||
}
|
||||
|
||||
.mainc {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.non-editable {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MenuStatsComponent } from './menu-stats.component';
|
||||
|
||||
describe('MenuStatsComponent', () => {
|
||||
let component: MenuStatsComponent;
|
||||
let fixture: ComponentFixture<MenuStatsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [MenuStatsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(MenuStatsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Component, inject, OnDestroy } from '@angular/core';
|
||||
import { MenuEditService } from '../menu-edit.service';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { DateTime } from 'luxon';
|
||||
import { MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
|
||||
import { FDSelection } from 'src/app/fd.da';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { Menu } from 'src/app/types/menu';
|
||||
import { LocalStorageService } from 'src/app/services/local-storage.service';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MenuItemStatsDialogComponent } from './menu-item-stats-dialog/menu-item-stats-dialog.component';
|
||||
import { ToolbarService } from '../../toolbar/toolbar.service';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu-stats',
|
||||
standalone: false,
|
||||
templateUrl: './menu-stats.component.html',
|
||||
styleUrl: './menu-stats.component.scss',
|
||||
providers: [
|
||||
{ provide: MAT_DATE_RANGE_SELECTION_STRATEGY, useClass: FDSelection },
|
||||
],
|
||||
})
|
||||
export class MenuStatsComponent implements OnDestroy {
|
||||
protected ss = inject(MenuEditService)
|
||||
protected ls = inject(LocalStorageService)
|
||||
protected tb = inject(ToolbarService)
|
||||
protected dialog = inject(MatDialog)
|
||||
protected router = inject(Router)
|
||||
protected route = inject(ActivatedRoute)
|
||||
|
||||
dcols: string[] = ['day', 'sn', 'ob', 'kol']
|
||||
|
||||
range = new FormGroup({
|
||||
start: new FormControl<DateTime | null>(null),
|
||||
end: new FormControl<DateTime | null>(null),
|
||||
})
|
||||
dataSource: MatTableDataSource<Menu> = new MatTableDataSource<Menu>()
|
||||
|
||||
constructor() {
|
||||
this.range.setValue(this.ss.seDates())
|
||||
this.range.valueChanges.subscribe(v => {
|
||||
this.ss.seDates.set({ start: v.start!, end: v.end! })
|
||||
})
|
||||
this.ss.menuItems.subscribe(v => {
|
||||
this.dataSource.data = v
|
||||
})
|
||||
this.tb.comp = this
|
||||
this.tb.menu = [
|
||||
{
|
||||
fn: "goBack",
|
||||
title: "Edytowanie jadłospisu",
|
||||
icon: "arrow_back"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.tb.comp = undefined
|
||||
this.tb.menu = undefined
|
||||
}
|
||||
|
||||
openDialog(date: DateTime, item: string) {
|
||||
this.dialog.open(MenuItemStatsDialogComponent, {
|
||||
data: { date, item }
|
||||
})
|
||||
}
|
||||
goBack() {
|
||||
this.router.navigate(['../'], { relativeTo: this.route })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<h1 mat-dialog-title>Import z pliku</h1>
|
||||
<mat-dialog-content>
|
||||
<input type="file" name="menu" #fu style="display: none;" (change)="onFileChange($event)" accept=".xlsx,.ods,application/vnd.oasis.opendocument.spreadsheet">
|
||||
<button matButton="outlined" (click)="fu.click()">Wybierz plik</button>
|
||||
<div style="color: red;">
|
||||
<h1>UWAGA!</h1>
|
||||
<h3>Przed wysłaniem upewnij się że</h3>
|
||||
<ul>
|
||||
<li>Daty w pliku są prawidłowe i poprawnie sformatowane (DD.MM.RRRR)</li>
|
||||
<li>Wszystkie pozycje w menu są w osobnych linijkach</li>
|
||||
<li>Załączony dokument to arkusz w formacie XLSX lub ODS</li>
|
||||
</ul>
|
||||
<h2>Nie spełnienie któregokolwiek z tych wymagań może skutkować szkodami w programie!</h2>
|
||||
<h3>Późniejsza modyfikacja danych jest niemożliwa w tej wersji programu.</h3>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<button matButton="outlined" class="error-color" [disabled]="file === undefined" (click)="submit()">Wyślij</button>
|
||||
<button mat-button mat-dialog-close>Anuluj</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,4 @@
|
||||
:host {
|
||||
margin: 8pt;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
|
||||
import { MenuUploadComponent } from './menu-upload.component'
|
||||
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'
|
||||
import { MenuEditService } from '../menu-edit.service'
|
||||
|
||||
xdescribe('MenuUploadComponent', () => {
|
||||
let component: MenuUploadComponent
|
||||
let fixture: ComponentFixture<MenuUploadComponent>
|
||||
|
||||
beforeEach(() => {
|
||||
const acMock = jasmine.createSpyObj('AdminCommService')
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [MenuUploadComponent],
|
||||
providers: [
|
||||
{ provide: MenuEditService, useValue: acMock },
|
||||
{ provide: MatDialogRef, useValue: {} },
|
||||
],
|
||||
imports: [MatDialogModule],
|
||||
})
|
||||
fixture = TestBed.createComponent(MenuUploadComponent)
|
||||
component = fixture.componentInstance
|
||||
fixture.detectChanges()
|
||||
})
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Component, inject } from '@angular/core'
|
||||
import { MatDialogRef } from '@angular/material/dialog'
|
||||
import { MenuEditService } from '../menu-edit.service'
|
||||
|
||||
@Component({
|
||||
selector: 'app-upload-edit',
|
||||
templateUrl: './menu-upload.component.html',
|
||||
styleUrls: ['./menu-upload.component.scss'],
|
||||
standalone: false,
|
||||
})
|
||||
export class MenuUploadComponent {
|
||||
private ac = inject(MenuEditService)
|
||||
public dialogRef: MatDialogRef<MenuUploadComponent> = inject(MatDialogRef)
|
||||
|
||||
protected file: File | undefined
|
||||
onFileChange(event: Event) {
|
||||
const file: File = (event.target as HTMLInputElement).files![0]
|
||||
if (file) {
|
||||
this.file = file
|
||||
} else {
|
||||
this.file = undefined
|
||||
}
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.ac.postMenu(this.file!)?.subscribe(value => {
|
||||
this.dialogRef.close(value)
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user