dynamicsmobile/lib-backend/controls/dms-control-search.js

Allows development of off-line mobile and web business apps over the Dynamics Mobile platform. More info on https://www.dynamicsmobile.com

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DmsSearchControl = void 0;
const tslib_1 = require("tslib");
const dms_controls_controlbase_1 = require("./dms-controls-controlbase");
const jquery_1 = tslib_1.__importDefault(require("jquery"));
require("daterangepicker");
const ko = tslib_1.__importStar(require("knockout"));
const moment_1 = tslib_1.__importDefault(require("moment"));
const application_context_service_1 = require("../../lib-core/application-context-service");
const dms_root_container_1 = require("../../ioc/dms-root-container");
const userinterface_service_1 = require("../../lib-core/userinterface-service");
const bootstrap_1 = require("bootstrap");
class DmsSearchControl extends dms_controls_controlbase_1.DmsControl {
    constructor(controlId, hostingView, parentGrid, searchOptions) {
        super(controlId, hostingView);
        this.parentGrid = parentGrid;
        this.searchOptions = searchOptions;
        this.searchClick = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
            this.parentGrid.resetPage();
            return this.search();
        });
        this.getSearchFilter = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
            const me = this;
            var searchEntity = me.dataModel[me.searchOptions.id]();
            var searchPropKeys = Object.getOwnPropertyNames(searchEntity);
            var filterArr = [];
            for (let i = 0; i < searchPropKeys.length; i++) {
                const searchPropKey = searchPropKeys[i];
                if (searchEntity[searchPropKey]) {
                    var subFilterArr = [];
                    for (let y = 0; y < me.searchProps[searchPropKey].fields.length; y++) {
                        let propName = me.searchProps[searchPropKey].fields[y];
                        var metaProp = this.entityMeta.properties[propName];
                        if (!metaProp && [propName.indexOf('__') > 0]) {
                            metaProp = { type: 'String' };
                            propName = propName.replace(/__/g, '/').replace(/\./g, '/');
                        }
                        if (metaProp) {
                            if (metaProp.type.toLowerCase() == 'boolean') {
                                subFilterArr.push(`${propName} eq ${searchEntity[searchPropKey] == true ? 1 : 0}`);
                            }
                            else if (metaProp.type.toLowerCase() == 'int32' || metaProp.type.toLowerCase() == 'int64' || metaProp.type.toLowerCase() == 'bigint' || metaProp.type.toLowerCase() == 'decimal' || metaProp.type.toLowerCase() == 'float') {
                                if (searchEntity[searchPropKey] != '$all') {
                                    if (searchEntity[searchPropKey].indexOf('..') > 0) {
                                        const tokens = searchEntity[searchPropKey].split('..');
                                        const v1 = parseFloat(tokens[0]);
                                        const v2 = parseFloat(tokens[1]);
                                        if (!isFinite(v1) || !isFinite(v2)) {
                                            (0, jquery_1.default)(`input[data-dms-value-key='${searchPropKey}']`).addClass('invalid-search-control');
                                            return;
                                        }
                                        else {
                                            subFilterArr.push(`(${propName}  ge ${v1} and ${propName}  le ${v2})`);
                                        }
                                    }
                                    else if (searchEntity[searchPropKey].indexOf('>=') == 0) {
                                        const tokens = searchEntity[searchPropKey].split('>=');
                                        const v1 = parseFloat(tokens[1]);
                                        if (!isFinite(v1)) {
                                            (0, jquery_1.default)(`input[data-dms-value-key='${searchPropKey}']`).addClass('invalid-search-control');
                                            return;
                                        }
                                        subFilterArr.push(`${propName} ge ${v1}`);
                                    }
                                    else if (searchEntity[searchPropKey].indexOf('<=') == 0) {
                                        const tokens = searchEntity[searchPropKey].split('<=');
                                        const v1 = parseFloat(tokens[1]);
                                        if (!isFinite(v1)) {
                                            (0, jquery_1.default)(`input[data-dms-value-key='${searchPropKey}']`).addClass('invalid-search-control');
                                            return;
                                        }
                                        subFilterArr.push(`${propName}  le ${v1}`);
                                    }
                                    else if (searchEntity[searchPropKey].indexOf('>') == 0) {
                                        const tokens = searchEntity[searchPropKey].split('>');
                                        const v1 = parseFloat(tokens[1]);
                                        if (!isFinite(v1)) {
                                            (0, jquery_1.default)(`input[data-dms-value-key='${searchPropKey}']`).addClass('invalid-search-control');
                                            return;
                                        }
                                        subFilterArr.push(`${propName}  gt ${v1}`);
                                    }
                                    else if (searchEntity[searchPropKey].indexOf('<') == 0) {
                                        const tokens = searchEntity[searchPropKey].split('<');
                                        const v1 = parseFloat(tokens[1]);
                                        if (!isFinite(v1)) {
                                            (0, jquery_1.default)(`input[data-dms-value-key='${searchPropKey}']`).addClass('invalid-search-control');
                                            return;
                                        }
                                        subFilterArr.push(`${propName}  lt ${v1}`);
                                    }
                                    else {
                                        const v1 = parseFloat(searchEntity[searchPropKey]);
                                        if (!isFinite(v1)) {
                                            (0, jquery_1.default)(`input[data-dms-value-key='${searchPropKey}']`).addClass('invalid-search-control');
                                            return;
                                        }
                                        subFilterArr.push(propName + " eq " + v1);
                                    }
                                }
                            }
                            else if (metaProp.type.toLowerCase() == 'datetime' && searchEntity[searchPropKey].dateRange != true) {
                                var val = searchEntity[searchPropKey];
                                if (val && val.dateRange) {
                                    const __start = (0, moment_1.default)(val.dateRange.start).startOf('day').utc().format('YYYY-MM-DD HH:mm:ss');
                                    const __end = (0, moment_1.default)(val.dateRange.end).endOf('day').utc().format('YYYY-MM-DD HH:mm:ss');
                                    subFilterArr.push(`${propName} ge '${__start}' and ${propName} le '${__end}'`);
                                }
                            }
                            else if (metaProp.type.toLowerCase() == 'ref') {
                                const itemDMS_ROWID = (0, jquery_1.default)(`#${this.controlId}_prop${propName}`).attr('data-selectedValue');
                                if (itemDMS_ROWID) {
                                    subFilterArr.push(`${propName} eq '${itemDMS_ROWID}'`);
                                }
                            }
                            else {
                                //string
                                if (searchEntity[searchPropKey] != '$all') {
                                    if (searchEntity[searchPropKey] && searchEntity[searchPropKey].indexOf && searchEntity[searchPropKey].indexOf("*") >= 0) {
                                        let v, va = searchEntity[searchPropKey].split('*');
                                        v = va.pop();
                                        if (v && v != '*') {
                                            subFilterArr.push("endswith(" + propName + ",'" + v + "')");
                                        }
                                        v = va.shift();
                                        if (v && v != '*') {
                                            subFilterArr.push("startswith(" + propName + ",'" + v + "')");
                                        }
                                        va.forEach(v => {
                                            if (v && v != '*') {
                                                subFilterArr.push("contains(" + propName + ",'" + v + "')");
                                            }
                                        });
                                    }
                                    else {
                                        const filters = this.extractStringSubFilters(searchEntity[searchPropKey], propName);
                                        if (filters.length > 0) {
                                            subFilterArr.push(`(${filters.join(' or ')})`);
                                        }
                                    }
                                }
                            }
                        }
                    }
                    if (subFilterArr.length)
                        filterArr.push("((" + subFilterArr.join(") or (") + "))");
                }
            }
            return filterArr.join(" and ");
        });
        this.extractStringSubFilters = (searchString, propName) => {
            const tokens = searchString.split(';');
            const filters = [];
            for (let i = 0; i < tokens.length; i++) {
                if (tokens[i] && tokens[i].length > 0) {
                    filters.push(`${propName} eq '${tokens[i]}'`);
                }
            }
            return filters;
        };
        this.search = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
            const me = this;
            (0, jquery_1.default)('.search-validation').removeClass('invalid-search-control');
            const serchFilter = yield me.getSearchFilter();
            yield me.parentGrid.refresh(serchFilter);
            (0, jquery_1.default)(`#${me.controlId}Button>span`).removeClass(`fa-search`).addClass('fa-search-plus');
        });
        this.onLookupModalShow = (ev) => tslib_1.__awaiter(this, void 0, void 0, function* () {
            const lastPropName = this.propertyName;
            this.propertyName = (0, jquery_1.default)(ev.relatedTarget).attr('data-prop');
            this.prop = this.entityMeta.properties[this.propertyName];
            this.lookUpDisplayExpand = this.prop.refDisplayExpand ? this.prop.refDisplayExpand.split(',') : [];
            this.lookUpDisplayFieldNames(this.prop.refDisplayField ? this.prop.refDisplayField.split(',').map(s => `${s.indexOf('|') > 0 ? s.split('|')[0] : s}`) : [`${this.prop.refDisplayField}`]);
            this.lookUpDisplayFieldFormats = this.prop.refDisplayField ? this.prop.refDisplayField.split(',').map(s => s.indexOf('|') > 0 ? { dataType: s.split('|')[1], formatString: s.split('|')[2] } : {}) : [];
            this.lookUpDisplayFieldName = this.lookUpDisplayFieldNames() && this.lookUpDisplayFieldNames().length > 0 ? this.lookUpDisplayFieldNames()[0].replace(/'/g, '') : null;
            this.lookUpDisplayFieldLabels(this.prop.refDisplayFieldLabel ? this.prop.refDisplayFieldLabel.split(',').map(s => `${s}`) : [`${this.prop.refDisplayField}`]);
            this.lookUpDisplayFieldSearch = this.prop.refDisplayFieldSearch ? this.prop.refDisplayFieldSearch.split(',').map(s => `'${s}'`) : this.lookUpDisplayFieldNames();
            this.lookUpDisplayWidth = this.prop.refDisplayWidth;
            this.lookUpDisplaySort = this.prop.refDisplaySort;
            this.lookUpTitle(this.prop.label);
            if ((this.lookUpArray() && this.lookUpArray().length == 0) || lastPropName != this.propertyName) {
                this.lookUpSearchbox('');
                this.findLookUpItems();
            }
        });
        this.closeLookup = () => {
            const modal = bootstrap_1.Modal.getInstance((0, jquery_1.default)(`#${this.controlId}SearchLookUp`));
            modal.hide();
        };
        this.findLookUpItemsEnterKey = (container, ev) => {
            if (ev.which == 13) {
                this.findLookUpItems();
                return false;
            }
            // Knockout events prevent the default action if true is not returned explicitly;
            return true;
        };
        this.findLookUpItems = () => {
            const ui = dms_root_container_1.RootDIContainer.inject(userinterface_service_1.UserInterfaceService);
            ui.showLoading();
            try {
                const appCode = dms_root_container_1.RootDIContainer.inject(application_context_service_1.DmsApplicationService).appCode;
                let where = [];
                const searchString = this.lookUpSearchbox();
                if (searchString && searchString.length > 0) {
                    this.lookUpDisplayFieldSearch.forEach(fieldName => {
                        where.push("contains(" + fieldName.replace(/'/g, '') + ",'" + searchString + "')");
                    });
                }
                where = where.length > 0 ? `(${where.join(' or ')})` : '';
                if (this.prop.refFilter) {
                    if (where) {
                        where += ' and ';
                    }
                    where += '(' + this.prop.refFilter + ')';
                }
                const me = this;
                this.dataSource.rawExecuteSelect({ appCode, entityName: this.prop.ref, filter: where, sort: this.lookUpDisplaySort ? this.lookUpDisplaySort : '', expand: this.lookUpDisplayExpand }).then(function (records) {
                    me.lookUpArray([]);
                    me.lookUpArray(records);
                    ui.hideLoading();
                }, function (err) {
                    ui.showError(err);
                    console.log(err);
                });
            }
            catch (err) {
                ui.showError(err);
            }
            return true;
        };
        this.selectLookUpRow = (item) => {
            const displayPropName = this.lookUpDisplayFieldName;
            const displayValue = item[displayPropName];
            (0, jquery_1.default)(`#${this.controlId}_prop${this.propertyName}`).attr('data-selectedValue', item.DMS_ROWID);
            const searchPropKey = (0, jquery_1.default)(`#${this.controlId}_prop${this.propertyName}`).attr('data-searchPropKey');
            const searchEntity = this.hostingView[this.searchOptions.id]();
            (0, jquery_1.default)(`#${this.controlId}_prop${this.propertyName}`).val(displayValue);
            searchEntity[searchPropKey] = displayValue;
            this.closeLookup();
        };
        this.getFormattedFieldValue = (value, index) => {
            if (this.lookUpDisplayFieldFormats.length == 0)
                return value;
            const format = this.lookUpDisplayFieldFormats[index];
            if (format.formatString) {
                switch (format.dataType.toLowerCase()) {
                    case 'int':
                    case 'int32':
                    case 'int64':
                    case 'float':
                    case 'decimal': return value;
                    case 'date':
                    case 'datetime': return (0, moment_1.default)(value).format(format.formatString);
                    default: return value;
                }
            }
            return value;
        };
        this.clearSearchLookup = (control, ev) => tslib_1.__awaiter(this, void 0, void 0, function* () {
            let propName = (0, jquery_1.default)(ev.target).parent().attr('data-prop');
            let searchPropKey = (0, jquery_1.default)(ev.target).parent().attr('data-searchPropKey');
            if (!propName) {
                propName = (0, jquery_1.default)(ev.target).attr('data-prop');
                searchPropKey = (0, jquery_1.default)(ev.target).attr('data-searchPropKey');
            }
            (0, jquery_1.default)(`#${this.controlId}_prop${propName}`).val(undefined);
            (0, jquery_1.default)(`#${this.controlId}_prop${propName}`).attr('data-selectedValue', undefined);
            const searchEntity = this.hostingView[this.searchOptions.id]();
            searchEntity[searchPropKey] = undefined;
        });
        this.lookUpDisplayWidth = '100%';
        this.lookUpDisplayFieldLabels = ko.observableArray(['']);
        this.lookUpDisplayFieldNames = ko.observableArray(['DMS_ROWID']);
        this.lookUpDisplayExpand = null;
        this.lookUpDisplayFieldFormats = [];
        this.lookUpDisplayFieldSearch = [];
        this.lookUpDisplaySort = null;
        this.lookUpArray = ko.observableArray([]);
        this.lookUpTitle = ko.observable();
        this.lookUpSearchbox = ko.observable();
        this.hostingView[`${this.controlId}lookUpTitle`] = this.lookUpTitle;
        this.hostingView[`${this.controlId}closeLookup`] = this.closeLookup;
        this.hostingView[`${this.controlId}lookUpArray`] = this.lookUpArray;
        this.hostingView[`${this.controlId}findLookUpItemsEnterKey`] = this.findLookUpItemsEnterKey;
        this.hostingView[`${this.controlId}findLookUpItems`] = this.findLookUpItems;
        this.hostingView[`${this.controlId}clearSearchLookup`] = this.clearSearchLookup;
        this.hostingView[`${this.controlId}getFormattedFieldValue`] = this.getFormattedFieldValue;
        this.hostingView[`${this.controlId}lookUpDisplayFieldNames`] = this.lookUpDisplayFieldNames;
        this.hostingView[`${this.controlId}lookUpDisplayFieldLabels`] = this.lookUpDisplayFieldLabels;
        this.hostingView[`${this.controlId}selectLookUpRow`] = this.selectLookUpRow;
        this.hostingView[`${this.controlId}lookUpSearchbox`] = this.lookUpSearchbox;
    }
    load() {
        return tslib_1.__awaiter(this, void 0, void 0, function* () {
            const me = this;
            this.hostingView[this.controlId] = this;
            let searchOptions = this.searchOptions;
            let element = (0, jquery_1.default)(`#${this.controlId}>.content`);
            this.dataModel = this.hostingView;
            this.dataSource = (0, jquery_1.default)('#' + searchOptions.dataSourceId).dmsDataSource();
            if (!this.dataSource) {
                throw new Error('DMS Search [' + searchOptions.id + '] has invalid  [data-dms-datasource] attribute!');
            }
            this.entityMeta = yield this.dataSource.getEntityMetadata();
            if (!this.entityMeta) {
                throw new Error('DMS Search [' + searchOptions.id + '] can not find cached entity metadata!');
            }
            var searchDataMemberName = searchOptions.id;
            var searchDataMemberOnbserbavleName = searchDataMemberName + "()";
            this.dataSource.searchControl = true;
            this.dataModel[searchDataMemberName] = ko.observable({});
            const viewName = this.parentGrid.searchEntityViewName;
            let searchView = this.entityMeta.views[viewName];
            if (!searchView) {
                throw new Error(`View "${viewName}" not found in entity definition.`);
            }
            if (searchOptions.customSerachView) {
                searchView = searchOptions.customSerachView;
            }
            this.searchProps = {};
            let lastFieldGroup;
            let refLookupElement = null;
            searchView.properties.forEach((viewItem, idx) => {
                if (viewItem.type == "group")
                    lastFieldGroup = null;
                let fieldGroup = lastFieldGroup;
                if (!fieldGroup) {
                    fieldGroup = { fields: [], searchPropKey: null, label: null, processed: false };
                    let searchPropKey = 'search' + idx;
                    fieldGroup.searchPropKey = searchPropKey;
                    me.searchProps[searchPropKey] = fieldGroup;
                }
                let searchPropKey = fieldGroup.searchPropKey;
                if (viewItem.type == "group") {
                    fieldGroup.label = viewItem.label;
                    lastFieldGroup = fieldGroup;
                }
                else {
                    let itemName = viewItem.name;
                    let tokens = null;
                    // if (viewItem.name.indexOf('__') > 0) {
                    //     tokens = viewItem.name.split('__');
                    // }
                    // else
                    //     if (viewItem.name.indexOf('.') > 0) {
                    //         tokens = viewItem.name.split('.');
                    //     }
                    // if (tokens && tokens.length > 0) {
                    //     const expandPath = tokens[0];
                    //     const path = this.entityMeta.expand[expandPath];
                    //     if (path && path.field) {
                    //         itemName = path.field;
                    //     }
                    // }
                    let prop = this.entityMeta.properties[itemName];
                    if (!prop) {
                        //make it a string field
                        prop = { type: 'String', length: 50, label: viewItem.label };
                    }
                    if (prop && !fieldGroup.processed) {
                        fieldGroup.fields.push(itemName);
                        fieldGroup.processed = true;
                        const label = fieldGroup.label || prop.label;
                        var isInteger = false;
                        var isNumber = false;
                        var encodedRegEx = prop.regex;
                        if (encodedRegEx)
                            encodedRegEx = encodedRegEx.replace(/"/g, function (s) {
                                return '&quot;';
                            }).replace("/\&/g", function (s) {
                                return '&amp;';
                            });
                        var patternAttr = encodedRegEx ? 'data-parsley-pattern="' + encodedRegEx + '"' : '';
                        var disabledAttr = '';
                        var inputElement = `<div class="form-group m-r-10"><input title="${label}" placeholder="${label}" data-bind="value:${searchDataMemberOnbserbavleName}.${searchPropKey}" class="form-control form-control-sm search-validation" type="${isInteger || isNumber ? 'number' : 'text'}" placeholder="${label}" ${patternAttr} data-dms-value-key="${searchPropKey}"/></div>`;
                        if (prop.type == 'Boolean' && !prop.isIdentity && !prop.isReadOnly) {
                            inputElement = `<div class="form-group m-r-10"><input title="${label}" type="checkbox" data-theme="default" data-bind="checked:${searchDataMemberOnbserbavleName}.${searchPropKey}"/></div></div>`;
                        }
                        else if (prop.type == 'DateTime' && viewItem.range == false) {
                            inputElement = `<div title="${label}" class="form-group m-r-10"><div class="input-group date"><input data-bind="value:${searchDataMemberOnbserbavleName}.${searchPropKey}" type="date" class="form-control form-control-sm" ${disabledAttr}/></div></div></div>`;
                        }
                        else if (prop.type == 'DateTime') {
                            inputElement =
                                `<div class="form-group m-r-10" title="${label}">
                                   <div class="form-control form-control-sm p-t-4"> 
                                     <input type="text" title="${label}" placeholder="${label}" style="border: none !important" class="dms-search-date-range"  data-dms-value-observable="${searchDataMemberName}" data-dms-value-key="${searchPropKey}"/>                                
                                   </div>
                                </div>`;
                        }
                        else if (prop.type == 'ref') {
                            const formControlClass = "form-control form-control-sm";
                            inputElement = `<div class="form-group m-r-10 input-group">
                                        <input id="${this.controlId}_prop${itemName}" type="text" class="${formControlClass}" readonly placeholder="${label}" data-bind="value: ${searchDataMemberOnbserbavleName}.${searchPropKey}" data-searchPropKey="${searchPropKey}" />
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary btn-sm" tab-index="-1" data-searchPropKey="${searchPropKey}" data-prop="${itemName}" data-bind="click: ${this.controlId}clearSearchLookup"><i class="fa f-fw fa-times"></i></button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-prop="${itemName}" data-keyboard="true" data-bs-backdrop="true" data-bs-target="#${this.controlId}SearchLookUp" tab-index="-1"><i class="fa f-fw fa-search"></i></button>
                                        </span>
                                        </div>
                                    </div>`;
                            if (!refLookupElement) {
                                refLookupElement = `<div class="modal" id="${this.controlId}SearchLookUp" role="dialog">
                                    <div class="modal-dialog modal-xs">
                                        <div class="modal-content">
                                            <div class="modal-header" style="height: auto;">
                                                <h6 class="modal-title" data-bind="text: $root.${this.controlId}lookUpTitle">111111</h6>
                                                <button href="#" data-bind="click:$root.${this.controlId}closeLookup" class="btn btn-primary btn-sm"><i class="fa fa-fw fa-times"></i></button>
                                                </div>
                                            <div class="modal-body">
                                           <div class="form-inline mr-auto mb-1">   
                                             <div class="md-form">  
                                                 <input class="${formControlClass}" data-bind="event: {keypress:$root.${this.controlId}findLookUpItemsEnterKey},textinput:${this.controlId}lookUpSearchbox" type="text" placeholder="Search" aria-label="Search" >
                                                 <button type="button" class="btn btn-primary btn-sm" data-bind="click:$root.${this.controlId}findLookUpItems"><i class="fa fa-search m-r-4 m-l-4" aria-hidden="true"></i></button>
                                             </div>
                                          </div>
                                               <div style="height:280px;overflow:scroll;border:1px solid lightgray">
                                                <table style="width:${this.lookUpDisplayWidth ? this.lookUpDisplayWidth + 'px' : '100%'}" class="table table-striped table-bordered f-s-10">                                               
                                                <thead>
                                                  <tr>
                                                    <!--ko foreach: ${this.controlId}lookUpDisplayFieldLabels  -->
                                                       <td data-bind="text:$data"></td>
                                                    <!--/ko -->                  
                                                  </tr>
                                                </thead>                                            
                                                <tbody data-bind="foreach:$root.${this.controlId}lookUpArray">                       
                                                    <tr data-bind="click: $parent.${this.controlId}selectLookUpRow">
                                                        <!--ko foreach: $parent.${this.controlId}lookUpDisplayFieldNames  -->
                                                             <td data-bind="text:$root.${this.controlId}getFormattedFieldValue($parent[$data],$index())" style="cursor: pointer;"></td>
                                                        <!--/ko -->
                                                    </tr> 
                                               </tbody> 
                                                </table>
                                               </div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>`;
                            }
                        }
                        else if (prop.List && !prop.isIdentity && !prop.isReadOnly) {
                            inputElement = `<div class="form-group m-r-10"><select  style="width:100%" title="${prop.label}" class="form-control-sm default-select2 dms-search-select" data-size="100" data-live-search="true" data-style="btn-white" data-bind="value:${searchDataMemberOnbserbavleName}.${searchPropKey}">`;
                            inputElement += '<option value="$all">[All]</option>';
                            for (let x = 0; x < prop.List.length; x++) {
                                inputElement += `<option value="${(prop.List[x].Code ? prop.List[x].Code : x)}">${prop.List[x].Label}</option>`;
                            }
                            inputElement += '</select></div>';
                        }
                        element.append(inputElement);
                    }
                }
            });
            element.find('dms-properties').remove();
            element.append(`<button class="btn btn-sm btn-primary" data-bind="click:${searchOptions.id}searchClick"><i class="fa fa-fw fa-search"></i></button>`);
            element.append(`<button class="btn btn-sm btn-outline-secondary  ml-1" data-bind="click:${searchOptions.id}searchClear"><i class="fa fa-fw fa-times-circle"></i></button>`);
            element.append(`<i style="cursor:pointer;position:absolute;top:5px;right:5px" data-bind="click:${searchOptions.id}searchClose" class="fa fa-fw fa-times"></i>`);
            if (refLookupElement) {
                element.append(refLookupElement);
            }
            this.dataModel[`${searchOptions.id}searchClear`] = function () {
                var searchEntityF = me.dataModel[searchOptions.id];
                searchEntityF({});
                (0, jquery_1.default)(`#${me.controlId} .content .dms-search-date-range`).val('');
                (0, jquery_1.default)(`#${me.controlId} .content .dms-search-select`).val('$all');
                (0, jquery_1.default)(`#${me.controlId}`).toggle(200);
                (0, jquery_1.default)(`#${me.controlId}Button`).toggleClass(`grid-search-control-active`);
                (0, jquery_1.default)(`#${me.controlId}Button>span`).removeClass(`fa-search-plus`).addClass('fa-search');
                me.parentGrid.resetPage();
                me.parentGrid.refresh('');
            };
            me.dataModel[`${searchOptions.id}searchClose`] = function () {
                (0, jquery_1.default)(`#${me.controlId} .content .dms-search-date-range`).val('');
                (0, jquery_1.default)(`#${me.controlId} .content .dms-search-select`).val('$all');
                (0, jquery_1.default)(`#${me.controlId}`).toggle(200);
                (0, jquery_1.default)(`#${me.controlId}Button`).toggleClass(`grid-search-control-active`);
            };
            me.dataModel[searchOptions.id + 'searchClick'] = me.searchClick;
            (0, jquery_1.default)('input.dms-search-date-range').daterangepicker({
                minDate: (0, moment_1.default)().subtract(1, "years"),
                maxDate: (0, moment_1.default)().add(1, "years"),
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                ranges: {
                    Today: [(0, moment_1.default)().startOf('day'), (0, moment_1.default)().endOf('day')],
                    Yesterday: [(0, moment_1.default)().subtract(1, "days").startOf('day'), (0, moment_1.default)().subtract(1, "days").endOf('day')],
                    "This Week": [(0, moment_1.default)().startOf("week"), (0, moment_1.default)().endOf("week")],
                    "Last 10 days": [(0, moment_1.default)().subtract(10, 'days'), (0, moment_1.default)().endOf('day')],
                    "Last 30 days": [(0, moment_1.default)().subtract(30, 'days'), (0, moment_1.default)().endOf('day')],
                    "This Month": [(0, moment_1.default)().startOf("month"), (0, moment_1.default)().endOf("month")],
                    "Last Month": [(0, moment_1.default)().subtract(1, "month").startOf("month"), (0, moment_1.default)().subtract(1, "month").endOf("month")],
                    "This Year": [(0, moment_1.default)().startOf("year"), (0, moment_1.default)().endOf("year")],
                    "Last Year": [(0, moment_1.default)().subtract(1, "year").startOf("year"), (0, moment_1.default)().subtract(1, "year").endOf("year")]
                },
                opens: "left",
                drops: "down",
                buttonClasses: ["btn", "btn-sm"],
                cancelButtonClasses: "btn-default",
                // locale: {
                //     applyLabel: "Apply",
                //     cancelLabel: "Clear",
                //     fromLabel: "From",
                //     toLabel: "To",
                //     customRangeLabel: "Custom",
                //     daysOfWeek: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
                //     monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                //     firstDay: 1
                // }
                locale: {
                    applyLabel: "Apply",
                    cancelLabel: "Clear",
                    fromLabel: "From",
                    toLabel: "To",
                    customRangeLabel: "Custom",
                    daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
                    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                    firstDay: 1
                }
            }).on('apply.daterangepicker', function (e, picker) {
                const { startDate: start, endDate: end } = picker;
                //TODO: originalLabel is not working
                //picker.originalLabel = picker.originalLabel || $(picker.element).find('span').html();
                (0, jquery_1.default)(picker.element).find('span').html(start.format("DD MMM YYYY") + " - " + end.format("DD MMM YYYY"));
                me.dataModel[(0, jquery_1.default)(picker.element).attr('data-dms-value-observable')]()[(0, jquery_1.default)(picker.element).attr('data-dms-value-key')] = {
                    dateRange: {
                        start: start,
                        end: end
                    }
                };
            }).on('cancel.daterangepicker', function (e, picker) {
                //TODO: originalLabel is not working
                //$(picker.element).find('span').html(picker.originalLabel);
                me.dataModel[(0, jquery_1.default)(picker.element).attr('data-dms-value-observable')]()[(0, jquery_1.default)(picker.element).attr('data-dms-value-key')] = null;
                (0, jquery_1.default)(this).val('');
            });
            (0, jquery_1.default)(`#${this.controlId} .content .dms-search-date-range`).val('');
            (0, jquery_1.default)(`#${this.controlId}SearchLookUp`).on('shown.bs.modal', this.onLookupModalShow);
        });
    }
}
exports.DmsSearchControl = DmsSearchControl;
;
//# sourceMappingURL=dms-control-search.js.map