import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { sharedGridLayout } from '../utils/sharedLayOut';
import * as i0 from "@angular/core";
import * as i1 from "../reports.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/card";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/material/grid-list";
import * as i6 from "@angular/material/form-field";
import * as i7 from "@angular/material/datepicker";
import * as i8 from "@angular/material/select";
import * as i9 from "@angular/material/core";
import * as i10 from "@angular/material/button";
import * as i11 from "@angular/forms";
import * as i12 from "@angular/material/input";
export class ReportDetailsComponent {
    constructor(reportService, datepipe) {
        this.reportService = reportService;
        this.datepipe = datepipe;
        this.$subs = [];
        this.breakpoint = 3;
        this.onExecuteFired = new EventEmitter();
        this.backClicked = new EventEmitter();
    }
    ngOnInit() {
        this.breakpoint = sharedGridLayout();
        this.loadReportFilters();
    }
    onResize(event) {
        this.breakpoint = sharedGridLayout(true, event);
    }
    loadReportFilters() {
        const sub1 = this.reportService
            .getReportWithFilters(this.loadReportDetailFilters, this.reportId)
            .subscribe((res) => {
            this.reportDetails = res;
        });
        this.$subs.push(sub1);
    }
    ngOnDestroy() {
        this.$subs.forEach((item) => item.unsubscribe());
    }
    validateAndConvertData() {
        var _a, _b;
        if (this.reportDetails && this.reportDetails.reportFilters) {
            for (let i = 0; i < ((_b = (_a = this.reportDetails) === null || _a === void 0 ? void 0 : _a.reportFilters) === null || _b === void 0 ? void 0 : _b.length); i++) {
                this.reportDetails.reportFilters[i].value =
                    this.reportDetails.reportFilters[i].dataType.toLocaleLowerCase() ===
                        'date'
                        ? this.datepipe.transform(this.reportDetails.reportFilters[i].value, 'yyyy-MM-dd')
                        : this.reportDetails.reportFilters[i].value;
            }
        }
        return true;
    }
    execute() {
        var _a;
        if ((_a = this.executeForm) === null || _a === void 0 ? void 0 : _a.invalid) {
            this.executeForm.form.markAllAsTouched();
            return;
        }
        this.validateAndConvertData();
        sessionStorage.setItem('executeForm', JSON.stringify(this.reportDetails.reportFilters));
        sessionStorage.setItem('reportName', this.reportDetails.name);
        this.onExecuteFired.emit({ fired: true });
    }
    onBackClicked() {
        this.backClicked.emit({ back: true });
    }
}
ReportDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReportDetailsComponent, deps: [{ token: i1.ReportsService }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
ReportDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ReportDetailsComponent, selector: "lib-report-details", inputs: { reportId: "reportId", loadReportDetailFilters: "loadReportDetailFilters" }, outputs: { onExecuteFired: "onExecuteFired", backClicked: "backClicked" }, viewQueries: [{ propertyName: "executeForm", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<mat-card class=\"example-card\">\n  <mat-card-title><mat-icon (click)=\"onBackClicked()\" class=\"back-btn\">arrow_back</mat-icon> {{reportDetails?.name}}</mat-card-title>\n  <mat-card-subtitle>{{reportDetails?.descreption}}</mat-card-subtitle>\n  <mat-card-content *ngIf=\"reportDetails\">\n    <form name=\"form\"  #f=\"ngForm\" novalidate >\n      <mat-grid-list class=\"mt-2\" [cols]=\"breakpoint\" (window:resize)=\"onResize($event)\" rowHeight=\"100px\">\n        <mat-grid-tile *ngFor=\"let filter of reportDetails.reportFilters\">\n          <mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"filter.dataType.toLowerCase() == 'date' \">\n            <mat-label class=\"form-label\">{{filter.name}} </mat-label>\n            <input matInput [matDatepicker]=\"picker\" #date=\"ngModel\"\n                   [name]=\"filter.name\" [(ngModel)]=\"filter.value\" [required]=\"filter.required\">\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker></mat-datepicker>\n\n          </mat-form-field>\n\n          <mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"filter.dataType.toLowerCase() == 'text' \">\n            <mat-label class=\"form-label\">{{filter.name}} </mat-label>\n            <input matInput *ngIf=\"filter.dataType.toLowerCase() == 'text' \" [name]=\"filter.name\"\n                   [(ngModel)]=\"filter.value\" [required]=\"filter.required\">\n          </mat-form-field>\n          <mat-form-field class=\"form-field\" appearance=\"outline\" *ngIf=\"filter.dataType.toLowerCase() == 'number' \">\n            <mat-label class=\"form-label\">{{filter.name}} </mat-label>\n            <input matInput type=\"number\" [name]=\"filter.name\"\n                   [(ngModel)]=\"filter.value\" [required]=\"filter.required\" >\n          </mat-form-field>\n\n          <mat-form-field class=\"form-field\" appearance=\"outline\"\n                          *ngIf=\"filter.dataType.toLowerCase() == 'query' || filter.dataType.toLowerCase() ==='lookup'\">\n            <mat-label class=\"form-label\">{{filter.name}} </mat-label>\n            <mat-select *ngIf=\"filter.dataType.toLowerCase() == 'query' || filter.dataType.toLowerCase() ==='lookup'\"\n                        [name]=\"filter.name\" [(ngModel)]=\"filter.value\" [required]=\"filter.required\">\n              <mat-option *ngFor=\"let option of filter.lookUps\" [value]=\"option.id\">{{option.name}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </mat-grid-tile>\n      </mat-grid-list>\n    </form>\n    <button  type=\"submit\" mat-button class=\"viewButton\" (click)=\"execute()\">Execute</button>\n\n  </mat-card-content>\n</mat-card>\n", styles: [".example-card{height:100%;width:100%;border-radius:8px}.back-btn{vertical-align:sub;color:#f60;cursor:pointer}.mat-form-field{width:93%}.viewButton{background:#FF6600;color:#fff}\n"], components: [{ type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i5.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i11.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i11.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ReportDetailsComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'lib-report-details',
                    templateUrl: './report-details.component.html',
                    styleUrls: ['./report-details.component.css'],
                    // encapsulation: ViewEncapsulation.None,
                }]
        }], ctorParameters: function () { return [{ type: i1.ReportsService }, { type: i2.DatePipe }]; }, propDecorators: { reportId: [{
                type: Input
            }], executeForm: [{
                type: ViewChild,
                args: ['f']
            }], loadReportDetailFilters: [{
                type: Input
            }], onExecuteFired: [{
                type: Output
            }], backClicked: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 