tnx-shared 5.1.455 → 5.1.457

package/bundles/tnx-shared.umd.js

@@ -14179,7 +14179,7 @@
             var e_5, _e;
             if (isLiteralObject(model)) {
                 if (model._dropdownvalue != null && model._dropdownvalue !== '') {
-                    return model[model._dropdownvalue] || model['value'];
+                    return model[model._dropdownvalue] == null ? model['value'] : model[model._dropdownvalue];
                 }
                 var data = {};
                 for (var key in model) {
@@ -48524,6 +48524,7 @@
             _this.isOpenFull = false;
             _this.isCustomGenerateSearch = false;
             _this.isDisableOpenFull = false;
+            _this.searchBoxTooltip = 'Tìm kiếm theo các trường: ';
             return _this;
         }
         CommonSearchFormComponent.prototype.ngOnInit = function () {
@@ -48542,8 +48543,18 @@
                 this.setting.schema = this.addSearchBox(this.parentSetting.commonSchemas);
             }
             else {
-                var columnFilters = this.parentSetting.cols.filter(function (p) { return p.allowFilter && !p.field.startsWith('str'); });
-                this.lstTextControl = columnFilters.filter(function (p) { return p.fullTextSearch; }).map(function (p) { return p.field; });
+                var columnFilters = this.parentSetting.cols.filter(function (p) { return p.allowFilter && !p.field.startsWith('str'); }).sort(function (a, b) {
+                    if (a.order < b.order) {
+                        return -1;
+                    }
+                    if (a.order > b.order) {
+                        return 1;
+                    }
+                    return 0;
+                });
+                var lstTextSearchControl = columnFilters.filter(function (p) { return p.fullTextSearch; });
+                this.lstTextControl = lstTextSearchControl.map(function (p) { return p.field; });
+                this.searchBoxTooltip += "" + (lstTextSearchControl.map(function (x) { return x.label; })).join(', ');
                 this.setting.schema = this.genFormSchema(columnFilters);
             }
             this.isDisableOpenFull = this.setting.schema.length <= 4 && !this._commonService.isMobile();
@@ -48740,7 +48751,7 @@
     CommonSearchFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'common-search-form',
-                    template: "<div #commonSearchTemplate class=\"p-grid box-common-search\" [ngClass]=\"{'open-full': isOpenFull} \">\n    <div class=\"container-control no-label p-md-12 cs-pb-1\">\n        <span class=\"label\"></span>\n        <div>\n            <crud-form #crudForm [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\" [(data)]=\"model.data\"\n                (onFormReady)=\"_handleFormReady($event)\">\n                <ng-template #keyword>\n                    <div class=\"search-box\">\n                        <input type=\"text\" pInputText class=\"link-or-action\" [placeholder]=\"'T\u1EEB kh\u00F3a'\"\n                            [(ngModel)]=\"keywords\" />\n                        <div class=\"cs-flex-evenly buttons\">\n                            <span [pTooltip]=\"'X\u00F3a b\u1ED9 l\u1ECDc'\" tooltipPosition=\"top\" (click)=\"clearFilter()\">\n                                <i class=\"pi pi-filter-slash\"></i>\n                            </span>\n                            <span [pTooltip]=\"'T\u00ECm ki\u1EBFm'\" tooltipPosition=\"top\" (click)=\"handleSearch()\">\n                                <i class=\"pi pi-search\"></i>\n                            </span>\n                            <span *ngIf=\"!isDisableOpenFull\" [pTooltip]=\"isOpenFull ? 'Thu g\u1ECDn' : 'M\u1EDF r\u1ED9ng'\"\n                                tooltipPosition=\"top\" (click)=\"toggleMenuSearch()\">\n                                <i [ngClass]=\"isOpenFull ? 'pi pi-caret-up' : 'pi pi-caret-down'\"></i>\n                            </span>\n                        </div>\n                    </div>\n                </ng-template>\n            </crud-form>\n        </div>\n    </div>\n</div>",
+                    template: "<div #commonSearchTemplate class=\"p-grid box-common-search\" [ngClass]=\"{'open-full': isOpenFull} \">\n    <div class=\"container-control no-label p-md-12 cs-pb-1\">\n        <span class=\"label\"></span>\n        <div>\n            <crud-form #crudForm [setting]=\"setting\" [context]=\"context\" [disableCaching]=\"true\" [(data)]=\"model.data\"\n                (onFormReady)=\"_handleFormReady($event)\">\n                <ng-template #keyword>\n                    <div class=\"search-box\">\n                        <input type=\"text\" pInputText class=\"link-or-action\" [placeholder]=\"'T\u1EEB kh\u00F3a'\"\n                            tooltipStyleClass=\"wrap max-width-300\" tooltipPosition=\"top\" [pTooltip]=\"searchBoxTooltip\"\n                            [(ngModel)]=\"keywords\" (keyup.esc)=\"handleSearch()\" />\n                        <div class=\"cs-flex-evenly buttons\">\n                            <span [pTooltip]=\"'X\u00F3a b\u1ED9 l\u1ECDc'\" tooltipPosition=\"top\" (click)=\"clearFilter()\">\n                                <i class=\"pi pi-filter-slash\"></i>\n                            </span>\n                            <span [pTooltip]=\"'T\u00ECm ki\u1EBFm'\" tooltipPosition=\"top\" (click)=\"handleSearch()\">\n                                <i class=\"pi pi-search\"></i>\n                            </span>\n                            <span *ngIf=\"!isDisableOpenFull\" [pTooltip]=\"isOpenFull ? 'Thu g\u1ECDn' : 'M\u1EDF r\u1ED9ng'\"\n                                tooltipPosition=\"top\" (click)=\"toggleMenuSearch()\">\n                                <i [ngClass]=\"isOpenFull ? 'pi pi-caret-up' : 'pi pi-caret-down'\"></i>\n                            </span>\n                        </div>\n                    </div>\n                </ng-template>\n            </crud-form>\n        </div>\n    </div>\n</div>",
                     providers: [ComponentContextService],
                     styles: [".cs-pb-1{padding-bottom:.25rem!important}.bg-input{position:relative}.bg-input button{position:absolute;top:0;right:0}.pointer-none{pointer-events:none}.cs-flex-evenly{display:flex;align-items:center;justify-content:space-evenly}.box-common-search{position:relative;height:60px;overflow:hidden;transition:all .5s ease-in-out}.box-common-search.open-full{height:auto}.search-box{background:#fff;border:1px solid #d2d2d2;border-radius:5px;display:flex;justify-content:space-between}.search-box:hover{border-color:#397ac3;box-shadow:0 0 0 .2rem #a6d5fa}.search-box input{max-width:270px;box-shadow:none;border:0}.search-box span{cursor:pointer;padding:.5rem}"]
                 },] }
