/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
import { Component, Input, ElementRef } from '@angular/core';
import { BaseWidget } from '../../../BaseWidget/BaseWidget.component';
import { DataSetFilter } from '../../../../../classes/DataSetFilter';
import { DisplayStateService } from '../../../../../services/DisplayStateService';
import { AppStateService } from '../../../../../services/AppStateService';
import { WebPlatformApiService } from '../../../../../services/WebPlatformApiService';
import { ClientSettingsService } from '../../../../../services/ClientSettingsService';
export class DataConsumerConfigEditorComponent extends BaseWidget {
    /**
     * @param {?} element
     * @param {?} clientSettingsService
     * @param {?} displayStateService
     * @param {?} appStateService
     * @param {?} webPlatformApiService
     */
    constructor(element, clientSettingsService, displayStateService, appStateService, webPlatformApiService) {
        super(element, clientSettingsService, displayStateService, appStateService, webPlatformApiService);
        this.element = element;
        this.clientSettingsService = clientSettingsService;
        this.displayStateService = displayStateService;
        this.appStateService = appStateService;
        this.webPlatformApiService = webPlatformApiService;
        this.dataPolicyNames = [];
        this.showMiddleLayerFeatures = true;
        this.fixedDataIsInvalid = false;
        this.sortTypes = ['asc', 'desc'];
        this.filterOps = DataSetFilter.FilterOperationMap();
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
        this.FixedData = this.DataConsumerConfig && this.DataConsumerConfig.fixedData ? JSON.stringify(this.DataConsumerConfig.fixedData) : '';
        // Because DCC name is optional we removed it when it's manually cleared
        if (this.DataConsumerConfig && this.DataConsumerConfig.name === '') {
            this.DataConsumerConfig.name = undefined;
        }
        this.initializeHeaders();
    }
    /**
     * @return {?}
     */
    onInitialize() {
        /** @type {?} */
        const empty = [''];
        this.webPlatformApiService.GetConfig('DataPolicyList').subscribe(x => {
            this.dataPolicyNames = empty.concat(x.map(dp => { return dp.name; }));
            this.dataPolicyList = x;
            this.onSelectedDataPolicyChange(this.DataConsumerConfig.dataPolicy);
        });
        this.FixedData = this.DataConsumerConfig && this.DataConsumerConfig.fixedData ? JSON.stringify(this.DataConsumerConfig.fixedData) : '';
        this.initializeHeaders();
    }
    /**
     * @return {?}
     */
    ClearColumns() {
        this.DataConsumerConfig.columns = undefined;
    }
    /**
     * @return {?}
     */
    initializeHeaders() {
        if (!this.DataConsumerConfig.overrideCustomHeaders) {
            this.DataConsumerConfig.overrideCustomHeaders = [];
        }
    }
    /**
     * @return {?}
     */
    UpdateFixedData() {
        if (this.DataConsumerConfig) {
            try {
                if (this.FixedData && this.FixedData.length > 0) {
                    this.DataConsumerConfig.fixedData = JSON.parse(this.FixedData);
                }
                else {
                    this.DataConsumerConfig.fixedData = undefined;
                }
                this.fixedDataIsInvalid = false;
            }
            catch (e) {
                this.fixedDataIsInvalid = true;
            }
        }
    }
    /**
     * @param {?} idx
     * @return {?}
     */
    DeleteFilterConfigByIndex(idx) {
        this.DataConsumerConfig.filterConfiguration.splice(idx, 1);
    }
    /**
     * @return {?}
     */
    AddFilterConfig() {
        this.DataConsumerConfig.filterConfiguration.push({ column: '', contextValueName: '', operator: '', serverSide: false, value: '' });
    }
    /**
     * @return {?}
     */
    LoadJson() {
        this.JsonData = JSON.stringify(this.DataConsumerConfig, null, 2);
    }
    /**
     * @return {?}
     */
    UpdateFromJson() {
        if (this.DataConsumerConfig) {
            try {
                /** @type {?} */
                const tempDCC = JSON.parse(this.JsonData);
                this.DataConsumerConfig.name = tempDCC.name;
                this.DataConsumerConfig.columns = tempDCC.columns;
                this.DataConsumerConfig.contextParameters = tempDCC.contextParameters;
                this.DataConsumerConfig.dataGrouping = tempDCC.dataGrouping;
                this.DataConsumerConfig.dataPolicy = tempDCC.dataPolicy;
                this.DataConsumerConfig.filterConfiguration = tempDCC.filterConfiguration;
                this.DataConsumerConfig.fixedData = tempDCC.fixedData;
                this.DataConsumerConfig.fixedParameters = tempDCC.fixedParameters;
                this.DataConsumerConfig.overrideCacheRules = tempDCC.overrideCacheRules;
                this.DataConsumerConfig.pivot = tempDCC.pivot;
                this.DataConsumerConfig.sortColumns = tempDCC.sortColumns;
            }
            catch (e) {
                alert(JSON.stringify(e));
            }
        }
    }
    /**
     * @param {?} dataPolicyName
     * @return {?}
     */
    onSelectedDataPolicyChange(dataPolicyName) {
        if (this.dataPolicyList.length) {
            /** @type {?} */
            const dataPolicy = this.dataPolicyList.find(dp => dp.name === this.DataConsumerConfig.dataPolicy);
            if (dataPolicy) {
                if (dataPolicy.useMiddleLayer || typeof dataPolicy.useMiddleLayer === 'undefined') {
                    this.showMiddleLayerFeatures = true;
                    this.DataConsumerConfig.directUri = null;
                    this.DataConsumerConfig.apiStoreAppKey = null;
                    this.DataConsumerConfig.apiStoreSendMtAdfsOpenId = null;
                    this.DataConsumerConfig.httpMethod = null;
                }
                else {
                    // for any dataPolicy we'se setup to not use the middle layer, we need to store the Uri in the DataConsumerConfig
                    this.DataConsumerConfig.directUri = dataPolicy.sourceURL;
                    // and the apiStoreAppKey
                    this.DataConsumerConfig.apiStoreAppKey = dataPolicy.apiStoreAppKey;
                    // and the httpMethod
                    this.DataConsumerConfig.httpMethod = dataPolicy.httpMethod;
                    // and the apiStoreSendMtAdfsOpenId
                    this.DataConsumerConfig.apiStoreSendMtAdfsOpenId = dataPolicy.apiStoreSendMtAdfsOpenId;
                    // for any dataPolicy we've setup to not use the middle layer.. disable a bunch of the other config that does not apply
                    this.showMiddleLayerFeatures = false;
                }
            }
        }
    }
}
DataConsumerConfigEditorComponent.decorators = [
    { type: Component, args: [{
                selector: 'app-data-consumer-config-editor',
                template: "<ng-template #dataConsumerConfigName>\r\n    <b>Data consumer config name (optional):</b> Give a unique name to your data consumer config to identify it quickly</ng-template>\r\n<div class=\"form-group row\" style=\"margin-top: 15px\">\r\n    <label [tooltip]=\"dataConsumerConfigName\" class=\"col-sm-2 col-form-label\">Data Consumer Config Name (optional)</label>\r\n    <div class=\"col-sm-10\">\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"DataConsumerConfig.name\" name=\"dataConsumerConfigName\">\r\n    </div>\r\n</div>\r\n\r\n<ng-template #dataPolicyName>\r\n    <b>Data policy name:</b> must be a name in the list of data configuration objects </ng-template>\r\n<div class=\"form-group row\" style=\"margin-top: 15px\">\r\n    <label [tooltip]=\"dataPolicyName\" class=\"col-sm-2 col-form-label\">Data Policy Name</label>\r\n    <div class=\"col-sm-10\">\r\n\r\n        <select class=\"form-control\" [(ngModel)]=\"DataConsumerConfig.dataPolicy\" (change)=\"onSelectedDataPolicyChange($event.target.value)\"\r\n            id=\"dataPolicy\">\r\n            <option *ngFor=\"let name of dataPolicyNames\" [ngValue]=\"name\">\r\n                {{name}}\r\n            </option>\r\n        </select>\r\n    </div>\r\n</div>\r\n\r\n<tabset type=\"pills\">\r\n\r\n    <ng-template #fixedParamsTooltip>\r\n        <b>Fixed Parameters:</b> These parameter name/values are ALWAYS sent with the data request\r\n    </ng-template>\r\n    <tab heading=\"Fixed\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"fixedParamsTooltip\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <app-name-value-editor [nvArray]=\"DataConsumerConfig.fixedParameters\" [nameDisplay]=\"'Name'\" [valueDisplay]=\"'Value'\"></app-name-value-editor>\r\n    </tab>\r\n\r\n    <ng-template #sortColumnsTooltip>\r\n        <b>Fixed Parameters:</b> These parameter name/values used to sort. The name is the column, and the value is asc or desc\r\n    </ng-template>\r\n    <tab heading=\"Sorting\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"sortColumnsTooltip\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <app-name-value-editor [nvArray]=\"DataConsumerConfig.sortColumns\" [valueEnum]=\"sortTypes\" [nameEnum]=\"DataConsumerConfig.columns\"\r\n            [nameDisplay]=\"'column'\" [valueDisplay]=\"'Value'\"></app-name-value-editor>\r\n    </tab>\r\n\r\n    <ng-template #contextParamsTooltip>\r\n        <div style=\"text-align: left;\">\r\n            <b>Context Parameters:</b> Parameters sent to the data source based on current context. Specifying a 'Context Name'\r\n            tells the app that the context name/value should be sent to the data source url. Specifying 'Name To Send' will\r\n            send that value as the name instead of the context name. Example\r\n            <ul>\r\n                <li>Current context name/values are [Source=probe][Design=L06A][Lot=1234567.001][Step=FPP.00]</li>\r\n                <li>context parameters are [Design=,Step=Pid]</li>\r\n                <li>query params would be ?Design=L06A&Pid=FPP.00</li>\r\n            </ul>\r\n        </div>\r\n    </ng-template>\r\n    <tab heading=\"Context Params\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"contextParamsTooltip\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <app-name-value-editor [nvArray]=\"DataConsumerConfig.contextParameters\" [nameDisplay]=\"'Context Name'\" [valueDisplay]=\"'Name To Send (optional)'\"></app-name-value-editor>\r\n    </tab>\r\n\r\n    <ng-template #filterConfiguration>\r\n        <b>Filter Configuration: </b>\r\n        <ul>\r\n            <li>\r\n                <b>Name: </b>Column name to filter on</li>\r\n            <li>\r\n                <b>operator</b> (optional) specifies the kind of filtering\r\n                <ul>\r\n                    <li>string filtering: eq (default), startsWith, endsWith, contains</li>\r\n                    <li>number filtering: ==, gt, lt, ge, le, ne</li>\r\n                </ul>\r\n            </li>\r\n            <li>\r\n                <b>Fixed value</b> (optional) the value to use with the operator to filter the rows</li>\r\n            <li>\r\n                <b>Context Name for Value</b> (optional) the current context name to use the value for to filter the rows</li>\r\n            <li>\r\n                <b>Server side filtering</b> If true, server will filter results before sending to the app. If false, filtering\r\n                occurs in app after it is retrieved</li>\r\n        </ul>\r\n    </ng-template>\r\n    <tab heading=\"Filter\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"filterConfiguration\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <div class=\"form-group row\">\r\n            <label class=\"col-sm-3 col-form-label\">Column Name</label>\r\n            <label class=\"col-sm-2 col-form-label\">Operator?</label>\r\n            <label class=\"col-sm-2 col-form-label\">Fixed Value?</label>\r\n            <label class=\"col-sm-2 col-form-label\">Context Name for Value?</label>\r\n            <label class=\"col-sm-2 col-form-label\">Server side filtering</label>\r\n\r\n        </div>\r\n        <div class=\"form-group row\" *ngFor=\"let fRule of DataConsumerConfig.filterConfiguration;let idx = index\">\r\n\r\n            <div *ngIf=\"DataConsumerConfig.columns; else filterNameNoColumns\" class=\"col-sm-3\">\r\n                <select class=\"form-control\" [(ngModel)]=\"fRule.column\" id=\"fRuleColumn\">\r\n                    <option *ngFor=\"let name of DataConsumerConfig.columns\" [ngValue]=\"name\">\r\n                        {{name}}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <ng-template #filterNameNoColumns>\r\n                <div class=\"col-sm-3\">\r\n                    <input type=\"text\" class=\"form-control\" [(ngModel)]=\"fRule.column\" name=\"column\">\r\n                </div>\r\n            </ng-template>\r\n            <div class=\"col-sm-2\">\r\n                <select class=\"form-control\" [(ngModel)]=\"fRule.operator\" id=\"fRuleOperator\">\r\n                    <option *ngFor=\"let nv of filterOps\" [ngValue]=\"nv.value\">\r\n                        {{nv.value}}\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"col-sm-2\">\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"fRule.value\" name=\"value\">\r\n            </div>\r\n            <div class=\"col-sm-2\">\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"fRule.contextValueName\" name=\"contextValueName\">\r\n            </div>\r\n\r\n            <div class=\"col-sm-2\">\r\n                <select class=\"form-control\" [(ngModel)]=\"fRule.serverSide\" name=\"serverSide\">\r\n                    <option [ngValue]=\"true\">True</option>\r\n                    <option [ngValue]=\"false\">False</option>\r\n                </select>\r\n            </div>\r\n            <div class=\"col-sm-1\">\r\n                <button type=\"button\" class=\"btn btn-sm btn-danger\" (click)=\"DeleteFilterConfigByIndex(idx)\">\r\n                    <i class=\"fa fa-times\"></i>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"AddFilterConfig()\">Add</button>\r\n    </tab>\r\n\r\n    <ng-template #overrideCacheRulesTooltip>\r\n        Used to override the data policy set cache rules for this widget\r\n    </ng-template>\r\n    <tab heading=\"Cache rule overrides\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"overrideCacheRulesTooltip\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <app-cache-rule-editor [cacheRules]=\"DataConsumerConfig.overrideCacheRules\"></app-cache-rule-editor>\r\n    </tab>\r\n\r\n    <ng-template #dataGroupingTooltip>\r\n        Used to override the data policy set cache rules for this widget\r\n    </ng-template>\r\n    <tab heading=\"Grouping\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"dataGroupingTooltip\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <app-data-grouping-editor [columns]=\"DataConsumerConfig.columns\" [dataGrouping]=\"DataConsumerConfig.dataGrouping\"></app-data-grouping-editor>\r\n    </tab>\r\n\r\n\r\n    <ng-template #pivotTooltip>\r\n        Not implemented yet\r\n    </ng-template>\r\n    <tab heading=\"Pivot\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <span class=\"label label-default\" [tooltip]=\"pivotTooltip\" placement=\"bottom\">\r\n            <i class=\"fa fa-info-circle\"></i>&nbsp;Hover for info</span>\r\n        <p>Not Implemented yet</p>\r\n    </tab>\r\n\r\n    <tab heading=\"Fixed Data\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <div *ngIf=\"fixedDataIsInvalid\" class=\"alert alert-warning\" role=\"alert\">\r\n            <i class=\"fa fa-exclamation-circle\" aria-hidden=\"true\"></i> The JSON syntax for Fixed Data is INVALID and will NOT be saved. Please correct the field below before saving.\r\n        </div>\r\n        <textarea style=\"width: 100%; height: 400px\" [(ngModel)]=\"FixedData\" name=\"fixedData\" (ngModelChange)=\"UpdateFixedData()\"></textarea>\r\n    </tab>\r\n\r\n    <tab heading=\"Columns\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <div *ngIf=\"DataConsumerConfig.columns\">\r\n            <label>These are columns saved the last time the platform executed this data consumer configuration or from those that\r\n                existing when this widget was cloned. They may be out of date - if so, use the 'Clear Columns' button.\r\n            </label>\r\n            <button type=\"button\" (click)=\"ClearColumns()\" class=\"btn btn-info btn-sm\">Clear Columns</button>\r\n            <ul>\r\n                <li *ngFor=\"let name of DataConsumerConfig.columns\">{{name}}</li>\r\n            </ul>\r\n        </div>\r\n    </tab>\r\n\r\n    <tab heading=\"Custom Headers\">\r\n        <app-name-value-editor [nvArray]=\"DataConsumerConfig.overrideCustomHeaders\" [nameDisplay]=\"'Header Name'\" [valueDisplay]=\"'Header Value'\"></app-name-value-editor>\r\n    </tab>\r\n\r\n    <tab heading=\"JSON\" *ngIf=\"showMiddleLayerFeatures\">\r\n        <button type=\"button\" class=\"btn btn-info btn-sm\" (click)=\"LoadJson()\">\r\n            Serialize to JSON...\r\n        </button>\r\n        <button type=\"button\" class=\"btn btn-info btn-sm\" (click)=\"UpdateFromJson()\">\r\n            Save JSON Changes\r\n        </button>\r\n        <textarea style=\"width: 100%; height: 400px\" [(ngModel)]=\"JsonData\" name=\"JsonData\"></textarea>\r\n    </tab>\r\n</tabset>",
                styles: [""]
            }] }
];
/** @nocollapse */
DataConsumerConfigEditorComponent.ctorParameters = () => [
    { type: ElementRef },
    { type: ClientSettingsService },
    { type: DisplayStateService },
    { type: AppStateService },
    { type: WebPlatformApiService }
];
DataConsumerConfigEditorComponent.propDecorators = {
    DataConsumerConfig: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.DataConsumerConfig;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.dataPolicyNames;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.dataPolicyList;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.showMiddleLayerFeatures;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.fixedDataIsInvalid;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.sortTypes;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.filterOps;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.JsonData;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.FixedData;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.element;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.clientSettingsService;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.displayStateService;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.appStateService;
    /** @type {?} */
    DataConsumerConfigEditorComponent.prototype.webPlatformApiService;
}

//# sourceMappingURL=data:application/json;base64, 