Skip to content

A
aceite-tecnico-frontend
Commit abd4d7d1 authored by RenanMontenegro3's avatar RenanMontenegro3
Browse files
Options

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

parent b31d0e30
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 193 deletions
src/app/pages/crud-aceites/aceite-add/aceite-add.component.html
View file @ abd4d7d1
......@@ -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
View file @ abd4d7d1
......@@ -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
View file @ abd4d7d1
......@@ -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
View file @ abd4d7d1
......@@ -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
View file @ abd4d7d1
......@@ -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
View file @ abd4d7d1
<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
View file @ abd4d7d1
......@@ -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
View file @ abd4d7d1
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment