adn-datatable
Version:
Datatable component integrable to any angular project.
970 lines (968 loc) • 148 kB
JavaScript
import { Component, Input, ViewChild, Renderer2, ViewChildren, Injectable, NgModule } from '@angular/core';
import { __values } from 'tslib';
import { BehaviorSubject } from 'rxjs';
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var AppComponent = /** @class */ (function () {
function AppComponent() {
this.title = 'Datatable EPT / ADN';
this.ready = false;
}
/**
* @return {?}
*/
AppComponent.prototype.callme = /**
* @return {?}
*/
function () {
this.ready = !this.ready;
console.log("jsdZJ");
};
AppComponent.decorators = [
{ type: Component, args: [{
selector: 'app-root',
template: "\n<!--\n<data-table-component width=\"100%\" oddRowColor=\"\" evenRowColor=\"\" headerColor=\"red\" [userId]=\"'user2'\" [apiUrl]=\"'http://localhost:1337'\" [tableObjectId]=\"'dataCollection1'\"></data-table-component>\n-->\n<data-table-component [ready]='true' oddRowColor=\"#fff\" evenRowColor=\"#f6f6f6\" headerColor=\"aliceblue\" [userId]=\"'user2'\" datatableWidth=\"80%\" [apiUrl]=\"'https://api-datatable.herokuapp.com'\" [tableObjectId]=\"'dataCollection1'\"></data-table-component>\n<!-- <button (click)=\"callme()\">asdsadoiio</button> -->",
styles: [".small{font-size:10px}.small .dateInput[_ngcontent-c2]{min-width:0;height:40%}.small .searchFilter[_ngcontent-c2]{width:50%;margin-left:0}.small .dateFilter[_ngcontent-c2]{min-width:50%}.small .multiSelect[_ngcontent-c2]{min-width:100px;margin-left:7%;width:50%;height:auto}.small .c-btn[_ngcontent-c3]{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:12px;color:#333}.xsmall{font-size:8px}.xsmall .icon[_ngcontent-c2]{margin:0;height:auto;max-width:10px}.xsmall .selected-list[_ngcontent-c3] .c-btn[_ngcontent-c3]{width:100%;box-shadow:0 1px 5px #aca3a3;padding:0;cursor:pointer;display:flex}.xsmall .dateInput[_ngcontent-c2]{min-width:0;height:40%}.xsmall .searchFilter[_ngcontent-c2]{width:50%;margin-left:0}.xsmall .dateFilter[_ngcontent-c2]{min-width:50%}.xsmall .multiSelect[_ngcontent-c2]{margin-left:7%;width:50%;height:auto}.xsmall .c-btn[_ngcontent-c3]{display:inline-block;background:#fff;border:1px solid #ccc;border-radius:3px;font-size:12px;color:#333}.xsmall .data-table[_ngcontent-c4]{table-layout:auto}"]
},] },
];
/** @nocollapse */
AppComponent.ctorParameters = function () { return []; };
return AppComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var DataTableComponent = /** @class */ (function () {
function DataTableComponent(http, renderer) {
this.http = http;
this.renderer = renderer;
this.oddRowColor = "#fff";
this.evenRowColor = "#f6f6f6";
this.headerColor = "aliceblue";
this.ready = false;
this.datatableWidth = "100%";
this.enableAddUser = true;
this.existingUser = false;
this.selectAllRows = false;
this.showUsersPopup = false;
this.showGrantPopup = false;
this.showRevokePopup = false;
this.requestBody = {
userId: this.userId,
draw: 0,
start: 0,
length: 10,
searchText: "",
order: {
column: "",
dir: "asc"
},
searchables: [],
searchDate: {
dateColumn: "",
dateFrom: "",
dateTo: ""
}
};
this.responseBody = {
draw: 0,
recordsFiltered: 0,
data: [],
info: {
admins: [],
users: []
}
};
this.dataDisplayed = [];
this.infoTable = { admins: [], users: [] };
this.userSelected = '';
// Page number displayed
this.page = 1;
// Array of columnNames
this.headersName = [];
this.dateHeadersName = [];
// Allows to switch between View mode and Edit mode
this.editable = false;
// Used in the angular multiselect
this.dropdownList = [];
this.selectedItems = new Map();
this.dropdownSettings = {
singleSelection: false,
text: "Filtrer",
selectAllText: 'Tout sélectionner',
unSelectAllText: 'Tout désélectionner',
enableSearchFilter: true
};
// Boolean to check if the table is ready to be displayed
this.readyToDisplay = false;
// Boolean to show the loading or not
this.loading = false;
this.dataSubject = new BehaviorSubject("");
this.data$ = this.dataSubject.asObservable();
//regex = /[0-9]{2}[-|\/]{1}[0-9]{2}[-|\/]{1}[0-9]{4}/;
this.regex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
this.val = false;
}
/**
* @return {?}
*/
DataTableComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.subscription.unsubscribe();
};
/**
* @return {?}
*/
DataTableComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
//adding color
this.datatableRows.changes.subscribe(function (rows) {
rows.toArray().forEach(function (row, index) {
if (index % 2)
row.nativeElement.style["background"] = _this.oddRowColor;
else
row.nativeElement.style["background"] = _this.evenRowColor;
});
_this.datatableHeader.nativeElement.style["background-color"] = _this.headerColor;
_this.datatableDiv.nativeElement.style["max-width"] = _this.datatableWidth;
});
//for( t in test)
// t.setStyle({background-color:color})
//
console.log(this.datatableDiv);
// this.renderer.setStyle(this.datatableDiv, 'max-width', '80%');
// this.renderer.setStyle(this.datatableDiv, 'background', 'red');
console.log(this.datatableHeader);
};
/**
* @param {?} changes
* @return {?}
*/
DataTableComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes["ready"] && this.ready) {
this.emitData();
console.log('input changed');
}
};
/**
* @return {?}
*/
DataTableComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
// We subscribe to an emitter so every event directly affects the dataDisplayed object
this.subscription = this.data$
.subscribe(function (toEmit) {
_this.selectAllRows = false;
if (_this.readyToDisplay) {
document.getElementById("row-all")['checked'] = false;
}
_this.requestBody.userId = _this.userId;
console.log(toEmit);
console.log(_this.requestBody);
_this.requestBody.draw = _this.requestBody.draw + 1;
_this.getData().subscribe(function (dataReceived) {
if (_this.readyToDisplay == false) {
_this.headersName = [];
_this.dateHeadersName = [];
/** @type {?} */
var original = _this;
//We need to fill the headersName array with the column name of the first item of the returned object
Object.keys(dataReceived['data'][0]).forEach(function (key) {
//Our test data object containes the column 'row' and 'deleted' from the datatable v1
if (key != "objectId" && key != "createdAt" && key != "updatedAt" && key != "AuthUserIds") {
original.headersName.push(key);
}
});
_this.headersName.forEach(function (column) {
if (_this.isDate(dataReceived['data'][0][column])) {
_this.dateHeadersName.push(column);
}
});
//We need to initialize the dropdown with the column names
if (_this.headersName.length > 0) {
/** @type {?} */
var indexColumn = 0;
_this.dropdownList = [];
try {
for (var _a = __values(_this.headersName), _b = _a.next(); !_b.done; _b = _a.next()) {
var columnName = _b.value;
_this.dropdownList.push({ "id": indexColumn, "itemName": columnName });
indexColumn++;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_1) throw e_1.error; }
}
}
}
_this.responseBody = dataReceived;
_this.infoTable = _this.responseBody.info;
_this.dataDisplayed = _this.responseBody.data.slice(0, _this.requestBody['length']);
_this.dataDisplayed.forEach(function (row) {
row['selected'] = false;
});
console.log(_this.dataDisplayed);
_this.loading = false;
_this.readyToDisplay = true;
var e_1, _c;
});
});
};
/**
* @return {?}
*/
DataTableComponent.prototype.selectAll = /**
* @return {?}
*/
function () {
this.selectAllRows = document.getElementById("row-all")['checked'];
console.log(this.selectAllRows);
if (this.selectAllRows) {
this.dataDisplayed.forEach(function (row) {
row['selected'] = true;
});
}
else {
this.dataDisplayed.forEach(function (row) {
row['selected'] = false;
});
}
};
/**
* @param {?} indexRow
* @return {?}
*/
DataTableComponent.prototype.selectRow = /**
* @param {?} indexRow
* @return {?}
*/
function (indexRow) {
if (this.editable == false) {
this.dataDisplayed[indexRow].selected = !this.dataDisplayed[indexRow].selected;
}
};
/**
* @return {?}
*/
DataTableComponent.prototype.changeUserCall = /**
* @return {?}
*/
function () {
/** @type {?} */
var user = document.getElementById("changeUserInput")['value'];
if (user != '') {
this.showUsersPopup = false;
this.showRevokePopup = false;
this.showGrantPopup = false;
this.existingUser = false;
this.userId = user;
this.emitData();
}
};
/**
* @return {?}
*/
DataTableComponent.prototype.logSelected = /**
* @return {?}
*/
function () {
console.log(this.dataDisplayed);
};
/**
* @param {?} column
* @return {?}
*/
DataTableComponent.prototype.headerNameClicked = /**
* @param {?} column
* @return {?}
*/
function (column) {
console.log("click on column " + column);
/** @type {?} */
var currentOrderColumn = this.requestBody['order']['column'];
if (currentOrderColumn != column) {
this.requestBody['order']['column'] = column;
}
else if (currentOrderColumn == column) {
this.requestBody['order']['dir'] = this.requestBody['order']['dir'] == "asc" ? "desc" : "asc";
}
this.emitData();
};
/**
* @return {?}
*/
DataTableComponent.prototype.getData = /**
* @return {?}
*/
function () {
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.post(this.apiUrl + '/get/' + this.tableObjectId, this.requestBody, httpOptions);
};
/**
* @param {?} oldRow
* @param {?} newRow
* @return {?}
*/
DataTableComponent.prototype.modifyData = /**
* @param {?} oldRow
* @param {?} newRow
* @return {?}
*/
function (oldRow, newRow) {
delete oldRow.selected;
delete newRow.selected;
/** @type {?} */
var modifyBody = {
"oldRow": oldRow,
"newRow": newRow,
"userId": this.userId
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.post(this.apiUrl + '/modify/' + this.tableObjectId, modifyBody, httpOptions);
};
/**
* @return {?}
*/
DataTableComponent.prototype.addUserCall = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var user = document.getElementById("addUserInput")['value'];
if (user != '' && !this.infoTable.users.includes(user)) {
this.enableAddUser = false;
this.existingUser = false;
this.addUser(user).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.enableAddUser = true;
_this.emitData();
});
}
else if (this.infoTable.users.includes(user)) {
this.existingUser = true;
}
};
/**
* @param {?} newUser
* @return {?}
*/
DataTableComponent.prototype.addUser = /**
* @param {?} newUser
* @return {?}
*/
function (newUser) {
/** @type {?} */
var newUserBody = {
"userId": newUser
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.put(this.apiUrl + '/users/' + this.tableObjectId, newUserBody, httpOptions);
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.deleteUserCall = /**
* @param {?} user
* @return {?}
*/
function (user) {
var _this = this;
if (this.infoTable.users.includes(user)) {
this.deleteUser(user).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
}
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.deleteUser = /**
* @param {?} user
* @return {?}
*/
function (user) {
/** @type {?} */
var userBody = {
"userId": user
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.post(this.apiUrl + '/users/' + this.tableObjectId, userBody, httpOptions);
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.grantAdminCall = /**
* @param {?} user
* @return {?}
*/
function (user) {
var _this = this;
this.grantAdmin(user).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.grantAdmin = /**
* @param {?} user
* @return {?}
*/
function (user) {
/** @type {?} */
var userBody = {
"userId": user
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.put(this.apiUrl + '/admins/' + this.tableObjectId, userBody, httpOptions);
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.revokeAdminCall = /**
* @param {?} user
* @return {?}
*/
function (user) {
var _this = this;
this.revokeAdmin(user).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.revokeAdmin = /**
* @param {?} user
* @return {?}
*/
function (user) {
/** @type {?} */
var userBody = {
"userId": user
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.post(this.apiUrl + '/admins/' + this.tableObjectId, userBody, httpOptions);
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.grantAccessToUserCall = /**
* @param {?} user
* @return {?}
*/
function (user) {
var _this = this;
if (user != '') {
/** @type {?} */
var rowsSelected = [];
this.dataDisplayed.forEach(function (row) {
if (row['selected'] == true) {
rowsSelected.push(row['objectId']);
}
});
this.grantAccessToUser(user, rowsSelected).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
}
};
/**
* @param {?} user
* @param {?} rowsSelected
* @return {?}
*/
DataTableComponent.prototype.grantAccessToUser = /**
* @param {?} user
* @param {?} rowsSelected
* @return {?}
*/
function (user, rowsSelected) {
/** @type {?} */
var userBody = {
"userId": user,
"rowsSelected": rowsSelected
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.put(this.apiUrl + '/access/' + this.tableObjectId, userBody, httpOptions);
};
/**
* @param {?} user
* @return {?}
*/
DataTableComponent.prototype.revokeAccessFromUserCall = /**
* @param {?} user
* @return {?}
*/
function (user) {
var _this = this;
if (user != '') {
/** @type {?} */
var rowsSelected = [];
this.dataDisplayed.forEach(function (row) {
if (row['selected'] == true) {
rowsSelected.push(row['objectId']);
}
});
this.revokeAccessFromUser(user, rowsSelected).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
}
};
/**
* @param {?} user
* @param {?} rowsSelected
* @return {?}
*/
DataTableComponent.prototype.revokeAccessFromUser = /**
* @param {?} user
* @param {?} rowsSelected
* @return {?}
*/
function (user, rowsSelected) {
/** @type {?} */
var userBody = {
"userId": user,
"rowsSelected": rowsSelected
};
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
return this.http.post(this.apiUrl + '/access/' + this.tableObjectId, userBody, httpOptions);
};
// We use the emitData function to trigger the subscription and update the dataDisplayed according to data object and the filters
/**
* @return {?}
*/
DataTableComponent.prototype.emitData = /**
* @return {?}
*/
function () {
this.loading = true;
this.dataSubject.next(String(Date.now()));
};
// toggleEdit allows the user to switch between view mode and edit mode
/**
* @return {?}
*/
DataTableComponent.prototype.toggleEdit = /**
* @return {?}
*/
function () {
this.editable = !this.editable;
this.dataDisplayed.forEach(function (row) {
row.selected = false;
});
console.log(this.dataDisplayed);
};
// We handle the binding on the textarea of the cell to trigger the emitData function
/**
* @param {?} e
* @param {?} rowNumber
* @param {?} colName
* @return {?}
*/
DataTableComponent.prototype.onValueUpdate = /**
* @param {?} e
* @param {?} rowNumber
* @param {?} colName
* @return {?}
*/
function (e, rowNumber, colName) {
var _this = this;
console.log("Modified row ", rowNumber, " cell ", colName, ". From value '", this.responseBody.data[rowNumber][colName], "' to value '", e.target.value, "'.");
/** @type {?} */
var oldRow = JSON.parse(JSON.stringify(this.dataDisplayed[rowNumber]));
/** @type {?} */
var newRow = JSON.parse(JSON.stringify(this.dataDisplayed[rowNumber]));
newRow[colName] = e.target.value;
this.modifyData(oldRow, newRow).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
};
/**
* @param {?} newDateValue
* @param {?} rowNumber
* @param {?} colName
* @return {?}
*/
DataTableComponent.prototype.onDateValueUpdate = /**
* @param {?} newDateValue
* @param {?} rowNumber
* @param {?} colName
* @return {?}
*/
function (newDateValue, rowNumber, colName) {
var _this = this;
console.log("Modified row ", rowNumber, " cell ", colName, ". From value '", this.responseBody.data[rowNumber][colName], "' to value '", newDateValue, "'.");
/** @type {?} */
var oldRow = JSON.parse(JSON.stringify(this.dataDisplayed[rowNumber]));
/** @type {?} */
var newRow = JSON.parse(JSON.stringify(this.dataDisplayed[rowNumber]));
newRow[colName] = newDateValue;
this.modifyData(oldRow, newRow).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
};
// The function deleteRow actually delete the row in the dataFull and the data object and not only in the displayedData
// The subscription will make at happen in the dataDisplayed to with the emitData function
/**
* @param {?} row
* @return {?}
*/
DataTableComponent.prototype.deleteRow = /**
* @param {?} row
* @return {?}
*/
function (row) {
var _this = this;
/** @type {?} */
var httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
/** @type {?} */
var deleteBody = {
"oldRow": row,
"userId": this.userId
};
this.http.post(this.apiUrl + '/delete/' + this.tableObjectId, deleteBody, httpOptions).subscribe(function (dataReceived) {
console.log(dataReceived);
_this.emitData();
});
};
// Functions used to handle the focus on the textarea of a cell
/**
* @param {?} e
* @return {?}
*/
DataTableComponent.prototype.autoGrowTextZone = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.target.style.background = 'white';
e.target.style.border = '1px solid #ccc';
e.target.style.height = "0px";
e.target.style.height = (e.target.scrollHeight + 25) + "px";
//e.target.type= "date";
};
/**
* @param {?} e
* @return {?}
*/
DataTableComponent.prototype.autoResizeTextZone = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.target.style.background = 'transparent';
e.target.style.border = 'none';
e.target.style.height = "0px";
e.target.style.height = "100%";
//e.target.type = "text";
};
/**
* @param {?} value
* @return {?}
*/
DataTableComponent.prototype.isDate = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.regex.test(value)) {
return true;
}
return false;
};
/**
* @param {?} item
* @return {?}
*/
DataTableComponent.prototype.onItemSelect = /**
* @param {?} item
* @return {?}
*/
function (item) {
if (!this.requestBody.searchables.includes(item["itemName"])) {
this.requestBody.searchables.push(item["itemName"]);
this.selectedItems.set(item["id"], item["itemName"]);
}
this.emitData();
};
/**
* @param {?} item
* @return {?}
*/
DataTableComponent.prototype.OnItemDeSelect = /**
* @param {?} item
* @return {?}
*/
function (item) {
if (!this.requestBody.searchables.includes(item["itemName"])) {
this.requestBody.searchables.push(item["itemName"]);
//this.selectedItems.set(item["id"],item["itemName"]);
}
this.emitData();
};
/**
* @param {?} items
* @return {?}
*/
DataTableComponent.prototype.onSelectAll = /**
* @param {?} items
* @return {?}
*/
function (items) {
try {
for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
var item = items_1_1.value;
if (!this.requestBody.searchables.includes(item["itemName"])) {
this.requestBody.searchables.push(item["itemName"]);
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
}
finally { if (e_2) throw e_2.error; }
}
this.emitData();
var e_2, _a;
};
/**
* @return {?}
*/
DataTableComponent.prototype.onDeSelectAll = /**
* @return {?}
*/
function () {
this.requestBody.searchables = [];
this.emitData();
};
/**
* @param {?} searchEvent
* @return {?}
*/
DataTableComponent.prototype.searchTextInColumns = /**
* @param {?} searchEvent
* @return {?}
*/
function (searchEvent) {
this.requestBody.searchText = searchEvent;
this.requestBody.start = 0;
this.emitData();
};
/**
* @param {?} newDateColumnValue
* @return {?}
*/
DataTableComponent.prototype.changingDateColumn = /**
* @param {?} newDateColumnValue
* @return {?}
*/
function (newDateColumnValue) {
this.requestBody.searchDate.dateColumn = newDateColumnValue;
this.requestBody.start = 0;
this.emitData();
};
/**
* @param {?} newDateFrom
* @return {?}
*/
DataTableComponent.prototype.searchDateFromChange = /**
* @param {?} newDateFrom
* @return {?}
*/
function (newDateFrom) {
this.requestBody.searchDate.dateFrom = newDateFrom;
if (this.requestBody.searchDate.dateFrom > this.requestBody.searchDate.dateTo) {
this.requestBody.searchDate.dateTo = "";
}
this.emitData();
};
/**
* @param {?} newDateTo
* @return {?}
*/
DataTableComponent.prototype.searchDateToChange = /**
* @param {?} newDateTo
* @return {?}
*/
function (newDateTo) {
this.requestBody.searchDate.dateTo = newDateTo;
if (this.requestBody.searchDate.dateFrom > this.requestBody.searchDate.dateTo) {
this.requestBody.searchDate.dateFrom = "";
}
this.emitData();
};
//////
/**
* @param {?} value
* @return {?}
*/
DataTableComponent.prototype.castNumber = /**
* @param {?} value
* @return {?}
*/
function (value) {
return Number(value);
};
/**
* @param {?} a
* @param {?} b
* @return {?}
*/
DataTableComponent.prototype.MathMin = /**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
return Math.min(a, b);
};
/**
* @return {?}
*/
DataTableComponent.prototype.pageBack = /**
* @return {?}
*/
function () {
//this.dataTable.offset -= Math.min(this.dataTable.limit, this.dataTable.offset);
this.requestBody['start'] -= Math.min(Number(this.requestBody['length']), Number(this.requestBody['start']));
this.page -= 1;
this.emitData();
};
/**
* @return {?}
*/
DataTableComponent.prototype.pageForward = /**
* @return {?}
*/
function () {
//this.dataTable.offset += this.dataTable.limit;
console.log('old start :', this.requestBody['start']);
this.requestBody['start'] = Number(this.requestBody['length']) + Number(this.requestBody['start']);
console.log('length :', this.requestBody['length']);
console.log('new start :', this.requestBody['start']);
this.page += 1;
this.emitData();
};
/**
* @return {?}
*/
DataTableComponent.prototype.pageFirst = /**
* @return {?}
*/
function () {
this.requestBody['start'] = 0;
this.page = 1;
this.emitData();
};
/**
* @return {?}
*/
DataTableComponent.prototype.pageLast = /**
* @return {?}
*/
function () {
this.requestBody['start'] = (this.maxPage - 1) * Number(this.requestBody['length']);
this.page = this.maxPage;
this.emitData();
};
Object.defineProperty(DataTableComponent.prototype, "maxPage", {
get: /**
* @return {?}
*/
function () {
return Math.ceil(this.responseBody.recordsFiltered / Number(this.requestBody['length']));
},
enumerable: true,
configurable: true
});
DataTableComponent.decorators = [
{ type: Component, args: [{
selector: 'data-table-component',
template: "\n <div *ngIf=\"loading\" class=\"loader\"><div class=\"lds-ring\"><div></div><div></div><div></div><div></div></div></div>\n<div #datatableDiv style=\"margin: auto;\">\n <br>\n <div id=\"changeUser\" class=\"popup-demo\">\n <div style=\"display: inline\">\n <span style=\"margin-right: 20px;\">Changer d'utilisateur (Demo only (user2 for test) - actuellement '{{requestBody.userId}}')</span>\n <input type=\"text\" class=\"addUserInput\" id=\"changeUserInput\">\n <button (click)=\"changeUserCall()\" class=\"popupButton\">\n Changer d'utilisateur\n </button>\n </div>\n </div>\n\n <div *ngIf=\"readyToDisplay\">\n <button *ngIf=\"editable\" (click)=\"toggleEdit()\" class=\"validateButton\">\n Mode vue\n <img class=\"icon\" src=\"../assets/img/view.png\">\n </button>\n <button *ngIf=\"!editable\" (click)=\"toggleEdit()\" class=\"validateButton\">\n Mode \u00E9dition\n <img class=\"icon\" src=\"../assets/img/edit.png\">\n </button>\n <div *ngIf=\"infoTable.admins.includes(requestBody.userId)\">\n <button (click)=\"showUsersPopup = false; showRevokePopup = false; showGrantPopup = !showGrantPopup; existingUser = false;\" class=\"adminButton\" [ngClass]=\"{'popupSelected': (showGrantPopup)}\">\n <img class=\"icon\" src=\"../assets/img/unlock.png\">\n <span>Autoriser l'acc\u00E9s</span>\n </button>\n <button (click)=\"showUsersPopup = false; showRevokePopup = !showRevokePopup; showGrantPopup = false; existingUser = false;\" class=\"adminButton\" [ngClass]=\"{'popupSelected': (showRevokePopup)}\">\n <img class=\"icon\" src=\"../assets/img/lock.png\">\n <span>Restreindre l'acc\u00E9s</span>\n </button>\n <button (click)=\"showUsersPopup = !showUsersPopup; showRevokePopup = false; showGrantPopup = false; existingUser = false;\" class=\"adminButton\" [ngClass]=\"{'popupSelected': (showUsersPopup)}\">\n <img class=\"icon\" src=\"../assets/img/user.png\">\n <span>G\u00E9rer les utlisateurs</span>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"showUsersPopup\" id=\"usersPopup\" class=\"popup\">\n <hr>\n <h4>Liste des utilisateurs</h4>\n <hr>\n <div style=\"display: inline\">\n <input type=\"text\" class=\"addUserInput\" id=\"addUserInput\">\n <button (click)=\"addUserCall()\" class=\"popupButton\">\n Ajouter\n <img class=\"icon\" src=\"../assets/img/add.png\">\n </button>\n </div>\n <div id=\"existingUser\" *ngIf=\"existingUser\" style=\"color: purple;\">\n <span>Ce nom d'utilisateur existe d\u00E9ja dans ce datatable.</span>\n </div>\n <div *ngFor=\"let user of infoTable.users;\" class=\"divUser\">\n <img class=\"icon\" *ngIf=\"!infoTable.admins.includes(user)\" src=\"../assets/img/user.png\">\n <img class=\"icon\" *ngIf=\"infoTable.admins.includes(user)\" src=\"../assets/img/admin.png\">\n <span>{{user}}</span>\n <button *ngIf=\"!infoTable.admins.includes(user)\" (click)=\"grantAdminCall(user)\" class=\"popupButton\">Attribuer <br>le r\u00F4le admin</button>\n <button *ngIf=\"infoTable.admins.includes(user)\" (click)=\"revokeAdminCall(user)\" class=\"popupButton\">Retirer <br>le r\u00F4le admin</button>\n <button (click)=\"deleteUserCall(user)\" class=\"popupButton\">Supprimer <br>de la liste</button>\n </div>\n </div>\n \n <div *ngIf=\"showGrantPopup\" id=\"usersPopup\" class=\"popup\">\n <hr>\n <h4>Attribuer l'acc\u00E9s aux lignes s\u00E9lectionn\u00E9s \u00E0 un utilisateur</h4>\n \n <select class=\"selectUser\" #selectUserGrant (change)=\"userSelected = selectUserGrant.value;\">\n <option value=''></option>\n <option *ngFor=\"let user of infoTable.users; let indexColumn = index\" value='{{user}}'>{{user}}</option>\n </select>\n <button (click)=\"grantAccessToUserCall(userSelected)\" class=\"popupButton\">Attribuer</button>\n </div>\n \n <div *ngIf=\"showRevokePopup\" id=\"usersPopup\" class=\"popup\">\n <hr>\n <h4>Retirer l'acc\u00E9s aux lignes s\u00E9lectionn\u00E9s \u00E0 un utilisateur</h4>\n \n <select class=\"selectUser\" #selectUserRevoke (change)=\"userSelected = selectUserRevoke.value;\">\n <option value=''></option>\n <option *ngFor=\"let user of infoTable.users; let indexColumn = index\" value='{{user}}'>{{user}}</option>\n </select>\n <button (click)=\"revokeAccessFromUserCall(userSelected)\" class=\"popupButton\">Retirer</button>\n </div>\n\n <div *ngIf=\"readyToDisplay\">\n \n <div class=\"userFilters\">\n <div class=\"dateFilter\" *ngIf=\"dateHeadersName.length > 0\">\n <div class=\"dateFilterTop\">\n <span>De </span>\n <input type=\"date\" [(ngModel)]=\"requestBody.searchDate.dateFrom\" (ngModelChange)=\"searchDateFromChange($event)\" class=\" dateInput\"> \n <img class=\"icon\" src=\"../assets/img/calendar.png\">\n <span> \u00E0 </span>\n <input type=\"date\" [(ngModel)]=\"requestBody.searchDate.dateTo\" (ngModelChange)=\"searchDateToChange($event)\" class=\" dateInput\">\n <img class=\"icon\" src=\"../assets/img/calendar.png\">\n </div>\n <div class=\"dateFilterBottom\">\n <span>Sur la colonne </span>\n <select class=\"selectDateColumn\" #selectDateColumn (change)=\"changingDateColumn(selectDateColumn.value);\">\n <option value='\"\"' *ngIf=\"requestBody.searchDate.dateColumn == ''\">> S\u00E9lectionner une colonne de type date</option>\n <option value='\"\"' *ngIf=\"requestBody.searchDate.dateColumn != ''\">> Annuler</option>\n <option *ngFor=\"let column of dateHeadersName; let indexColumn = index\" value='{{column}}'>{{column}}</option>\n </select>\n </div>\n </div>\n \n <div _ngcontent-c1=\"\" class=\"o_cp_controller\">\n <div _ngcontent-c1=\"\" class=\"o_control_panel\">\n <div _ngcontent-c1=\"\" class=\"o_cp_searchview\" role=\"search\">\n <div _ngcontent-c1=\"\" aria-autocomplete=\"list\" class=\"o_searchview\" role=\"search\">\n <span _ngcontent-c1=\"\" aria-label=\"Advanced Search...\" class=\"o_searchview_more fa fa-search-minus\" role=\"img\" title=\"Recherche avanc\u00E9e...\"></span><div _ngcontent-c1=\"\" class=\"o_searchview_input_container\">\n <input _ngcontent-c1=\"\" accesskey=\"Q\" aria-haspopup=\"true\" class=\"o_searchview_input\" placeholder=\"Recherche\u2026\" role=\"searchbox\" type=\"text\" name=\"search\" [(ngModel)]=\"requestBody.searchText\" (ngModelChange)=\"searchTextInColumns($event)\" autocomplete=\"on\">\n <div _ngcontent-c1=\"\" class=\"dropdown-menu o_searchview_autocomplete\" role=\"menu\"></div></div></div></div>\n \n <div _ngcontent-c1=\"\" class=\"o_cp_right\">\n \n \n \n \n <angular2-multiselect \n name=\"dropdown-1\" \n [data]=\"dropdownList\"\n [(ngModel)]=\"selectedItems[1]\" \n [settings]=\"dropdownSettings\" \n (onSelect)=\"onItemSelect($event)\" \n (onDeSelect)=\"OnItemDeSelect($event)\"\n (onSelectAll)=\"onSelectAll($event)\"\n (onDeSelectAll)=\"onDeSelectAll()\" disabled>\n </angular2-multiselect>\n \n </div></div></div>\n </div>\n\n\n <div id=\"datatable\">\n <div id=\"datatable-header\" #datatableHeader>\n <div class=\"datatable-index\">\n <input type=\"checkbox\" id=\"row-all\" (click)=\"selectAll()\">\n <label *ngIf=\"!selectAllRows\" for=\"row-all\" style=\"font-size:10px;\">Tout</label>\n <label *ngIf=\"selectAllRows\" for=\"row-all\" style=\"font-size:10px;\">Aucun</label>\n </div>\n <div class=\"datatable-main\">\n <div class=\"datatable-cell\" *ngFor=\"let columnName of headersName; let indexColumn = index\" (click)=\"headerNameClicked(columnName)\">\n <span>{{columnName}}</span>\n <span class=\"column-sort-icon\">\n <span class=\"glyphicon glyphicon-sort column-sortable-icon\" *ngIf=\"requestBody['order']['column'] != columnName\"></span>\n <span *ngIf=\"requestBody['order']['column'] == columnName\">\n <span class=\"glyphicon glyphicon-triangle-top\" *ngIf=\"requestBody['order']['dir'] == 'asc'\"></span>\n <span class=\"glyphicon glyphicon-triangle-bottom\" *ngIf=\"requestBody['order']['dir'] != 'asc'\"></span>\n </span>\n </span>\n </div>\n <div class=\"datatable-cell datatable-action\">\n <span>Actions</span>\n </div>\n </div>\n \n </div>\n \n <div id=\"datatable-body\">\n <div #datatableRows *ngFor=\"let row of dataDisplayed; let indexRow = index\" class=\"datatable-row\" [ngClass]=\"{'selectedRow': (row.selected)}\">\n <div class=\"datatable-index\">\n <input type=\"checkbox\" id=\"row-{{indexRow}}\" [(ngModel)]=\"row.selected\">\n <label for=\"row-{{indexRow}}\">{{requestBody['start']+indexRow+1}}</label>\n </div>\n <div class=\"datatable-main\">\n <div (click)=\"selectRow(indexRow)\" id=\"row-{{indexRow}}-col-{{indexCell}}\" class=\"datatable-cell datatable-main-cell\" *ngFor=\"let columnName of headersName; let indexCell = index\">\n <textarea\n id=\"row-{{indexRow}}-col-{{indexCell}}\" \n name=\"row-{{indexRow}}-col-{{indexCell}}\"\n [ngModel]=\"dataDisplayed[indexRow][columnName]\"\n (change)=\"onValueUpdate($event, indexRow, columnName)\"\n (focus)=\"autoGrowTextZone($event)\" \n (focusout)=\"autoResizeTextZone($event)\" \n *ngIf=\"editable && !isDate(dataDisplayed[indexRow][columnName])\"\n type=\"text\" \n class=\"form-control input-sm\" \n style=\"background-color: transparent;\"\n ></textarea>\n \n <input\n id=\"row-{{indexRow}}-col-{{indexCell}}\" \n name=\"row-{{indexRow}}-col-{{indexCell}}\"\n [ngModel] =\"dataDisplayed[indexRow][columnName] | date:'yyyy-MM-dd'\"\n (ngModelChange)=\"onDateValueUpdate($event, indexRow, columnName)\"\n (focus)=\"autoGrowTextZone($event)\" \n (focusout)=\"autoResizeTextZone($event)\" \n *ngIf=\"editable && isDate(dataDisplayed[indexRow][columnName])\"\n type=\"date\"\n class=\"form-control input-sm date dateInput\"\n style=\"background-color: transparent;\"\n >\n\n <span *ngIf=\"!editable\">{{dataDisplayed[indexRow][columnName]}}</span>\n\n <hr *ngIf=\"columnName == searchColumnName\" style=\"background: red;margin: 0;width: 100%;height: 1px;\">\n </div>\n <div class=\"datatable-cell datatable-main-cell\">\n <button (click)=\"deleteRow(row)\" class=\"btn btn-sm btn-default\" >\n <img class=\"icon\" src=\"../assets/img/bin.png\">\n </button>\n </div>\n </div>\n \n </div>\n </div>\n </div>\n \n <div class=\"pagination-box\">\n <div class=\"pagination-range\">\n Affichage:\n <span [textContent]=\"requestBody['start'] + 1\"></span>\n -\n <span [textContent]=\"MathMin( (castNumber(requestBody['start']) + castNumber(requestBody['length'])), responseBody.recordsFiltered)\"></span>\n /\n <span [textContent]=\"responseBody.recordsFiltered\"></span>\n </div>\n <div class=\"pagination-controllers\">\n <div class=\"pagination-limit\">\n <div class=\"input-group\">\n <span class=\"input-group-addon\">Nombre de lignes par page:</span>\n <input #limitInput type=\"number\" class=\"form-control\" min=\"1\" step=\"1\"\n [ngModel]=\"requestBody['length']\" (blur)=\"requestBody['length'] = castNumber(limitInput.value); emitData()\"\n (keyup.enter)=\"requestBody['length'] = castNumber(limitInput.value); emitData()\" (keyup.esc)=\"limitInput.value = castNumber(requestBody['length'])\"/>\n </div>\n </div>\n <div class=\" pagination-pages\">\n <button [disabled]=\"requestBody['start'] <= 0\" (click)=\"pageFirst()\" class=\"btn btn-default pagination-firstpage\" id=\"pageFirst\">«</button>\n <button [disabled]=\"requestBody['start'] <= 0\" (click)=\"pageBack()\" class=\"btn btn-default pagination-prevpage\">‹</button>\n <div class=\"pagination-page\">\n <div class=\"input-group\">\n <input #pageInput type=\"number\" class=\"form-control\" min=\"1\" step=\"1\" max=\"{{maxPage}}\"\n [ngModel]=\"page\" (blur)=\"page = castNumber(pageInput.value)\"\n (keyup.enter)=\"page = castNumber(pageInput.value)\" (keyup.esc)=\"pageInput.value = castNumber(page)\"/>\n </div>\n </div>\n <button [disabled]=\"(requestBody['start'] + requestBody['length']) >= responseBody.recordsFiltered\" (click)=\"pageForward()\" class=\"btn btn-default pagination-nextpage\">›</button>\n <button [disabled]=\"(requestBody['start'] + requestBody['length']) >= responseBody.recordsFiltered\" (click)=\"pageLast()\" class=\"btn btn-default pagination-lastpage\">»</button>\n </div>\n </div>\n </div>\n \n\n </div>\n</div>\n",
styles: ["textarea{resize:none;overflow:hidden;height:100%;background:0 0;border:none;border-radius:0;outline:0;box-shadow:none}.icon{margin:3px;height:20px;width:20px}.searchIcon{margin-top:auto;margin-bottom:auto;height:30px;width:30px}.noDisplay{display:none}.validateButton{width:100%;border-radius:5px;font-size:large;font-weight:600}.userFilters{margin:auto;width:100%;height:auto;padding-top:50px;border-bottom:1px solid #ccc;display:inline-flex}.dateFilter{width:45%;font-size:15px}.dateFilter>*{width:100%;margin-bottom:10px}.dateFilterTop input{background-color:#fff}.selectDateColumn{text-align:center;border-radius:20px;margin-left:15px;width:60%;padding:5px 10px;background-color:#fff}.searchFilter{display:flex;align-items:center;justify-content:center;height:auto;background:#eee;border-radius:40px;width:50%;margin-left:2%;box-shadow:0 1px 5px #959595}.multiSelect{min-width:110px;margin-left:3%;width:50%}.searchText{min-width:110px;margin-left:2%;width:25%}.fullHeightInput{height:42px;box-shadow:none;border:2px solid #eee;box-shadow:0 1px 5px #959595}.dateInput{min-width:110px;width:34%;text-align:right;margin:1%;border:none;box-shadow:0 1px 5px #959595}#datatable{display:flex;flex-direction:column;width:100%;margin-top:50px;overflow-x:scroll}#datatable-header{display:flex;flex-direction:row;width:100%;font-weight:bolder}#datatable-header .datatable-cell{padding:10px}.datatable-main{display:flex;flex-direction:row}.datatable-index{display:flex;flex-direction:row;width:50px;border:.7px ridge #aaa;text-align:center;align-items:center;justify-content:center}.datatable-index span{width:50px}.datatable-index input{width:15px}.datatable-index label{width:35px}.datatable-action{display:flex;flex-direction:row;width:100px;border:.7px ridge #aaa;text-align:center;align-items:center;justify-content:center}.datatable-action button,.datatable-action span{width:100px}#datatable-body{display:flex;flex-direction:column;width:100%}.datatable-row{display:flex;flex-direction:row;width:100%}.datatable-row:hover button,.datatable-row:hover div{background:#dadada!important}.datatable-row:nth-child(odd) button,.datatable-row:nth-child(odd) div{background:#fff}.datatable-row:nth-child(even) button,.datatable-row:nth-child(even) div{background:#f6f6f6}.datatable-cell{width:150px;border:.7px ridge #aaa;text-align:center;padding:5px;align-items:center;justify-content:center;display:flex}.datatable-cell span{margin-right:2px}input[type=date]{padding:0}.column-sort-icon{float:right;margin-right:8px}.column-sort-icon .column-sortable-icon{color:#d3d3d3}.pagination-box{position:relative;margin-top:10px;margin-bottom:30px}.pagination-range{margin-top:7px;margin-left:3px;display:inline-block}.pagination-controllers{float:right}.pagination-controllers input{min-width:60px;text-align:right}.pagination-limit{margin-right:25px;display:inline-table;width:150px}.pagination-pages{display:inline-block}.pagination-page{width:110px;display:inline-table}.pagination-box button{outline:0!important}.pagination-firstpage,.pagination-lastpage,.pagination-nextpage,.pagination-prevpage{vertical-align:top}.pagination-reload{color:gray;font-size:12px}.loader{position:fixed;width:100vw;height:100vh;background:#fff;opacity:.5;display:flex;align-items:center;justify-content:center}.lds-ring{display:inline-block;position:relative;width:128px;height:128px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:102px;height:102px;margin:10px;border:10px solid #aaa;border-radius:50%;-webkit-animation:1.2s cubic-bezier(.5,0,.5,1) infinite