feat(components): ajustes nas páginas de aceites e navios (edição, adição, listagem e visualização)

src/app/pages/crud-aceites/aceite-add/aceite-add.component.html

@@ -120,7 +120,7 @@
     </div>
     <div class="row">
       <mat-form-field class="field full-width" appearance="outline">
-        <mat-label>Observação</mat-label>
+        <mat-label>Observação do Solicitante</mat-label>
         <input matInput type="text" formControlName="obs">
         <mat-error *ngIf="empForm.get('obs')?.invalid">{{ getErrorMessage('obs') }}</mat-error>
       </mat-form-field>

src/app/pages/crud-aceites/aceite-edit/aceite-edit.component.html

@@ -117,7 +117,7 @@
 
     <div class="row">
       <mat-form-field class="field full-width" appearance="outline">
-        <mat-label>Observação</mat-label>
+        <mat-label>Observação do Solicitante</mat-label>
         <input matInput type="text" formControlName="obs">
         <mat-error *ngIf="empForm.get('obs')?.invalid">{{ getErrorMessage('obs') }}</mat-error>
       </mat-form-field>
@@ -136,35 +136,24 @@
       </mat-form-field>
     </div>
     <div *ngIf="empForm.get('status')?.value === 'Y' || empForm.get('status')?.value === 'NE'" class="field large">
-      <mat-form-field class="field large" appearance="outline">
+      <mat-form-field class="field large" appearance="outline" style="width: 100%;">
         <mat-label>Comentários sobre o aceite:</mat-label>
-        <input matInput type="text" formControlName="restricoes">
+        <textarea matInput formControlName="restricoes" rows="4"
+          placeholder="Adicione observações ou comentários detalhados..."></textarea>
         <mat-error *ngIf="empForm.get('restricoes')?.invalid">
           {{ getErrorMessage('restricoes') }}
         </mat-error>
       </mat-form-field>
-      <div class="row file-upload-container">
-        <mat-label style="color:cadetblue">Adicione o documente Q88 da embarcação</mat-label>
-        <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload style="display: none" />
-
-        <div class="file-upload-content">
-          <div class="file-info">
-            <span>{{ fileName || "No file uploaded yet." }}</span>
-          </div>
 
-          <div class="upload-button-wrapper">
-            <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()" type="button">
-              <mat-icon>attach_file</mat-icon>
-            </button>
-          </div>
-        </div>
-
-        <div class="uploaded-image-container" *ngIf="imageUrl">
-          <img [src]="imageUrl" alt="Uploaded Image" class="uploaded-image" />
-          <button mat-mini-fab color="warn" class="remove-image-btn" (click)="removeImage()" type="button">
-            <mat-icon>close</mat-icon>
+      <div class="row file-upload-container">
+        <ng-container *ngIf="data?.path">
+          <mat-card-actions>
+            <button mat-flat-button color="primary" (click)="downloadNavioFunction()">
+              <mat-icon>download</mat-icon>
+              Download Documento Q88
             </button>
-        </div>
+          </mat-card-actions>
+        </ng-container>
       </div>
     </div>
   </div>

src/app/pages/crud-aceites/aceite-edit/aceite-edit.component.ts

@@ -23,7 +23,9 @@ import { NgxCurrencyDirective } from 'ngx-currency';
 import { BercosService } from '../../../services/bercos/bercos.service';
 import { PageEvent } from '@angular/material/paginator';
 import { throwError } from 'rxjs';
