/** * 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/GlossaryLayoutView_tmpl', 'utils/Utils', 'utils/Messages', 'utils/Globals', 'utils/CommonViewFunction', 'jstree' ], function(require, Backbone, GlossaryLayoutViewTmpl, Utils, Messages, Globals, CommonViewFunction) { 'use strict'; var GlossaryLayoutView = Backbone.Marionette.LayoutView.extend( /** @lends GlossaryLayoutView */ { _viewName: 'GlossaryLayoutView', template: GlossaryLayoutViewTmpl, /** Layout sub regions */ regions: {}, templateHelpers: function() { return { isAssignView: this.isAssignView }; }, /** ui selector cache */ ui: { createGlossary: "[data-id='createGlossary']", refreshGlossary: "[data-id='refreshGlossary']", searchTerm: "[data-id='searchTerm']", searchCategory: "[data-id='searchCategory']", glossaryView: 'input[name="glossaryView"]', termTree: "[data-id='termTree']", categoryTree: "[data-id='categoryTree']" }, /** ui events hash */ events: function() { var events = {}; events["change " + this.ui.glossaryView] = 'glossaryViewToggle'; events["click " + this.ui.createGlossary] = function(e) { var that = this; if (e) { $(e.currentTarget).attr("disabled", "true"); } CommonViewFunction.createEditGlossaryCategoryTerm({ isGlossaryView: true, collection: this.glossaryCollection, callback: function() { that.ui.createGlossary.removeAttr("disabled"); that.getGlossary(); }, onModalClose: function() { that.ui.createGlossary.removeAttr("disabled"); } }) }; events["click " + this.ui.refreshGlossary] = 'getGlossary'; events["keyup " + this.ui.searchTerm] = function() { this.ui.termTree.jstree("search", this.ui.searchTerm.val()); }; events["keyup " + this.ui.searchCategory] = function() { this.ui.categoryTree.jstree("search", this.ui.searchCategory.val()); }; return events; }, /** * intialize a new GlossaryLayoutView Layout * @constructs */ initialize: function(options) { _.extend(this, _.pick(options, 'guid', 'value', 'glossaryCollection', 'glossary', 'isAssignTermView', 'isAssignCategoryView', 'isAssignEntityView')); this.viewType = "term"; this.isAssignView = this.isAssignTermView || this.isAssignCategoryView || this.isAssignEntityView; this.bindEvents(); this.query = { term: { url: null }, category: { url: null } }; }, bindEvents: function() { var that = this; this.listenTo(this.glossaryCollection.fullCollection, "reset add remove change", function() { this.generateTree(); }, this); this.listenTo(this.glossaryCollection, "update:details", function() { this.getGlossary(); }, this); $('body').on('click', '.termPopoverOptions li, .categoryPopoverOptions li', function(e) { that.$('.termPopover,.categoryPopover').popover('hide'); that[$(this).find('a').data('fn')](e) }); }, onRender: function() { if (this.isAssignCategoryView) { this.$('.category-view').show(); this.$('.term-view').hide(); } if (this.isAssignView && this.glossaryCollection.fullCollection.length) { this.generateTree(); } else { this.getGlossary(); } }, glossaryViewToggle: function(e) { if (e.currentTarget.checked) { this.$('.category-view').show(); this.$('.term-view').hide(); this.viewType = "category"; } else { this.$('.term-view').show(); this.$('.category-view').hide(); this.viewType = "term"; } if (Utils.getUrlState.isGlossaryTab()) { // var name = this.query[this.viewType].url; // var guid = this.glossary.selectedItem.guid; // Utils.setUrl({ // url: '#!/glossary/' + guid, // urlParams: { // viewType: this.viewType, // }, // mergeBrowserUrl: false, // trigger: true, // updateTabState: true // }); } }, getGlossary: function() { this.glossaryCollection.fetch({ reset: true }); }, generateCategoryData: function(options) { return _.map(options.data, function(obj) { return { "text": obj.displayText, "icon": "fa fa-files-o", "guid": obj.categoryGuid, "id": obj.categoryGuid, "glossaryId": options.node.glossaryId, "glossaryName": options.node.glossaryName, "model": obj, "type": "GlossaryCategory", "children": true } }); }, getCategory: function(options) { var that = this; this.glossaryCollection.getCategory({ "guid": options.node.guid, "related": true, "ajaxOptions": { success: function(data) { if (data && data.children) { options.callback(that.generateCategoryData(_.extend({}, { "data": data.children }, options))); } else { options.callback([]); } }, cust_error: function() { options.callback([]); } } }); }, generateData: function(opt) { var that = this, type = opt.type; var getSelectedState = function(options) { var objGuid = options.objGuid, node = options.node, index = options.index; if (!that.guid) { var selectedItem = { "type": "Glossary", "model": that.glossaryCollection.first().toJSON() }; selectedItem.text = selectedItem.model.displayName; selectedItem.guid = selectedItem.model.guid; if (index == 0 && selectedItem.guid == objGuid) { that.glossary.selectedItem = selectedItem; return { 'opened': true, 'selected': true } } } else { if (that.guid == objGuid) { that.glossary.selectedItem = node return { 'opened': true, 'selected': true } } } } return this.glossaryCollection.fullCollection.map(function(model, i) { var obj = model.toJSON(), parent = { "text": obj.displayName, "icon": "fa fa-folder-o", "guid": obj.guid, "id": obj.guid, "model": obj, "type": obj.typeName ? obj.typeName : "Glossary", "children": [] } parent.state = getSelectedState({ index: i, node: parent, objGuid: obj.guid }); if (type == "category" && obj.categories) { _.each(obj.categories, function(category) { if (category.parentCategoryGuid) { return; } var type = category.typeName || "GlossaryCategory", guid = category.categoryGuid, categoryObj = { "text": category.displayText, "type": type, "guid": guid, "id": guid, "parent": obj, "glossaryId": obj.guid, "glossaryName": obj.displayName, "model": category, "children": true, "icon": "fa fa-files-o", }; categoryObj.state = getSelectedState({ index: i, node: categoryObj, objGuid: guid }) parent.children.push(categoryObj) }); } if (type == "term" && obj.terms) { _.each(obj.terms, function(term) { var type = term.typeName || "GlossaryTerm", guid = term.termGuid, termObj = { "text": term.displayText, "type": type, "guid": guid, "id": guid, "parent": obj, "glossaryName": obj.displayName, "glossaryId": obj.guid, "model": term, "icon": "fa fa-file-o" } termObj.state = getSelectedState({ index: i, node: termObj, objGuid: guid }) parent.children.push(termObj); }); } return parent; }); }, manualRender: function(options) { _.extend(this, options); this.triggerUrl(); }, generateTree: function() { var $termTree = this.ui.termTree, $categoryTree = this.ui.categoryTree, that = this, getTreeConfig = function(options) { return { "plugins": ["search", "themes", "core", "wholerow", "sort", "conditionalselect"], "conditionalselect": function(node) { if (that.isAssignView) { return node.original.type != "Glossary" ? true : false; } else { return node.original.type != "NoAction" ? true : false; } }, "core": { "data": function(node, cb) { if (node.id === "#") { cb(that.generateData(options)); } else { that.getCategory({ "node": node.original, "callback": cb }); } }, "themes": { "name": that.isAssignView ? "default" : "default-dark", "dots": true }, } } }, treeLoaded = function() { if (that.selectFirstNodeManually) { that.selectFirstNodeManually = false; var id = that.glossary.selectedItem.guid; $treeEl.jstree('select_node', '#' + id + '_anchor'); $treeEl.jstree('open_node', '#' + id + '_anchor'); } }, createAction = function(options) { var $el = options.el, type = options.type, popoverClassName = type == "term" ? "termPopover" : "categoryPopover"; if (!that.isAssignView) { var wholerowEl = $el.find("li[role='treeitem'] > .jstree-wholerow:not(:has(>div.tools))") wholerowEl.append('<div class="tools"><i class="fa fa-ellipsis-h ' + popoverClassName + '"></i></div>'); if (type == "term") { that.createTermAction(); } else if (type == "category") { that.createCategoryAction(); } } }, initializeTree = function(options) { var $el = options.el, type = options.type; $el.jstree(getTreeConfig({ type: type })).on("load_node.jstree", function(e, data) { createAction(_.extend({}, options, data)); }).on("open_node.jstree", function(e, data) { createAction(_.extend({}, options, data)); }) .on("select_node.jstree", function(e, data) { that.glossary.selectedItem = data.node.original; //$("." + popoverClassName).popover('hide'); that.triggerUrl(); }).bind('loaded.jstree', function(e, data) { treeLoaded(); }); }, initializeTermTree = function() { if ($termTree.data('jstree')) { $('.termPopover').popover('destroy'); $termTree.jstree(true).refresh(); } else { initializeTree({ el: $termTree, type: "term" }); } }, initializeCategoryTree = function() { if ($categoryTree.data('jstree')) { $categoryTree.jstree(true).refresh(); } else { initializeTree({ el: $categoryTree, type: "category" }) } } if (this.isAssignView) { if (this.isAssignTermView || this.isAssignEntityView) { initializeTermTree(); } else if (this.isAssignCategoryView) { initializeCategoryTree(); } } else { initializeTermTree(); initializeCategoryTree(); } if (Utils.getUrlState.isGlossaryTab()) { this.triggerUrl(); } this.glossaryCollection.trigger("render:done"); }, createTermAction: function() { var that = this; Utils.generatePopover({ el: this.$('.termPopover'), contentClass: 'termPopoverOptions', popoverOptions: { content: function() { var node = that.glossary.selectedItem, liString = ""; if (node.type == "Glossary") { liString = "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='createSubNode'>Create Sub-Term</a></li>" + "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-trash-o'></i><a href='javascript:void(0)' data-fn='deleteNode'>Delete Glossary</a></li>" } else { liString = "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-trash-o'></i><a href='javascript:void(0)' data-fn='deleteNode'>Delete Term</a></li>" } return "<ul>" + liString + "</ul>"; } } }); }, createCategoryAction: function() { var that = this; Utils.generatePopover({ el: this.$('.categoryPopover'), contentClass: 'categoryPopoverOptions', popoverOptions: { content: function() { var node = that.glossary.selectedItem, liString = ""; if (node.type == "Glossary") { liString = "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='createSubNode'>Create Sub-Category</a></li>" + "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-trash-o'></i><a href='javascript:void(0)' data-fn='deleteNode'>Delete Glossary</a></li>" } else { liString = "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-plus'></i> <a href='javascript:void(0)' data-fn='createSubNode'>Create Sub-Category</a></li>" + "<li data-type=" + node.type + " class='listTerm'><i class='fa fa-trash-o'></i><a href='javascript:void(0)' data-fn='deleteNode'>Delete Category</a></li>" } return "<ul>" + liString + "</ul>"; } } }); }, createSubNode: function(opt) { var that = this, type = this.glossary.selectedItem.type; if ((type == "Glossary" || type == "GlossaryCategory") && this.viewType == "category") { CommonViewFunction.createEditGlossaryCategoryTerm({ "isCategoryView": true, "collection": that.glossaryCollection, "callback": function() { that.getGlossary(); }, "node": this.glossary.selectedItem }) } else { CommonViewFunction.createEditGlossaryCategoryTerm({ "isTermView": true, "callback": function() { that.getGlossary(); }, "collection": that.glossaryCollection, "node": this.glossary.selectedItem }) } }, deleteNode: function(opt) { var that = this, messageType = "", options = { success: function(rModel, response) { Utils.notifySuccess({ content: messageType + Messages.deleteSuccessMessage }); that.getGlossary(); } }, type = this.glossary.selectedItem.type, guid = this.glossary.selectedItem.guid if (type == "Glossary") { messageType = "Glossary"; this.glossaryCollection.fullCollection.get(guid).destroy(options); } else if (type == "GlossaryCategory") { messageType = "Category" new this.glossaryCollection.model().deleteCategory(guid, options); } else if (type == "GlossaryTerm") { messageType = "Term"; new this.glossaryCollection.model().deleteTerm(guid, options); } }, triggerUrl: function() { if (this.isAssignView) { return; } var selectedItem = this.glossary.selectedItem; if (this.glossaryCollection.length && _.isEmpty(selectedItem)) { selectedItem = { "model": this.glossaryCollection.first().toJSON() }; selectedItem.guid = selectedItem.model.guid; selectedItem.type = "glossary"; this.glossary.selectedItem = selectedItem; this.selectFirstNodeManually = true; } if (_.isEmpty(selectedItem)) { return; } var type = selectedItem.type; if (Utils.getUrlState.isGlossaryTab() || Utils.getUrlState.isDetailPage()) { var urlParams = { gType: "glossary" }, guid = selectedItem.guid; if (type === "GlossaryTerm") { urlParams.gType = "term"; } else if (type === "GlossaryCategory") { urlParams.gType = "category"; } if (selectedItem.glossaryId) { urlParams["gId"] = selectedItem.glossaryId; } Utils.setUrl({ url: '#!/glossary/' + guid, mergeBrowserUrl: false, trigger: true, urlParams: urlParams, updateTabState: true }); } } }); return GlossaryLayoutView; });