refactor(feature): template refs and table columns (#24)

guiseek · Jun 28, 2023 · 65d12cf · 65d12cf
1 parent 88e715c
commit 65d12cf
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 104 deletions.
diff --git 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<HTMLFormElement>;
-  get formEl() {
-    return this.formRef.nativeElement;
-  }
-
-  @ViewChild('sectionRef', { static: true })
-  sectionRef!: ElementRef<HTMLElement>;
-  get sectionEl() {
-    return this.sectionRef.nativeElement;
-  }
-
   abstract form: EntityForm<T, C, U>;
-
-  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
@@ -2,7 +2,7 @@
   <h2>Horários</h2>
 </mat-toolbar>
 
-<section #sectionRef class="row">
+<section class="row">
   <mat-card class="col min-300 overflow-hidden">
     <table mat-table [dataSource]="scheduleFacade.data$">
       <ng-container matColumnDef="id">
@@ -50,7 +50,6 @@ <h2>Horários</h2>
   </mat-card>
 
   <form
-    #formRef
     id="form"
     novalidate
     [formGroup]="form"
@@ -138,7 +137,7 @@ <h2>Horários</h2>
       </mat-card-content>
       <mat-card-actions class="flex row-reverse space-between">
         <button mat-raised-button color="primary" type="submit">Salvar</button>
-        <button mat-raised-button #resetRef type="reset">Limpar</button>
+        <button mat-raised-button type="reset">Limpar</button>
       </mat-card-actions>
     </mat-card>
   </form>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,7 +2,7 @@
   <h2>Turmas</h2>
 </mat-toolbar>
 
-<section #sectionRef class="row">
+<section class="row">
   <mat-card class="col min-300 overflow-hidden">
     <table mat-table [dataSource]="teamFacade.data$">
       <ng-container matColumnDef="id">
@@ -43,7 +43,6 @@ <h2>Turmas</h2>
   </mat-card>
 
   <form
-    #formRef
     novalidate
     [formGroup]="form"
     class="col min-300"
@@ -111,7 +110,7 @@ <h2>Turmas</h2>
       </mat-card-content>
       <mat-card-actions class="flex row-reverse space-between">
         <button mat-raised-button color="accent" type="submit">Salvar</button>
-        <button mat-raised-button #resetRef type="reset">Limpar</button>
+        <button mat-raised-button type="reset">Limpar</button>
       </mat-card-actions>
     </mat-card>
   </form>

diff --git 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,31 +26,32 @@ export class TeamContainer extends EntityContainer<Team> 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() {
     this.teamFacade.load();
 
     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<Team>({
@@ -61,12 +62,4 @@ export class TeamContainer extends EntityContainer<Team> 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);
-  }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './get-columns';
		export * from './is-breakpoint';