278 lines
15 KiB
HTML
278 lines
15 KiB
HTML
<app-modal-layer
|
|
[open]="detailsOpen || editOpen || deleteOpen || createOpen"
|
|
(close)="closeDetails(); closeEdit(); cancelDelete(); closeCreate()"
|
|
>
|
|
<div *ngIf="detailsOpen" class="modal-card modal-lg" (click)="$event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<div class="modal-title">
|
|
<span class="icon-bg primary-soft"><i class="bi bi-person-vcard"></i></span>
|
|
Detalhes do Usuário
|
|
</div>
|
|
<button class="btn-icon" (click)="closeDetails()"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
<div class="modal-body modern-body bg-light-gray">
|
|
<div class="details-dashboard">
|
|
<div class="detail-box w-100">
|
|
<div class="box-header"><span><i class="bi bi-card-text me-2"></i> Informações</span></div>
|
|
<div class="box-body">
|
|
<div class="form-grid">
|
|
<div class="form-field span-2"><label>CLIENTE</label><div class="fw-bold">{{ selectedRow?.cliente }}</div></div>
|
|
<div class="form-field"><label>TIPO</label><div>{{ (selectedRow?.tipoPessoa || 'PF') === 'PJ' ? 'PESSOA JURÍDICA' : 'PESSOA FÍSICA' }}</div></div>
|
|
<div class="form-field span-2"><label>{{ (selectedRow?.tipoPessoa || 'PF') === 'PJ' ? 'RAZÃO SOCIAL' : 'NOME' }}</label><div>{{ (selectedRow?.tipoPessoa || 'PF') === 'PJ' ? (selectedRow?.razaoSocial || selectedRow?.cliente || '-') : (selectedRow?.nome || selectedRow?.cliente || '-') }}</div></div>
|
|
<div class="form-field"><label>LINHA</label><div class="fw-black text-blue fs-5">{{ selectedRow?.linha }}</div></div>
|
|
<div class="form-field"><label>ITEM</label><div>{{ selectedRow?.item }}</div></div>
|
|
<div class="form-field"><label>{{ (selectedRow?.tipoPessoa || 'PF') === 'PJ' ? 'CNPJ' : 'CPF' }}</label><div>{{ (selectedRow?.tipoPessoa || 'PF') === 'PJ' ? (selectedRow?.cnpj || '-') : (selectedRow?.cpf || '-') }}</div></div>
|
|
<div class="form-field"><label>RG</label><div>{{ selectedRow?.rg || '-' }}</div></div>
|
|
|
|
<div class="form-field span-2"><label>E-MAIL</label><div>{{ selectedRow?.email || '-' }}</div></div>
|
|
|
|
<div class="form-field"><label>CELULAR</label><div>{{ selectedRow?.celular || '-' }}</div></div>
|
|
<div class="form-field"><label>TELEFONE FIXO</label><div>{{ selectedRow?.telefoneFixo || '-' }}</div></div>
|
|
|
|
<div class="form-field span-2"><label>ENDEREÇO</label><div>{{ selectedRow?.endereco || '-' }}</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CREATE MODAL -->
|
|
<div *ngIf="createOpen" class="modal-card modal-xl-custom create-modal" (click)="$event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<div class="modal-title">
|
|
<span class="icon-bg primary-soft"><i class="bi bi-plus-circle"></i></span>
|
|
Novo Usuário
|
|
</div>
|
|
<button class="btn-icon" (click)="closeCreate()"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
<div class="modal-body modern-body bg-light-gray" *ngIf="createModel">
|
|
<div class="edit-sections">
|
|
<details open class="detail-box">
|
|
<summary class="box-header">
|
|
<span><i class="bi bi-link-45deg me-2"></i> Vínculo com Reserva</span>
|
|
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
|
|
</summary>
|
|
<div class="box-body">
|
|
<div class="form-grid">
|
|
<div class="form-field span-2">
|
|
<label>Linha (RESERVA)</label>
|
|
<app-select
|
|
class="form-select"
|
|
size="sm"
|
|
[options]="lineOptionsCreate"
|
|
labelKey="label"
|
|
valueKey="id"
|
|
[searchable]="true"
|
|
searchPlaceholder="Pesquisar linha da reserva..."
|
|
[(ngModel)]="createModel.mobileLineId"
|
|
(ngModelChange)="onCreateLineChange()"
|
|
[disabled]="createLinesLoading"
|
|
placeholder="Selecione uma linha da Reserva..."
|
|
></app-select>
|
|
<small class="field-hint" *ngIf="createLinesLoading">Carregando linhas da Reserva...</small>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Total Franquia Line</label>
|
|
<input class="form-control form-control-sm bg-light" [value]="formatFranquiaLine(createFranquiaLineTotal)" readonly />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details open class="detail-box">
|
|
<summary class="box-header">
|
|
<span><i class="bi bi-person-vcard me-2"></i> Dados do Usuário</span>
|
|
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
|
|
</summary>
|
|
<div class="box-body">
|
|
<div class="form-grid user-modal-grid">
|
|
<div class="form-field span-2"><label>Cliente</label><input class="form-control form-control-sm" [(ngModel)]="createModel.cliente" /></div>
|
|
<div class="form-field field-tipo"><label>Tipo</label>
|
|
<app-select
|
|
class="form-select"
|
|
size="sm"
|
|
[options]="tipoPessoaOptions"
|
|
labelKey="label"
|
|
valueKey="value"
|
|
[(ngModel)]="createModel.tipoPessoa"
|
|
(ngModelChange)="onCreateTipoChange()">
|
|
</app-select>
|
|
</div>
|
|
<div class="form-field span-2" *ngIf="(createModel.tipoPessoa || 'PF') === 'PF'">
|
|
<label>Nome</label>
|
|
<input class="form-control form-control-sm" [(ngModel)]="createModel.nome" />
|
|
</div>
|
|
<div class="form-field span-2" *ngIf="(createModel.tipoPessoa || 'PF') === 'PJ'">
|
|
<label>Razão Social</label>
|
|
<input class="form-control form-control-sm" [(ngModel)]="createModel.razaoSocial" />
|
|
</div>
|
|
<div class="form-field field-line">
|
|
<label>Linha</label>
|
|
<input class="form-control form-control-sm bg-light" [value]="createModel.linha || ''" readonly />
|
|
</div>
|
|
<div class="form-field field-item field-auto">
|
|
<label>Item (Automático)</label>
|
|
<input class="form-control form-control-sm bg-light" type="number" [(ngModel)]="createModel.item" readonly title="Gerado automaticamente pelo sistema" />
|
|
<small class="field-hint">Gerado automaticamente pelo sistema</small>
|
|
</div>
|
|
<div class="form-field field-cpf-cnpj" *ngIf="(createModel.tipoPessoa || 'PF') === 'PF'"><label>CPF</label><input class="form-control form-control-sm" [(ngModel)]="createModel.cpf" /></div>
|
|
<div class="form-field field-cpf-cnpj" *ngIf="(createModel.tipoPessoa || 'PF') === 'PJ'"><label>CNPJ</label><input class="form-control form-control-sm" [(ngModel)]="createModel.cnpj" /></div>
|
|
<div class="form-field field-rg"><label>RG</label><input class="form-control form-control-sm" [(ngModel)]="createModel.rg" /></div>
|
|
<div class="form-field span-2"><label>E-mail</label><input class="form-control form-control-sm" [(ngModel)]="createModel.email" /></div>
|
|
<div class="form-field span-2"><label>Endereço</label><input class="form-control form-control-sm" [(ngModel)]="createModel.endereco" /></div>
|
|
<div class="form-field field-celular"><label>Celular</label><input class="form-control form-control-sm" [(ngModel)]="createModel.celular" /></div>
|
|
<div class="form-field field-telefone"><label>Telefone Fixo</label><input class="form-control form-control-sm" [(ngModel)]="createModel.telefoneFixo" /></div>
|
|
<div class="form-field span-2" *ngIf="(createModel.tipoPessoa || 'PF') === 'PF'"><label>Data de Nascimento</label><input class="form-control form-control-sm" type="date" [(ngModel)]="createDateNascimento" /></div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer p-3 text-end border-top bg-white">
|
|
<button class="btn btn-glass btn-sm me-2" (click)="closeCreate()">Cancelar</button>
|
|
<button class="btn btn-brand btn-sm" [disabled]="createSaving" (click)="saveCreate()">
|
|
{{ createSaving ? 'Salvando...' : 'Salvar' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EDIT MODAL -->
|
|
<div *ngIf="editOpen" class="modal-card modal-xl-custom" (click)="$event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<div class="modal-title">
|
|
<span class="icon-bg primary-soft"><i class="bi bi-pencil-square"></i></span>
|
|
Editar Usuário
|
|
</div>
|
|
<button class="btn-icon" (click)="closeEdit()"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
<div class="modal-body modern-body bg-light-gray" *ngIf="editModel">
|
|
<div class="edit-sections">
|
|
<details open class="detail-box">
|
|
<summary class="box-header">
|
|
<span><i class="bi bi-person-badge me-2"></i> Identificação</span>
|
|
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
|
|
</summary>
|
|
<div class="box-body">
|
|
<div class="form-grid user-modal-grid">
|
|
<div class="form-field span-2"><label>Cliente</label><input class="form-control form-control-sm" [(ngModel)]="editModel.cliente" /></div>
|
|
<div class="form-field field-tipo"><label>Tipo</label>
|
|
<app-select
|
|
class="form-select"
|
|
size="sm"
|
|
[options]="tipoPessoaOptions"
|
|
labelKey="label"
|
|
valueKey="value"
|
|
[(ngModel)]="editModel.tipoPessoa"
|
|
(ngModelChange)="onEditTipoChange()">
|
|
</app-select>
|
|
</div>
|
|
<div class="form-field span-2" *ngIf="(editModel.tipoPessoa || 'PF') === 'PF'">
|
|
<label>Nome</label>
|
|
<input class="form-control form-control-sm" [(ngModel)]="editModel.nome" />
|
|
</div>
|
|
<div class="form-field span-2" *ngIf="(editModel.tipoPessoa || 'PF') === 'PJ'">
|
|
<label>Razão Social</label>
|
|
<input class="form-control form-control-sm" [(ngModel)]="editModel.razaoSocial" />
|
|
</div>
|
|
<div class="form-field field-line">
|
|
<label>Linha (Reserva)</label>
|
|
<app-select
|
|
class="form-select"
|
|
size="sm"
|
|
[options]="editLineOptions"
|
|
labelKey="label"
|
|
valueKey="id"
|
|
[searchable]="true"
|
|
searchPlaceholder="Pesquisar linha da reserva..."
|
|
[(ngModel)]="editSelectedLineId"
|
|
(ngModelChange)="onEditLineChange()"
|
|
[disabled]="createLinesLoading"
|
|
placeholder="Selecione uma linha da Reserva..."
|
|
></app-select>
|
|
</div>
|
|
<div class="form-field field-auto">
|
|
<label>Total Franquia Line</label>
|
|
<input class="form-control form-control-sm bg-light" [value]="formatFranquiaLine(editFranquiaLineTotal)" readonly />
|
|
</div>
|
|
<div class="form-field field-item field-auto">
|
|
<label>Item (Automático)</label>
|
|
<input class="form-control form-control-sm bg-light" type="number" [(ngModel)]="editModel.item" readonly title="Gerado automaticamente pelo sistema" />
|
|
<small class="field-hint">Gerado automaticamente pelo sistema</small>
|
|
</div>
|
|
<div class="form-field field-cpf-cnpj" *ngIf="(editModel.tipoPessoa || 'PF') === 'PF'">
|
|
<label>CPF</label>
|
|
<input class="form-control form-control-sm" [(ngModel)]="editModel.cpf" />
|
|
</div>
|
|
<div class="form-field field-cpf-cnpj" *ngIf="(editModel.tipoPessoa || 'PF') === 'PJ'">
|
|
<label>CNPJ</label>
|
|
<input class="form-control form-control-sm" [(ngModel)]="editModel.cnpj" />
|
|
</div>
|
|
<div class="form-field field-rg"><label>RG</label><input class="form-control form-control-sm" [(ngModel)]="editModel.rg" /></div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details open class="detail-box">
|
|
<summary class="box-header">
|
|
<span><i class="bi bi-envelope-paper me-2"></i> Contato</span>
|
|
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
|
|
</summary>
|
|
<div class="box-body">
|
|
<div class="form-grid user-modal-grid contact-modal-grid">
|
|
<div class="form-field span-2"><label>E-mail</label><input class="form-control form-control-sm" type="email" [(ngModel)]="editModel.email" /></div>
|
|
<div class="form-field field-celular"><label>Celular</label><input class="form-control form-control-sm" [(ngModel)]="editModel.celular" /></div>
|
|
<div class="form-field field-telefone"><label>Telefone Fixo</label><input class="form-control form-control-sm" [(ngModel)]="editModel.telefoneFixo" /></div>
|
|
<div class="form-field span-2"><label>Endereço</label><input class="form-control form-control-sm" [(ngModel)]="editModel.endereco" /></div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details open class="detail-box">
|
|
<summary class="box-header">
|
|
<span><i class="bi bi-calendar-event me-2"></i> Complemento</span>
|
|
<i class="bi bi-chevron-down ms-auto transition-icon"></i>
|
|
</summary>
|
|
<div class="box-body">
|
|
<div class="form-grid">
|
|
<div class="form-field" *ngIf="(editModel.tipoPessoa || 'PF') === 'PF'">
|
|
<label>Data Nascimento</label>
|
|
<input class="form-control form-control-sm" type="date" [(ngModel)]="editDateNascimento" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer p-3 text-end border-top bg-white">
|
|
<button class="btn btn-glass btn-sm me-2" (click)="closeEdit()">Cancelar</button>
|
|
<button class="btn btn-primary btn-sm" [disabled]="editSaving" (click)="saveEdit()">
|
|
{{ editSaving ? 'Salvando...' : 'Salvar' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DELETE MODAL -->
|
|
<div *ngIf="deleteOpen" class="modal-card modal-lg" (click)="$event.stopPropagation()">
|
|
<div class="modal-header">
|
|
<div class="modal-title">
|
|
<span class="icon-bg danger-soft"><i class="bi bi-trash"></i></span>
|
|
Remover Usuário
|
|
</div>
|
|
<button class="btn-icon" (click)="cancelDelete()"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
<div class="modal-body modern-body bg-light-gray">
|
|
<div class="confirm-delete">
|
|
<div class="confirm-icon"><i class="bi bi-trash"></i></div>
|
|
<p class="mb-0">Confirma remover o registro <strong>{{ deleteTarget?.linha }}</strong>?</p>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer p-3 text-end border-top bg-white">
|
|
<button class="btn btn-glass btn-sm me-2" (click)="cancelDelete()">Cancelar</button>
|
|
<button class="btn btn-danger btn-sm" (click)="confirmDelete()">Excluir</button>
|
|
</div>
|
|
</div>
|
|
</app-modal-layer>
|
|
|