Front hst crud convenio

.gitignore

@@ -1,5 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+# Ignora Hints
+.hintrc
+
 # compiled output
 /dist
 /tmp

package.json

@@ -41,6 +41,7 @@
     "bootstrap": "^5.2.3",
     "core-util-is": "^1.0.3",
     "got": "^12.5.3",
+    "hammerjs": "^2.0.8",
     "moment": "^2.29.1",
     "ng-auto-complete": "^5.0.3",
     "ngx-mask": "^15.1.0",

src/app/app-routing.module.ts

@@ -25,6 +25,7 @@ import { BandejaUpdateComponent } from './components/bandeja/bandeja-update/band
 import { ColetorCreateComponent } from './components/coletor/coletor-create/coletor-create.component';
 import { ColetorDeleteComponent } from './components/coletor/coletor-delete/coletor-delete.component';
 import { ColetorUpdateComponent } from './components/coletor/coletor-update/coletor-update.component';
+import { ConvenioComponent } from './components/convenio/convenio.component';
 import { ConsultaAmostraShowComponent } from './components/consulta-amostra/consulta-amostra-show/consulta-amostra-show.component';
 import { DominioComponent } from './components/dominio/dominio.component';
 import { EmpresaCreateComponent } from './components/empresa/empresa-create/empresa-create.component';
@@ -39,6 +40,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 +144,14 @@ const routes: Routes = [
     path: 'tipos_recurso',
     component: TipoRecursoComponent,
   },
+  {
+    path: 'convenios',
+    component: ConvenioComponent,
+  },
+  {
+    path: 'grupos_locais',
+    component: GrupoLocalAtendimentoComponent,
+  },
   {
     path: 'hibrido_client_errors',
     component: HibridoClientErrorComponent,

src/app/components/convenio/convenio.component.html

@@ -0,0 +1,223 @@
+<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 class="mb-3 col-md-3 row">
+          <mat-form-field appearance="fill">
+            <mat-label>Email:</mat-label>
+            <input matInput #email maxlength="100"
+            title="Filtre por Email"
+              (input)="search('email', email.value)"
+            >
+          </mat-form-field>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="">
+    <div *ngIf="onCreate || onEdit">
+      <form #formCreateConvenio="ngForm" class="justify-content-md-center">
+
+        <mat-form-field appearance="fill" class="col-lg-3 col-md-3 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>
+
+        <mat-form-field appearance="fill" class="col-lg-3 col-md-3 p-2">
+          <mat-label>Email:</mat-label>
+          <input
+            type="email"
+            aria-label="email"
+            id="email"
+            required
+            matInput
+            maxlength="50"
+            name="email"
+            [(ngModel)]="currentRecord.email"
+            #email="ngModel"
+          >
+          <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
+            <span *ngIf="email.errors?.['required']">
+              O campo é obrigatório!
+            </span>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" class="col-lg-3 col-md-3 p-2">
+          <mat-label>Chave Publicação:</mat-label>
+          <input
+            type="text"
+            aria-label="chave_web"
+            id="chave_web"
+            required
+            matInput
+            maxlength="50"
+            name="chave_web"
+            [(ngModel)]="currentRecord.chave_web"
+            #chave_web="ngModel"
+          >
+          <mat-error *ngIf="chave_web.invalid && (chave_web.dirty || chave_web.touched)">
+            <span *ngIf="chave_web.errors?.['required']">
+              O campo é obrigatório!
+            </span>
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" class="col-lg-3 col-md-3 p-2">
+          <mat-label>Operadora</mat-label>
+          <input
+            type="search"
+            aria-label="operadora_id"
+            name="operadora_id"
+            matInput [matAutocomplete]="autoOperadoras"
+            [(ngModel)]="currentRecord.operadora_id"
+            (ngModelChange)="searchOperadora()"
+            #operadora_id="ngModel"
+            required
+          />
+          <mat-error *ngIf="operadora_id.invalid && (operadora_id.dirty || operadora_id.touched)">
+            <span *ngIf="operadora_id.errors?.['required']">
+              O campo é obrigatório!
+            </span>
+          </mat-error>
+          <mat-autocomplete #autoOperadoras="matAutocomplete"
+            [displayWith]="displayFnOperadora(operadoras)">
+            <mat-option *ngFor="let operadora of operadoras" [value]="operadora.id">
+              {{operadora?.empresa?.nome_fantasia}}
+            </mat-option>
+          </mat-autocomplete>
+        </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]="formCreateConvenio.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>
+
+     <!-- Email Column -->
+     <ng-container matColumnDef="email" class="col-2">
+      <th mat-header-cell
+        *matHeaderCellDef mat-sort-header="email">Email</th>
+      <td mat-cell *matCellDef="let row">{{ row?.email }}</td>
+    </ng-container>
+
+    <!-- Chave Publicação Column -->
+    <ng-container matColumnDef="chave_web" class="col-2">
+      <th mat-header-cell
+        *matHeaderCellDef mat-sort-header="chave_web">Chave Publicação</th>
+      <td mat-cell *matCellDef="let row">{{ row?.chave_web }}</td>
+    </ng-container>
+
+    <!-- Operadora Column -->
+    <ng-container matColumnDef="operadora_id" class="col-2">
+      <th mat-header-cell
+        *matHeaderCellDef mat-sort-header="operadora_id">Operadora</th>
+      <td mat-cell *matCellDef="let row">{{ row?.operadora?.empresa?.nome_fantasia }}</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>
+