dynamicsmobile/lib-backend/controls/dms-control-options.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.DmsOptionsControl = exports.GridToolbarType = 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"));
var GridToolbarType;
(function (GridToolbarType) {
    GridToolbarType[GridToolbarType["DefaultTopView"] = 0] = "DefaultTopView";
    GridToolbarType[GridToolbarType["GridEmbedded"] = 1] = "GridEmbedded";
    GridToolbarType[GridToolbarType["Custom"] = 2] = "Custom";
})(GridToolbarType || (exports.GridToolbarType = GridToolbarType = {}));
class DmsOptionsControl extends dms_controls_controlbase_1.DmsControl {
    constructor(controlId, hostingView, parentGrid, optionOptions, entityView, gridToolbarType) {
        super(controlId, hostingView);
        this.parentGrid = parentGrid;
        this.optionOptions = optionOptions;
        this.entityView = entityView;
        this.customExpands = {};
        this.initializeViewColumns = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
            const viewName = this.parentGrid.listEntityViewName ? this.parentGrid.listEntityViewName : 'list';
            const optionsOptions = this.optionOptions;
            const dataModel = this.hostingView;
            const dataSource = (0, jquery_1.default)('#' + optionsOptions.dataSourceId).dmsDataSource();
            if (!dataSource) {
                throw new Error('DMS Search [' + optionsOptions.id + '] has invalid  [data-dms-datasource] attribute!');
            }
            const entityMeta = yield dataSource.getEntityMetadata();
            let searchView = entityMeta.views[viewName];
            this.customExpands = {};
            const customViewAsString = localStorage.getItem(`${this.parentGrid.controlId}CustomGridView`);
            if (customViewAsString) {
                searchView = JSON.parse(customViewAsString);
            }
            if (!searchView) {
                throw new Error(`View "${viewName}" not found in entity definition.`);
            }
            this.customExpands = searchView.customExpands ? searchView.customExpands : {};
            dataModel[`${this.id}OptionsViewColumns`]([]);
            searchView.properties.forEach((viewItem, idx) => {
                if (viewItem.type != "group") {
                    const entityProp = entityMeta.properties[viewItem.name];
                    dataModel[`${this.id}OptionsViewColumns`].push({
                        name: viewItem.name,
                        label: viewItem.label ? viewItem.label : (entityProp ? entityProp.label : viewItem.name),
                        format: viewItem.format ? viewItem.format : (entityProp && entityProp.format ? entityProp.format : undefined),
                    });
                }
            });
        });
        this.addOptionsColumn = () => {
            let dataModel = this.hostingView;
            const selected = dataModel[`${this.id}OptionsSelectedEntityField`]();
            const maxColumns = 15;
            //console.log('add ', selected);
            if (selected) {
                const arr = dataModel[`${this.id}OptionsViewColumns`]();
                if (arr.length > maxColumns) {
                    alert(`Maximum ${maxColumns} columns are allowed`);
                    return;
                }
                const idx = arr.findIndex(c => c.name == selected.name);
                const arr2 = dataModel[`${this.id}OptionsEntityFields`]();
                const field = arr2.find(c => c.name == selected.name);
                if (field && idx < 0) {
                    arr.push(field);
                    if (field.expandPath) {
                        this.customExpands[field.expandPath] = true;
                    }
                    dataModel[`${this.id}OptionsViewColumns`](arr);
                    dataModel[`${this.id}OptionsViewColumns`].notifySubscribers();
                }
            }
        };
        this.removeOptionsColumn = (column) => {
            const dataModel = this.hostingView;
            const arr = dataModel[`${this.id}OptionsViewColumns`]();
            const idx = arr.findIndex(c => c.name === column.name);
            if (idx >= 0) {
                if (column.expandPath) {
                    delete this.customExpands[column.expandPath];
                }
                arr.splice(idx, 1);
                dataModel[`${this.id}OptionsViewColumns`](arr);
                dataModel[`${this.id}OptionsViewColumns`].notifySubscribers();
            }
        };
        this.openGridSetupDialog = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
            yield this.initializeViewColumns();
            (0, jquery_1.default)(`#${this.parentGrid.controlId}SetupDlg`).show();
        });
        this.upOptionsColumn = (column) => {
            const dataModel = this.hostingView;
            const arr = dataModel[`${this.id}OptionsViewColumns`]();
            const fromIndex = arr.findIndex(c => c.name === column.name);
            const toIndex = fromIndex - 1;
            if (fromIndex == 0) {
                return;
            }
            const element = arr[fromIndex];
            arr.splice(fromIndex, 1);
            arr.splice(toIndex, 0, element);
            dataModel[`${this.id}OptionsViewColumns`](arr);
            dataModel[`${this.id}OptionsViewColumns`].notifySubscribers();
        };
        this.downOptionsColumn = (column) => {
            const dataModel = this.hostingView;
            const arr = dataModel[`${this.id}OptionsViewColumns`]();
            const fromIndex = arr.findIndex(c => c.name === column.name);
            const toIndex = fromIndex + 1;
            if (fromIndex < 0 || fromIndex > arr.length - 1) {
                return;
            }
            const element = arr[fromIndex];
            arr.splice(fromIndex, 1);
            arr.splice(toIndex, 0, element);
            dataModel[`${this.id}OptionsViewColumns`](arr);
            dataModel[`${this.id}OptionsViewColumns`].notifySubscribers();
        };
        this.resetOptionsColumns = () => {
            localStorage.removeItem(`${this.parentGrid.controlId}CustomGridView`);
            this.initializeViewColumns();
        };
        this.saveOptionsColumns = () => {
            const dataModel = this.hostingView;
            const arr = dataModel[`${this.id}OptionsViewColumns`]();
            if (arr.length == 0) {
                alert('Please select at least one column to display.');
                return;
            }
            const view = {
                properties: [],
                customExpands: this.customExpands
            };
            arr.forEach((col, idx) => {
                view.properties.push({
                    name: col.name,
                    label: col.label ? col.label : col.name,
                    format: col.format ? col.format : undefined
                });
            });
            localStorage.setItem(`${this.parentGrid.controlId}CustomGridView`, JSON.stringify(view));
            this.closeGridSetupDlg();
            if (window.parent) {
                window.parent.location.reload();
            }
            else {
                window.location.reload();
            }
        };
        this.closeGridSetupDlg = () => {
            (0, jquery_1.default)(`#${this.parentGrid.controlId}SetupDlg`).hide();
        };
    }
    load() {
        return tslib_1.__awaiter(this, void 0, void 0, function* () {
            let optionsOptions = this.optionOptions;
            let element = (0, jquery_1.default)(`#${this.controlId}>.content`);
            let dataModel = this.hostingView;
            let dataSource = (0, jquery_1.default)('#' + optionsOptions.dataSourceId).dmsDataSource();
            if (!dataSource) {
                throw new Error('DMS Search [' + optionsOptions.id + '] has invalid  [data-dms-datasource] attribute!');
            }
            const entityMeta = yield dataSource.getEntityMetadata();
            if (!entityMeta) {
                throw new Error('DMS Search [' + optionsOptions.id + '] can not find cached entity metadata!');
            }
            const me = this;
            dataModel[`${optionsOptions.id}optionsClose`] = function () {
                (0, jquery_1.default)(`#${me.controlId}`).toggle(200);
                //$(`#${me.controlId}Button`).toggleClass(`grid-search-control-active`);                       
            };
            const excelFunc = `${this.id}OptionsExcel`;
            if (optionsOptions.gridToolbarType == GridToolbarType.DefaultTopView) {
                (0, jquery_1.default)(`#${this.hostingView.$element.id} .converters`).append(`<span style="margin-left:10px">&nbsp;</span>`);
                const excelButtonHml = `<a href="#" data-bind="click: function(){($parent && $parent.${excelFunc})?$parent.${excelFunc}():$data.${excelFunc}()}"><span class="fa fa-fw fa-file-excel"></span></a>`;
                (0, jquery_1.default)(`#${this.hostingView.$element.id} .converters`).append(excelButtonHml);
            }
            dataModel[excelFunc] = function () {
                me.parentGrid.export();
            };
            const columnsFunc = `${this.id}OptionsCols`;
            if (optionsOptions.gridToolbarType == GridToolbarType.DefaultTopView) {
                const columnsButtonHml = `<a href="#" data-bind="click: function(){($parent && $parent.${columnsFunc})?$parent.${columnsFunc}():$data.${columnsFunc}()}"><span class="fa fa-fw fa-columns"></span></a>`;
                (0, jquery_1.default)(`#${this.hostingView.$element.id} .converters`).append(columnsButtonHml);
            }
            dataModel[columnsFunc] = function () {
                me.openGridSetupDialog();
            };
            const closeGridSetupDlg = `${this.id}closeGridSetupDlg`;
            dataModel[closeGridSetupDlg] = function () {
                me.closeGridSetupDlg();
            };
            const addColumn = `${this.id}AddColumn`;
            dataModel[addColumn] = function () {
                me.addOptionsColumn();
            };
            const removeColumn = `${this.id}RemoveColumn`;
            dataModel[removeColumn] = function (col) {
                me.removeOptionsColumn(col);
            };
            const saveColumns = `${this.id}SaveColumns`;
            dataModel[saveColumns] = function () {
                me.saveOptionsColumns();
            };
            const resetColumns = `${this.id}ResetColumns`;
            dataModel[resetColumns] = function () {
                me.resetOptionsColumns();
            };
            const upColumn = `${this.id}UpColumns`;
            dataModel[upColumn] = function (col) {
                me.upOptionsColumn(col);
            };
            const dnColumn = `${this.id}DownColumns`;
            dataModel[dnColumn] = function (col) {
                me.downOptionsColumn(col);
            };
            dataModel[`${this.id}OptionsViewColumns`] = ko.observableArray([]);
            dataModel[`${this.id}OptionsEntityFields`] = ko.observableArray([]);
            dataModel[`${this.id}OptionsSelectedEntityField`] = ko.observable();
            dataModel[`${this.id}OptionsEntityFieldsGroups`] = ko.computed(() => {
                const fields = dataModel[`${this.id}OptionsEntityFields`]();
                const groups = [];
                for (let i = 0; i < fields.length; i++) {
                    const field = fields[i];
                    if (field.expandPath) {
                        const newGroupLabel = field.expandPath;
                        if (!groups.find(g => newGroupLabel == g.label)) {
                            groups.push({ label: newGroupLabel, children: [] });
                        }
                        const group = groups.find(g => newGroupLabel == g.label);
                        group.children.push(field);
                    }
                    else {
                        const newGroupLabel = entityMeta.label ? entityMeta.label : 'Object';
                        if (!groups.find(g => newGroupLabel == g.label)) {
                            groups.push({ label: newGroupLabel, children: [] });
                        }
                        const group = groups.find(g => newGroupLabel == g.label);
                        group.children.push(field);
                    }
                }
                return groups;
            });
            const entityPropNames = Object.getOwnPropertyNames(entityMeta.properties);
            entityPropNames.forEach((propName, idx) => {
                const prop = entityMeta.properties[propName];
                dataModel[`${this.id}OptionsEntityFields`].push({
                    name: prop.name,
                    label: prop.label,
                    display: `${prop.label} (${prop.name})`,
                });
            });
            if (entityMeta.expand) {
                const expandPathNames = Object.getOwnPropertyNames(entityMeta.expand);
                for (let ep = 0; ep < expandPathNames.length; ep++) {
                    const expandPathName = expandPathNames[ep];
                    const expandPath = entityMeta.expand[expandPathName];
                    const expanedEntity = yield dataSource.getEntityMetadata(expandPath.entity);
                    if (expanedEntity) {
                        const expanedEntityPropNames = Object.getOwnPropertyNames(expanedEntity.properties);
                        expanedEntityPropNames.forEach((propName, idx) => {
                            const prop = expanedEntity.properties[propName];
                            dataModel[`${this.id}OptionsEntityFields`].push({
                                name: expandPathName + '__' + prop.name,
                                label: prop.label,
                                display: `${expanedEntity.name} / ${prop.label} (${prop.name})`,
                                expandPath: expandPathName
                            });
                        });
                    }
                }
            }
            ;
            (0, jquery_1.default)(`#${this.parentGrid.controlId}`).parent().append(`
        <div id="${this.parentGrid.controlId}SetupDlg" style="overflow-y: auto;display:none;width:60%;height:95%;position:absolute;top:30px;left:50px;z-index:999999;border: 1px Solid Black;background-color: white">
            <h5 class="row m-2">
                <div class="col-11">Grid Options</div>
                <div class="col-1" style="text-align: right" data-bind="click: ${this.id}closeGridSetupDlg">X</div>
            </h5>            
            <div class="m-2 mt-4">
                <div class="row">       
                    <div class="col-1">
                        Fields&nbsp;
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <div class="col-10 btn-group">
                                <select style="width: 150px" class="form-control form-control-sm" data-bind="value: ${this.id}OptionsSelectedEntityField">
                                        <!-- ko foreach: ${this.id}OptionsEntityFieldsGroups -->
                                            <optgroup data-bind="attr:{label: '---'+label+'---'}">
                                                <!-- ko foreach: $data.children?$data.children:[] -->
                                                    <option data-bind="value: $data, text:label"></option>
                                                <!-- /ko -->
                                            </optgroup>
                                        <!-- /ko -->
                                </select>
                                &nbsp;<button class="btn btn-sm btn-outline-primary" data-bind="click: ${this.id}AddColumn" style="marging-left:1em">Add</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="btn-group">
                            <button class="btn btn-sm btn-success me-1" data-bind="click: ${this.id}SaveColumns">Save</button>
                            <button class="btn btn-sm btn-primary" data-bind="click: ${this.id}ResetColumns">Reset</button>                        
                        </div>
                    </div>
                </div>                  
                <div class="row mt-2" style="border:1px solid #0000005e">
                    <div class="col-3"></div>
                    <div class="col-4">Field</div>
                    <div class="col-3">Label</div>
                </div>                
                <ul data-bind="foreach: ${this.id}OptionsViewColumns">
                    <li>
                        <div class="row p-1" style="border-bottom: 1px solid #c0c0c047">
                            <div class="col-3">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-outline-primary" data-bind="click: $root.${this.id}UpColumns"><i class="fa fa-arrow-up"></i></button>
                                    <button class="btn btn-sm btn-outline-primary" data-bind="click: $root.${this.id}DownColumns"><i class="fa fa-arrow-down"></i></button>
                                    <button class="btn btn-sm btn-outline-danger" data-bind="click: $root.${this.id}RemoveColumn"><i class="fa fa-trash"></i></button>
                                </div>
                            </div>
                            <div class="col-4 ml-1 mr-1" data-bind="text: $data.name"></div>
                            <div class="col-3"><input type="text" data-bind="value: $data.label" class="form-control form-control-sm"/></div>
                        </div>
                    </li>
                </ul>                
            </div>
        </div>`);
        });
    }
}
exports.DmsOptionsControl = DmsOptionsControl;
;
//# sourceMappingURL=dms-control-options.js.map