125 lines
4.9 KiB
HTML
125 lines
4.9 KiB
HTML
<div class="assigned-route-container">
|
|
<div class="header-actions">
|
|
<input
|
|
pInputText
|
|
type="text"
|
|
placeholder="Buscar..."
|
|
(input)="dt.filterGlobal($any($event.target).value, 'contains')"
|
|
/>
|
|
<div class="actions-right">
|
|
<button type="button" class="btn-secondary" (click)="goToOverviewMap()" pTooltip="Ver mapa filtrado por usuario" tooltipPosition="top">
|
|
<i class="pi pi-map"></i> Ver mapa
|
|
</button>
|
|
<button type="button" class="btn-secondary" (click)="downloadCSV()">
|
|
<i class="pi pi-download"></i> Descargar CSV
|
|
</button>
|
|
<button type="button" class="btn-secondary" (click)="reoptimizeLocally()" [disabled]="!canReoptimize" title="Vuelve a ejecutar el optimizador con los archivos cargados">
|
|
<span *ngIf="reoptLoading" class="spinner-inline"></span>
|
|
<i *ngIf="!reoptLoading" class="pi pi-sync"></i> {{ reoptLoading ? 'Reoptimizando...' : 'Reoptimizar rutas' }}
|
|
</button>
|
|
<button type="button" class="btn-secondary" *ngIf="hasLocalChanges" (click)="restoreOriginal()">
|
|
<i class="pi pi-undo"></i> Deshacer cambios
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-secondary"
|
|
(click)="toggleRutas()"
|
|
pTooltip="Mostrar u ocultar el detalle de rutas"
|
|
tooltipPosition="top"
|
|
>
|
|
<i [class]="rutasExpandido ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"></i>
|
|
{{ rutasExpandido ? 'Ocultar rutas' : 'Ver rutas' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-error" *ngIf="reoptError"><i class="pi pi-exclamation-triangle"></i> {{ reoptError }}</div>
|
|
<div class="table-error" *ngIf="editError"><i class="pi pi-exclamation-triangle"></i> {{ editError }}</div>
|
|
|
|
<p-table
|
|
#dt
|
|
[value]="assignedRoutes"
|
|
[loading]="isLoading"
|
|
[paginator]="true"
|
|
[rows]="10"
|
|
size="small"
|
|
[columns]="cols"
|
|
[rowsPerPageOptions]="[10, 25, 50]"
|
|
styleClass="p-datatable-sm text-sm"
|
|
>
|
|
<ng-template pTemplate="caption">
|
|
<div class="table-caption">
|
|
<span class="font-bold">Rutas asignadas</span>
|
|
<span class="count">{{ assignedRoutes.length }} registros</span>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="header">
|
|
<tr>
|
|
<th *ngFor="let col of cols" pSortableColumn="{{ col.field }}">
|
|
{{ col.header }}
|
|
<p-sortIcon [field]="col.field"></p-sortIcon>
|
|
<p-columnFilter
|
|
[field]="col.field"
|
|
display="menu"
|
|
matchMode="contains"
|
|
[showMatchModes]="false"
|
|
[showOperator]="false"
|
|
[showAddButton]="false"
|
|
></p-columnFilter>
|
|
</th>
|
|
</tr>
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="body" let-row>
|
|
<tr>
|
|
<td>
|
|
<ng-container *ngIf="editingRoute === row; else userValue">
|
|
<select class="inline-edit" [(ngModel)]="editUserId">
|
|
<option *ngFor="let user of userOptions" [value]="user.id">{{ user.name }}</option>
|
|
</select>
|
|
</ng-container>
|
|
<ng-template #userValue><a class="link-usuario" (click)="goToUserMap(row.json.usuario_id)" pTooltip="Ver todas las rutas de este usuario" tooltipPosition="top">{{ row.json.nombre_usuario }}</a></ng-template>
|
|
</td>
|
|
<td>{{ row.json.nombre_pdv }}</td>
|
|
<td>{{ row.json.hora_laboral_semanal_usuario }}</td>
|
|
<td>{{ row.json.hora_minima_semanal_pdv }}</td>
|
|
<td>{{ row.json.horas_trabajo }}</td>
|
|
<td>
|
|
<ng-container *ngIf="editingRoute === row; else dayValue">
|
|
<select class="inline-edit" [(ngModel)]="editDay">
|
|
<option *ngFor="let day of dayOptions" [value]="day">{{ day }}</option>
|
|
</select>
|
|
</ng-container>
|
|
<ng-template #dayValue>{{ row.json.dia }}</ng-template>
|
|
</td>
|
|
<td>{{ row.json.distancia }}</td>
|
|
<td>{{ row.json.horas_desplazamiento }}</td>
|
|
<td class="text-center edit-actions">
|
|
<ng-container *ngIf="editingRoute === row; else editButton">
|
|
<button type="button" class="btn-icon" (click)="saveEdit()" title="Guardar"><i class="pi pi-check"></i></button>
|
|
<button type="button" class="btn-icon" (click)="cancelEdit()" title="Cancelar"><i class="pi pi-times"></i></button>
|
|
</ng-container>
|
|
<ng-template #editButton>
|
|
<button type="button" class="btn-icon" (click)="startEdit(row)" title="Editar asignación"><i class="pi pi-pencil"></i></button>
|
|
</ng-template>
|
|
<button
|
|
type="button"
|
|
class="btn-icon"
|
|
(click)="onShowMap(row)"
|
|
pTooltip="Ver en mapa (1 ruta)"
|
|
tooltipPosition="top"
|
|
>
|
|
<i class="pi pi-map-marker"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="emptymessage">
|
|
<tr>
|
|
<td colspan="9" class="text-center">No hay rutas asignadas</td>
|
|
</tr>
|
|
</ng-template>
|
|
</p-table>
|
|
</div>
|