GlossaryDetailLayoutView.js

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

define(['require',
    'backbone',
    'hbs!tmpl/glossary/GlossaryDetailLayoutView_tmpl',
    'utils/Utils',
    'utils/Messages',
    'utils/Globals',
    'utils/CommonViewFunction',
    'collection/VGlossaryList'
], function(require, Backbone, GlossaryDetailLayoutViewTmpl, Utils, Messages, Globals, CommonViewFunction, VGlossaryList) {
    'use strict';

    var GlossaryDetailLayoutView = Backbone.Marionette.LayoutView.extend(
        /** @lends GlossaryDetailLayoutView */
        {
            _viewName: 'GlossaryDetailLayoutView',

            template: GlossaryDetailLayoutViewTmpl,

            /** Layout sub regions */
            regions: {
                RSearchResultLayoutView: "#r_searchResultLayoutView",
                RTagTableLayoutView: "#r_tagTableLayoutView",
                RRelationLayoutView: "#r_relationLayoutView"
            },
            templateHelpers: function() {
                return {
                    isTermView: this.isTermView,
                    isCategoryView: this.isCategoryView
                };
            },

            /** ui selector cache */
            ui: {
                details: "[data-id='details']",
                editButton: "[data-id='editButton']",
                title: "[data-id='title']",
                shortDescription: "[data-id='shortDescription']",
                longDescription: "[data-id='longDescription']",

                categoryList: "[data-id='categoryList']",
                removeCategory: "[data-id='removeCategory']",
                categoryClick: "[data-id='categoryClick']",
                addCategory: "[data-id='addCategory']",

                termList: "[data-id='termList']",
                removeTerm: "[data-id='removeTerm']",
                termClick: "[data-id='termClick']",
                addTerm: "[data-id='addTerm']",

                tagList: "[data-id='tagListTerm']",
                removeTag: '[data-id="removeTagTerm"]',
                tagClick: '[data-id="tagClickTerm"]',
                addTag: '[data-id="addTagTerm"]',
            },
            /** ui events hash */
            events: function() {
                var events = {};
                events["click " + this.ui.categoryClick] = function(e) {
                    if (e.target.nodeName.toLocaleLowerCase() == "i") {
                        this.onClickRemoveAssociationBtn(e);
                    } else {
                        var guid = $(e.currentTarget).data('guid'),
                            categoryObj = _.find(this.data.categories, { "categoryGuid": guid });
                        this.glossary.selectedItem = { "type": "GlossaryCategory", "guid": guid, "model": categoryObj };
                        Utils.setUrl({
                            url: '#!/glossary/' + guid,
                            mergeBrowserUrl: false,
                            urlParams: { gType: "category", viewType: "category", fromView: "glossary" },
                            trigger: true,
                            updateTabState: true
                        });
                    }
                };
                events["click " + this.ui.termClick] = function(e) {
                    if (e.target.nodeName.toLocaleLowerCase() == "i") {
                        this.onClickRemoveAssociationBtn(e);
                    } else {
                        var guid = $(e.currentTarget).data('guid'),
                            termObj = _.find(this.data.terms, { "termGuid": guid });
                        this.glossary.selectedItem = { "type": "GlossaryTerm", "guid": guid, "model": termObj };
                        Utils.setUrl({
                            url: '#!/glossary/' + guid,
                            mergeBrowserUrl: false,
                            urlParams: { gType: "term", viewType: "term", fromView: "glossary" },
                            trigger: true,
                            updateTabState: true
                        });
                    }
                };
                events["click " + this.ui.tagClick] = function(e) {
                    if (e.target.nodeName.toLocaleLowerCase() == "i") {
                        this.onClickTagCross(e);
                    } else {
                        Utils.setUrl({
                            url: '#!/tag/tagAttribute/' + e.currentTarget.textContent,
                            mergeBrowserUrl: false,
                            trigger: true
                        });
                    }
                };
                events["click " + this.ui.editButton] = function(e) {
                    var that = this,
                        model = this.glossaryCollection.fullCollection.get(this.guid);
                    if (this.isGlossaryView) {
                        CommonViewFunction.createEditGlossaryCategoryTerm({
                            "model": model,
                            "isGlossaryView": this.isGlossaryView,
                            "collection": this.glossaryCollection,
                            "callback": function(sModel) {
                                var data = sModel.toJSON();
                                model.set(data, { silent: true }); // update glossaryCollection
                                that.data = data;
                                that.renderDetails(that.data);
                                that.glossaryCollection.trigger("update:details", { isGlossaryUpdate: true });
                            }
                        });
                    } else {
                        CommonViewFunction.createEditGlossaryCategoryTerm({
                            "isTermView": this.isTermView,
                            "isCategoryView": this.isCategoryView,
                            "model": this.data,
                            "collection": this.glossaryCollection,
                            "callback": function(data) {
                                if (data.displayName != that.data.displayName) {
                                    var glossary = that.glossaryCollection.fullCollection.get(data.anchor.glossaryGuid);
                                    if (that.isTermView) {
                                        _.find(glossary.get('terms'), function(obj) {
                                            if (obj.termGuid == data.guid) {
                                                obj.displayText = data.displayName
                                            }
                                        });
                                    } else if (!data.parentCategory) {
                                        _.find(glossary.get('categories'), function(obj) {
                                            if (obj.categoryGuid == data.guid) {
                                                obj.displayText = data.displayName
                                            }
                                        });
                                    }
                                    that.glossaryCollection.trigger("update:details", { data: that.data });
                                }
                                that.data = data;
                                that.renderDetails(that.data);
                            }
                        });
                    }
                };
                events["click " + this.ui.addTerm] = 'onClickAddTermBtn';
                events["click " + this.ui.addCategory] = 'onClickAddCategoryBtn';
                events["click " + this.ui.addTag] = 'onClickAddTagBtn';
                return events;
            },
            /**
             * intialize a new GlossaryDetailLayoutView Layout
             * @constructs
             */
            initialize: function(options) {
                _.extend(this, _.pick(options, 'guid', 'glossaryCollection', 'glossary', 'collection', 'typeHeaders', 'value', 'entityDefCollection', 'enumDefCollection', 'classificationDefCollection'));
                if (this.value && this.value.gType) {
                    if (this.value.gType == "category") {
                        this.isCategoryView = true;
                    } else if (this.value.gType == "term") {
                        this.isTermView = true;
                    } else {
                        this.isGlossaryView = true;
                    }
                }
                this.selectedTermAttribute = null;
            },
            onRender: function() {
                this.$('.fontLoader-relative').show();
                this.getData();
                this.bindEvents();
            },
            bindEvents: function() {
                var that = this;
            },
            getData: function() {
                if (this.isGlossaryView) {
                    if (this.glossaryCollection.fullCollection.length) {
                        this.data = this.glossaryCollection.fullCollection.get(this.guid).toJSON();
                        this.glossaryCollection.trigger("data:updated", $.extend(true, {}, this.data));
                        this.renderDetails(this.data);
                    } else {
                        this.listenTo(this.glossaryCollection.fullCollection, "reset ", function(skip) {
                            var foundGlossary = this.glossaryCollection.fullCollection.get(this.guid);
                            this.data = foundGlossary ? foundGlossary.toJSON() : null;
                            this.glossaryCollection.trigger("data:updated", $.extend(true, {}, this.data));
                            if (this.data == null) {
                                this.glossary.selectedItem = {};
                                Utils.setUrl({
                                    url: '#!/glossary',
                                    mergeBrowserUrl: false,
                                    urlParams: null,
                                    trigger: true,
                                    updateTabState: true
                                });
                            }
                            this.renderDetails(this.data);
                        }, this);
                    }
                } else {;
                    Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.ui.details);
                    var getApiFunctionKey = "getCategory",
                        that = this;
                    if (this.isTermView) {
                        getApiFunctionKey = "getTerm";
                    }
                    this.glossaryCollection[getApiFunctionKey]({
                        "guid": this.guid,
                        "ajaxOptions": {
                            success: function(data) {
                                if (that.isDestroyed) {
                                    return;
                                }
                                if (that.isTermView) {
                                    var obj = {
                                        "guid": that.guid,
                                        "entityDefCollection": that.entityDefCollection,
                                        "typeHeaders": that.typeHeaders,
                                        "tagCollection": that.collection,
                                        "enumDefCollection": that.enumDefCollection,
                                        "classificationDefCollection": that.classificationDefCollection,
                                        "glossaryCollection": that.glossaryCollection,
                                        "getSelectedTermAttribute": function() {
                                            return that.selectedTermAttribute;
                                        },
                                        "setSelectedTermAttribute": function(val) {
                                            that.selectedTermAttribute = val;
                                        }
                                    }
                                    that.renderSearchResultLayoutView(obj);
                                    that.renderTagTableLayoutView(obj);
                                    that.renderRelationLayoutView(obj);
                                }
                                that.data = data;
                                that.glossaryCollection.trigger("data:updated", $.extend(true, {}, data));
                                that.glossary.selectedItem.model = data;
                                that.glossary.selectedItem.guid = data.guid;
                                that.renderDetails(data)
                            },
                            cust_error: function() {}
                        }
                    });
                }
            },
            renderDetails: function(data) {
                Utils.hideTitleLoader(this.$('.fontLoader'), this.ui.details);
                if (data) {
                    this.ui.title.text(data.displayName || data.displayText || data.qualifiedName);
                    this.ui.shortDescription.text(data.shortDescription);
                    this.ui.longDescription.text(data.longDescription);
                    this.generateCategories(data.categories);
                    this.generateTerm(data.terms);
                    this.generateTag(data.classifications);
                } else {
                    this.ui.title.text("No Data found");
                }
            },
            generateCategories: function(data) {
                var that = this,
                    categories = "";
                _.each(data, function(val) {
                    var name = _.escape(val.displayText);
                    categories += '<span data-guid="' + val.categoryGuid + '"" class="btn btn-action btn-sm btn-icon btn-blue" title=' + _.escape(name) + ' data-id="categoryClick"><span>' + name + '</span><i class="fa fa-close" data-id="removeCategory" data-type="category" title="Remove Category"></i></span>';
                });
                this.ui.categoryList.find("span.btn").remove();
                this.ui.categoryList.prepend(categories);
            },
            generateTerm: function(data) {
                var that = this,
                    terms = "";
                _.each(data, function(val) {
                    var name = _.escape(val.displayText);
                    terms += '<span data-guid="' + val.termGuid + '"" class="btn btn-action btn-sm btn-icon btn-blue" title=' + _.escape(name) + ' data-id="termClick"><span>' + name + '</span><i class="fa fa-close" data-id="removeTerm" data-type="term" title="Remove Term"></i></span>';
                });
                this.ui.termList.find("span.btn").remove();
                this.ui.termList.prepend(terms);

            },
            generateTag: function(tagObject) {
                var that = this,
                    tagData = "";
                _.each(tagObject, function(val) {
                    tagData += '<span class="btn btn-action btn-sm btn-icon btn-blue" title=' + val.typeName + ' data-id="tagClickTerm"><span>' + val.typeName + '</span><i class="fa fa-close" data-id="removeTagTerm" data-type="tag" title="Remove Tag"></i></span>';
                });
                this.ui.tagList.find("span.btn").remove();
                this.ui.tagList.prepend(tagData);
            },
            onClickAddTermBtn: function(e) {
                var that = this;
                require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) {
                    var glossary = that.glossaryCollection;
                    if (that.value && that.value.gId) {
                        var foundModel = that.glossaryCollection.find({ guid: that.value.gId });
                        if (foundModel) {
                            glossary = new VGlossaryList([foundModel.toJSON()], {
                                comparator: function(item) {
                                    return item.get("displayName");
                                }
                            });
                        }
                    }
                    var view = new AssignTermLayoutView({
                        categoryData: that.data,
                        isCategoryView: that.isCategoryView,
                        callback: function() {
                            that.getData();
                        },
                        glossaryCollection: glossary
                    });
                    view.modal.on('ok', function() {
                        that.hideLoader();
                    });
                });
            },
            onClickAddCategoryBtn: function(e) {
                var that = this;
                require(['views/glossary/AssignTermLayoutView'], function(AssignTermLayoutView) {
                    var glossary = that.glossaryCollection;
                    if (that.value && that.value.gId) {
                        var foundModel = that.glossaryCollection.find({ guid: that.value.gId });
                        if (foundModel) {
                            glossary = new VGlossaryList([foundModel.toJSON()], {
                                comparator: function(item) {
                                    return item.get("displayName");
                                }
                            });
                        }
                    }
                    var view = new AssignTermLayoutView({
                        termData: that.data,
                        isTermView: that.isTermView,
                        callback: function() {
                            that.getData();
                        },
                        glossaryCollection: glossary
                    });
                    view.modal.on('ok', function() {
                        that.hideLoader();
                    });
                });
            },
            onClickAddTagBtn: function(e) {
                var that = this;
                require(['views/tag/AddTagModalView'], function(AddTagModalView) {
                    var tagList = [];
                    _.map(that.data.classifications, function(obj) {
                        if (obj.entityGuid === that.guid) {
                            tagList.push(obj.typeName);
                        }
                    });
                    var view = new AddTagModalView({
                        guid: that.guid,
                        tagList: tagList,
                        callback: function() {
                            that.getData();
                        },
                        showLoader: that.showLoader.bind(that),
                        hideLoader: that.hideLoader.bind(that),
                        collection: that.classificationDefCollection,
                        enumDefCollection: that.enumDefCollection
                    });
                });
            },
            onClickTagCross: function(e) {
                var that = this,
                    tagName = $(e.currentTarget).text(),
                    termName = this.data.displayName;
                CommonViewFunction.deleteTag(_.extend({}, {
                    msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(tagName) + "</b> assignment from" + " " + "<b>" + termName + "?</b></div>",
                    titleMessage: Messages.removeTag,
                    okText: "Remove",
                    showLoader: that.showLoader.bind(that),
                    hideLoader: that.hideLoader.bind(that),
                    tagName: tagName,
                    guid: that.guid,
                    callback: function() {
                        that.getData();
                    }
                }));
            },
            onClickRemoveAssociationBtn: function(e) {
                var $el = $(e.currentTarget),
                    guid = $el.data('guid'),
                    name = $el.text(),
                    that = this;
                CommonViewFunction.removeCategoryTermAssociation({
                    selectedGuid: guid,
                    model: that.data,
                    collection: that.glossaryCollection,
                    msg: "<div class='ellipsis'>Remove: " + "<b>" + _.escape(name) + "</b> assignment from" + " " + "<b>" + that.data.displayName + "?</b></div>",
                    titleMessage: Messages.glossary[that.isTermView ? "removeCategoryfromTerm" : "removeTermfromCategory"],
                    isCategoryView: that.isCategoryView,
                    isTermView: that.isTermView,
                    buttonText: "Remove",
                    showLoader: that.hideLoader.bind(that),
                    hideLoader: that.hideLoader.bind(that),
                    callback: function() {
                        that.getData();
                    }
                });
            },
            showLoader: function() {
                Utils.showTitleLoader(this.$('.page-title .fontLoader'), this.ui.details);
            },
            hideLoader: function() {
                Utils.hideTitleLoader(this.$('.page-title .fontLoader'), this.ui.details);
            },
            renderTagTableLayoutView: function(options) {
                var that = this;
                require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
                    that.RTagTableLayoutView.show(new TagDetailTableLayoutView(_.extend({}, options, {
                        "entityName": that.ui.title.text(),
                        "fetchCollection": that.getData.bind(that),
                        "entity": that.data
                    })));
                });
            },
            renderSearchResultLayoutView: function(options) {
                var that = this;
                require(['views/search/SearchResultLayoutView'], function(SearchResultLayoutView) {
                    var value = {
                        'tag': "PII",
                        'searchType': 'basic'
                    };
                    if (that.RSearchResultLayoutView) {
                        that.RSearchResultLayoutView.show(new SearchResultLayoutView(_.extend({}, options, {
                            "value": { "searchType": "basic", "term": that.data.qualifiedName },
                            "fromView": "glossary"
                        })));
                    }
                });
            },
            renderRelationLayoutView: function(options) {
                var that = this;
                require(['views/glossary/TermRelationAttributeLayoutView'], function(TermRelationAttributeLayoutView) {
                    that.RRelationLayoutView.show(new TermRelationAttributeLayoutView(_.extend({}, options, {
                        "entityName": that.ui.title.text(),
                        "fetchCollection": that.getData.bind(that),
                        "data": that.data
                    })));
                });
            },
        });
    return GlossaryDetailLayoutView;
});