adn-datatable
Version:
Datatable component integrable to any angular project.
2 lines • 37 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(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")):"function"==typeof define&&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"],t):t(e["adn-datatable"]={},e.ng.core,e.rxjs,e.ng.common.http,e.ng.platformBrowser,null,e.ng.common,e.ng.forms,null)}(this,function(e,t,n,o,a,i,s,r,l){"use strict";var d=function(){function e(){this.title="Datatable EPT / ADN",this.ready=!1}return e.prototype.callme=function(){this.ready=!this.ready,console.log("jsdZJ")},e.decorators=[{type:t.Component,args:[{selector:"app-root",template:'\n\x3c!--\n<data-table-component width="100%" oddRowColor="" evenRowColor="" headerColor="red" [userId]="\'user2\'" [apiUrl]="\'http://localhost:1337\'" [tableObjectId]="\'dataCollection1\'"></data-table-component>\n--\x3e\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\x3c!-- <button (click)="callme()">asdsadoiio</button> --\x3e',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}"]}]}],e.ctorParameters=function(){return[]},e}();function c(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}var p=function(){function e(e,t){this.http=e,this.renderer=t,this.oddRowColor="#fff",this.evenRowColor="#f6f6f6",this.headerColor="aliceblue",this.ready=!1,this.datatableWidth="100%",this.enableAddUser=!0,this.existingUser=!1,this.selectAllRows=!1,this.showUsersPopup=!1,this.showGrantPopup=!1,this.showRevokePopup=!1,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="",this.page=1,this.headersName=[],this.dateHeadersName=[],this.editable=!1,this.dropdownList=[],this.selectedItems=new Map,this.dropdownSettings={singleSelection:!1,text:"Filtrer",selectAllText:"Tout sélectionner",unSelectAllText:"Tout désélectionner",enableSearchFilter:!0},this.readyToDisplay=!1,this.loading=!1,this.dataSubject=new n.BehaviorSubject(""),this.data$=this.dataSubject.asObservable(),this.regex=/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/,this.val=!1}return e.prototype.ngOnDestroy=function(){this.subscription.unsubscribe()},e.prototype.ngAfterViewInit=function(){var n=this;this.datatableRows.changes.subscribe(function(e){e.toArray().forEach(function(e,t){e.nativeElement.style.background=t%2?n.oddRowColor:n.evenRowColor}),n.datatableHeader.nativeElement.style["background-color"]=n.headerColor,n.datatableDiv.nativeElement.style["max-width"]=n.datatableWidth}),console.log(this.datatableDiv),console.log(this.datatableHeader)},e.prototype.ngOnChanges=function(e){e.ready&&this.ready&&(this.emitData(),console.log("input changed"))},e.prototype.ngOnInit=function(){var d=this;this.subscription=this.data$.subscribe(function(e){d.selectAllRows=!1,d.readyToDisplay&&(document.getElementById("row-all").checked=!1),d.requestBody.userId=d.userId,console.log(e),console.log(d.requestBody),d.requestBody.draw=d.requestBody.draw+1,d.getData().subscribe(function(t){if(0==d.readyToDisplay){d.headersName=[],d.dateHeadersName=[];var n=d;if(Object.keys(t.data[0]).forEach(function(e){"objectId"!=e&&"createdAt"!=e&&"updatedAt"!=e&&"AuthUserIds"!=e&&n.headersName.push(e)}),d.headersName.forEach(function(e){d.isDate(t.data[0][e])&&d.dateHeadersName.push(e)}),0<d.headersName.length){var e=0;d.dropdownList=[];try{for(var a=c(d.headersName),o=a.next();!o.done;o=a.next()){var i=o.value;d.dropdownList.push({id:e,itemName:i}),e++}}catch(l){s={error:l}}finally{try{o&&!o.done&&(r=a["return"])&&r.call(a)}finally{if(s)throw s.error}}}}var s,r;d.responseBody=t,d.infoTable=d.responseBody.info,d.dataDisplayed=d.responseBody.data.slice(0,d.requestBody.length),d.dataDisplayed.forEach(function(e){e.selected=!1}),console.log(d.dataDisplayed),d.loading=!1,d.readyToDisplay=!0})})},e.prototype.selectAll=function(){this.selectAllRows=document.getElementById("row-all").checked,console.log(this.selectAllRows),this.selectAllRows?this.dataDisplayed.forEach(function(e){e.selected=!0}):this.dataDisplayed.forEach(function(e){e.selected=!1})},e.prototype.selectRow=function(e){0==this.editable&&(this.dataDisplayed[e].selected=!this.dataDisplayed[e].selected)},e.prototype.changeUserCall=function(){var e=document.getElementById("changeUserInput").value;""!=e&&(this.showUsersPopup=!1,this.showRevokePopup=!1,this.showGrantPopup=!1,this.existingUser=!1,this.userId=e,this.emitData())},e.prototype.logSelected=function(){console.log(this.dataDisplayed)},e.prototype.headerNameClicked=function(e){console.log("click on column "+e);var t=this.requestBody.order.column;t!=e?this.requestBody.order.column=e:t==e&&(this.requestBody.order.dir="asc"==this.requestBody.order.dir?"desc":"asc"),this.emitData()},e.prototype.getData=function(){var e={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.post(this.apiUrl+"/get/"+this.tableObjectId,this.requestBody,e)},e.prototype.modifyData=function(e,t){delete e.selected,delete t.selected;var n={oldRow:e,newRow:t,userId:this.userId},a={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.post(this.apiUrl+"/modify/"+this.tableObjectId,n,a)},e.prototype.addUserCall=function(){var t=this,e=document.getElementById("addUserInput").value;""==e||this.infoTable.users.includes(e)?this.infoTable.users.includes(e)&&(this.existingUser=!0):(this.enableAddUser=!1,this.existingUser=!1,this.addUser(e).subscribe(function(e){console.log(e),t.enableAddUser=!0,t.emitData()}))},e.prototype.addUser=function(e){var t={userId:e},n={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.put(this.apiUrl+"/users/"+this.tableObjectId,t,n)},e.prototype.deleteUserCall=function(e){var t=this;this.infoTable.users.includes(e)&&this.deleteUser(e).subscribe(function(e){console.log(e),t.emitData()})},e.prototype.deleteUser=function(e){var t={userId:e},n={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.post(this.apiUrl+"/users/"+this.tableObjectId,t,n)},e.prototype.grantAdminCall=function(e){var t=this;this.grantAdmin(e).subscribe(function(e){console.log(e),t.emitData()})},e.prototype.grantAdmin=function(e){var t={userId:e},n={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.put(this.apiUrl+"/admins/"+this.tableObjectId,t,n)},e.prototype.revokeAdminCall=function(e){var t=this;this.revokeAdmin(e).subscribe(function(e){console.log(e),t.emitData()})},e.prototype.revokeAdmin=function(e){var t={userId:e},n={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.post(this.apiUrl+"/admins/"+this.tableObjectId,t,n)},e.prototype.grantAccessToUserCall=function(e){var t=this;if(""!=e){var n=[];this.dataDisplayed.forEach(function(e){1==e.selected&&n.push(e.objectId)}),this.grantAccessToUser(e,n).subscribe(function(e){console.log(e),t.emitData()})}},e.prototype.grantAccessToUser=function(e,t){var n={userId:e,rowsSelected:t},a={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.put(this.apiUrl+"/access/"+this.tableObjectId,n,a)},e.prototype.revokeAccessFromUserCall=function(e){var t=this;if(""!=e){var n=[];this.dataDisplayed.forEach(function(e){1==e.selected&&n.push(e.objectId)}),this.revokeAccessFromUser(e,n).subscribe(function(e){console.log(e),t.emitData()})}},e.prototype.revokeAccessFromUser=function(e,t){var n={userId:e,rowsSelected:t},a={headers:new o.HttpHeaders({"Content-Type":"application/json"})};return this.http.post(this.apiUrl+"/access/"+this.tableObjectId,n,a)},e.prototype.emitData=function(){this.loading=!0,this.dataSubject.next(String(Date.now()))},e.prototype.toggleEdit=function(){this.editable=!this.editable,this.dataDisplayed.forEach(function(e){e.selected=!1}),console.log(this.dataDisplayed)},e.prototype.onValueUpdate=function(e,t,n){var a=this;console.log("Modified row ",t," cell ",n,". From value '",this.responseBody.data[t][n],"' to value '",e.target.value,"'.");var o=JSON.parse(JSON.stringify(this.dataDisplayed[t])),i=JSON.parse(JSON.stringify(this.dataDisplayed[t]));i[n]=e.target.value,this.modifyData(o,i).subscribe(function(e){console.log(e),a.emitData()})},e.prototype.onDateValueUpdate=function(e,t,n){var a=this;console.log("Modified row ",t," cell ",n,". From value '",this.responseBody.data[t][n],"' to value '",e,"'.");var o=JSON.parse(JSON.stringify(this.dataDisplayed[t])),i=JSON.parse(JSON.stringify(this.dataDisplayed[t]));i[n]=e,this.modifyData(o,i).subscribe(function(e){console.log(e),a.emitData()})},e.prototype.deleteRow=function(e){var t=this,n={headers:new o.HttpHeaders({"Content-Type":"application/json"})},a={oldRow:e,userId:this.userId};this.http.post(this.apiUrl+"/delete/"+this.tableObjectId,a,n).subscribe(function(e){console.log(e),t.emitData()})},e.prototype.autoGrowTextZone=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.prototype.autoResizeTextZone=function(e){e.target.style.background="transparent",e.target.style.border="none",e.target.style.height="0px",e.target.style.height="100%"},e.prototype.isDate=function(e){return!!this.regex.test(e)},e.prototype.onItemSelect=function(e){this.requestBody.searchables.includes(e.itemName)||(this.requestBody.searchables.push(e.itemName),this.selectedItems.set(e.id,e.itemName)),this.emitData()},e.prototype.OnItemDeSelect=function(e){this.requestBody.searchables.includes(e.itemName)||this.requestBody.searchables.push(e.itemName),this.emitData()},e.prototype.onSelectAll=function(e){try{for(var t=c(e),n=t.next();!n.done;n=t.next()){var a=n.value;this.requestBody.searchables.includes(a.itemName)||this.requestBody.searchables.push(a.itemName)}}catch(s){o={error:s}}finally{try{n&&!n.done&&(i=t["return"])&&i.call(t)}finally{if(o)throw o.error}}var o,i;this.emitData()},e.prototype.onDeSelectAll=function(){this.requestBody.searchables=[],this.emitData()},e.prototype.searchTextInColumns=function(e){this.requestBody.searchText=e,this.requestBody.start=0,this.emitData()},e.prototype.changingDateColumn=function(e){this.requestBody.searchDate.dateColumn=e,this.requestBody.start=0,this.emitData()},e.prototype.searchDateFromChange=function(e){this.requestBody.searchDate.dateFrom=e,this.requestBody.searchDate.dateFrom>this.requestBody.searchDate.dateTo&&(this.requestBody.searchDate.dateTo=""),this.emitData()},e.prototype.searchDateToChange=function(e){this.requestBody.searchDate.dateTo=e,this.requestBody.searchDate.dateFrom>this.requestBody.searchDate.dateTo&&(this.requestBody.searchDate.dateFrom=""),this.emitData()},e.prototype.castNumber=function(e){return Number(e)},e.prototype.MathMin=function(e,t){return Math.min(e,t)},e.prototype.pageBack=function(){this.requestBody.start-=Math.min(Number(this.requestBody.length),Number(this.requestBody.start)),this.page-=1,this.emitData()},e.prototype.pageForward=function(){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()},e.prototype.pageFirst=function(){this.requestBody.start=0,this.page=1,this.emitData()},e.prototype.pageLast=function(){this.requestBody.start=(this.maxPage-1)*Number(this.requestBody.length),this.page=this.maxPage,this.emitData()},Object.defineProperty(e.prototype,"maxPage",{get:function(){return Math.ceil(this.responseBody.recordsFiltered/Number(this.requestBody.length))},enumerable:!0,configurable:!0}),e.decorators=[{type:t.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 édition\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és</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és</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érer 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éja 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ôle admin</button>\n <button *ngIf="infoTable.admins.includes(user)" (click)="revokeAdminCall(user)" class="popupButton">Retirer <br>le rôle 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és aux lignes sélectionnés à 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és aux lignes sélectionnés à 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> à </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électionner 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ée..."></span><div _ngcontent-c1="" class="o_searchview_input_container">\n <input _ngcontent-c1="" accesskey="Q" aria-haspopup="true" class="o_searchview_input" placeholder="Recherche…" 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 lds-ring;animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-ring;border-color:#aaa transparent transparent}.lds-ring div:nth-child(1){-webkit-animation-delay:-.45s;animation-delay:-.45s}.lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}.lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}@-webkit-keyframes lds-ring{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} lds-ring{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.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}.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}.o_control_panel[_ngcontent-c1]{display:flex;flex-flow:column wrap-reverse;padding-top:10px;padding-right:16px;padding-bottom:10px;background-color:#fff}.o_control_panel[_ngcontent-c1]>.o_cp_searchview[_ngcontent-c1]{width:50%;min-height:30px} (min-width:768px){.o_searchview[_ngcontent-c1]{border-bottom:1px solid #8f8f8f}}.o_searchview[_ngcontent-c1]{align-items:flex-end;position:relative;padding:0 20px 1px 0}.o_searchview[_ngcontent-c1] .o_searchview_more[_ngcontent-c1]{position:absolute;top:4px;left:auto;bottom:auto;right:0;font-size:16px;cursor:pointer}.o_searchview[_ngcontent-c1] .o_searchview_input_container[_ngcontent-c1]{position:relative;display:flex;flex-flow:row wrap}.o_searchview[_ngcontent-c1] .o_searchview_input_container[_ngcontent-c1] .o_searchview_input[_ngcontent-c1]{width:100px;flex:1 0 auto}.o_searchview[_ngcontent-c1] .o_searchview_input[_ngcontent-c1]{border:none;outline:0}[type=number][_ngcontent-c1],[type=password][_ngcontent-c1],[type=text][_ngcontent-c1],select[_ngcontent-c1],textarea[_ngcontent-c1]{width:100%;display:block;outline:0}button[_ngcontent-c1],input[_ngcontent-c1]{overflow:visible}button[_ngcontent-c1],input[_ngcontent-c1],optgroup[_ngcontent-c1],select[_ngcontent-c1],textarea[_ngcontent-c1]{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}.o_searchview[_ngcontent-c1] .o_searchview_input_container[_ngcontent-c1] .o_searchview_autocomplete[_ngcontent-c1]{position:absolute;top:100%;left:auto;bottom:auto;right:auto;width:100%}.dropdown-menu[_ngcontent-c1]{box-shadow:0 6px 12px -4px rgba(0,0,0,.25);position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1.08333333rem;color:#666;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #dee2e6;border-radius:0}.o_control_panel[_ngcontent-c1]>.o_cp_right[_ngcontent-c1]{width:50%;margin-top:5px}.o_search_options[_ngcontent-c1]{margin:auto 0;display:block}.o_cp_controller{width:50%}.o_dropdown[_ngcontent-c1]{white-space:nowrap;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-group-vertical[_ngcontent-c1],.btn-group[_ngcontent-c1]{position:relative;display:inline-flex;vertical-align:middle}.adminButton{width:33.333%;border-radius:5px;font-size:large;font-weight:600}.adminButton img{width:20px;height:20px;margin-right:10px}.addUserInput,.selectUser{width:200px!important;display:inline!important;border-radius:5px}.selectedRow div{background-color:#add8e6!important}.popupButton{background:#ddd;color:#555;border:1px solid #aaa;border-radius:5px;margin:10px!important}.divUser{display:flex;align-items:inherit}.divUser span{display:block;width:200px;border-bottom:1px solid #aaa}.divUser button{width:150px}.popup{display:flex;flex-direction:column;align-items:center;background:#efefef;border-radius:0 0 10px 10px}.popup-demo{margin-bottom:40px;display:flex;flex-direction:column;align-items:center;background:#ddd;border:1px solid #333;border-radius:10px}.popupSelected{background-color:#aaa}#datatable-header,.datatable-row[_ngcontent-c1]:nth-child(even) button[_ngcontent-c1],.datatable-row[_ngcontent-c1]:nth-child(even) div[_ngcontent-c1],.datatable-row[_ngcontent-c1]:nth-child(odd) button[_ngcontent-c1],.datatable-row[_ngcontent-c1]:nth-child(odd) div[_ngcontent-c1]{background:0 0}"]}]}],e.ctorParameters=function(){return[{type:o.HttpClient},{type:t.Renderer2}]},e.propDecorators={datatableDiv:[{type:t.ViewChild,args:["datatableDiv"]}],datatableHeader:[{type:t.ViewChild,args:["datatableHeader"]}],datatableRows:[{type:t.ViewChildren,args:["datatableRows"]}],oddRowColor:[{type:t.Input}],evenRowColor:[{type:t.Input}],headerColor:[{type:t.Input}],userId:[{type:t.Input}],apiUrl:[{type:t.Input}],ready:[{type:t.Input}],tableObjectId:[{type:t.Input}],datatableWidth:[{type:t.Input}]},e}(),u=function(){function e(){this.requestBody={draw:0,start:0,length:0,searchText:"",orders:[],searchables:[],dateColumn:0}}return e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[]},e}(),h=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[d,p],imports:[a.BrowserModule,r.FormsModule,o.HttpClientModule,i.NgbModule,s.CommonModule,l.AngularMultiSelectModule],providers:[u],bootstrap:[d],exports:[p]}]}],e}();e.DatatableModule=h,e.ɵa=d,e.ɵb=p,e.ɵc=u,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=adn-datatable.umd.min.js.map