APIs

Show:
/**
 * @namespace flexygo.ui.wc
 */
var flexygo;
(function (flexygo) {
    var ui;
    (function (ui_1) {
        var wc;
        (function (wc) {
            /**
            * Library for the FlxKanban
            *
            * @class FlxKanban
            * @constructor
            * @return {FlxKanban} .
            */
            class FlxKanban extends HTMLElement {
                constructor() {
                    //If a constructor is defined, is REQUIRED call the super constructor
                    super();
                    /**
                    * Set if element has been connected to DOM
                    * @property connected {boolean}
                    */
                    this.connected = false;
                    this.sorting = false;
                    this.sortingFrom = null;
                    this.additionalWhere = '';
                    this.filterValues = null;
                    this.activeFilter = null;
                    this.moduleButtons = null;
                }
                /**
                * Array of observed attributes. REQUIRED
                * @property observedAttributes {Array}
                */
                static get observedAttributes() {
                    return ['ObjectName', 'ObjectWhere', 'ModuleName', 'AdditionalWhere'];
                }
                /**
                * Init the webcomponent. REQUIRED.
                * @method init
                */
                init() {
                    let me = $(this);
                    me.removeAttr('manualInit');
                    flexygo.events.on(this, "dialog", "closed", this.onDialogClosed);
                    this.filterValues = null;
                    this.activeFilter = null;
                    let history = flexygo.history.get(me);
                    let module = me.closest('flx-module')[0];
                    if (history && history.filtersValues && history.filtersValues[module.moduleName]) {
                        let state = history.filtersValues[module.moduleName];
                        if (state.activeFilter) {
                            this.activeFilter = state.activeFilter;
                        }
                        if (state.properties) {
                            this.filterValues = state.properties;
                        }
                    }
                    this.loadKanban(true, true);
                }
                /**
                * Refresh de webcomponent. REQUIRED.
                * @method refresh
                */
                refresh() {
                    if ($(this).attr('manualInit') != 'true') {
                        this.loadKanban(false, false);
                    }
                }
                setFilter() {
                    if ($(this).attr('manualInit') != 'true') {
                        this.loadKanban(false, false);
                    }
                }
                /**
                * Render HTML data.
                * @method render
                */
                render() {
                    var me = $(this);
                    me.empty();
                    me.append('<div class="board-header"></div>');
                    if (this.boardTitle) {
                        me.find('.board-header').append($('<div class="board-title"></div>').html(this.boardTitle));
                    }
                    if (this.boardDescrip) {
                        me.find('.board-header').append($('<div class="board-descrip"></div>').html(this.boardDescrip));
                    }
                    if (this.config.EndBoxLastState) {
                        this.endbox = $('<div class="board-endbox"><div class="board-endbox-text"><i class="' + this.config.EndBoxIconName + '" /> ' + this.config.EndBoxText + '</div></div>');
                        if (this.config.EndBoxCssClass) {
                            this.endbox.addClass(this.config.EndBoxCssClass);
                        }
                        me.find('.board-header').append(this.endbox);
                    }
                    this.panel = $('<div class="kanban-panel"></div>');
                    me.append(this.panel);
                    for (let i = 0; i < this.columns.length; i++) {
                        let newCol = $('<div class="kanban-div"><div class="kanban-col"><span class="kanban-descrip"></span><ul class="kanban-container" ></ul><div class="kanban-new-card"><i class="flx-icon icon-plus "/> ' + flexygo.localization.translate('flxkanban.addCard') + '...</div></div></div>');
                        let colData = this.columns[i];
                        newCol.attr('column-id', String(colData[this.config.ColumnIdField]));
                        newCol.find('.kanban-descrip').html(colData[this.config.ColumnDescripField]);
                        if (this.config.ColumnIconIdField && colData[this.config.ColumnIconIdField]) {
                            let newIcon = $('<i />');
                            newIcon.addClass(colData[this.config.ColumnIconIdField]);
                            newCol.find('.kanban-descrip').prepend(newIcon);
                        }
                        if (this.config.ColumnCssClassField && colData[this.config.ColumnCssClassField]) {
                            newCol.find('.kanban-col').addClass(colData[this.config.ColumnCssClassField]);
                        }
                        else {
                            newCol.find('.kanban-col').addClass('default');
                        }
                        this.panel.append(newCol);
                    }
                    if (this.panel.find('.kanban-div').length > 0) {
                        var colWidth = Math.trunc(this.panel.find('.kanban-div:first').outerWidth(true)) + 10;
                        this.panel.css('width', (this.columns.length * colWidth));
                    }
                    for (let i = 0; i < this.cards.length; i++) {
                        var cardData = this.cards[i];
                        let col = this.panel.find('[column-id="' + String(cardData[this.config.CardColumnIdField]) + '"] ul.kanban-container');
                        let newCard = $('<li class="kanban-card"><div class="kanban-card-descrip"></div></li>');
                        let descrip = cardData[this.config.ColumnDescripField];
                        if (this.config.CardContentTemplate) {
                            descrip = flexygo.utils.parser.compile(cardData, this.config.CardContentTemplate);
                        }
                        newCard.find('.kanban-card-descrip').append(descrip);
                        newCard.attr('card-id', cardData[this.config.CardIdField]);
                        let cardOrder = this.getCardOrder(String(cardData[this.config.CardColumnIdField]), cardData[this.config.CardIdField]);
                        if (cardOrder) {
                            newCard.attr('original-order', cardOrder);
                        }
                        col.append(newCard);
                    }
                    this.panel.find('.kanban-container').each((i, el) => {
                        var itms = $(el).find('li.kanban-card');
                        if (itms.length > 0) {
                            itms.detach();
                            itms = itms.sort(function (a, b) {
                                var o1 = parseInt($(a).attr('original-order'));
                                var o2 = parseInt($(b).attr('original-order'));
                                if (o1 < o2)
                                    return -1;
                                if (o1 > o2)
                                    return 1;
                                var p1 = $(a).attr('card-id');
                                var p2 = $(b).attr('card-id');
                                if ($.isNumeric(p1) && $.isNumeric(p2)) {
                                    p1 = parseFloat(p1);
                                    p2 = parseFloat(p2);
                                }
                                if (p1 < p2)
                                    return -1;
                                if (p1 > p2)
                                    return 1;
                                return 0;
                            });
                            $(el).append(itms);
                        }
                    });
                    if (this.config.onCardClick) {
                        this.panel.find('.kanban-card-descrip').on('mouseup', (event) => { if (!this.sorting) {
                            this.descripClick($(event.currentTarget.closest('li.kanban-card')), this.config.onCardClick);
                        } });
                    }
                    this.panel.find('.kanban-new-card').on('mouseup', (event) => { this.newCardClick($(event.currentTarget).closest('[column-id]')); });
                    this.panel.find('ul>li.kanban-card').on('mousedown', (ev) => {
                        me.find('.board-endbox').show();
                        if (this.filterValues && this.filterValues.length > 0) {
                            var itms = $(this).find('.kanban-card');
                            itms.each((indx, el) => {
                                if (!$(el).is($(ev.currentTarget))) {
                                    $(el).addClass('locked');
                                }
                            });
                        }
                    }).on('mouseup', () => { $(this).find('.kanban-card').removeClass('locked'); });
                    me.find('ul.kanban-container, .board-endbox').sortable({
                        connectWith: ".kanban-container, .board-endbox",
                        start: (event, ui) => { this.sortStart(ui.item); },
                        stop: (event, ui) => { this.sortStop(ui.item); },
                        update: (event, ui) => { if (this.filterValues && this.filterValues.length > 0 && ui.item.closest('[column-id]').attr('column-id') == this.sortingFrom) {
                            this.panel.find('ul.kanban-container').sortable('cancel');
                        } },
                        cancel: ".locked",
                        items: "li.kanban-card:not(.locked)"
                    }).disableSelection();
                    if (this.endbox) {
                        this.endbox.hide();
                    }
                    let parentModule = me.closest('flx-module');
                    let wcModule = parentModule[0];
                    if (parentModule && wcModule) {
                        wcModule.moduleLoaded(this);
                    }
                }
                getCardOrder(columnId, cardId) {
                    if (this.boardOrder) {
                        for (let i = 0; i < this.boardOrder.length; i++) {
                            let itm = this.boardOrder[i];
                            if (itm.columnId == columnId && itm.cardId == cardId) {
                                return itm.order;
                            }
                        }
                    }
                    return 999999;
                }
                sortStart(item) {
                    this.sortingFrom = item.closest('[column-id]').attr('column-id');
                    this.sorting = true;
                }
                sortStop(item) {
                    let newState = item.closest('[column-id]').attr('column-id');
                    let oldState = this.sortingFrom;
                    let cardId = item.attr('card-id');
                    if (newState == 'null') {
                        newState = null;
                    }
                    if (oldState == 'null') {
                        oldState = null;
                    }
                    item.closest('flx-kanban').find('.board-endbox').hide();
                    if (item.closest('.board-endbox').length > 0) {
                        if (this.config.EndBoxProcess) {
                            flexygo.nav.execProcess(this.config.EndBoxProcess, this.config.CardObjectName, this.config.CardIdField + '=' + "'" + cardId + "'", '', null, 'modal600x600', true, item);
                        }
                        else {
                            let card = new flexygo.obj.Entity(this.config.CardObjectName, this.config.CardIdField + '=' + "'" + cardId + "'");
                            card.read();
                            card.data[this.config.CardColumnIdField].Value = this.config.EndBoxLastState;
                            card.update();
                            item.remove();
                        }
                    }
                    else {
                        if (newState != oldState) {
                            //Update Card Column
                            if (this.config.onChangeColumnProcess) {
                                let cardChange = new flexygo.Process(this.config.onChangeColumnProcess, this.config.CardObjectName, this.config.CardIdField + '=' + "'" + cardId + "'");
                                let params = new Array();
                                params.push({ Key: 'BoardId', Value: this.boardId });
                                params.push({ Key: 'CardId', Value: cardId });
                                params.push({ Key: 'OldColumnId', Value: oldState });
                                params.push({ Key: 'NewColumnId', Value: newState });
                                let cllback = (response) => {
                                    if (response) {
                                        if (response.LastException && response.LastException.Message) {
                                            flexygo.msg.error(response.LastException.Message);
                                        }
                                        else if (response.WarningMessage) {
                                            flexygo.msg.warning(response.WarningMessage);
                                        }
                                    }
                                };
                                cardChange.showProgress = false;
                                cardChange.run(params, cllback);
                            }
                            else {
                                let card = new flexygo.obj.Entity(this.config.CardObjectName, this.config.CardIdField + '=' + "'" + cardId + "'");
                                card.read();
                                card.data[this.config.CardColumnIdField].Value = newState;
                                card.update();
                            }
                        }
                    }
                    if (!this.filterValues || this.filterValues.length == 0) {
                        //Update Card Disposition
                        let boardSort = new flexygo.obj.Entity('sysKanbanOrder', 'KanbanSettingsName=\'' + this.config.KanbanSettingsName + '\' and BoardId=\'' + this.boardId + '\'');
                        boardSort.read();
                        boardSort.data.KanbanSettingsName.Value = this.config.KanbanSettingsName;
                        boardSort.data.BoardId.Value = this.boardId;
                        boardSort.data.JsonData.Value = this.getConfig();
                        boardSort.update();
                    }
                    this.sorting = false;
                    this.sortingFrom = null;
                    $(this).find('.kanban-card').removeClass('locked');
                    let ev = {
                        class: "module",
                        type: "changed",
                        sender: item,
                        masterIdentity: newState,
                        detailIdentity: oldState
                    };
                    flexygo.events.trigger(ev);
                }
                getConfig() {
                    var cards = [];
                    $(this).find('[column-id]').each((i, col) => {
                        let colId = $(col).attr('column-id');
                        let ord = 1;
                        $(col).find('[card-id]').each((i, card) => {
                            cards.push({ order: ord, columnId: colId, cardId: $(card).attr('card-id') });
                            ord++;
                        });
                    });
                    this.boardOrder = cards;
                    return JSON.stringify(cards);
                }
                descripClick(el, pageType) {
                    flexygo.nav.openPage(pageType, this.config.CardObjectName, this.config.CardIdField + "='" + el.attr('card-id') + "'", null, 'modal', true);
                }
                newCardClick(el) {
                    let newDef = jQuery.extend(true, {}, this.defaults);
                    if (el.attr('column-id') != 'null') {
                        newDef[this.config.CardColumnIdField] = el.attr('column-id');
                    }
                    flexygo.nav.openPage('edit', this.config.CardObjectName, null, JSON.stringify(newDef), 'modal', true);
                }
                onDialogClosed(e) {
                    if (e.sender.objectname == this.config.CardObjectName && !this.sorting) {
                        this.refresh();
                    }
                }
                loadKanban(refreshButtons, refreshFilters) {
                    var me = $(this);
                    me.empty();
                    let params = {
                        ObjectName: me.attr('ObjectName'),
                        ObjectWhere: me.attr('ObjectWhere'),
                        ModuleName: this.moduleName,
                        AdditionalWhere: this.additionalWhere,
                        searchId: this.activeFilter,
                        filterValues: this.filterValues
                    };
                    flexygo.ajax.post('~/api/Kanban', 'GetKanban', params, (response) => {
                        if (response) {
                            this.config = response.KanbanSettings;
                            this.columns = response.Columns;
                            this.cards = response.Cards;
                            this.defaults = response.Defaults;
                            this.boardTitle = response.Title;
                            this.boardDescrip = response.Descrip;
                            this.boardId = response.BoardId;
                            this.boardOrder = JSON.parse(response.BoardOrder);
                            let parentModule = me.closest('flx-module');
                            let wcModule = parentModule[0];
                            this.filterobjectname = response.FilterObjectName;
                            if (parentModule.length > 0) {
                                let parentModuleClass = wcModule.moduleClass;
                                if (wcModule.moduleInitClass && wcModule.moduleInitClass != '') {
                                    parentModule.attr('class', wcModule.moduleInitClass);
                                }
                                if (parentModuleClass && parentModuleClass != '') {
                                    parentModule.addClass(parentModuleClass);
                                }
                                if (parentModule && wcModule) {
                                    this.moduleButtons = response.Buttons;
                                    if (refreshButtons && response.Buttons) {
                                        wcModule.setButtons(response.Buttons, response.FilterObjectName, response.FilterObjectWhere);
                                    }
                                    wcModule.setObjectDescrip(response.Title);
                                }
                            }
                            this.savedSearches = response.SavedSearches;
                            this.searchSettings = response.SearchSettings;
                            if (refreshFilters && response.SearchSettings) {
                                this.loadFilters(response.SearchSettings);
                            }
                            this.render();
                        }
                    });
                }
                /**
               * Load filters
               * @method loadFilters
               * @param  settings
               */
                loadFilters(settings) {
                    let me = $(this);
                    if (settings) {
                        this.searchSettings = settings;
                    }
                    let module = me.closest('flx-module');
                    let pane = module.find('.cntBodyHeader .filterPanel');
                    if (pane.length == 0 && this.moduleButtons && Object.keys(this.moduleButtons).length > 0) {
                        pane = $('<div class="filterPanel" />');
                        module.find('.cntBodyHeader').append(pane);
                    }
                    let flt = $('<flx-filter></flx-filter>');
                    pane.html(flt);
                    let fClt = flt[0];
                    if (fClt) {
                        fClt.settings = settings;
                        fClt.key = this.filterobjectname + '-' + this.moduleName;
                        fClt.grid = this;
                        fClt.init();
                    }
                }
                /**
               * Establish webcomponent settings
               * @method configure
               */
                configure() {
                    flexygo.nav.openPage('edit', 'sysKanban_Setting', "Kanban_Settings.KanbanSettingsName='" + this.config.KanbanSettingsName + "'", null, 'popup', true);
                }
                /**
                * Fires when element is attached to DOM
                * @method connectedCallback
                */
                connectedCallback() {
                    let element = $(this);
                    this.connected = true;
                    this.objectName = element.attr("ObjectName");
                    this.objectWhere = element.attr("ObjectWhere");
                    this.moduleName = element.attr("ModuleName");
                    this.additionalWhere = element.attr("AdditionalWhere");
                    if (element.attr('manualInit') != 'true') {
                        this.init();
                    }
                }
                /**
                * Fires when element is detached to DOM
                * @method disconnectedCallback
                */
                disconnectedCallback() {
                    //Remove event handler
                    flexygo.events.off(this, "dialog", "closed", this.onDialogClosed);
                }
                /**
                * Fires when the attribute value of the element is changed.
                * @method attributeChangedCallback
                */
                attributeChangedCallback(attrName, oldVal, newVal) {
                    let needInit = false;
                    if (attrName.toLowerCase() == 'modulename' && newVal && newVal != '') {
                        this.moduleName = newVal;
                        needInit = true;
                    }
                    else if (attrName.toLowerCase() == 'objectname' && newVal && newVal != '') {
                        this.objectName = newVal;
                        needInit = true;
                    }
                    else if (attrName.toLowerCase() == 'objectwhere' && newVal && newVal != '') {
                        this.objectWhere = newVal;
                        needInit = true;
                    }
                    else if (attrName.toLowerCase() == 'additionalwhere' && newVal && newVal != '') {
                        this.additionalWhere = newVal;
                        needInit = true;
                    }
                    if (this.connected && needInit) {
                        this.init();
                    }
                }
            }
            wc.FlxKanban = FlxKanban;
        })(wc = ui_1.wc || (ui_1.wc = {}));
    })(ui = flexygo.ui || (flexygo.ui = {}));
})(flexygo || (flexygo = {}));
window.customElements.define("flx-kanban", flexygo.ui.wc.FlxKanban);
//# sourceMappingURL=flx-kanban.js.map