603 lines
17 KiB
TypeScript
603 lines
17 KiB
TypeScript
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { HttpErrorResponse } from '@angular/common/http';
|
|
import { CustomSelectComponent } from '../../components/custom-select/custom-select';
|
|
|
|
import {
|
|
DadosUsuariosService,
|
|
UserDataClientGroup,
|
|
UserDataRow,
|
|
UserDataGroupResponse,
|
|
PagedResult,
|
|
UpdateUserDataRequest,
|
|
CreateUserDataRequest
|
|
} from '../../services/dados-usuarios.service';
|
|
import { AuthService } from '../../services/auth.service';
|
|
import { LinesService, MobileLineDetail } from '../../services/lines.service';
|
|
import { confirmDeletionWithTyping } from '../../utils/destructive-confirmation';
|
|
|
|
type ViewMode = 'lines' | 'groups';
|
|
|
|
interface LineOptionDto {
|
|
id: string;
|
|
item: number;
|
|
linha: string | null;
|
|
usuario: string | null;
|
|
label?: string;
|
|
}
|
|
|
|
interface SimpleOption {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-dados-usuarios',
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule, CustomSelectComponent],
|
|
templateUrl: './dados-usuarios.html',
|
|
styleUrls: ['./dados-usuarios.scss']
|
|
})
|
|
export class DadosUsuarios implements OnInit {
|
|
|
|
@ViewChild('successToast', { static: false }) successToast!: ElementRef;
|
|
|
|
loading = false;
|
|
errorMsg = '';
|
|
|
|
// Filtros
|
|
search = '';
|
|
tipoFilter: 'PF' | 'PJ' = 'PF';
|
|
|
|
// Paginação
|
|
page = 1;
|
|
pageSize = 10;
|
|
pageSizeOptions = [10, 20, 50, 100];
|
|
total = 0;
|
|
|
|
// Ordenação
|
|
sortBy = 'cliente';
|
|
sortDir: 'asc' | 'desc' = 'asc';
|
|
|
|
// PADRÃO: GROUPS (Acordeão)
|
|
viewMode: ViewMode = 'groups';
|
|
|
|
// Dados
|
|
groups: UserDataClientGroup[] = [];
|
|
rows: UserDataRow[] = [];
|
|
|
|
// KPIs
|
|
kpiTotalRegistros = 0;
|
|
kpiClientesUnicos = 0;
|
|
kpiComCpf = 0;
|
|
kpiComCnpj = 0;
|
|
kpiComEmail = 0;
|
|
|
|
// ACORDEÃO
|
|
expandedGroup: string | null = null;
|
|
expandedLoading = false;
|
|
groupRows: UserDataRow[] = [];
|
|
|
|
// Modal / Toast
|
|
detailsOpen = false;
|
|
selectedRow: UserDataRow | null = null;
|
|
editOpen = false;
|
|
editSaving = false;
|
|
editModel: UserDataRow | null = null;
|
|
editDateNascimento = '';
|
|
editingId: string | null = null;
|
|
deleteOpen = false;
|
|
deleteTarget: UserDataRow | null = null;
|
|
|
|
createOpen = false;
|
|
createSaving = false;
|
|
createModel: any = null;
|
|
createDateNascimento = '';
|
|
clientsFromGeral: string[] = [];
|
|
lineOptionsCreate: LineOptionDto[] = [];
|
|
readonly tipoPessoaOptions: SimpleOption[] = [
|
|
{ label: 'Pessoa Física', value: 'PF' },
|
|
{ label: 'Pessoa Jurídica', value: 'PJ' },
|
|
];
|
|
createClientsLoading = false;
|
|
createLinesLoading = false;
|
|
|
|
isAdmin = false;
|
|
toastOpen = false;
|
|
toastMessage = '';
|
|
toastType: 'success' | 'danger' = 'success';
|
|
private toastTimer: any = null;
|
|
private searchTimer: any = null;
|
|
|
|
constructor(
|
|
private service: DadosUsuariosService,
|
|
private authService: AuthService,
|
|
private linesService: LinesService
|
|
) {}
|
|
|
|
ngOnInit(): void {
|
|
this.isAdmin = this.authService.hasRole('sysadmin');
|
|
this.fetch(1);
|
|
}
|
|
|
|
// Alternar Visualização
|
|
setView(mode: ViewMode): void {
|
|
if (this.viewMode === mode) return;
|
|
this.viewMode = mode;
|
|
this.page = 1;
|
|
this.expandedGroup = null;
|
|
this.groupRows = [];
|
|
this.sortBy = mode === 'groups' ? 'cliente' : 'item';
|
|
this.fetch(1);
|
|
}
|
|
|
|
get totalPages(): number {
|
|
return Math.max(1, Math.ceil((this.total || 0) / (this.pageSize || 10)));
|
|
}
|
|
|
|
get pageStart(): number { return (this.page - 1) * this.pageSize + 1; }
|
|
|
|
get pageEnd(): number {
|
|
const end = this.page * this.pageSize;
|
|
return end > this.total ? this.total : end;
|
|
}
|
|
|
|
get pageNumbers(): number[] {
|
|
const total = this.totalPages;
|
|
const current = this.page;
|
|
const max = 5;
|
|
let start = Math.max(1, current - 2);
|
|
let end = Math.min(total, start + (max - 1));
|
|
start = Math.max(1, end - (max - 1));
|
|
const pages: number[] = [];
|
|
for (let i = start; i <= end; i++) pages.push(i);
|
|
return pages;
|
|
}
|
|
|
|
fetch(goToPage?: number): void {
|
|
if (goToPage) this.page = goToPage;
|
|
this.loading = true;
|
|
|
|
if(goToPage && goToPage !== this.page) this.expandedGroup = null;
|
|
|
|
if (this.viewMode === 'groups') {
|
|
this.fetchGroups();
|
|
} else {
|
|
this.fetchLines(); // Fallback se quiser usar
|
|
}
|
|
}
|
|
|
|
refresh() {
|
|
this.fetch(1);
|
|
}
|
|
|
|
private fetchGroups() {
|
|
this.service.getGroups({
|
|
search: this.search?.trim(),
|
|
tipo: this.tipoFilter,
|
|
page: this.page,
|
|
pageSize: this.pageSize,
|
|
sortBy: this.sortBy,
|
|
sortDir: this.sortDir,
|
|
}).subscribe({
|
|
next: (res: UserDataGroupResponse) => {
|
|
this.groups = res.data.items || [];
|
|
this.total = res.data.total || 0;
|
|
|
|
this.kpiTotalRegistros = res.kpis.totalRegistros;
|
|
this.kpiClientesUnicos = res.kpis.clientesUnicos;
|
|
this.kpiComCpf = res.kpis.comCpf;
|
|
this.kpiComCnpj = res.kpis.comCnpj;
|
|
this.kpiComEmail = res.kpis.comEmail;
|
|
|
|
this.loading = false;
|
|
},
|
|
error: (err: HttpErrorResponse) => {
|
|
this.loading = false;
|
|
this.showToast('Erro ao carregar dados.', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
private fetchLines() {
|
|
// Implementação opcional para modo lista plana
|
|
}
|
|
|
|
toggleGroup(g: UserDataClientGroup): void {
|
|
if (this.expandedGroup === g.cliente) {
|
|
this.expandedGroup = null;
|
|
this.groupRows = [];
|
|
return;
|
|
}
|
|
|
|
this.expandedGroup = g.cliente;
|
|
this.expandedLoading = true;
|
|
this.groupRows = [];
|
|
|
|
this.service.getRows({
|
|
client: g.cliente,
|
|
tipo: this.tipoFilter,
|
|
page: 1,
|
|
pageSize: 200,
|
|
sortBy: 'item',
|
|
sortDir: 'asc'
|
|
}).subscribe({
|
|
next: (res: PagedResult<UserDataRow>) => {
|
|
this.groupRows = res.items || [];
|
|
this.expandedLoading = false;
|
|
},
|
|
error: (err: HttpErrorResponse) => {
|
|
this.showToast('Erro ao carregar usuários do cliente.', 'danger');
|
|
this.expandedLoading = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
onSearch() {
|
|
if (this.searchTimer) clearTimeout(this.searchTimer);
|
|
this.searchTimer = setTimeout(() => {
|
|
this.page = 1;
|
|
this.expandedGroup = null;
|
|
this.fetch();
|
|
}, 400);
|
|
}
|
|
|
|
setTipoFilter(tipo: 'PF' | 'PJ') {
|
|
if (this.tipoFilter === tipo) return;
|
|
this.tipoFilter = tipo;
|
|
this.page = 1;
|
|
this.expandedGroup = null;
|
|
this.groupRows = [];
|
|
this.fetch();
|
|
}
|
|
|
|
clearFilters() { this.search = ''; this.fetch(1); }
|
|
|
|
onPageSizeChange() {
|
|
this.page = 1;
|
|
this.fetch();
|
|
}
|
|
|
|
goToPage(p: number) {
|
|
this.page = p;
|
|
this.fetch();
|
|
}
|
|
|
|
openDetails(row: UserDataRow) {
|
|
this.service.getById(row.id).subscribe({
|
|
next: (fullData: UserDataRow) => {
|
|
const tipo = this.normalizeTipo(fullData);
|
|
this.selectedRow = {
|
|
...fullData,
|
|
tipoPessoa: tipo,
|
|
nome: fullData.nome || (tipo === 'PF' ? fullData.cliente : ''),
|
|
razaoSocial: fullData.razaoSocial || (tipo === 'PJ' ? fullData.cliente : '')
|
|
};
|
|
this.detailsOpen = true;
|
|
},
|
|
error: (err: HttpErrorResponse) => this.showToast('Erro ao abrir detalhes', 'danger')
|
|
});
|
|
}
|
|
|
|
closeDetails() { this.detailsOpen = false; }
|
|
|
|
openEdit(row: UserDataRow) {
|
|
if (!this.isAdmin) return;
|
|
this.service.getById(row.id).subscribe({
|
|
next: (fullData: UserDataRow) => {
|
|
this.editingId = fullData.id;
|
|
const tipo = this.normalizeTipo(fullData);
|
|
this.editModel = {
|
|
...fullData,
|
|
tipoPessoa: tipo,
|
|
nome: fullData.nome || (tipo === 'PF' ? fullData.cliente : ''),
|
|
razaoSocial: fullData.razaoSocial || (tipo === 'PJ' ? fullData.cliente : '')
|
|
};
|
|
this.editDateNascimento = this.toDateInput(fullData.dataNascimento);
|
|
this.editOpen = true;
|
|
},
|
|
error: () => this.showToast('Erro ao abrir edição', 'danger')
|
|
});
|
|
}
|
|
|
|
closeEdit() {
|
|
this.editOpen = false;
|
|
this.editSaving = false;
|
|
this.editModel = null;
|
|
this.editDateNascimento = '';
|
|
this.editingId = null;
|
|
}
|
|
|
|
onEditTipoChange() {
|
|
if (!this.editModel) return;
|
|
const tipo = (this.editModel.tipoPessoa ?? 'PF').toString().toUpperCase();
|
|
this.editModel.tipoPessoa = tipo;
|
|
if (tipo === 'PJ') {
|
|
this.editModel.cpf = '';
|
|
if (!this.editModel.razaoSocial) this.editModel.razaoSocial = this.editModel.cliente;
|
|
} else {
|
|
this.editModel.cnpj = '';
|
|
if (!this.editModel.nome) this.editModel.nome = this.editModel.cliente;
|
|
}
|
|
}
|
|
|
|
saveEdit() {
|
|
if (!this.editModel || !this.editingId) return;
|
|
this.editSaving = true;
|
|
|
|
const tipo = (this.editModel.tipoPessoa ?? this.tipoFilter).toString().toUpperCase();
|
|
const cliente = tipo === 'PJ'
|
|
? (this.editModel.razaoSocial || this.editModel.cliente)
|
|
: (this.editModel.nome || this.editModel.cliente);
|
|
|
|
const payload: UpdateUserDataRequest = {
|
|
item: this.toNullableNumber(this.editModel.item),
|
|
linha: this.editModel.linha,
|
|
cliente,
|
|
tipoPessoa: tipo,
|
|
nome: this.editModel.nome,
|
|
razaoSocial: this.editModel.razaoSocial,
|
|
cnpj: this.editModel.cnpj,
|
|
cpf: this.editModel.cpf,
|
|
rg: this.editModel.rg,
|
|
email: this.editModel.email,
|
|
endereco: this.editModel.endereco,
|
|
celular: this.editModel.celular,
|
|
telefoneFixo: this.editModel.telefoneFixo,
|
|
dataNascimento: this.dateInputToIso(this.editDateNascimento)
|
|
};
|
|
|
|
this.service.update(this.editingId, payload).subscribe({
|
|
next: () => {
|
|
this.editSaving = false;
|
|
this.closeEdit();
|
|
this.fetch();
|
|
this.showToast('Registro atualizado!', 'success');
|
|
},
|
|
error: () => {
|
|
this.editSaving = false;
|
|
this.showToast('Erro ao salvar alterações.', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
// ==========================
|
|
// CREATE
|
|
// ==========================
|
|
openCreate() {
|
|
if (!this.isAdmin) return;
|
|
this.resetCreateModel();
|
|
this.createOpen = true;
|
|
this.preloadGeralClients();
|
|
}
|
|
|
|
closeCreate() {
|
|
this.createOpen = false;
|
|
this.createSaving = false;
|
|
this.createModel = null;
|
|
}
|
|
|
|
private resetCreateModel() {
|
|
this.createModel = {
|
|
selectedClient: '',
|
|
mobileLineId: '',
|
|
item: '',
|
|
linha: '',
|
|
cliente: '',
|
|
tipoPessoa: this.tipoFilter,
|
|
nome: '',
|
|
razaoSocial: '',
|
|
cnpj: '',
|
|
cpf: '',
|
|
rg: '',
|
|
email: '',
|
|
endereco: '',
|
|
celular: '',
|
|
telefoneFixo: ''
|
|
};
|
|
this.createDateNascimento = '';
|
|
this.lineOptionsCreate = [];
|
|
this.createLinesLoading = false;
|
|
this.createClientsLoading = false;
|
|
}
|
|
|
|
private preloadGeralClients() {
|
|
this.createClientsLoading = true;
|
|
this.linesService.getClients().subscribe({
|
|
next: (list) => {
|
|
this.clientsFromGeral = list ?? [];
|
|
this.createClientsLoading = false;
|
|
},
|
|
error: () => {
|
|
this.clientsFromGeral = [];
|
|
this.createClientsLoading = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
onCreateClientChange() {
|
|
const c = (this.createModel?.selectedClient ?? '').trim();
|
|
this.createModel.mobileLineId = '';
|
|
this.createModel.linha = '';
|
|
this.createModel.cliente = c;
|
|
this.lineOptionsCreate = [];
|
|
|
|
if (c) this.loadLinesForClient(c);
|
|
}
|
|
|
|
onCreateTipoChange() {
|
|
const tipo = (this.createModel?.tipoPessoa ?? 'PF').toString().toUpperCase();
|
|
this.createModel.tipoPessoa = tipo;
|
|
if (tipo === 'PJ') {
|
|
this.createModel.cpf = '';
|
|
if (!this.createModel.razaoSocial) this.createModel.razaoSocial = this.createModel.cliente;
|
|
} else {
|
|
this.createModel.cnpj = '';
|
|
if (!this.createModel.nome) this.createModel.nome = this.createModel.cliente;
|
|
}
|
|
}
|
|
|
|
private loadLinesForClient(cliente: string) {
|
|
const c = (cliente ?? '').trim();
|
|
if (!c) return;
|
|
|
|
this.createLinesLoading = true;
|
|
this.linesService.getLinesByClient(c).subscribe({
|
|
next: (items: any[]) => {
|
|
const mapped: LineOptionDto[] = (items ?? [])
|
|
.filter(x => !!String(x?.id ?? '').trim())
|
|
.map(x => ({
|
|
id: String(x.id),
|
|
item: Number(x.item ?? 0),
|
|
linha: x.linha ?? null,
|
|
usuario: x.usuario ?? null,
|
|
label: `${x.item ?? ''} • ${x.linha ?? '-'} • ${x.usuario ?? 'SEM USUÁRIO'}`
|
|
}))
|
|
.filter(x => !!String(x.linha ?? '').trim());
|
|
|
|
this.lineOptionsCreate = mapped;
|
|
this.createLinesLoading = false;
|
|
},
|
|
error: () => {
|
|
this.lineOptionsCreate = [];
|
|
this.createLinesLoading = false;
|
|
this.showToast('Erro ao carregar linhas da GERAL.', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
onCreateLineChange() {
|
|
const id = String(this.createModel?.mobileLineId ?? '').trim();
|
|
if (!id) return;
|
|
|
|
this.linesService.getById(id).subscribe({
|
|
next: (d: MobileLineDetail) => this.applyLineDetailToCreate(d),
|
|
error: () => this.showToast('Erro ao carregar dados da linha.', 'danger')
|
|
});
|
|
}
|
|
|
|
private applyLineDetailToCreate(d: MobileLineDetail) {
|
|
this.createModel.linha = d.linha ?? '';
|
|
this.createModel.cliente = d.cliente ?? this.createModel.cliente ?? '';
|
|
if (!String(this.createModel.item ?? '').trim() && d.item) {
|
|
this.createModel.item = String(d.item);
|
|
}
|
|
|
|
if ((this.createModel.tipoPessoa ?? '').toUpperCase() === 'PJ') {
|
|
if (!this.createModel.razaoSocial) this.createModel.razaoSocial = this.createModel.cliente;
|
|
} else {
|
|
if (!this.createModel.nome) this.createModel.nome = this.createModel.cliente;
|
|
}
|
|
}
|
|
|
|
saveCreate() {
|
|
if (!this.createModel) return;
|
|
this.createSaving = true;
|
|
|
|
const tipo = (this.createModel.tipoPessoa ?? this.tipoFilter).toString().toUpperCase();
|
|
const cliente = tipo === 'PJ'
|
|
? (this.createModel.razaoSocial || this.createModel.cliente)
|
|
: (this.createModel.nome || this.createModel.cliente);
|
|
|
|
const payload: CreateUserDataRequest = {
|
|
item: this.toNullableNumber(this.createModel.item),
|
|
linha: this.createModel.linha,
|
|
cliente,
|
|
tipoPessoa: tipo,
|
|
nome: this.createModel.nome,
|
|
razaoSocial: this.createModel.razaoSocial,
|
|
cnpj: this.createModel.cnpj,
|
|
cpf: this.createModel.cpf,
|
|
rg: this.createModel.rg,
|
|
email: this.createModel.email,
|
|
endereco: this.createModel.endereco,
|
|
celular: this.createModel.celular,
|
|
telefoneFixo: this.createModel.telefoneFixo,
|
|
dataNascimento: this.dateInputToIso(this.createDateNascimento)
|
|
};
|
|
|
|
this.service.create(payload).subscribe({
|
|
next: () => {
|
|
this.createSaving = false;
|
|
this.closeCreate();
|
|
this.fetch();
|
|
this.showToast('Usuário criado com sucesso!', 'success');
|
|
},
|
|
error: () => {
|
|
this.createSaving = false;
|
|
this.showToast('Erro ao criar usuário.', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
openDelete(row: UserDataRow) {
|
|
if (!this.isAdmin) return;
|
|
this.deleteTarget = row;
|
|
this.deleteOpen = true;
|
|
}
|
|
|
|
cancelDelete() {
|
|
this.deleteOpen = false;
|
|
this.deleteTarget = null;
|
|
}
|
|
|
|
async confirmDelete() {
|
|
if (!this.deleteTarget) return;
|
|
if (!(await confirmDeletionWithTyping('este registro de dados do usuário'))) return;
|
|
const id = this.deleteTarget.id;
|
|
this.service.remove(id).subscribe({
|
|
next: () => {
|
|
this.deleteOpen = false;
|
|
this.deleteTarget = null;
|
|
this.fetch();
|
|
this.showToast('Registro removido.', 'success');
|
|
},
|
|
error: () => {
|
|
this.deleteOpen = false;
|
|
this.deleteTarget = null;
|
|
this.showToast('Erro ao remover.', 'danger');
|
|
}
|
|
});
|
|
}
|
|
|
|
trackById(_: number, row: UserDataRow) { return row.id; }
|
|
trackByCliente(_: number, g: UserDataClientGroup) { return g.cliente; }
|
|
|
|
private toDateInput(value: string | null): string {
|
|
if (!value) return '';
|
|
const d = new Date(value);
|
|
if (isNaN(d.getTime())) return '';
|
|
return d.toISOString().slice(0, 10);
|
|
}
|
|
|
|
private dateInputToIso(value: string): string | null {
|
|
if (!value) return null;
|
|
const d = new Date(`${value}T00:00:00`);
|
|
if (isNaN(d.getTime())) return null;
|
|
return d.toISOString();
|
|
}
|
|
|
|
private toNullableNumber(value: any): number | null {
|
|
if (value === undefined || value === null || value === '') return null;
|
|
const n = Number(value);
|
|
return Number.isNaN(n) ? null : n;
|
|
}
|
|
|
|
private normalizeTipo(row: UserDataRow | null | undefined): 'PF' | 'PJ' {
|
|
const t = (row?.tipoPessoa ?? '').toString().trim().toUpperCase();
|
|
if (t === 'PJ') return 'PJ';
|
|
if (t === 'PF') return 'PF';
|
|
if (row?.cnpj) return 'PJ';
|
|
return 'PF';
|
|
}
|
|
|
|
showToast(msg: string, type: 'success' | 'danger') {
|
|
this.toastMessage = msg; this.toastType = type; this.toastOpen = true;
|
|
if(this.toastTimer) clearTimeout(this.toastTimer);
|
|
this.toastTimer = setTimeout(() => this.toastOpen = false, 3000);
|
|
}
|
|
|
|
hideToast() { this.toastOpen = false; }
|
|
}
|