Tengo un problema, MatSort
no funciona en mi MatTable
, he intentando cambiar varias cosas (como por ejemplo traer primero la data del getMainList
), pero ninguna me resulta, espero puedan apoyarme.
Dejo el código:
HTML:
<m-portlet [options]="{headLarge: true}">
<ng-container mPortletHeadTitle>
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text"> Lista de Documentos de Medida </h3>
</div>
</ng-container>
<ng-container mPortletHeadTools>
<button type="button" mat-raised-button style="background-color: #FF8D00; color: white" matTooltip="Nuevo" (click)="AddEditMedicionVehiculo(0)">
<fa name="plus-circle" inverse='true'></fa> Nuevo Punto
</button>
</ng-container>
<ng-container mPortletBody>
<div class="m-form">
<div class="m-form__filtration">
<div class="row">
<div class="col-md-12">
<form [formGroup]="formBusqueda">
<div class="row">
<!-- <div class="col-sm-2 m--margin-bottom-10-mobile">
<mat-form-field class="mat-form-field-fluid">
<mat-select formControlName="Equipo" placeholder="Vehiculo">
<mat-option *ngFor="let item of Equipos" [value]="item.Id"> {{item.Placa}} </mat-option>
</mat-select>
</mat-form-field>
</div> -->
<div class="col-sm-2 m--margin-bottom-10-mobile">
<mat-form-field class="mat-form-field-fluid">
<mat-select formControlName="Equipo" placeholder="Vehiculo" matInput>
<mat-option>
<ngx-mat-select-search [formControl]="filterEquipos" [placeholderLabel]="'Buscar...'" [noEntriesFoundLabel]="'No se encontró resultado'"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let item of filtered_Equipos | async" [value]="item.Id">
{{item.Placa}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-sm-3 m--margin-bottom-10-mobile">
<mat-form-field class="mat-form-field-fluid">
<mat-select formControlName="TipoPunto" placeholder="TipoPunto">
<mat-option *ngFor="let item of TipoPuntos" [value]="item.Valor"> {{item.Nombre}} </mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-sm-3 m--margin-bottom-10-mobile">
<mat-form-field class="mat-form-field-fluid">
<mat-select formControlName="UnidadMedida" placeholder="UnidadMedida">
<mat-option *ngFor="let item of UnidadesMedida" [value]="item.UnidadMedida"> {{item.Nombre}} </mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-sm-1 m--margin-bottom-10-mobile">
<button type="button" mat-mini-fab color="bg-green" (click)="getMainList()" matTooltip="Buscar">
<fa name="search" inverse='true'></fa>
</button>
</div>
<!-- <div class="col-sm-3">
<mat-form-field class="col-md-12 search-form-field">
<input matInput [(ngModel)]="searchKey" placeholder="Buscar en todos los campos" autocomplete="off"
class="mat-form-field mat-form-field-fluid" (keyup)="searchInsideTable()">
<mat-hint align="start">
<strong>Buscar en todos los campos</strong>
</mat-hint>
</mat-form-field>
</div> -->
<div class="col-sm-3">
<mat-form-field class="mat-form-field-fluid">
<input matInput formControlName="searchKey" placeholder="Buscar en todos los campos" autocomplete="off"
class="mat-form-field mat-form-field-fluid" (keyup)="searchInsideTable()">
<mat-hint align="start">
<strong>Buscar en todos los campos</strong>
</mat-hint>
</mat-form-field>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="mat-table__wrapper">
<mat-table [dataSource]="listData" matSort perfectScrollbar>
<ng-container matColumnDef="N">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">N°</mat-header-cell>
<mat-cell *matCellDef="let lesson,let i = index"> {{ i + 1}} </mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="PuntoMedida">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">PuntoMedida</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{lesson.PuntoMedidaDisplay}}</mat-cell>
</ng-container> -->
<ng-container matColumnDef="Equipo">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Equipo</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{lesson.EquipoDisplay}}</mat-cell>
</ng-container>
<ng-container matColumnDef="UnidadMedida">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">UnidadMedida</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{lesson.UnidadMedidaDisplay}}</mat-cell>
</ng-container>
<ng-container matColumnDef="TipoPunto">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">TipoPunto</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{lesson.TipoPuntoDisplay}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Descripcion">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Descripcion</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{lesson.DescripcionDisplay}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Activo">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Activo</mat-header-cell>
<mat-cell *matCellDef="let lesson">
<span class="m-badge m-badge--{{ lesson.ActivoDisplay == 'SI' ? 'success': 'danger' }} m-badge--wide">{{ lesson.ActivoDisplay }}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="FechaMedida">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Fecha Medida</mat-header-cell>
<mat-cell *matCellDef="let lesson">{{lesson.FechaMedidaDisplay | date:'dd/MM/yyyy HH:mm:ss' }}</mat-cell>
</ng-container>
<ng-container matColumnDef="Operaciones">
<mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Acciones</mat-header-cell>
<mat-cell *matCellDef="let lesson">
<button style="color: #00A09D !important" mat-icon-button color="primary" matTooltip="Editar Medicion" (click)="AddEditMedicionVehiculo(lesson.PuntoMedidaDisplay)">
<mat-icon>create</mat-icon>
</button>
<button *ngIf="lesson.ActivoDisplay == 'SI' " mat-icon-button style="color: #F2242E !important" type="button" data-toggle="modal" (click)="enabledisabled(lesson.PuntoMedidaDisplay,false)" matTooltip="Dar de baja">
<mat-icon>delete</mat-icon>
</button>
<button *ngIf="lesson.ActivoDisplay == 'NO' " mat-icon-button style="color: #b7343d !important" type="button" (click)="enabledisabled(lesson.PuntoMedidaDisplay,true)" matTooltip="Dar de Alta">
<mat-icon>done</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="loading">
<mat-footer-cell *matFooterCellDef colspan="10">
<mat-spinner [diameter]="20"></mat-spinner> Loading data...
</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="noData">
<mat-footer-cell *matFooterCellDef colspan="10"> No se encontraron registros. </mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" class="hoverable_row"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide': load_data}"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide': no_data}"></mat-footer-row>
</mat-table>
</div>
<div class="mat-table__bottom">
<mat-paginator #MatPaginator [pageSizeOptions]="[5, 10, 50, 100, 200]" [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>
</ng-container>
</m-portlet>
Component.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ToastrManager } from 'ng6-toastr-notifications';
import { SubheaderService } from '../../../../../config/_core/services/subheader.service';
import { MantenimientoService } from '../../_core/services/mantenimiento.service';
import * as Excel from 'exceljs/dist/exceljs.min.js';
import { UtilsMantenimientoService } from '../../_core/utils/utils-mantenimiento.service';
import { Observable, ReplaySubject, Subject } from 'rxjs';
import { takeUntil } from "rxjs/operators";
import { UnidadMedida } from '../../../MMModuleApp/_core/models/unidad-medida.model';
import { database } from 'firebase';
@Component({
selector: 'm-documentos-medida-vehiculo',
templateUrl: './documentos-medida-vehiculo.component.html',
styleUrls: ['./documentos-medida-vehiculo.component.scss']
})
export class DocumentosMedidaVehiculoComponent implements OnInit {
Estados:Array<any>=[];
TipoPuntos:Array<any>=[];
UnidadesMedida: Array<any>=[];
TipoOrdenes:Array<any>=[];
SubTipos:Array<any>=[];
Bases:Array<any>=[];
Equipos:Array<any>=[];
arrayList:Array<any>=[];
displayedColumns: string[] = ['N','Equipo','UnidadMedida','TipoPunto','Descripcion','Activo','FechaMedida','Operaciones'];
listData: MatTableDataSource<any>;
@ViewChild(MatSort) MatSort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
formBusqueda: FormGroup;
posible_Equipos = null;
filterEquipos: FormControl = new FormControl();
filtered_Equipos: ReplaySubject<any> = new ReplaySubject<any>();
array_Equipos: any = [];
protected _onDestroy = new Subject<void>();
searchBan: boolean = false;
searchKey: string;
load_data = false;
no_data = true;
constructor(
private subheaderService: SubheaderService,
public mantenimientoservice:MantenimientoService,
private _formBuilder: FormBuilder,
public toastr: ToastrManager,
private utilsService: UtilsMantenimientoService
) { }
ngOnInit() {
this.subheaderService.setTitle('Mantenimiento');
this.subheaderService.setBreadcrumbs([ { title: 'Mantenimiento - Documentos de Medida Vehículo'} ]);
this.createFormBusqueda();
this.getEquipos_combo();
this.getMainList();
}
createFormBusqueda(){
this.formBusqueda = this._formBuilder.group({
Equipo: [0,Validators.required],
TipoPunto: [0,Validators.required],
UnidadMedida: [0, Validators.required] ,
searchKey: [null],
});
this.mantenimientoservice.getTipoPunto().subscribe( (data: any) => {
this.TipoPuntos = data;
this.TipoPuntos.unshift({ Valor: 0, Nombre: 'TODOS' })
this.formBusqueda.controls.TipoPunto.setValue(0);
}
);
this.mantenimientoservice.getUnidadesMedida().subscribe( (data: any) => {
this.UnidadesMedida = data;
this.UnidadesMedida.unshift({ UnidadMedida: 0, Nombre: 'TODOS' })
this.formBusqueda.controls.UnidadMedida.setValue(0);
}
);
}
getEquipos_combo() {
this.mantenimientoservice.getEquipos().subscribe(
(data: any) => {
this.array_Equipos = data;
this.filtered_Equipos.next(this.array_Equipos.slice());
this.filterEquipos.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filtrar_Equipos();
});
this.formBusqueda.controls.Equipo.setValue(
Number(this.posible_Equipos)
);
},
(errorServicio) => {
console.log(errorServicio);
}
);
}
filtrar_Equipos() {
if (this.array_Equipos.length == 0) {
return;
}
let search = this.filterEquipos.value;
if (!search) {
this.filtered_Equipos.next(this.array_Equipos.slice());
return;
} else {
search = search.toLowerCase();
}
this.filtered_Equipos.next(
this.array_Equipos.filter(
item => item.Placa.toLowerCase().indexOf(search) > -1
)
);
}
changeModulo(eve, item) {
if (eve.source.selected) {
this.mantenimientoservice.getSubTipoOrden(item).subscribe( (data: any) => {
this.SubTipos = data;
this.SubTipos.unshift({ SubTipoOrden: 0, Descripcion: 'TODOS' })
this.formBusqueda.controls.SubTipo.setValue(0);
// this.form.controls.SubTipo.setValue(1);
}
);
}
}
getMainList(){
const _controls = this.formBusqueda.controls;
if (this.formBusqueda.invalid) {
Object.keys(_controls).forEach(controlName => _controls[controlName].markAsTouched() );
this.toastr.warningToastr('Ingrese los campos obligatorios.', 'Advertencia!', {
toastTimeout: 2000,
showCloseButton: true,
animate: 'fade',
progressBar: true
});
}else{
this.searchBan = false;
this.load_data = false;
this.no_data = true;
let Equipo = _controls['Equipo'].value;
let TipoPunto = _controls['TipoPunto'].value;
let UnidadMedida = _controls['UnidadMedida'].value;
this.mantenimientoservice.getDocumentosMedidaVehiculo(Equipo,TipoPunto,UnidadMedida).subscribe(
(data: any) => {
this.arrayList = data;
this.listData = new MatTableDataSource(data);
this.listData.sort = this.MatSort;
this.listData.paginator = this.paginator;
this.no_data = data.length>0? true:false;
this.load_data = true;
// this.loading=false;
}
)
}
}
AddEditMedicionVehiculo(Id){
console.log("IDDD",Id);
{const dialogRef = this.utilsService.addEditMedicionVehiculoDialog(Id==0?'Registrar medición vehículo':'Editar medición vehículo', Id);
dialogRef.afterClosed().subscribe(res => {
debugger
if (res) { this.getMainList(); return; }
else { return; }
});}
}
enabledisabled(id: number,estado: boolean){
console.log("nuevo estado para:",id,estado);
let accion = estado==true?'Activar':'Desactivar';
let ejecutando = estado==true?'Activando':'Desactivando';
let data: any = {
title : accion +' Documento de Medicion Vehículo',
description : '¿Esta seguro de '+accion+' Documento de Medicion del vehículo?',
waitDescription : ejecutando+' ...',
labelYes : accion
};
data.callback = (data): Observable<any> => {
return new Observable(obs => {
this.mantenimientoservice.DocumentoMedicionVehiculoEnabledDisabled(id,estado).subscribe((response: any) => {
console.log("response",response);
if (response==1) {
this.toastr.successToastr(response.Message, 'Éxito!', {
toastTimeout: 2000,
showCloseButton: true,
animate: 'fade',
progressBar: true
});
obs.next(true);
} else {
this.toastr.errorToastr(response.Message, 'Error!', {
toastTimeout: 2000,
showCloseButton: true,
animate: 'fade',
progressBar: true
});
obs.next(false);
}
}, (error) => {
this.toastr.errorToastr(error.error.Message, 'Error!', {
toastTimeout: 2000,
showCloseButton: true,
animate: 'fade',
progressBar: true
});
obs.next(false);
});
});
}
const dialogRef = this.utilsService.confirmCallback(data);
dialogRef.afterClosed().subscribe(res => { console.log("respuesta de dialog"+res);
if (!res) {
return;
} else {
this.getMainList();
}
});
}
formatNumber(n: number){
console.log(n)
var val = n.toFixed(3);
var parts = val.toString().split(".");
var num = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
return num;
}
searchInsideTable() {
var searchKey=this.formBusqueda.controls['searchKey'].value;
this.listData.filter = searchKey.trim().toLowerCase();
}
}