Frontend hist crud spa grupo local atendimento

src/app/app-routing.module.ts

@@ -39,6 +39,7 @@ import { ExameCreateComponent } from './components/exame/exame-create/exame-crea
 import { ExameDeleteComponent } from './components/exame/exame-delete/exame-delete.component';
 import { ExameUpdateComponent } from './components/exame/exame-update/exame-update.component';
 import { EspecialidadeComponent } from './components/especialidade/especialidade.component';
+import { GrupoLocalAtendimentoComponent } from './components/grupo-local-atendimento/grupo-local-atendimento.component';
 import { HomeComponent } from './views/home/home.component';
 import { HibridoClientErrorComponent } from './components/hibrido-client-error/hibrido-client-error.component';
 import { LaboratorioCreateComponent } from './components/laboratorio/laboratorio-create/laboratorio-create.component';
@@ -142,6 +143,10 @@ const routes: Routes = [
     path: 'tipos_recurso',
     component: TipoRecursoComponent,
   },
+  {
+    path: 'grupos_locais',
+    component: GrupoLocalAtendimentoComponent,
+  },
   {
     path: 'hibrido_client_errors',
     component: HibridoClientErrorComponent,

src/app/components/grupo-local-atendimento/grupo-local-atendimento.component.html

@@ -0,0 +1,127 @@
+<div class="d-flex justify-content-between col-sm-12 p-2">
+  <button mat-flat-button color="primary" class="col-sm-2 col-md-2 col-lg-2 float-start btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseSearch"
+    aria-expanded="false" aria-controls="collapseSearch">
+    <mat-icon>search</mat-icon>
+    Buscar
+  </button>
+
+  <button appDebounceClick mat-flat-button color="primary" class="col-sm-1 col-md-1 col-lg-1 float-end btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseForm"
+    aria-expanded="false" aria-controls="collapseForm" (click)="new();" *ngIf="!onCreate && !onEdit">
+    <mat-icon>add</mat-icon>
+    Novo
+  </button>
+</div>
+
+<div class="mat-elevation-z4">
+  <div class="collapse" id="collapseSearch">
+    <div class="card card-body">
+      <div class="row">
+        <div class="mb-3 col-md-3 row">
+          <mat-form-field appearance="fill">
+            <mat-label>Nome:</mat-label>
+            <input matInput #nome maxlength="100"
+            title="Filtre por nome"
+              (input)="search('nome', nome.value)"
+            >
+          </mat-form-field>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="">
+    <div *ngIf="onCreate || onEdit">
+      <form #formCreateGrupoLocalAtendimento="ngForm" class="justify-content-md-center">
+
+        <mat-form-field appearance="fill" class="col-lg-6 col-md-6 p-2">
+          <mat-label>Nome:</mat-label>
+          <input
+            type="text"
+            aria-label="nome"
+            id="nome"
+            required
+            matInput
+            maxlength="50"
+            name="nome"
+            [(ngModel)]="currentRecord.nome"
+            #nome="ngModel"
+          >
+          <mat-error *ngIf="nome.invalid && (nome.dirty || nome.touched)">
+            <span *ngIf="nome.errors?.['required']">
+              O campo é obrigatório!
+            </span>
+          </mat-error>
+        </mat-form-field>
+
+        <div class="col-md-12 d-flex justify-content-end p-2">
+          <button mat-button type="submit"
+          (click)="addGridData()" *ngIf="onCreate"
+            [disabled]="formCreateGrupoLocalAtendimento.invalid">Inserir</button>
+          <button mat-button type="submit"
+          (click)="updateGridData()"
+           *ngIf="onEdit">Alterar</button>
+          <button mat-button color="warn" type="button"
+          (click)="cancelar()">Cancelar</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="mat-elevation-z4">
+  <table
+    mat-table
+    [dataSource]="datasource"
+    matSort
+    matSortActive="id"
+    matSortDirection="desc"
+    matSortDisableClear
+  >
+
+    <!-- Nome Column -->
+    <ng-container matColumnDef="nome" class="col-2">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="nome">Nome</th>
+      <td mat-cell *matCellDef="let row">{{ row?.nome }}</td>
+    </ng-container>
+
+    <!-- action Column -->
+    <ng-container matColumnDef="action" class="col-1">
+      <th mat-header-cell *matHeaderCellDef> Ações </th>
+      <td mat-cell *matCellDef="let row; index as position">
+        <div class="row">
+
+          <div class="col-1 me-3">
+            <button mat-icon-button *ngIf="!onEdit" (click)="atualizar(row)">
+              <mat-icon class="edit text-success">edit</mat-icon>
+            </button>
+          </div>
+
+          <div class="col-1 me-3">
+            <button class="delete" mat-icon-button *ngIf="!onEdit" (click)="deleteGridData(row.id)">
+              <mat-icon class="delete text-danger">delete</mat-icon>
+            </button>
+          </div>
+
+          <ng-template #deleteDialog>
+            <mat-dialog-content class="mat-typography">
+              Deseja apagar esse registro?
+            </mat-dialog-content>
+            <mat-dialog-actions align="end">
+              <button mat-button mat-dialog-close>Cancel</button>
+              <button mat-button [mat-dialog-close]="true">Apagar</button>
+            </mat-dialog-actions>
+          </ng-template>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+  <mat-paginator
+    [length]="this.totalCount"
+    [pageSize]="5"
+    [pageSizeOptions]="[5, 10, 20, 50]">
+  </mat-paginator>
+</div>
+

src/app/components/grupo-local-atendimento/grupo-local-atendimento.component.ts

@@ -0,0 +1,175 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  ViewChild,
+  TemplateRef,
+  ElementRef,
+  Input
+} from '@angular/core';
+import { GrupoLocalAtendimento } from '../model/grupo-local-atendimento.model';
+import { GrupoLocalAtendimentoService } from '../service/grupo-local-atendimento.service';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { merge } from 'rxjs';
+import { Query } from '../model/query.model';
+import { Subject, timer } from 'rxjs';
+import { tap, debounceTime } from 'rxjs/operators';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatSelectModule } from '@angular/material/select';
+import { MatOptionModule } from '@angular/material/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { NgIf, NgFor } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+
+@Component({
+  selector: 'app-grupo-local-atendimento',
+  templateUrl: './grupo-local-atendimento.component.html',
+  standalone: true,
+  imports: [
+    CommonModule, MatIconModule, NgIf, MatFormFieldModule, MatInputModule, FormsModule,
+    MatAutocompleteModule, NgFor, MatOptionModule, MatSelectModule, MatTabsModule,
+    MatButtonModule, MatTableModule, MatSortModule, MatDialogModule, MatPaginatorModule,
+    MatDatepickerModule
+  ]
+})
+export class GrupoLocalAtendimentoComponent {
+  gruposLocaisAtendimento: GrupoLocalAtendimento[] =[];
+  datasource = new MatTableDataSource<any>([]);
+  records: any[] = [];
+  record!: any;
+  oldRecord: any;
+  currentRecord: any;
+  deletedRecords: any[] = [];
+  query: Query[] = [];
+  id!: number;
+  totalCount!: number;
+
+  @ViewChild('deleteDialog') deleteDialog: TemplateRef<any> | any;
+  @ViewChild(MatSort) sort: MatSort | any;
+  @ViewChild(MatPaginator) paginator: MatPaginator | any;
+
+  queries: Query[] = [];
+  subjectEspecialidade: Subject<any> = new Subject();
+  subjectOperadoraTelefonia: Subject<any> = new Subject();
+
+  onEdit = false;
+  onCreate = false;
+
+  displayedColumns = [
+    'nome',
+    'action'
+  ];
+
+  constructor(
+    public dialog: MatDialog,
+    private recordService: GrupoLocalAtendimentoService
+  ) {
+    this.currentRecord = new GrupoLocalAtendimento({});
+    this.record ||= new GrupoLocalAtendimento({});
+  }
+
+  ngOnInit(): void {
+    this.recordService.count().subscribe((totalCount) => {
+      this.totalCount = totalCount;
+    });
+
+    const query = new Query({ key: '', value: '', isNumeric: false });
+  }
+
+  ngAfterViewInit() {
+    this.loadPage();
+    this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0)); // reseta o paginador depois de ordenar
+
+    merge(this.sort.sortChange, this.paginator.page) // Na ordenação ou paginação, carrega uma nova página
+      .pipe(tap(() => this.loadPage()))
+      .subscribe();
+  }
+
+  loadPage() {
+    this.recordService
+      .find(this.sort.active,
+        this.sort.direction,
+        this.paginator.pageIndex,
+        this.paginator.pageSize, this.query
+      ).subscribe((records: any[]) => {
+        this.records = records;
+        this.datasource.data = [...this.records];
+      });
+  }
+
+  new(): void {
+    this.onCreate = true;
+  }
+
+  addGridData(): void {
+    this.onCreate = false;
+    this.onEdit = false;
+    this.recordService.create(this.currentRecord).subscribe((record) => {
+      // this.records.unshift(record);
+      // this.datasource.data = [...this.records];
+      this.recordService.showMessage('Grupo local de atendimento cadastrado com sucesso!');
+      this.loadPage();
+    });
+
+    this.currentRecord = new GrupoLocalAtendimento({});
+  }
+
+  updateGridData(): void {
+    this.onCreate = false;
+    this.onEdit = false;
+    this.recordService.update(this.currentRecord).subscribe((recurso) => {
+      this.recordService.showMessage('Grupo local de atendimento atualizado com sucesso!');
+      this.loadPage();
+    });
+    this.currentRecord = new GrupoLocalAtendimento({});
+  }
+
+  atualizar(row: GrupoLocalAtendimento): void {
+    console.warn('Passou no atualizar!!!!!!!')
+    console.table(row);
+    this.currentRecord = row;
+    this.onCreate = false;
+    this.onEdit = true;
+  }
+
+  cancelar(): void {
+    this.onCreate = false;
+    this.onEdit = false;
+    Object.assign(this.currentRecord, this.oldRecord);
+    this.currentRecord = new GrupoLocalAtendimento({});
+  }
+
+  deleteGridData(id: number): void {
+    const dialogRef = this.dialog.open(this.deleteDialog);
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result) {
+        this.recordService.delete(id)
+          .subscribe((record) => {
+            this.recordService.showMessage('Grupo local de atendimento apagado com sucesso!');
+
+            // Carrega os dados do backend e faz refresh do datasource
+            this.loadPage();
+            this.datasource.data = [...this.records];
+          });
+      }
+    });
+  }
+
+  search(key: string, value: string, isNumeric: boolean = false): void {
+    const query = new Query({ key, value, isNumeric });
+    this.query = this.query.filter((q) => q.key !== key);
+    this.query.push(query);
+    this.paginator.pageIndex = 0;
+    this.loadPage();
+  }
+
+}