2021-12-30 11:58:25 +01:00
|
|
|
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
|
2022-01-11 00:32:21 +01:00
|
|
|
import { Router } from '@angular/router';
|
2021-12-24 15:21:22 +01:00
|
|
|
import { ApiClientService } from 'src/app/_services/api-client.service';
|
2021-12-27 19:58:38 +01:00
|
|
|
import { AuthService } from '../../_services/auth.service';
|
2022-01-11 13:33:39 +01:00
|
|
|
import { ToastrService } from 'ngx-toastr';
|
2022-03-01 00:07:51 +01:00
|
|
|
import { TranslateService } from '@ngx-translate/core';
|
2022-01-11 13:33:39 +01:00
|
|
|
import Swal from 'sweetalert2';
|
2023-09-02 00:43:17 +02:00
|
|
|
import { PageChangedEvent } from 'ngx-bootstrap/pagination';
|
2021-12-22 23:06:58 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-table',
|
|
|
|
templateUrl: './table.component.html',
|
|
|
|
styleUrls: ['./table.component.scss']
|
|
|
|
})
|
2021-12-30 11:58:25 +01:00
|
|
|
export class TableComponent implements OnInit, OnDestroy {
|
2021-12-22 23:06:58 +01:00
|
|
|
|
|
|
|
@Input() sourceType?: string;
|
2021-12-29 13:12:16 +01:00
|
|
|
@Input() refreshInterval?: number;
|
2021-12-22 23:06:58 +01:00
|
|
|
|
2023-09-02 00:43:17 +02:00
|
|
|
enablePaginationTypes: string[] = ['logs', 'services', 'trainings'];
|
2023-09-02 16:53:42 +02:00
|
|
|
searchPropertiesBlacklist: string[] = [
|
|
|
|
"chief_id",
|
|
|
|
"type_id",
|
|
|
|
"pivot",
|
|
|
|
"place_id",
|
|
|
|
"display_name",
|
|
|
|
"licence",
|
|
|
|
"lat",
|
|
|
|
"lon",
|
|
|
|
"id",
|
|
|
|
"updated_at",
|
|
|
|
"added_by_id",
|
|
|
|
"updated_by_id",
|
|
|
|
"changed_id",
|
|
|
|
"editor_id"
|
|
|
|
]
|
2023-09-02 00:43:17 +02:00
|
|
|
|
|
|
|
_maxPaginationSize: number = 10;
|
|
|
|
_rowsPerPage: number = 20;
|
|
|
|
|
|
|
|
@Input('maxPaginationSize')
|
|
|
|
get maxPaginationSize(): any {
|
|
|
|
return this._maxPaginationSize;
|
|
|
|
}
|
|
|
|
set maxPaginationSize(value: any) {
|
|
|
|
if(!isNaN(value)) this._maxPaginationSize = value;
|
|
|
|
}
|
|
|
|
|
|
|
|
@Input('rowsPerPage')
|
|
|
|
get rowsPerPage(): any {
|
|
|
|
return this._rowsPerPage;
|
|
|
|
}
|
|
|
|
set rowsPerPage(value: any) {
|
|
|
|
if(!isNaN(value)) this._rowsPerPage = value;
|
|
|
|
}
|
|
|
|
|
2021-12-24 15:21:22 +01:00
|
|
|
@Output() changeAvailability: EventEmitter<{user: number, newState: 0|1}> = new EventEmitter<{user: number, newState: 0|1}>();
|
2022-02-14 11:40:47 +01:00
|
|
|
@Output() userImpersonate: EventEmitter<number> = new EventEmitter<number>();
|
2021-12-24 15:21:22 +01:00
|
|
|
|
2021-12-22 23:06:58 +01:00
|
|
|
public data: any = [];
|
2023-09-02 00:43:17 +02:00
|
|
|
public displayedData: any = [];
|
2023-09-02 16:53:42 +02:00
|
|
|
public originalData: any = [];
|
2021-12-22 23:06:58 +01:00
|
|
|
|
2021-12-30 11:58:25 +01:00
|
|
|
public loadDataInterval: NodeJS.Timer | undefined = undefined;
|
2021-12-29 13:12:16 +01:00
|
|
|
|
2023-09-02 00:43:17 +02:00
|
|
|
public currentPage: number = 1;
|
|
|
|
public totalElements: number = 1;
|
|
|
|
|
2023-09-02 16:53:42 +02:00
|
|
|
public searchText: string = "";
|
|
|
|
public searchData: any = [];
|
|
|
|
|
2022-01-11 00:32:21 +01:00
|
|
|
constructor(
|
2022-01-11 13:33:39 +01:00
|
|
|
private api: ApiClientService,
|
2022-01-11 00:32:21 +01:00
|
|
|
public auth: AuthService,
|
2022-01-11 13:33:39 +01:00
|
|
|
private router: Router,
|
2022-03-01 00:07:51 +01:00
|
|
|
private toastr: ToastrService,
|
|
|
|
private translate: TranslateService
|
2022-01-11 00:32:21 +01:00
|
|
|
) { }
|
2021-12-22 23:06:58 +01:00
|
|
|
|
2021-12-27 14:43:01 +01:00
|
|
|
getTime() {
|
|
|
|
return Math.floor(Date.now() / 1000);
|
|
|
|
}
|
|
|
|
|
2023-09-01 14:39:44 +02:00
|
|
|
getTS(date: string) {
|
|
|
|
return Math.floor(new Date(date).getTime() / 1000);
|
|
|
|
}
|
|
|
|
|
2021-12-24 15:21:22 +01:00
|
|
|
loadTableData() {
|
2022-03-12 20:58:49 +01:00
|
|
|
if(!this.sourceType) this.sourceType = "list";
|
|
|
|
this.api.get(this.sourceType).then((data: any) => {
|
|
|
|
this.data = data.filter((row: any) => typeof row.hidden !== 'undefined' ? !row.hidden : true);
|
2023-09-02 16:53:42 +02:00
|
|
|
this.originalData = this.data;
|
2023-09-02 00:43:17 +02:00
|
|
|
this.totalElements = this.data.length;
|
|
|
|
if(this.currentPage == 1) this.displayedData = this.data.slice(0, this.rowsPerPage);
|
2022-03-12 20:58:49 +01:00
|
|
|
if(this.sourceType === 'list') {
|
|
|
|
this.api.availableUsers = this.data.filter((row: any) => row.available).length;
|
|
|
|
}
|
2023-09-02 16:53:42 +02:00
|
|
|
this.initializeSearchData();
|
2023-09-03 01:04:19 +02:00
|
|
|
}).catch((e) => {
|
|
|
|
console.error(e);
|
2021-12-22 23:06:58 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-09-02 00:43:17 +02:00
|
|
|
pageChanged(event: PageChangedEvent): void {
|
|
|
|
const startItem = (event.page - 1) * event.itemsPerPage;
|
|
|
|
const endItem = event.page * event.itemsPerPage;
|
|
|
|
this.displayedData = this.data.slice(startItem, endItem);
|
|
|
|
}
|
|
|
|
|
2023-09-02 16:53:42 +02:00
|
|
|
initializeSearchData() {
|
|
|
|
const searchPropertiesBlacklist = this.searchPropertiesBlacklist;
|
|
|
|
function flattenObj(obj: any, parent: any, res: any = {}){
|
|
|
|
//Based on https://stackoverflow.com/a/56253298
|
|
|
|
for(let key in obj){
|
|
|
|
if(typeof obj[key] == 'undefined' || obj[key] == null) continue;
|
|
|
|
if(searchPropertiesBlacklist.includes(key)) continue;
|
|
|
|
let propName = parent ? parent + '_' + key : key;
|
|
|
|
if(typeof obj[key] == 'object'){
|
|
|
|
flattenObj(obj[key], propName, res);
|
|
|
|
} else {
|
|
|
|
res[propName] = obj[key];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return res;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.searchData = this.data.map((row: any) => flattenObj(row, null));
|
|
|
|
}
|
|
|
|
|
|
|
|
onSearchTextChange(search: string) {
|
|
|
|
if(search.length == 0) {
|
|
|
|
this.data = this.originalData;
|
|
|
|
this.displayedData = this.data.slice(0, this.rowsPerPage);
|
|
|
|
this.totalElements = this.data.length;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.data = this.originalData.filter((row: any, index: number) => {
|
|
|
|
return Object.values(this.searchData[index]).some((value: any) => {
|
|
|
|
return value.toString().toLowerCase().includes(search.toLowerCase());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.displayedData = this.data.slice(0, this.rowsPerPage);
|
|
|
|
this.totalElements = this.data.length;
|
|
|
|
}
|
|
|
|
|
2021-12-24 15:21:22 +01:00
|
|
|
ngOnInit(): void {
|
|
|
|
console.log(this.sourceType);
|
|
|
|
this.loadTableData();
|
2021-12-29 13:12:16 +01:00
|
|
|
this.loadDataInterval = setInterval(() => {
|
2022-01-10 12:18:55 +01:00
|
|
|
if(typeof (window as any).skipTableReload !== 'undefined' && (window as any).skipTableReload) {
|
|
|
|
return;
|
|
|
|
}
|
2021-12-29 13:12:16 +01:00
|
|
|
console.log("Refreshing data...");
|
|
|
|
this.loadTableData();
|
|
|
|
}, this.refreshInterval || 10000);
|
2022-02-14 16:49:55 +01:00
|
|
|
this.auth.authChanged.subscribe({
|
|
|
|
next: () => this.loadTableData()
|
|
|
|
});
|
2021-12-24 15:21:22 +01:00
|
|
|
}
|
|
|
|
|
2021-12-30 11:58:25 +01:00
|
|
|
ngOnDestroy(): void {
|
|
|
|
if(typeof this.loadDataInterval !== 'undefined') {
|
|
|
|
clearInterval(this.loadDataInterval);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-27 19:58:38 +01:00
|
|
|
onChangeAvailability(user: number, newState: 0|1) {
|
2023-06-06 17:18:30 +02:00
|
|
|
if(this.auth.profile.can('users-read')) {
|
2021-12-27 19:58:38 +01:00
|
|
|
this.changeAvailability.emit({user, newState});
|
|
|
|
}
|
|
|
|
}
|
2022-01-11 00:32:21 +01:00
|
|
|
|
2022-02-14 11:40:47 +01:00
|
|
|
onUserImpersonate(user: number) {
|
2023-06-06 18:53:49 +02:00
|
|
|
if(this.auth.profile.can('users-impersonate')) {
|
|
|
|
this.auth.impersonate(user).then(() => {
|
2022-02-14 11:40:47 +01:00
|
|
|
this.loadTableData();
|
2023-06-06 18:53:49 +02:00
|
|
|
this.userImpersonate.emit(1);
|
2022-02-14 11:40:47 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-09-01 00:21:35 +02:00
|
|
|
openPlaceDetails(id: number) {
|
|
|
|
this.router.navigate(['/place-details', id]);
|
2022-01-11 00:32:21 +01:00
|
|
|
}
|
2022-01-11 13:33:39 +01:00
|
|
|
|
2022-02-24 23:41:46 +01:00
|
|
|
editService(id: number) {
|
|
|
|
this.router.navigate(['/services', id]);
|
|
|
|
}
|
|
|
|
|
2022-01-11 13:33:39 +01:00
|
|
|
deleteService(id: number) {
|
2022-03-01 00:07:51 +01:00
|
|
|
this.translate.get(['table.yes_remove', 'table.cancel', 'table.remove_service_confirm', 'table.remove_service_text']).subscribe((res: { [key: string]: string; }) => {
|
|
|
|
Swal.fire({
|
|
|
|
title: res['table.remove_service_confirm'],
|
|
|
|
text: res['table.remove_service_confirm_text'],
|
|
|
|
icon: 'warning',
|
|
|
|
showCancelButton: true,
|
|
|
|
confirmButtonColor: '#3085d6',
|
|
|
|
cancelButtonColor: '#d33',
|
|
|
|
confirmButtonText: res['table.yes_remove'],
|
|
|
|
cancelButtonText: res['table.cancel']
|
|
|
|
}).then((result) => {
|
|
|
|
if (result.isConfirmed) {
|
|
|
|
this.api.delete(`services/${id}`).then((response) => {
|
2022-04-02 22:28:00 +02:00
|
|
|
this.translate.get('table.service_deleted_successfully').subscribe((res: string) => {
|
2022-03-01 00:07:51 +01:00
|
|
|
this.toastr.success(res);
|
|
|
|
});
|
|
|
|
this.loadTableData();
|
|
|
|
}).catch((e) => {
|
2022-04-02 22:28:00 +02:00
|
|
|
this.translate.get('table.service_deleted_error').subscribe((res: string) => {
|
2022-03-01 00:07:51 +01:00
|
|
|
this.toastr.error(res);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2022-01-11 13:33:39 +01:00
|
|
|
}
|
2023-09-01 00:21:35 +02:00
|
|
|
|
|
|
|
extractNamesFromObject(obj: any) {
|
|
|
|
return obj.flatMap((e: any) => e.name);
|
|
|
|
}
|
2021-12-22 23:06:58 +01:00
|
|
|
}
|