adn-datatable
Version:
Datatable component integrable to any angular project.
1,003 lines (998 loc) • 171 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@angular/platform-browser'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/common'), require('@angular/forms'), require('angular2-multiselect-dropdown')) :
typeof define === 'function' && define.amd ? define('adn-datatable', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@angular/platform-browser', '@ng-bootstrap/ng-bootstrap', '@angular/common', '@angular/forms', 'angular2-multiselect-dropdown'], factory) :
(factory((global['adn-datatable'] = {}),global.ng.core,global.rxjs,global.ng.common.http,global.ng.platformBrowser,null,global.ng.common,global.ng.forms,null));
}(this, (function (exports,core,rxjs,http,platformBrowser,ngBootstrap,common,forms,angular2MultiselectDropdown) { 'use strict';
/**
* @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: core.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;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m)
return m.call(o);
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var DataTableComponent = /** @class */ (function () {
function DataTableComponent(http$$1, renderer) {
this.http = http$$1;
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 rxjs.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 http.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 http.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 http.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 http.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 http.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 http.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 http.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 http.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 http.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: core.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]=\"dataDis