@@ -56177,6 +56188,86 @@
         viewOnly: [{ type: i0.Input }]
     };
 
+    var TnAccordionTabComponent = /** @class */ (function () {
+        function TnAccordionTabComponent(_commonService) {
+            this._commonService = _commonService;
+            this.data = [];
+            this.onOpenedTab = new i0.EventEmitter();
+            this.onClosedTab = new i0.EventEmitter();
+            this.template = {};
+            this.activeIndex = [];
+        }
+        TnAccordionTabComponent.prototype.ngOnInit = function () {
+            var activeIndexes = [];
+            this.data.filter(function (q) { return q.active; }).forEach(function (item) {
+                item.loaded = true;
+                activeIndexes.push(item.index);
+            });
+            this.activeIndex = activeIndexes;
+        };
+        TnAccordionTabComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.data.forEach(function (item) {
+                _this.template[item.code] = _this._commonService.findTemplateFromList(_this.children, item.code);
+            });
+        };
+        TnAccordionTabComponent.prototype.onOpenTab = function (evt) {
+            var item = this.data.find(function (x) { return x.index == evt.index; });
+            item.loaded = true;
+            item.expanded = true;
+            item.active = true;
+            this.activeIndex.push(item.index);
+            this.onOpenedTab.emit(item);
+        };
+        TnAccordionTabComponent.prototype.onCloseTab = function (evt) {
+            var item = this.data.find(function (x) { return x.index == evt.index; });
+            item.loaded = true;
+            item.expanded = false;
+            item.active = false;
+            this.activeIndex = this.activeIndex.filter(function (q) { return q != evt.index; });
+            this.onClosedTab.emit(item);
+        };
+        TnAccordionTabComponent.prototype.activeTab = function (item) {
+            this.data.forEach(function (item) {
+                item.expanded = false;
+                item.active = false;
+            });
+            item.expanded = true;
+            item.loaded = true;
+            item.active = true;
+            this.activeIndex = [item.index];
+        };
+        TnAccordionTabComponent.prototype.expandAll = function () {
+            var indexes = [];
+            this.data.forEach(function (item) {
+                item.expanded = true;
+                item.loaded = true;
+                item.active = true;
+                indexes.push(item.index);
+            });
+            this.activeIndex = indexes;
+        };
+        return TnAccordionTabComponent;
+    }());
+    TnAccordionTabComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'tn-accordion-tab',
+                    template: "<div class=\"tn-l-toolbar\">\n    <ng-container *ngTemplateOutlet=\"contentBeforeLink\"></ng-container>\n    <div class=\"accordion-link\">\n        <ul>\n            <li *ngFor=\"let item of data\" [ngClass]=\"{'tab-active': item.active}\" [pTooltip]=\"item.header\"\n                tooltipPosition=\"top\" (click)=\"activeTab(item)\" class=\"tn-l-custom-paginator\">\n                {{item.index + 1}}</li>\n            <li [ngClass]=\"{'tab-active': activeIndex && activeIndex.length == data.length}\" (click)=\"expandAll()\"\n                class=\"tn-l-custom-paginator\">T\u1EA5t c\u1EA3\n            </li>\n        </ul>\n    </div>\n</div>\n<div class=\"clearfix\"></div>\n<ng-container *ngTemplateOutlet=\"contentBeforeTabList\"></ng-container>\n<div class=\"tn-l-p-accordion-wrapper\">\n    <tn-custom-scrollbar #scrollbar class=\"tn-l-p-accordion-scroller tn-scroll-bar --has-border\">\n        <p-accordion [(activeIndex)]=\"activeIndex\" (onOpen)=\"onOpenTab($event)\" (onClose)=\"onCloseTab($event)\"\n            [multiple]=\"true\">\n            <p-accordionTab [selected]=\"item.expanded\" *ngFor=\"let item of data; let i = index\">\n                <ng-template pTemplate=\"header\">\n                    <span class=\"tab-number\" [class.active]=\"item.active\">{{i + 1}}</span> {{item.header}}\n                </ng-template>\n                <ng-container *ngIf=\"item.loaded\">\n                    <ng-container *ngTemplateOutlet=\"template[item.code]; context: {$implicit: item}\">\n                    </ng-container>\n                </ng-container>\n            </p-accordionTab>\n        </p-accordion>\n    </tn-custom-scrollbar>\n</div>",
+                    styles: [".accordion-link{flex:1 1;text-align:right}.accordion-link ul{padding-left:0;list-style:none;margin-top:0;margin-bottom:0}.accordion-link ul li{border-radius:4px;display:inline-block;padding:6px 12px;line-height:20px;background-color:#a4a5a4;color:#fff;margin-left:.5rem;margin-bottom:.5rem;transition:all .3s ease-out}.accordion-link ul li:hover{cursor:pointer;background-color:#3db762}.accordion-link ul li.tab-active{background-color:#23a349}.tn-l-toolbar{padding:.5rem .5rem 0;display:flex}.hoso-container{max-height:none;height:auto}.tab-number{background:#a4a5a4;color:#fff;margin-right:.5rem;font-size:.9em;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:2px;padding-top:2px}.tab-number.active{background:#23a349}::ng-deep tn-accordion-tab{display:flex;flex-direction:column;height:100%}::ng-deep tn-accordion-tab .p-accordion-header{position:sticky;top:1px;z-index:6}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper{display:flex;flex:1;overflow:auto;border-radius:4px;margin-left:.5rem;margin-right:.5rem}::ng-deep tn-accordion-tab .tn-l-p-accordion-wrapper tn-custom-scrollbar{width:100%}::ng-deep tn-accordion-tab .ps__rail-x,::ng-deep tn-accordion-tab .ps__rail-y{z-index:7}::ng-deep tn-accordion-tab .tn-l-toolbar .toolbar{flex:0 0 auto;padding-top:0}@media (max-width:640px){.accordion-link,.toolbar{white-space:nowrap;overflow-x:auto}.tn-l-custom-wrapper{display:block}.accordion-link ul{margin-top:0}.tn-l-toolbar{display:block}}"]
+                },] }
+    ];
+    TnAccordionTabComponent.ctorParameters = function () { return [
+        { type: CommonService }
+    ]; };
+    TnAccordionTabComponent.propDecorators = {
+        children: [{ type: i0.ContentChildren, args: [i0.TemplateRef,] }],
+        contentBeforeLink: [{ type: i0.ContentChild, args: ['contentBeforeLink',] }],
+        contentBeforeTabList: [{ type: i0.ContentChild, args: ['contentBeforeTabList',] }],
+        data: [{ type: i0.Input }],
+        onOpenedTab: [{ type: i0.Output }],
+        onClosedTab: [{ type: i0.Output }]
+    };
+
     var PipeLine = /** @class */ (function () {
         function PipeLine() {
             this.intervalLeft = 0;
@@ -62963,6 +63054,7 @@
             DropdownSettingFormComponent,
             CheckReadyComponent,
             WorkflowButtonComponent,
+            TnAccordionTabComponent
         ];
     }
     function coreModuleImport() {
@@ -63711,6 +63803,7 @@
     exports["ɵfs"] = DropdownSettingFormComponent;
     exports["ɵft"] = CheckReadyComponent;
     exports["ɵfu"] = WorkflowButtonComponent;
+    exports["ɵfv"] = TnAccordionTabComponent;
     exports["ɵg"] = ListComponentBase;
     exports["ɵh"] = TreeTableComponent;
     exports["ɵi"] = UniversalLinkProcessorComponent;