@universis/ngx-tables 0.7.14 → 0.7.19

package/fesm2015/universis-ngx-tables.js

@@ -88,7 +88,7 @@ class AdvancedColumnFormatter {
             if (options.navigationExtras && typeof options.navigationExtras.skipLocationChange !== 'undefined') {
                 skipLocationChange = options.navigationExtras.skipLocationChange;
             }
-            return router.createUrlTree(commands, {
+            return router.createUrlTree(commands, options.navigationExtras = {
                 relativeTo: activatedRoute,
                 queryParams,
                 replaceUrl,
@@ -2015,6 +2015,11 @@ class AdvancedTableSearchBaseComponent {
         }
     }
 }
+AdvancedTableSearchBaseComponent.decorators = [
+    { type: Component, args: [{
+                template: ''
+            }] }
+];
 AdvancedTableSearchBaseComponent.propDecorators = {
     filterChange: [{ type: Output }],
     filter: [{ type: Input }]
@@ -2156,12 +2161,12 @@ const AdvancedTableModalBaseTemplate = `
     <div class="row mt-3">
       <div class="col-12 col-lg-3">
         <div class="input-group mb-3">
-          <input spellcheck="false" type="text"
+          <input spellcheck="false" type="text" #searchElement
                  (keyup)="onKeyUp($event)" [(ngModel)]="searchText"
                  class="form-control bg-gray-100 border-0"
                  placeholder="{{'Tables.SearchPlaceholder' | translate}}" aria-label="Search" aria-describedby="basic-addon2">
           <div class="input-group-append">
-            <button class="btn btn-default bg-gray-100 border-0" type="button">
+            <button class="btn btn-default bg-gray-100 border-0" type="button" (click)="onSearch()">
               <i class="fa fa-search text-secondary"></i>
             </button>
           </div>
@@ -2271,7 +2276,11 @@ class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
         this._template = new TemplatePipe();
     }
     ngAfterViewInit() {
-        //
+        setTimeout(() => {
+            if (this.searchElement && this.searchElement.nativeElement) {
+                this.searchElement.nativeElement.focus();
+            }
+        }, 0);
     }
     _getInputs(componentType) {
         const props = componentType.__prop__metadata__;
@@ -2395,12 +2404,17 @@ class AdvancedTableModalBaseComponent extends RouterModalOkCancel {
         this.advancedTable.dataTable.page.len(value).draw();
     }
     onKeyUp(event) {
-        if (event.code === 'Enter') {
+        if (event.key === 'Enter' || event.key === 'Return') {
             // loading
             this.loading = true;
             this.advancedTable.search(event.target.value);
         }
     }
+    onSearch() {
+        // loading
+        this.loading = true;
+        this.advancedTable.search(this.searchText);
+    }
     /**
      *
      * Reads the modal table and returns a list of filters to use in the table
@@ -2516,6 +2530,7 @@ AdvancedTableModalBaseComponent.propDecorators = {
     emptyTable: [{ type: ViewChild, args: ['emptyTable',] }],
     dropdownFilter: [{ type: ViewChild, args: ['dropdownFilter',] }],
     dropdownLength: [{ type: ViewChild, args: ['dropdownLength',] }],
+    searchElement: [{ type: ViewChild, args: ['searchElement',] }],
     tableConfig: [{ type: Input, args: ['tableConfig',] }],
     tableConfigSrc: [{ type: Input, args: ['tableConfigSrc',] }],
     pageLength: [{ type: Input, args: ['pageLength',] }],
@@ -2525,11 +2540,20 @@ AdvancedTableModalBaseComponent.propDecorators = {
 };
 
 class AdvancedSelectComponent extends AdvancedTableModalBaseComponent {
-    constructor(router, activatedRoute, context, advancedFilterValueProvider, datePipe, _modalRef) {
+    constructor(router, activatedRoute, context, advancedFilterValueProvider, datePipe, _modalRef, el) {
         super(router, activatedRoute, context, advancedFilterValueProvider, datePipe);
         this._modalRef = _modalRef;
+        this.el = el;
         this.dismiss = new EventEmitter();
     }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        setTimeout(() => {
+            if (this.searchElement && this.searchElement.nativeElement) {
+                this.searchElement.nativeElement.focus();
+            }
+        }, 0);
+    }
     ok() {
         return __awaiter(this, void 0, void 0, function* () {
             this._modalRef.hide();
@@ -2547,7 +2571,7 @@ AdvancedSelectComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'app-advanced-select',
-                template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\"\n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\">\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0 d-none\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit()\" (load)=\"onDataLoad($event)\"\n            [autoLoad]=\"true\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\">\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
+                template: "<div class=\"modal-header\" *ngIf=\"modalTitle\">\n  <h5 class=\"modal-title\">{{modalTitle | translate}}</h5>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" class=\"close\" data-dismiss=\"modal\"\n    aria-label=\"Cancel\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n    <div>\n      <!-- search -->\n      <div class=\"row mt-3\">\n        <div class=\"col-12 col-lg-3\">\n          <div class=\"input-group mb-3\">\n            <input spellcheck=\"false\" type=\"text\" #searchElement (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"searchText\" \n              class=\"form-control bg-gray-100 border-0\" placeholder=\"{{'Tables.SearchPlaceholder' | translate}}\"\n              aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n            <div class=\"input-group-append\">\n              <button class=\"btn btn-default bg-gray-100 border-0\" type=\"button\" (click)=\"onSearch()\">\n                <i class=\"fa fa-search text-secondary\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div #emptyTable class=\"d-none\">\n          <div>\n            <div class=\"mt-4\">\n              <div class=\"icon-circle bg-gray-300 border-gray-100\"></div>\n            </div>\n            <div class=\"mt-4\">\n              <h4 class=\"font-3xl text-dark\" [translate]=\"'Tables.EmptyTableTitle'\"></h4>\n              <p class=\"font-lg text-dark\" [translate]=\"'Tables.EmptyTableMessage'\"></p>\n            </div>\n\n          </div>\n        </div>\n        <div class=\"col-12 col-lg-5\">\n          <div class=\"btn-toolbar\">\n            <button class=\"btn btn-gray-100\">\n              <i class=\"fa fa-sliders-h pr-2 text-secondary\" aria-hidden=\"true\"></i>{{'Tables.Filters' | translate}}\n            </button>\n            <div class=\"dropdown ml-3\">\n              <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownDefaultFilters\"\n                data-toggle=\"dropdown\">\n                {{ this.defaultFilter.name | translate }}\n              </button>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownDefaultFilters\">\n                <a class=\"dropdown-item\" *ngFor=\"let filter of defaultFilters\"\n                  (click)=\"advancedSearch(filter.filter ? filter : '')\">\n                  {{ filter.name | translate }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"col text-lg-right mt-3 mt-lg-0 d-none\">\n          <button [disabled]=\"true\" class=\"btn rounded-pill btn-outline-theme\">\n            <span class=\"pr-2 font-lg\">+</span><span [translate]=\"'Tables.AddItem'\"></span>\n          </button>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-12\" [ngClass]=\"{ 'component-loading': loading}\">\n          <app-advanced-table #advancedTable (init)=\"onTableInit()\" (load)=\"onDataLoad($event)\"\n            [autoLoad]=\"true\"\n            [selectable]=\"true\" [multipleSelect]=\"true\" [scrollX]=\"false\" [scrollY]=\"320\" [pageLength]=\"pageLength\"\n            [scrollable]=\"false\" [showFooter]=\"false\" [showActions]=\"false\" [lengthMenu]=\"lengthMenu\"\n            [config]=\"tableConfig\" [configSrc]=\"tableConfigSrc\"></app-advanced-table>\n        </div>\n      </div>\n      <div class=\"row mt-3 table-custom-pager\">\n        <div class=\"col-12 d-flex\" *ngIf=\"recordsTotal\">\n          <div class=\"mt-2 ml-auto mr-3 text-secondary\" [translate]=\"'Tables.RecordsPerPage'\"></div>\n          <div class=\"dropdown mr-3\">\n            <button dropdownToggle class=\"btn btn-gray-100 dropdown-toggle\" type=\"button\" id=\"dropdownPageSize\"\n              data-toggle=\"dropdown\">\n              {{pageLength}}\n            </button>\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownPageSize\">\n              <button (click)=\"setLength(item)\" class=\"dropdown-item dropdown-item-theme\" type=\"button\"\n                *ngFor=\"let item of lengthMenu\">{{item}}</button>\n            </div>\n          </div>\n          <div class=\"mt-2 mr-2\" [translate]=\"'Tables.PageInfo'\" [translateParams]=\"pageInfo\"></div>\n          <button [disabled]=\"pageInfo && pageInfo.page === 0\" class=\"btn text-nowrap\" (click)=\"firstPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===0\" class=\"btn\" (click)=\"previousPage()\">\n            <i class=\"fa fa-chevron-left text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn\" (click)=\"nextPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n          <button [disabled]=\"pageInfo && pageInfo.page===pageInfo.pages-1\" class=\"btn text-nowrap\"\n            (click)=\"lastPage()\">\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n            <i class=\"fa fa-chevron-right text-color-theme\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n</div>\n<div class=\"modal-footer justify-content-end\">\n  <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\" type=\"button\" [ngClass]=\"okButtonClass\">\n    {{okButtonText | translate}}\n  </button>\n  <button [disabled]=\"cancelButtonDisabled\" (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\"\n    data-dismiss=\"modal\">\n    {{ cancelButtonText | translate}}\n  </button>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: [`
     .modal-table .dataTables_wrapper {
@@ -2564,8 +2588,12 @@ AdvancedSelectComponent.ctorParameters = () => [
     { type: AngularDataContext },
     { type: AdvancedFilterValueProvider },
     { type: DatePipe },
-    { type: BsModalRef }
+    { type: BsModalRef },
+    { type: ElementRef }
 ];
+AdvancedSelectComponent.propDecorators = {
+    searchElement: [{ type: ViewChild, args: ['searchElement',] }]
+};
 
 class AdvancedSelectService {
     constructor(_modal) {
@@ -4081,14 +4109,14 @@ class AddItemsComponent extends RouterModalOkCancel {
                     if (this._modalService.modalRef) {
                         this._modalService.modalRef.hide();
                     }
-                    return resolve();
+                    return resolve(null);
                 }, (err) => {
                     this.loading = false;
                     // ensure that loading is hidden
                     this._loadingService.hideLoading();
                     // set last error
                     this.lastError = err;
-                    return resolve();
+                    return resolve(null);
                 });
             });
         }
@@ -4286,6 +4314,9 @@ const TABLES_EL = {
             "No": "Όχι"
         }
     },
+    "Settings": {
+        "OperationCompleted": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
+    },
     "AdvancedSearch": {
         "Choose": "<Επιλέξτε μια αναζήτηση>",
         "ChooseDate": "Επιλογή ημερομηνίας",
@@ -4389,6 +4420,9 @@ const TABLES_EN = {
             "No": "No"
         }
     },
+    "Settings": {
+        "OperationCompleted": "The operation was completed successfully."
+    },
     "AdvancedSearch": {
         "Choose": "<Select a saved search>",
         "ChooseDate": "Choose date",
@@ -4719,6 +4753,7 @@ TablesModule.decorators = [
                 ],
                 declarations: [
                     AdvancedTableComponent,
+                    AdvancedTableSearchBaseComponent,
                     AdvancedTableSearchComponent,
                     BtnExpDirective,
                     AdvancedTableSettingsComponent,