import { __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 { DeviceDetectorService } from 'ngx-device-detector';
let GridPopupQuickFilterDetailComponent = class GridPopupQuickFilterDetailComponent {
    constructor(ref, deviceService, settingService, notifyService, translateService) {
        this.ref = ref;
        this.settingService = settingService;
        this.notifyService = notifyService;
        this.translateService = translateService;
        this.displayKey = 'SDCUSTOM';
        this.isMobileOrTablet = false;
        this.accept = new EventEmitter();
        this.fields = [];
        this.selectableFields = [];
        this.columns = [];
        this.externalFilters = [];
        this.filter = {};
        this.externalFilter = {};
        this.selectedFields = [];
        this.page = 1;
        this.onAccept = () => {
            const execute = () => {
                const filter = {};
                const externalFilter = {};
                Object.keys(this.filter).forEach(key => {
                    if (this.filter[key] === undefined || this.filter[key] === null || this.filter[key] === '') {
                        return;
                    }
                    if (!this.fields.some(e => e.group === 'column' && e.code === key)) {
                        return;
                    }
                    filter[key] = this.filter[key];
                });
                Object.keys(this.externalFilter).forEach(key => {
                    if (this.externalFilter[key] === undefined || this.externalFilter[key] === null || this.externalFilter[key] === '') {
                        return;
                    }
                    if (!this.fields.some(e => e.group === 'external' && e.code === key)) {
                        return;
                    }
                    externalFilter[key] = this.externalFilter[key];
                });
                this.accept.emit({
                    code: this.code,
                    filter,
                    externalFilter
                });
                this.modal.close();
            };
            if (!this.code) {
                this.notifyService.confirmWithInput('Enter your quick filter name').then((value) => {
                    if (value) {
                        this.code = value;
                        execute();
                    }
                });
            }
            else {
                execute();
            }
        };
        this.onCancel = () => {
            this.modal.close();
        };
        this.onSelectField = (values) => {
            this.fields = this.selectableFields.filter(e => values.some(v => e.code === v));
        };
        this.isMobileOrTablet = !deviceService.isDesktop();
    }
    ngOnInit() {
    }
    ngAfterViewInit() {
    }
    open(columns, externalFilters, filter, externalFilter, code) {
        var _a, _b;
        this.fields = [];
        this.filter = {};
        this.externalFilter = {};
        this.columns = columns;
        this.externalFilters = externalFilters;
        this.code = code;
        if (filter) {
            Object.keys(filter).forEach(key => {
                if (filter[key] === undefined || filter[key] === null || filter[key] === '') {
                    return;
                }
                const column = columns.find(e => e.field === key);
                if (!column) {
                    return;
                }
                this.filter[key] = filter[key];
                this.fields.push({
                    group: 'column',
                    type: column.type,
                    code: column.field,
                    title: column.title
                });
            });
        }
        if (externalFilter) {
            Object.keys(externalFilter).forEach(key => {
                var _a, _b, _c, _d;
                if (externalFilter[key] === undefined || externalFilter[key] === null || externalFilter[key] === '') {
                    return;
                }
                const item = externalFilters.find(e => e.field === key);
                if (!item) {
                    return;
                }
                if (item.type === 'daterange' || item.type === 'numberrange') {
                    this.externalFilter[key] = Object.assign({}, externalFilter[key]);
                    if (!((_a = externalFilter[key]) === null || _a === void 0 ? void 0 : _a.from) && !((_b = externalFilter[key]) === null || _b === void 0 ? void 0 : _b.to)) {
                        return;
                    }
                    this.fields.push({
                        group: 'external',
                        type: item.type,
                        code: item.field,
                        title: item.title,
                        fromTitle: item.fromTitle,
                        toTitle: item.toTitle
                    });
                }
                else if (item.type === 'daterangefull') {
                    this.externalFilter[key] = Object.assign({}, externalFilter[key]);
                    if (!((_c = externalFilter[key]) === null || _c === void 0 ? void 0 : _c.from) && !((_d = externalFilter[key]) === null || _d === void 0 ? void 0 : _d.to)) {
                        return;
                    }
                    this.fields.push({
                        group: 'external',
                        type: item.type,
                        code: item.field,
                        title: item.title
                    });
                }
                else {
                    this.externalFilter[key] = externalFilter[key];
                    this.fields.push({
                        group: 'external',
                        type: item.type,
                        code: item.field,
                        title: item.title
                    });
                }
            });
        }
        const externalFields = ((_a = externalFilters) === null || _a === void 0 ? void 0 : _a.map(e => ({
            group: 'column',
            code: e.field,
            type: e.type,
            title: e.title,
            fromTitle: e.fromTitle,
            toTitle: e.toTitle
        }))) || [];
        const columnFields = ((_b = columns) === null || _b === void 0 ? void 0 : _b.map(e => ({
            group: 'column',
            code: e.field,
            type: e.type,
            title: e.title,
        }))) || [];
        this.selectableFields = [...externalFields, ...columnFields];
        this.selectedFields = this.fields.map(e => e.code);
        this.modal.open();
    }
};
GridPopupQuickFilterDetailComponent.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: DeviceDetectorService },
    { type: SettingService },
    { type: NotifyService },
    { type: TranslateService }
];
__decorate([
    ViewChild('modal')
], GridPopupQuickFilterDetailComponent.prototype, "modal", void 0);
__decorate([
    Output()
], GridPopupQuickFilterDetailComponent.prototype, "accept", void 0);
GridPopupQuickFilterDetailComponent = __decorate([
    Component({
        selector: 'sd-grid-popup-quick-filter-detail',
        template: "<sd-modal-control width=\"sm\" [title]=\"'Quick Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <sd-select-control [label]=\"'Filterable fields' | sdTranslate\" multiple=\"true\" [(model)]=\"selectedFields\"\r\n          [items]=\"selectableFields\" (sdChange)=\"onSelectField($event)\" valueField=\"code\" displayField=\"title\">\r\n        </sd-select-control>\r\n      </div>\r\n      <div class=\"col-12\" *ngFor=\"let item of fields\">\r\n        <ng-container *ngIf=\"item.group === 'external'\">\r\n          <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.code]\">\r\n          </sd-input-control>\r\n          <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\"\r\n            [(model)]=\"externalFilter[item.code]\">\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.code]\">\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.code]\">\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.code]\"\r\n              multiple=\"true\">\r\n            </sd-select-control>\r\n            <sd-autocomplete-control *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-autocomplete-control>\r\n            <sd-chip-control *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n              [(model)]=\"externalFilter[item.code]\">\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.code]\">\r\n            </sd-select-control>\r\n          </ng-container>\r\n          <sd-input-control *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n            [(model)]=\"externalFilter[displayKey + item.code]\"\r\n            (sdClick)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n          </sd-input-control>\r\n          <sd-date-picker-control [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n            type=\"date\">\r\n          </sd-date-picker-control>\r\n          <sd-date-range-picker-control [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(fromDate)]=\"externalFilter[item.code].from\" [(toDate)]=\"externalFilter[item.code].to\"\r\n            [minDate]=\"item.minDate\" [maxDate]=\"item.maxDate\" type=\"date\">\r\n          </sd-date-range-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.code].from\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                  [maxDate]=\"externalFilter[item.code].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.code].to\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                  [minDate]=\"item.minDate || externalFilter[item.code].from\" [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.code].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.code].to\">\r\n              </sd-input-control>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"item.group === 'column'\">\r\n          <sd-input-control *ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\"\r\n            [(model)]=\"filter[item.code]\">\r\n          </sd-input-control>\r\n          <sd-input-control *ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\"\r\n            [(model)]=\"filter[item.code]\">\r\n          </sd-input-control>\r\n          <sd-radio-control *ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" [(model)]=\"filter[item.code]\">\r\n          </sd-radio-control>\r\n          <sd-radio-control *ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n          </sd-radio-control>\r\n          <sd-autocomplete-control *ngIf=\"item.type === 'values'\" [label]=\"item.title\" [items]=\"item.values\"\r\n            valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n          </sd-autocomplete-control>\r\n          <sd-date-picker-control *ngIf=\"item.type ==='date' || item.type==='datetime' ||\r\n          item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n          </sd-date-picker-control>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\"></sd-button>\r\n    <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\"\r\n      width=\"100%\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal-control>",
        styles: [".sd-form{width:100%;font-size:12px}.sd-form.sd-form-with-information{width:calc(100% - 30px)}.sd-form .sd-input,.sd-form .sd-select{font-size:14px}.sd-form .sd-input::-webkit-input-placeholder,.sd-form .sd-select::-webkit-input-placeholder{font-size:12px!important}.sd-form .sd-input::-moz-placeholder,.sd-form .sd-select::-moz-placeholder{font-size:12px!important}.sd-form .sd-input::-ms-input-placeholder,.sd-form .sd-select::-ms-input-placeholder{font-size:12px!important}.sd-form .sd-input::placeholder,.sd-form .sd-select::placeholder{font-size:12px!important}@media (max-width:768px){.sd-form{font-size:10px}}.sd-form.sd-form-sm{font-size:10px}.sd-form.sd-form-xs{font-size:8px}.sd-form.mat-form-field-appearance-outline .mat-form-field-infix{padding:.7em 0}.sd-form.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,.sd-form.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{color:#333}.sd-form .mat-form-field-required-marker{color:#ff4081}.sd-form.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,.sd-form.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{transform:translateY(-1.28125em) scale(.9);color:#333}.sd-information{display:inline-block;text-align:center;margin:auto;width:30px}sd-grid-control .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-option{font-size:12px}.swal2-popup .swal2-content .swal2-html-container{line-height:1.7;color:#7c7c7e}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month{opacity:1;cursor:pointer}.daterangepicker{z-index:99999}", ".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}"]
    })
], GridPopupQuickFilterDetailComponent);
export { GridPopupQuickFilterDetailComponent };
//# sourceMappingURL=data:application/json;base64, 