diff --git a/libs/feature/src/lib/containers/base/entity.container.ts b/libs/feature/src/lib/containers/base/entity.container.ts index 43a5397..e613c33 100644 --- a/libs/feature/src/lib/containers/base/entity.container.ts +++ b/libs/feature/src/lib/containers/base/entity.container.ts @@ -1,14 +1,8 @@ -import { - inject, - Directive, - ElementRef, - ViewChild, - DestroyRef, -} from '@angular/core'; +import { inject, Directive, ViewChild, DestroyRef } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; -import { MatButton } from '@angular/material/button'; -import { EntityForm } from './entity.form'; +import { FormGroupDirective } from '@angular/forms'; import { Router } from '@angular/router'; +import { EntityForm } from './entity.form'; /** * @description @@ -24,36 +18,23 @@ export abstract class EntityContainer< C = unknown, U = unknown > { + @ViewChild(FormGroupDirective, { static: true }) + private formGroup!: FormGroupDirective; + + protected router = inject(Router); + protected snackBar = inject(MatSnackBar); protected destroyRef = inject(DestroyRef); protected label = 'Registro'; - @ViewChild('resetRef', { static: true }) - resetButton!: MatButton; - get resetRef() { - return this.resetButton._elementRef; - } - - @ViewChild('formRef', { static: true }) - formRef!: ElementRef; - get formEl() { - return this.formRef.nativeElement; - } - - @ViewChild('sectionRef', { static: true }) - sectionRef!: ElementRef; - get sectionEl() { - return this.sectionRef.nativeElement; - } - abstract form: EntityForm; - - snackBar = inject(MatSnackBar); - private router = inject(Router); + abstract onRemove(entity: T): void; + abstract create(updateDto: C): void; + abstract update(updateDto: U): void; onSubmit(path: string) { if (this.form.valid) { - let message; + let message: string; if (this.form.hasId) { this.update(this.form.getValue()); @@ -63,28 +44,20 @@ export abstract class EntityContainer< message = `${this.label} cadastrado(a)`; } - this.snackBar.open(`${message} com sucesso`, 'OK', { + message = `${message} com sucesso`; + + this.snackBar.open(message, 'OK', { duration: 3000, }); - this.resetRef.nativeElement.click(); - this.form.init(); - - const url = ['/', path]; - this.router.navigate(url); + this.formGroup.resetForm(); - this.sectionEl.scrollIntoView({ - behavior: 'smooth', - }); + this.router.navigate(['/', path]); } else { this.form.markAllAsTouched(); } } - abstract onRemove(entity: T): void; - abstract create(updateDto: C): void; - abstract update(updateDto: U): void; - protected compareFn(e1: T, e2: T) { if (e1 && 'id' in e1 && e2 && 'id' in e2) { return e1.id === e2.id; diff --git a/libs/feature/src/lib/containers/schedule/schedule.container.html b/libs/feature/src/lib/containers/schedule/schedule.container.html index 1e4dc5f..f9a2df0 100644 --- a/libs/feature/src/lib/containers/schedule/schedule.container.html +++ b/libs/feature/src/lib/containers/schedule/schedule.container.html @@ -2,7 +2,7 @@

Horários

-
+
@@ -50,7 +50,6 @@

Horários

Horários - + diff --git a/libs/feature/src/lib/containers/schedule/schedule.container.ts b/libs/feature/src/lib/containers/schedule/schedule.container.ts index 5d3f6b9..346651f 100644 --- a/libs/feature/src/lib/containers/schedule/schedule.container.ts +++ b/libs/feature/src/lib/containers/schedule/schedule.container.ts @@ -8,11 +8,11 @@ import { import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Component, OnInit, inject } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { map, shareReplay } from 'rxjs'; import { ConfirmDialog } from '../../components'; import { ScheduleForm } from '../../forms'; import { EntityContainer } from '../base'; -import { isBreakpoint } from '../shared'; +import { getColumns } from '../shared'; +import { filter } from 'rxjs'; @Component({ selector: 'getlab-schedule', @@ -31,33 +31,26 @@ export class ScheduleContainer teamFacade = inject(TeamFacade); route = inject(ActivatedRoute); - columns$ = isBreakpoint('Handset').pipe( - map((match) => - match - ? ['time', 'team', 'update', 'remove'] - : ['time', 'byweekday', 'team', 'update', 'remove'] - ), - shareReplay() + columns$ = getColumns( + ['time', 'byweekday', 'team', 'update', 'remove'], + ['time', 'team', 'update', 'remove'] ); ngOnInit() { this.form.onInit(); + this.scheduleFacade.load(); this.teamFacade.load(); this.scheduleFacade.schedule$ .pipe(takeUntilDestroyed(this.destroyRef)) - .subscribe((schedule) => { - if (schedule) { - this.form.patchValue(schedule); - this.formEl.scrollIntoView({ - behavior: 'smooth', - }); - } - }); + .subscribe((value) => this.form.patchValue(value ?? {})); this.route.params - .pipe(takeUntilDestroyed(this.destroyRef)) + .pipe( + takeUntilDestroyed(this.destroyRef), + filter((params) => 'id' in params) + ) .subscribe(({ id }) => { if (id) this.scheduleFacade.findSchedule(id); }); diff --git a/libs/feature/src/lib/containers/shared/get-columns.ts b/libs/feature/src/lib/containers/shared/get-columns.ts new file mode 100644 index 0000000..ed81b37 --- /dev/null +++ b/libs/feature/src/lib/containers/shared/get-columns.ts @@ -0,0 +1,12 @@ +import { map, shareReplay } from 'rxjs'; +import { isBreakpoint } from './is-breakpoint'; + +export function getColumns( + allColumns: string[], + handsetColumns = allColumns.slice(0, 3) +) { + return isBreakpoint('Handset').pipe( + map((match) => (match ? handsetColumns : allColumns)), + shareReplay() + ); +} diff --git a/libs/feature/src/lib/containers/shared/index.ts b/libs/feature/src/lib/containers/shared/index.ts index bfd564a..61827fc 100644 --- a/libs/feature/src/lib/containers/shared/index.ts +++ b/libs/feature/src/lib/containers/shared/index.ts @@ -1 +1,2 @@ +export * from './get-columns'; export * from './is-breakpoint'; diff --git a/libs/feature/src/lib/containers/spreadsheet/spreadsheet.container.ts b/libs/feature/src/lib/containers/spreadsheet/spreadsheet.container.ts index f1e4d66..5cf2676 100644 --- a/libs/feature/src/lib/containers/spreadsheet/spreadsheet.container.ts +++ b/libs/feature/src/lib/containers/spreadsheet/spreadsheet.container.ts @@ -1,14 +1,14 @@ import { Component, DestroyRef, OnInit, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ActivatedRoute, Router } from '@angular/router'; -import { map, shareReplay } from 'rxjs'; import { SpreadsheetForm } from '../../forms'; +import { getColumns } from '../shared'; +import { filter } from 'rxjs'; import { Schedule, ScheduleFacade, SpreadsheetFacade, } from '@getlab/data-access'; -import { isBreakpoint } from '../shared'; @Component({ selector: 'getlab-spreadsheet', @@ -19,18 +19,15 @@ export class SpreadsheetContainer implements OnInit { protected destroyRef = inject(DestroyRef); protected router = inject(Router); protected route = inject(ActivatedRoute); + scheduleFacade = inject(ScheduleFacade); spreadsheetFacade = inject(SpreadsheetFacade); readonly spreadsheetForm = new SpreadsheetForm(); - columns$ = isBreakpoint('Handset').pipe( - map((match) => - match - ? ['date', 'time', 'ref'] - : ['date', 'time', 'ref', 'people', 'goal'] - ), - shareReplay() + columns$ = getColumns( + ['date', 'time', 'ref', 'people', 'goal'], + ['date', 'time', 'ref'] ); get schedules() { @@ -39,6 +36,7 @@ export class SpreadsheetContainer implements OnInit { ngOnInit() { this.spreadsheetFacade.clear(); + this.scheduleFacade.load(); this.route.queryParams @@ -63,7 +61,10 @@ export class SpreadsheetContainer implements OnInit { }); this.spreadsheetFacade.data$ - .pipe(takeUntilDestroyed(this.destroyRef)) + .pipe( + takeUntilDestroyed(this.destroyRef), + filter((data) => data !== undefined) + ) .subscribe((data) => { this.spreadsheetFacade.parse(data); }); diff --git a/libs/feature/src/lib/containers/team/team.container.html b/libs/feature/src/lib/containers/team/team.container.html index dbb2cd3..a484e12 100644 --- a/libs/feature/src/lib/containers/team/team.container.html +++ b/libs/feature/src/lib/containers/team/team.container.html @@ -2,7 +2,7 @@

Turmas

-
+
@@ -43,7 +43,6 @@

Turmas

Turmas - + diff --git a/libs/feature/src/lib/containers/team/team.container.ts b/libs/feature/src/lib/containers/team/team.container.ts index b1fedbd..d216d7d 100644 --- a/libs/feature/src/lib/containers/team/team.container.ts +++ b/libs/feature/src/lib/containers/team/team.container.ts @@ -7,11 +7,11 @@ import { import { Component, OnInit, inject } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ActivatedRoute } from '@angular/router'; -import { map, shareReplay } from 'rxjs'; import { ConfirmDialog } from '../../components'; import { EntityContainer } from '../base'; -import { isBreakpoint } from '../shared'; +import { getColumns } from '../shared'; import { TeamForm } from '../../forms'; +import { filter } from 'rxjs'; @Component({ selector: 'getlab-team', @@ -26,11 +26,9 @@ export class TeamContainer extends EntityContainer implements OnInit { teamFacade = inject(TeamFacade); route = inject(ActivatedRoute); - columns$ = isBreakpoint('Handset').pipe( - map((match) => - match ? ['ref', 'update', 'remove'] : ['ref', 'name', 'update', 'remove'] - ), - shareReplay() + columns$ = getColumns( + ['ref', 'name', 'update', 'remove'], + ['ref', 'update', 'remove'] ); ngOnInit() { @@ -38,19 +36,22 @@ export class TeamContainer extends EntityContainer implements OnInit { this.teamFacade.team$ .pipe(takeUntilDestroyed(this.destroyRef)) - .subscribe((team) => { - if (team) { - const behavior = 'smooth'; - this.form.patchValue(team); - this.formEl.scrollIntoView({ behavior }); - } - }); + .subscribe((value) => this.form.patchValue(value ?? {})); this.route.params - .pipe(takeUntilDestroyed(this.destroyRef)) - .subscribe(({ id }) => { - if (id) this.teamFacade.findTeam(id); - }); + .pipe( + takeUntilDestroyed(this.destroyRef), + filter((params) => 'id' in params) + ) + .subscribe(({ id }) => this.teamFacade.findTeam(id)); + } + + create(value: CreateTeamDto) { + this.teamFacade.createTeam(value); + } + + update(value: UpdateTeamDto) { + this.teamFacade.updateTeam(value); } @ConfirmDialog({ @@ -61,12 +62,4 @@ export class TeamContainer extends EntityContainer implements OnInit { onRemove({ id }: Team) { if (id) this.teamFacade.removeTeam(id); } - - create(value: CreateTeamDto) { - this.teamFacade.createTeam(value); - } - - update(value: UpdateTeamDto) { - this.teamFacade.updateTeam(value); - } }