-
+import { MatCardActions } from '@angular/material/card';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../../environments/.env';
 @Component({
   selector: 'app-aceite-edit',
   standalone: true,
@@ -39,7 +41,7 @@ import { throwError } from 'rxjs';
     MatSelectModule,
     MatRadioModule,
     MatIconModule, // Corrigido
-    MatSnackBarModule, NgxCurrencyDirective
+    MatSnackBarModule, NgxCurrencyDirective, MatCardActions
   ],
   templateUrl: './aceite-edit.component.html',
   styleUrl: './aceite-edit.component.scss'
@@ -65,6 +67,8 @@ export class AceiteEditComponent implements OnInit {
     private toastService: ToastrService,
     private _bercoService: BercosService,
     private cdr: ChangeDetectorRef,
+    private httpClient: HttpClient,
+
 
   ) {
     this.empForm = this._fb.group({
@@ -80,7 +84,7 @@ export class AceiteEditComponent implements OnInit {
       mfold_quilha: ['',],
       categoria: [Number(this.data?.categoria) || '', Validators.required],
       flag: ['', Validators.required],
-      obs: ['', Validators.required],
+      obs: [''],
       calado_entrada: ['', Validators.required],
       calado_saida: ['', Validators.required],
       restricoes: ['']
@@ -101,6 +105,29 @@ export class AceiteEditComponent implements OnInit {
   }
 selectedCategoriaNome: string = '';
 
+ downloadNavioFunction() {
+    this.httpClient
+      .get(`${environment.API_URL}/api/download-file`, {
+      params: { filename: this.data.path },
+      responseType: 'blob' // Adiciona 'blob' para lidar com arquivos binários
+    }).subscribe({
+      next: (response) => {
+        // Criação de um URL temporário para o arquivo
+        const blob = new Blob([response]);
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = this.data.path || 'download'; // Define o nome do arquivo
+        link.click();
+
+        // Libera o objeto URL após o download
+        window.URL.revokeObjectURL(link.href);
+        console.log('Download iniciado:', this.data.path);
+      },
+      error: (error) => {
+        console.error('Erro ao baixar o arquivo:', error);
+      }
+    });}
+
   onCategoriaChange(catId: any) {
     const cat = this.categoria.find((c: any) => c.id === catId);
     this.selectedCategoriaNome = cat ? cat.nome : '';

src/app/pages/crud-navios/navio-edit/navio-edit.component.html

@@ -83,14 +83,15 @@
           getErrorMessage("mfold_quilha")
           }}</mat-error>
       </mat-form-field>
-<div class="row">
+      <div class="row">
         <mat-form-field class="field medium" appearance="outline">
           <mat-label>Calado Máximo</mat-label>
-  <input matInput type="text" formControlName="calado_max" [currencyMask]="{ prefix: '', thousands: '.', decimal: ',' }">
+          <input matInput type="text" formControlName="calado_max"
+            [currencyMask]="{ prefix: '', thousands: '.', decimal: ',' }">
           <mat-error *ngIf="empForm.get('calado_max')?.invalid">
             {{ getErrorMessage('calado_max') }}
           </mat-error>
-</mat-form-field>
+        </mat-form-field>
       </div>
       <mat-form-field class="field medium" appearance="outline">
         <mat-label>Categoria</mat-label>
@@ -105,28 +106,14 @@
         <mat-label>Flag</mat-label>
         <mat-select formControlName="flag">
           <mat-select-trigger>
-            <img
-              *ngIf="selectedCountry"
-              [src]="selectedCountry.flagUrl"
-              width="20"
-              height="15"
-              alt="{{ selectedCountry.name }} flag"
-              style="margin-right: 8px"
-            />
+            <img *ngIf="selectedCountry" [src]="selectedCountry.flagUrl" width="20" height="15"
+              alt="{{ selectedCountry.name }} flag" style="margin-right: 8px" />
             {{ selectedCountry?.name }}
           </mat-select-trigger>
-          <mat-option
-            *ngFor="let country of countries"
-            [value]="country.id"
-            (onSelectionChange)="onCountrySelected(country)"
-          >
-            <img
-              [src]="country.flagUrl"
-              width="20"
-              height="15"
-              alt="{{ country.name }} flag"
-              style="margin-right: 8px"
-            />
+          <mat-option *ngFor="let country of countries" [value]="country.id"
+            (onSelectionChange)="onCountrySelected(country)">
+            <img [src]="country.flagUrl" width="20" height="15" alt="{{ country.name }} flag"
+              style="margin-right: 8px" />
             {{ country.name }}
           </mat-option>
         </mat-select>
@@ -144,30 +131,14 @@
           }}</mat-error>
       </mat-form-field>
     </div>
-    <div class="row file-upload-container">
-      <mat-label style="color:cadetblue">Adicione o documente Q88 da embarcação</mat-label>
-      <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload style="display: none" />
-
-      <div class="file-upload-content">
-        <div class="file-info">
-          <span>{{ fileName || "No file uploaded yet." }}</span>
-        </div>
-
-        <div class="upload-button-wrapper">
-          <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()" type="button">
-            <mat-icon>attach_file</mat-icon>
-          </button>
-
-        </div>
-      </div>
-
-      <div class="uploaded-image-container" *ngIf="imageUrl">
-        <img [src]="imageUrl" alt="Uploaded Image" class="uploaded-image" />
-        <button mat-mini-fab color="warn" class="remove-image-btn" (click)="removeImage()">
-          <mat-icon>close</mat-icon>
+    <ng-container *ngIf="data?.path">
+      <mat-card-actions>
+        <button mat-flat-button color="primary" (click)="downloadNavioFunction()">
+          <mat-icon>download</mat-icon>
+          Download Documento Q88
         </button>
-      </div>
-    </div>
+      </mat-card-actions>
+    </ng-container>
   </div>
   <div mat-dialog-actions class="action">
     <button mat-raised-button type="button" color="warn" [mat-dialog-close]="false">

src/app/pages/crud-navios/navio-edit/navio-edit.component.ts

@@ -17,6 +17,10 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { NaviosComponent } from '../navios/navios.component';
 import { ToastrService } from 'ngx-toastr';
 import { NgxCurrencyDirective } from 'ngx-currency';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../../environments/.env';
+import { MatCardModule } from '@angular/material/card';
+
 @Component({
   selector: 'app-navio-edit',
   standalone: true,
@@ -35,6 +39,7 @@ import { NgxCurrencyDirective } from 'ngx-currency';
     MatSnackBarModule,
     NaviosComponent,
     NgxCurrencyDirective,
+    MatCardModule,
   ],
   templateUrl: './navio-edit.component.html',
   styleUrl: './navio-edit.component.scss',
@@ -57,7 +62,9 @@ export class NavioEditComponent implements OnInit {
     private _dialogRef: MatDialogRef<NavioService>,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private _coreService: CoreService,
-    private toastService: ToastrService
+    private toastService: ToastrService,
+    private httpClient: HttpClient ,// Adicione isto
+
   ) {
     this.empForm = this._fb.group({
       imo: [this.data?.imo || '', Validators.required],
@@ -90,6 +97,30 @@ this.empForm.get('categoria')?.valueChanges.subscribe(catId => {
     const cat = this.categoria.find((c: any) => c.id === catId);
     this.selectedCategoriaNome = cat ? cat.nome : '';
   }
+  downloadNavioFunction() {
+      this.httpClient
+        .get(`${environment.API_URL}/api/download-file`, {
+          params: { filename: this.data.path },
+          responseType: 'blob', // Adiciona 'blob' para lidar com arquivos binários
+        })
+        .subscribe({
+          next: (response) => {
+            // Criação de um URL temporário para o arquivo
+            const blob = new Blob([response]);
+            const link = document.createElement('a');
+            link.href = window.URL.createObjectURL(blob);
+            link.download = this.data.path || 'download'; // Define o nome do arquivo
+            link.click();
+
+            // Libera o objeto URL após o download
+            window.URL.revokeObjectURL(link.href);
+            console.log('Download iniciado:', this.data.path);
+          },
+          error: (error) => {
+            console.error('Erro ao baixar o arquivo:', error);
+          },
+        });
+    }
   countries = [
     { id: 1, name: 'Afeganistão', flagUrl: 'https://flagcdn.com/w20/af.png' },
     { id: 2, name: 'África do Sul', flagUrl: 'https://flagcdn.com/w20/za.png' },

src/app/pages/crud-navios/navios/navios.component.html

-<app-add-search
-  [title]="'Navios'"
-  [primaryButtonText]="'Adicionar Navio'"
-  [primaryButtonColor]="'primary'"
-  [primaryButtonAction]="openAddEmpForm.bind(this)"
-  [secondaryButtonText]="'Buscar Navio'"
-  [secondaryButtonColor]="'accent'"
-  [secondaryButtonAction]="openAddEmpFormSearch.bind(this)"
->
+<app-add-search [title]="'Navios'" [primaryButtonText]="'Adicionar Navio'" [primaryButtonColor]="'primary'"
+  [primaryButtonAction]="openAddEmpForm.bind(this)" [secondaryButtonText]="'Buscar Navio'"
+  [secondaryButtonColor]="'accent'" [secondaryButtonAction]="openAddEmpFormSearch.bind(this)">
 </app-add-search>
 
 <div class="main-body">
-  <button mat-raised-button color="primary" style="background-color: #43a047; color: #fff; margin: 12px 0;" (click)="saveDataInCSV('aceites')">
+  <button mat-raised-button color="primary" style="background-color: #43a047; color: #fff; margin: 12px 0;"
+    (click)="saveDataInCSV('aceites')">
     <mat-icon>download</mat-icon>
     Exportar Excel
-</button>
+  </button>
   <div class="table-container" style="overflow-x: auto">
     <table mat-table [dataSource]="dataSource" matSort>
       <!-- ID Column -->
@@ -52,22 +47,21 @@
       <ng-container matColumnDef="flag">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Flag</th>
         <td mat-cell *matCellDef="let row">
-          <ng-container *ngIf="row.flag; else noFlag">
+          <ng-container *ngIf="getCountryById(row.flag) as country; else noFlag">
             <div style="display: inline-flex; align-items: center;">
-              <img
-                [src]="countries[row.flag]?.flagUrl"
-                width="20"
-                height="15"
-                alt="{{ countries[row.flag]?.name }} flag"
-                style="margin-right: 8px"
-              />
-              <span>{{ countries[row.flag]?.name }}</span>
+              <img [src]="country.flagUrl" width="20" height="15" alt="{{ country.name }} flag"
+                style="margin-right: 8px;" />
+              <span>{{ country.name }}</span>
             </div>
           </ng-container>
-          <ng-template #noFlag>Não Informado</ng-template>
+          <ng-template #noFlag>
+            <span>Não informado</span>
+          </ng-template>
         </td>
       </ng-container>
 
+
+
       <!-- Action Column -->
       <ng-container matColumnDef="action">
         <th mat-header-cell *matHeaderCellDef>Action</th>
@@ -81,12 +75,7 @@
           <button mat-icon-button color="warn" (click)="deleteEmployee(row.id)" *ngIf="user.role === 'COMPANY'">
             <mat-icon>delete</mat-icon>
           </button>
-          <button
-            *ngIf="user.role === 'COMPANY'"
-            mat-icon-button
-            color="accent"
-            (click)="addBlackList(row)"
-          >
+          <button *ngIf="user.role === 'COMPANY'" mat-icon-button color="accent" (click)="addBlackList(row)">
             <mat-icon>block</mat-icon>
           </button>
         </td>
@@ -98,28 +87,16 @@
   </div>
 
   <!-- Add paginator reference #paginator="matPaginator" -->
-  <mat-paginator
-    #paginator
-    [length]="totalItems"
-    [pageSize]="pageSize"
-    (page)="loadData($event)"
-  >
+  <mat-paginator #paginator [length]="totalItems" [pageSize]="pageSize" (page)="loadData($event)">
   </mat-paginator>
 
   <!-- Buttons for navigating to the first and last page -->
-  <button
-    mat-button
-    (click)="paginator.firstPage()"
-    [disabled]="paginator.pageIndex === 0"
-  >
+  <button mat-button (click)="paginator.firstPage()" [disabled]="paginator.pageIndex === 0">
     Primeira Página
   </button>
 
-  <button
-    mat-button
-    (click)="paginator.lastPage()"
-    [disabled]="paginator.pageIndex === paginator.getNumberOfPages() - 1"
-  >
+  <button mat-button (click)="paginator.lastPage()"
+    [disabled]="paginator.pageIndex === paginator.getNumberOfPages() - 1">
     Última Página
   </button>
 </div>

src/app/pages/crud-navios/navios/navios.component.ts

@@ -134,6 +134,9 @@ export class NaviosComponent implements OnInit {
     });
   }
 
+
+
+
   loadData(event?: PageEvent): void {
     const pageIndex = event ? event.pageIndex + 1 : this.currentPage - 1;
 
@@ -185,6 +188,25 @@ export class NaviosComponent implements OnInit {
       },
     });
   }
+getCountryById(flag: any) {
+  if (flag == null || flag === '') return null;
+
+  // Converte flag para número
+  const id = parseInt(flag, 10);
+
+  // Se o backend envia id = 26 (Brasil), está tudo certo
+  // Se ele envia índice (0-based), adiciona +1
+  const byId = this.countries.find(c => c.id === id);
+  if (byId) return byId;
+
+  // fallback: tenta índice
+  const idx = id - 1;
+  if (idx >= 0 && idx < this.countries.length) {
+    return this.countries[idx];
+  }
+
+  return null;
+}
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
@@ -676,7 +698,7 @@ export class NaviosComponent implements OnInit {
         console.error(err);
       }
     });
-}
+  }
 
 
 }

src/app/pages/crud-navios/visualizacao-navio/visualizacao-navio.component.html

@@ -50,8 +50,8 @@
       <div class="column" style="flex: 1 1 30%; margin-bottom: 10px;">
         <p><strong>Flag:</strong>
           <ng-container *ngIf="data.flag; else flagNotAvailable">
-            <img [src]="countries[data.flag].flagUrl" width="20" height="15" alt="{{ countries[data.flag].name }} flag" style="margin-right: 8px" />
-            <p>{{ countries[data.flag]?.name }}</p>
+            <img [src]="countries[data.flag- 1].flagUrl" width="20" height="15" alt="{{ countries[data.flag].name }} flag" style="margin-right: 8px" />
+            <p>{{ countries[data.flag - 1 ]?.name }}</p>
           </ng-container>
           <ng-template #flagNotAvailable>Não informado</ng-template>
         </p>