PHP Classes

File: client/modules/pim/src/views/product/record/catalog-tree-panel.js

Recommend this page to a friend!
  Classes of alex nov   KennerPIM   client/modules/pim/src/views/product/record/catalog-tree-panel.js   Download  
File: client/modules/pim/src/views/product/record/catalog-tree-panel.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: KennerPIM
Product information management application
Author: By
Last change:
Date: 1 year ago
Size: 14,834 bytes
 

Contents

Class file image Download
/* * Pim * Free Extension * Copyright (c) TreoLabs GmbH * Copyright (c) Kenner Soft Service GmbH * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <https://www.gnu.org/licenses/>. */ Espo.define('pim:views/product/record/catalog-tree-panel', 'view', Dep => Dep.extend({ template: 'pim:product/record/catalog-tree-panel', catalogs: [], categories: [], rootCategoriesIds: [], catalogTreeData: null, events: { 'click .category-buttons button[data-action="selectAll"]': function (e) { this.selectCategoryButtonApplyFilter($(e.currentTarget), {type: 'anyOf'}); }, 'click .category-buttons button[data-action="selectWithoutCategory"]': function (e) { this.selectCategoryButtonApplyFilter($(e.currentTarget), {type: 'isEmpty'}); }, 'click button[data-action="collapsePanel"]': function () { this.actionCollapsePanel(); } }, data() { return { scope: this.scope, catalogDataList: this.getCatalogDataList() } }, setup() { this.scope = this.options.scope || this.scope; this.wait(true); this.getFullEntity('Catalog', {select: 'name,categoriesIds,categoriesNames'}, catalogs => { this.catalogs = catalogs; this.rootCategoriesIds = this.getRootCategoriesIds(); this.getFullEntity('Category', { select: 'name,categoryParentId,categoryRoute,childrenCount', where: [ { type: 'in', attribute: 'id', value: this.rootCategoriesIds } ] }, categories => { this.categories = categories; this.setupPanels(); this.expandTreeWithProductCategory(); this.wait(false); }); }); this.listenTo(this, 'resetFilters', () => { this.catalogTreeData = null; this.getStorage().set('catalog-tree-panel-data', this.scope, ''); this.selectCategoryButtonApplyFilter(this.$el.find('button[data-action="selectAll"]'), false); }); if (this.model) { this.listenTo(Backbone, 'menu-expanded', () => { this.actionCollapsePanel(true); }); } }, expandTreeWithProductCategory() { const catalogTreeData = this.getStorage().get('catalog-tree-panel-data', this.scope); if (this.model && (!catalogTreeData || !catalogTreeData.category)) { this.ajaxGetRequest(`Product/${this.model.id}/categories`, this.getSortingParams()) .then(productCategories => { let id = (((productCategories.list || [])[0] || {}).id); if (id) { this.ajaxGetRequest(`Category/${id}`).then(category => { let parentCategoryId = id; if (category.categoryParentId) { parentCategoryId = (category.categoryRoute || '').split('|').find(element => element); } let catalog = this.catalogs.find(catalog => { return catalog.id === this.model.get('catalogId') && (catalog.categoriesIds || []).includes(parentCategoryId); }); if (catalog) { let catalogTree = this.getView(`category-tree-${catalog.id}`); if (catalogTree) { catalogTree.expandCategoryHandler(category); } } }); } }); } }, getSortingParams() { const panelDefs = this.getMetadata().get(['clientDefs', this.scope, 'relationshipPanels', 'productCategories']); const scopeDefs = this.getMetadata().get(['entityDefs', 'ProductCategory', 'collection']); return { sortBy: (panelDefs || {}).sortBy || (scopeDefs || {}).sortBy, asc: (panelDefs || {}).asc || (scopeDefs || {}).asc }; }, getFullEntity(url, params, callback, container) { if (url) { container = container || []; let options = params || {}; options.maxSize = options.maxSize || 200; options.offset = options.offset || 0; this.ajaxGetRequest(url, options).then(response => { container = container.concat(response.list || []); options.offset = container.length; if (response.total > container.length || response.total === -1) { this.getFullEntity(url, options, callback, container); } else { callback(container); } }); } }, getRootCategoriesIds() { let categories = []; this.catalogs.forEach(catalog => { if (catalog.categoriesIds) { catalog.categoriesIds.forEach(id => { if (!categories.includes(id)) { categories.push(id); } }); } }); return categories; }, afterRender() { Dep.prototype.afterRender.call(this); if ($(window).width() <= 767 || !!this.getStorage().get('catalog-tree-panel', this.scope)) { this.actionCollapsePanel(); } this.expandFilters(); }, expandFilters() { const catalogTreeData = this.getStorage().get('catalog-tree-panel-data', this.scope); if (catalogTreeData) { const type = catalogTreeData.type; const category = catalogTreeData.category; if (type === 'anyOf' && category) { const categoryTree = this.getView(`category-tree-${category.catalogId}`); categoryTree.expandCategoryHandler(category); } else if (type === 'isEmpty') { this.selectCategoryButton(this.$el.find('button[data-action="selectWithoutCategory"]')); } this.configCatalogTreeData(type, category); if (!this.model) { this.trigger('select-category', this.catalogTreeData); } } }, selectCategoryButtonApplyFilter(button, filterParams) { this.selectCategoryButton(button); if ($(window).width() <= 767) { this.actionCollapsePanel(true); } if (filterParams) { this.applyCategoryFilter(filterParams.type); } if (this.model && !this.getStorage().get('catalog-tree-panel', this.scope)) { Backbone.trigger('tree-panel-expanded'); } }, setupPanels() { this.createView('categorySearch', 'pim:views/product/record/catalog-tree-panel/category-search', { el: '.catalog-tree-panel > .category-panel > .category-search', scope: this.scope, catalogs: this.catalogs }, view => { view.render(); this.listenTo(view, 'category-search-select', category => { let categoryTree = this.getView(`category-tree-${category.catalogId}`); if (categoryTree) { categoryTree.expandCategoryHandler(category); categoryTree.selectCategory(category); } }); }); this.catalogs.forEach(catalog => { if (catalog.categoriesIds && catalog.categoriesIds.length) { this.createView(`category-tree-${catalog.id}`, 'pim:views/product/record/catalog-tree-panel/category-tree', { name: catalog.id, el: `${this.options.el} > .category-panel > .category-tree > .panel[data-name="${catalog.id}"]`, scope: this.scope, catalog: catalog, categories: this.categories.filter(category => catalog.categoriesIds.includes(category.id)) }, view => { view.listenTo(view, 'category-tree-select', category => { this.selectCategory(category); }); view.render(); }); } }); }, selectCategory(category) { if (category && category.id && category.catalogId) { if ($(window).width() <= 767) { this.actionCollapsePanel(); } this.applyCategoryFilter('anyOf', category); } }, applyCategoryFilter(type, category) { this.configCatalogTreeData(type, category); this.getStorage().set('catalog-tree-panel-data', this.scope, {type: type, category: category}); this.trigger('select-category', this.catalogTreeData); }, configCatalogTreeData(type, category) { this.catalogTreeData = {}; if (type === 'isEmpty') { this.catalogTreeData.advanced = { productCategories: { type: 'isNotLinked', data: { type: type } } }; } else if (type === 'anyOf' && category) { this.catalogTreeData.bool = { linkedWithCategory: true }; this.catalogTreeData.boolData = { linkedWithCategory: category.id }; this.catalogTreeData.advanced = { catalog: { type: 'equals', field: 'catalogId', value: category.catalogId, data: { type: 'is', idValue: category.catalogId, nameValue: (this.catalogs.find(catalog => catalog.id === category.catalogId) || {}).name } } }; } }, selectCategoryButton(button) { this.$el.find('.panel-collapse.collapse[class^="catalog-"].in').collapse('hide'); this.$el.find('ul.list-group-tree li.child').removeClass('active'); this.$el.find('.category-buttons > button').removeClass('active'); button.addClass('active'); }, actionCollapsePanel(forceHide) { let categoryPanel = this.$el.find('.category-panel'); if (categoryPanel.hasClass('hidden') && !forceHide) { categoryPanel.removeClass('hidden'); this.showUtilityElements(); this.getStorage().set('catalog-tree-panel', this.scope, ''); if (this.model) { Backbone.trigger('tree-panel-expanded'); } } else { categoryPanel.addClass('hidden'); this.hideUtilityElements(); this.getStorage().set('catalog-tree-panel', this.scope, 'collapsed'); } $(window).trigger('resize'); }, showUtilityElements() { let button = this.$el.find('button[data-action="collapsePanel"]'); button.removeClass('collapsed'); button.find('span.toggle-icon-left').removeClass('hidden'); button.find('span.toggle-icon-right').addClass('hidden'); this.$el.removeClass('catalog-tree-panel-hidden'); this.$el.addClass('col-xs-12 col-lg-3'); if (this.model) { let detailContainer = this.$el.parents('#main').find('.overview'); detailContainer.removeClass('col-lg-9'); detailContainer.addClass('col-lg-6'); } else { let listContainer = this.$el.parents('#main').find('.list-container'); listContainer.addClass('col-xs-12 col-lg-9'); } }, hideUtilityElements() { let button = this.$el.find('button[data-action="collapsePanel"]'); button.addClass('collapsed'); button.find('span.toggle-icon-left').addClass('hidden'); button.find('span.toggle-icon-right').removeClass('hidden'); this.$el.addClass('catalog-tree-panel-hidden'); this.$el.removeClass('col-xs-12 col-lg-3'); if (this.model) { let detailContainer = this.$el.parents('#main').find('.overview'); detailContainer.addClass('col-lg-9'); detailContainer.removeClass('col-lg-6'); } else { let listContainer = this.$el.parents('#main').find('.list-container'); listContainer.removeClass('col-xs-12 col-lg-9'); } }, getCatalogDataList: function () { let arr = []; this.catalogs.forEach(catalog => { if (catalog.categoriesIds && catalog.categoriesIds.length) { arr.push({ key: `category-tree-${catalog.id}`, name: catalog.id }); } }); return arr; }, }) );