import { __awaiter, __decorate } from "tslib";
import { Component, OnInit, AfterViewInit, ViewChild, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core';
import { SettingService } from '../../../../services/setting/setting.service';
import { TranslateService } from '../../../../services/translate/translate.service';
import { NotifyService } from '../../../../services/notify/notify.service';
import { MobileMaxWidth } from '../../../../constants/responsive';
let GridPopupFilterComponent = class GridPopupFilterComponent {
    constructor(ref, settingService, notifyService, translateService) {
        this.ref = ref;
        this.settingService = settingService;
        this.notifyService = notifyService;
        this.translateService = translateService;
        this.keyPrefix = 'PopupFilter';
        this.displayKey = 'SDCUSTOM';
        this.isMobile = window.innerWidth < MobileMaxWidth;
        this.filterType = 'inline';
        this.key = '';
        this.accept = new EventEmitter();
        this.clear = new EventEmitter();
        this.loadInlineFilter = new EventEmitter();
        this.filter = {};
        this.externalFilter = {};
        this.columns = [];
        this.externalFilters = [];
        this.quickFilters = [];
        this.showInlineFilter = true;
        this.numberOfQuickFiltes = 0;
        this.maxQuickFilters = 5;
        this.select = (quickFilter) => __awaiter(this, void 0, void 0, function* () {
            var _a;
            if (quickFilter.code === this.selectedCode) {
                delete this.selectedCode;
            }
            else {
                const f1 = JSON.stringify(quickFilter.filter);
                const f2 = JSON.stringify(quickFilter.externalFilter);
                this.selectedCode = (_a = quickFilter) === null || _a === void 0 ? void 0 : _a.code;
                this.filter = JSON.parse(f1);
                this.externalFilter = JSON.parse(f2);
            }
            yield this.updateConfiguration();
        });
    }
    ngOnInit() {
        this.loadConfiguration().then(() => {
            var _a;
            this.loadInlineFilter.emit({
                showInlineFilter: (_a = this.showInlineFilter, (_a !== null && _a !== void 0 ? _a : true)),
                quickFilters: this.quickFilters || [],
                selectedQuickFilter: this.selectedCode || ''
            });
        });
    }
    ngAfterViewInit() {
    }
    open(fixedColums, normalColumns, filter, externalFilter, externalFilters) {
        this.columns = [...fixedColums, ...normalColumns].filter(e => !e.preventFilter);
        this.columns.forEach(column => {
            if (column.type === 'children') {
                column.children = column.children.filter(e => !e.preventFilter);
            }
        });
        if (externalFilters) {
            this.externalFilters = externalFilters;
            for (const item of this.externalFilters) {
                if (item.type === 'daterange' || item.type === 'numberrange') {
                    this.externalFilter[item.field] = this.externalFilter[item.field] || { from: '', to: '' };
                }
            }
        }
        else {
            this.externalFilters = [];
        }
        this.filter = filter;
        this.externalFilter = externalFilter;
        this.modal.open();
    }
    onAccept() {
        this.accept.emit({
            filter: this.filter,
            externalFilter: this.externalFilter
        });
        this.modal.close();
    }
    onClear() {
        delete this.selectedCode;
        this.clear.emit();
    }
    createQuickFilter() {
        return __awaiter(this, void 0, void 0, function* () {
            this.notifyService.confirmWithInput(this.translateService.translate('Enter quick filter name')).then((code) => __awaiter(this, void 0, void 0, function* () {
                if (code) {
                    if (code.length > 100) {
                        this.notifyService.notify.warning(this.translateService.translate('Code too long'));
                        return;
                    }
                    yield this.add(code);
                    this.notifyService.notify.success();
                }
                else {
                    this.notifyService.notify.warning(this.translateService.translate('Code can not be empty'));
                }
            }));
        });
    }
    updateQuickFilter() {
        return __awaiter(this, void 0, void 0, function* () {
            if (this.selectedCode) {
                yield this.update(this.selectedCode);
                this.notifyService.notify.success();
                this.selectedCode = null;
            }
        });
    }
    add(code) {
        return __awaiter(this, void 0, void 0, function* () {
            const f1 = JSON.stringify(this.filter);
            const f2 = JSON.stringify(this.externalFilter);
            const quickFilter = {
                code,
                filter: JSON.parse(f1),
                externalFilter: JSON.parse(f2),
            };
            const idx = this.quickFilters.findIndex(e => e.code === quickFilter.code);
            if (idx !== -1) {
                this.notifyService.notify.warning(`${this.translateService.translate('Code is existed')}: ${quickFilter.code}`);
                return;
            }
            this.quickFilters.push(quickFilter);
            yield this.updateConfiguration();
        });
    }
    update(code) {
        return __awaiter(this, void 0, void 0, function* () {
            const f1 = JSON.stringify(this.filter);
            const f2 = JSON.stringify(this.externalFilter);
            const quickFilter = {
                code,
                filter: JSON.parse(f1),
                externalFilter: JSON.parse(f2)
            };
            const idx = this.quickFilters.findIndex(e => e.code === quickFilter.code);
            if (idx === -1) {
                this.notifyService.notify.warning(`Code ${quickFilter.code} is not existed`);
                return;
            }
            this.quickFilters[idx] = quickFilter;
            yield this.updateConfiguration();
        });
    }
    remove(quickFilter) {
        this.notifyService.confirm(this.translateService.translate('Remove filter')).then(() => __awaiter(this, void 0, void 0, function* () {
            if (quickFilter.code === this.selectedCode) {
                delete this.selectedCode;
            }
            const idx = this.quickFilters.findIndex(e => e.code === quickFilter.code);
            this.quickFilters.splice(idx, 1);
            yield this.updateConfiguration();
        }));
    }
    loadConfiguration() {
        var _a, _b, _c, _d, _e;
        return __awaiter(this, void 0, void 0, function* () {
            this.quickFilters = [];
            this.showInlineFilter = true;
            if (!this.key) {
                return;
            }
            if (!(yield this.settingService.hasKey(this.keyPrefix + this.key))) {
                return;
            }
            const configuration = yield this.settingService.get(this.keyPrefix + this.key);
            if (Array.isArray((_a = configuration) === null || _a === void 0 ? void 0 : _a.quickFilters)) {
                this.quickFilters = configuration.quickFilters;
            }
            this.numberOfQuickFiltes = ((_b = this.quickFilters) === null || _b === void 0 ? void 0 : _b.length) || 0;
            this.showInlineFilter = (_d = (_c = configuration) === null || _c === void 0 ? void 0 : _c.showInlineFilter, (_d !== null && _d !== void 0 ? _d : true));
            this.selectedCode = ((_e = configuration) === null || _e === void 0 ? void 0 : _e.selectedQuickFilter) || '';
        });
    }
    updateConfiguration(selectedQuickFilterCode) {
        var _a, _b;
        return __awaiter(this, void 0, void 0, function* () {
            if (!this.key) {
                return;
            }
            if (selectedQuickFilterCode !== undefined) {
                this.selectedCode = selectedQuickFilterCode;
            }
            yield this.settingService.set(this.keyPrefix + this.key, {
                quickFilters: this.quickFilters,
                showInlineFilter: this.showInlineFilter,
                selectedQuickFilter: this.selectedCode
            });
            this.loadInlineFilter.emit({
                showInlineFilter: (_a = this.showInlineFilter, (_a !== null && _a !== void 0 ? _a : true)),
                quickFilters: this.quickFilters || [],
                selectedQuickFilter: this.selectedCode || ''
            });
            this.numberOfQuickFiltes = ((_b = this.quickFilters) === null || _b === void 0 ? void 0 : _b.length) || 0;
            this.ref.detectChanges();
        });
    }
};
GridPopupFilterComponent.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: SettingService },
    { type: NotifyService },
    { type: TranslateService }
];
__decorate([
    ViewChild('modal')
], GridPopupFilterComponent.prototype, "modal", void 0);
__decorate([
    Input()
], GridPopupFilterComponent.prototype, "filterType", void 0);
__decorate([
    Input()
], GridPopupFilterComponent.prototype, "key", void 0);
__decorate([
    Output()
], GridPopupFilterComponent.prototype, "accept", void 0);
__decorate([
    Output()
], GridPopupFilterComponent.prototype, "clear", void 0);
__decorate([
    Output()
], GridPopupFilterComponent.prototype, "loadInlineFilter", void 0);
GridPopupFilterComponent = __decorate([
    Component({
        selector: 'sd-grid-popup-filter',
        template: "<sd-modal-control width=\"sm\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <fieldset *ngIf=\"key && quickFilters?.length\" class=\"c-fieldset\">\r\n      <legend class=\"c-legend\">{{'Quick filters' | sdTranslate}}</legend>\r\n      <div class=\"col-sm-12\">\r\n        <div *ngFor=\"let quickFilter of quickFilters\" class=\"c-quick-filter\"\r\n          [ngClass]=\"{'c-selected': quickFilter.code === selectedCode}\" (click)=\"select(quickFilter)\">\r\n          <span>{{quickFilter.code}}</span>\r\n          <i class=\"fa fa-times text-danger\" (click)=\"remove(quickFilter)\"></i>\r\n        </div>\r\n      </div>\r\n    </fieldset>\r\n    <div *ngFor=\"let item of externalFilters\" class=\"col-sm-12\">\r\n      <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n        [(model)]=\"externalFilter[item.field]\">\r\n      </sd-input-control>\r\n      <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\"\r\n        [(model)]=\"externalFilter[item.field]\">\r\n      </sd-input-control>\r\n      <sd-select-control [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\">\r\n      </sd-select-control>\r\n      <sd-radio-control [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n        [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n      </sd-radio-control>\r\n      <ng-container *ngIf=\"item.type === 'values'\">\r\n        <sd-select-control *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n          [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n          multiple=\"true\">\r\n        </sd-select-control>\r\n        <sd-autocomplete-control *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n          [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n        </sd-autocomplete-control>\r\n        <sd-chip-control *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n          [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n        </sd-chip-control>\r\n        <sd-select-control *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n          [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n        </sd-select-control>\r\n      </ng-container>\r\n      <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'custom'\" [(model)]=\"externalFilter[displayKey + item.field]\"\r\n        (sdClick)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n      </sd-input-control>\r\n      <sd-date-picker-control [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n        type=\"date\">\r\n      </sd-date-picker-control>\r\n      <ng-container *ngIf=\"item.type ==='daterange'\">\r\n        <div class=\"row\">\r\n          <div class=\"col-6\">\r\n            <sd-date-picker-control [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n              [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n              [maxDate]=\"externalFilter[item.field].to || item.maxDate\">\r\n            </sd-date-picker-control>\r\n          </div>\r\n          <div class=\"col-6\">\r\n            <sd-date-picker-control [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n              [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate || externalFilter[item.field].from\"\r\n              [maxDate]=\"item.maxDate\">\r\n            </sd-date-picker-control>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n        <div class=\"col-6\">\r\n          <sd-input-control [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n          </sd-input-control>\r\n        </div>\r\n        <div class=\"col-6\">\r\n          <sd-input-control [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n          </sd-input-control>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngFor=\"let column of columns\">\r\n      <div class=\"col-sm-12\">\r\n        <sd-input-control *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n          [(model)]=\"filter[column.field]\">\r\n        </sd-input-control>\r\n        <sd-input-control *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n          [(model)]=\"filter[column.field]\">\r\n        </sd-input-control>\r\n        <sd-radio-control *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n          {value:'0',display:column.falseValue || 'False' }]\" [(model)]=\"filter[column.field]\">\r\n        </sd-radio-control>\r\n        <sd-radio-control *ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n          [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n        </sd-radio-control>\r\n        <sd-autocomplete-control *ngIf=\"column.type === 'values'\" [label]=\"column.title\" [items]=\"column.values\"\r\n          valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n        </sd-autocomplete-control>\r\n        <sd-date-picker-control *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n          column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n        </sd-date-picker-control>\r\n      </div>\r\n      <div *ngIf=\"column.type === 'children' && column.children?.length\" class=\"col-sm-12\">\r\n        <ng-template ngFor let-childColumn [ngForOf]=\"column.children\">\r\n          <sd-input-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n            [(model)]=\"filter[childColumn.field]\">\r\n          </sd-input-control>\r\n          <sd-input-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n            [(model)]=\"filter[childColumn.field]\">\r\n          </sd-input-control>\r\n          <sd-radio-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n          {value:'0',display:childColumn.falseValue || 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n          </sd-radio-control>\r\n          <sd-radio-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\"\r\n            [items]=\"childColumn.values\" [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n            [(model)]=\"filter[childColumn.field]\">\r\n          </sd-radio-control>\r\n          <sd-autocomplete-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'values'\"\r\n            [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[childColumn.field]\">\r\n          </sd-autocomplete-control>\r\n          <sd-date-picker-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type ==='date' || childColumn.type==='datetime' ||\r\n          childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n          </sd-date-picker-control>\r\n        </ng-template>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <div class=\"mr-auto\">\r\n      <button type=\"button\" class=\"btn btn-warning btn-sm mr-2\" (click)=\"onClear()\">\r\n        <i class=\"fa fa-times fa-fw mr-1\"></i>{{'Clear filter' | sdTranslate}}</button>\r\n      <button *ngIf=\"key && !selectedCode && numberOfQuickFiltes < maxQuickFilters\" type=\"button\"\r\n        class=\"btn btn-success btn-sm mr-auto\" (click)=\"createQuickFilter()\">\r\n        <i class=\"fa fa-plus fa-fw mr-1\"></i>\r\n        <span>{{'Create quick filter' | sdTranslate}}</span>\r\n      </button>\r\n      <button *ngIf=\"key && selectedCode\" type=\"button\" class=\"btn btn-info btn-sm mr-auto\"\r\n        (click)=\"updateQuickFilter()\">\r\n        <i class=\"fa fa-floppy-o fa-fw mr-1\"></i>\r\n        <span>{{'Update quick filter' | sdTranslate}}</span>\r\n      </button>\r\n      <sd-checkbox-control *ngIf=\"key && !isMobile\" class=\"ml-2\" [label]=\"'Show inline filter' | sdTranslate\"\r\n        [(model)]=\"showInlineFilter\" (sdChange)=\"updateConfiguration()\"></sd-checkbox-control>\r\n    </div>\r\n    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"onAccept()\">\r\n      <i class=\"fa fa-check fa-fw mr-1\"></i>{{'Accept' | sdTranslate }}</button>\r\n  </sd-modal-footer>\r\n</sd-modal-control>",
        styles: [".btn{color:#fff;background-color:#919191;border-color:#919191;box-shadow:0 2px 2px 0 rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn:active,.btn:hover{box-shadow:0 14px 26px -12px rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn.btn-sm{padding:.2rem .5rem;font-size:11px}.btn.btn-xs{padding:.1rem .3rem;font-size:9px}.btn.btn-round{border-radius:30px}.btn.btn-primary{color:#fff;background-color:#c82c37;border-color:#c82c37;box-shadow:0 2px 2px 0 rgba(156,39,176,.14),0 3px 1px -2px rgba(156,39,176,.2),0 1px 5px 0 rgba(156,39,176,.12)}.btn.btn-primary:active,.btn.btn-primary:hover{box-shadow:0 14px 26px -12px rgba(156,39,176,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(156,39,176,.2)}.btn.btn-info{color:#fff;background-color:#00bcd4;border-color:#00bcd4;box-shadow:0 2px 2px 0 rgba(0,188,212,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,188,212,.12)}.btn.btn-info:active,.btn.btn-info:hover{box-shadow:0 14px 26px -12px rgba(0,188,212,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,188,212,.2)}.btn.btn-success{color:#fff;background-color:#4caf50;border-color:#4caf50;box-shadow:0 2px 2px 0 rgba(76,175,80,.14),0 3px 1px -2px rgba(76,175,80,.2),0 1px 5px 0 rgba(76,175,80,.12)}.btn.btn-success:active,.btn.btn-success:hover{box-shadow:0 14px 26px -12px rgba(76,175,80,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(76,175,80,.2)}.btn.btn-warning{color:#fff;background-color:#ff9800;border-color:#ff9800;box-shadow:0 2px 2px 0 rgba(255,152,0,.14),0 3px 1px -2px rgba(255,152,0,.2),0 1px 5px 0 rgba(255,152,0,.12)}.btn.btn-warning:active,.btn.btn-warning:hover{box-shadow:0 14px 26px -12px rgba(255,152,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(255,152,0,.2)}.btn.btn-danger{color:#fff;background-color:#f44336;border-color:#f44336;box-shadow:0 2px 2px 0 rgba(244,67,54,.14),0 3px 1px -2px rgba(244,67,54,.2),0 1px 5px 0 rgba(244,67,54,.12)}.btn.btn-danger:active,.btn.btn-danger:hover{box-shadow:0 14px 26px -12px rgba(244,67,54,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(244,67,54,.2)}", ".sd-label{font-weight:500;color:#919191!important}.sd-label.sd-label-primary{color:#c82c37!important}.sd-label.sd-label-success{color:#4caf50!important}.sd-label.sd-label-info{color:#00bcd4!important}.sd-label.sd-label-warning{color:#ff9800!important}.sd-label.sd-label-danger{color:#f44336!important}", "::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#555}", "fieldset.c-fieldset{border-radius:5px;border:1px solid #919191}legend.c-legend{width:auto;padding:0 5px;margin:0 10px;border-bottom:none;font-size:20px}.c-quick-filter{display:inline-block;margin-right:5px;margin-bottom:10px;border:1px solid #919191;border-radius:20px;padding:2px 10px;cursor:pointer}.c-quick-filter.c-selected{border:1px solid #00bcd4;background-color:#00bcd4;color:#fff}.c-quick-filter span{font-size:16px}.c-quick-filter i{font-size:16px;margin-left:12px;cursor:pointer;opacity:.7}.c-quick-filter i:hover{opacity:1}"]
    })
], GridPopupFilterComponent);
export { GridPopupFilterComponent };
//# sourceMappingURL=data:application/json;base64, 