Merge pull request #452 from treolabs/t-78638

Added filtering with using the scope on the product page for images

client/modules/pim/src/views/record/panels/pim-images.js

@@ -17,8 +17,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-Espo.define('pim:views/record/panels/pim-images', 'views/record/panels/relationship',
-    Dep => Dep.extend({
+Espo.define('pim:views/record/panels/pim-images', ['views/record/panels/relationship', 'views/record/panels/bottom'],
+    (Dep, Bottom) => Dep.extend({
 
         boolFilterData: {
             pimImageRelation() {
@@ -30,21 +30,208 @@ Espo.define('pim:views/record/panels/pim-images', 'views/record/panels/relations
         },
 
         setup() {
-            Dep.prototype.setup.call(this);
+            Bottom.prototype.setup.call(this);
 
-            let select = this.actionList.find(item => item.action === (this.defs.selectAction || 'selectRelated'));
+            this.link = this.link || this.defs.link || this.panelName;
 
-            if (select) {
-                select.data = {
+            if (!this.scope && !(this.link in this.model.defs.links)) {
+                throw new Error('Link \'' + this.link + '\' is not defined in model \'' + this.model.name + '\'');
+            }
+            this.title = this.title || this.translate(this.link, 'links', this.model.name);
+            this.scope = this.scope || this.model.defs.links[this.link].entity;
+
+            if (!this.getConfig().get('scopeColorsDisabled')) {
+                var iconHtml = this.getHelper().getScopeColorIconHtml(this.scope);
+                if (iconHtml) {
+                    if (this.defs.label) {
+                        this.titleHtml = iconHtml + this.translate(this.defs.label, 'labels', this.scope);
+                    } else {
+                        this.titleHtml = iconHtml + this.title;
+                    }
+                }
+            }
+
+            var url = this.url || this.model.name + '/' + this.model.id + '/' + this.link;
+
+            if (!this.readOnly && !this.defs.readOnly) {
+                if (!('create' in this.defs)) {
+                    this.defs.create = true;
+                }
+                if (!('select' in this.defs)) {
+                    this.defs.select = true;
+                }
+            }
+
+            this.filterList = this.defs.filterList || this.filterList || null;
+
+            if (this.filterList && this.filterList.length) {
+                this.filter = this.getStoredFilter();
+            }
+
+            if (this.defs.create) {
+                if (this.getAcl().check(this.scope, 'create') && !~['User', 'Team'].indexOf()) {
+                    this.buttonList.push({
+                        title: 'Create',
+                        action: this.defs.createAction || 'createRelated',
+                        link: this.link,
+                        acl: 'create',
+                        aclScope: this.scope,
+                        html: '<span class="fas fa-plus"></span>',
+                        data: {
+                            link: this.link,
+                        }
+                    });
+                }
+            }
+
+            if (this.defs.select) {
+                const data = {
                     link: this.link,
                     scope: this.scope,
                     boolFilterListCallback: 'getSelectBoolFilterList',
                     boolFilterDataCallback: 'getSelectBoolFilterData',
                     primaryFilterName: this.defs.selectPrimaryFilterName || null
                 };
+
+                this.actionList.unshift({
+                    label: 'Select',
+                    action: this.defs.selectAction || 'selectRelated',
+                    data: data,
+                    acl: 'edit',
+                    aclScope: this.model.name
+                });
+            }
+
+            this.setupActions();
+
+            var layoutName = 'listSmall';
+            this.setupListLayout();
+
+            if (this.listLayoutName) {
+                layoutName = this.listLayoutName;
+            }
+
+            var listLayout = null;
+            var layout = this.defs.layout || null;
+            if (layout) {
+                if (typeof layout == 'string') {
+                    layoutName = layout;
+                } else {
+                    layoutName = 'listRelationshipCustom';
+                    listLayout = layout;
+                }
+            }
+
+            var sortBy = this.defs.sortBy || null;
+            var asc = this.defs.asc || null;
+
+            if (this.defs.orderBy) {
+                sortBy = this.defs.orderBy;
+                asc = true;
+                if (this.defs.orderDirection) {
+                    if (this.defs.orderDirection && (this.defs.orderDirection === true || this.defs.orderDirection.toLowerCase() === 'DESC')) {
+                        asc = false;
+                    }
+                }
             }
 
+            this.wait(true);
+            this.getCollectionFactory().create(this.scope, function (collection) {
+                collection.maxSize = this.getConfig().get('recordsPerPageSmall') || 5;
+
+                if (this.defs.filters) {
+                    var searchManager = new SearchManager(collection, 'listRelationship', false, this.getDateTime());
+                    searchManager.setAdvanced(this.defs.filters);
+                    collection.where = searchManager.getWhere();
+                }
+
+                collection.url = collection.urlRoot = url;
+                if (sortBy) {
+                    collection.sortBy = sortBy;
+                }
+                if (asc) {
+                    collection.asc = asc;
+                }
+                this.collection = collection;
+
+                this.setFilter(this.filter);
+
+                if (this.fetchOnModelAfterRelate) {
+                    this.listenTo(this.model, 'after:relate', function () {
+                        collection.fetch();
+                    }, this);
+                }
+
+                this.listenTo(this.model, 'update-all', function () {
+                    collection.fetch();
+                }, this);
+
+                var viewName = this.defs.recordListView || this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.list') || 'Record.List';
+
+                this.once('after:render', function () {
+                    this.createView('list', viewName, {
+                        collection: collection,
+                        layoutName: layoutName,
+                        listLayout: listLayout,
+                        checkboxes: false,
+                        rowActionsView: this.defs.readOnly ? false : (this.defs.rowActionsView || this.rowActionsView),
+                        buttonsDisabled: true,
+                        el: this.options.el + ' .list-container',
+                        skipBuildRows: true
+                    }, function (view) {
+                        view.getSelectAttributeList(function (selectAttributeList) {
+                            if (selectAttributeList) {
+                                collection.data.select = selectAttributeList.join(',');
+                            }
+                            collection.fetch();
+                        }.bind(this));
+
+                        this.listenTo(view, 'after:render', () => {
+                            this.applyOverviewFilters();
+                        })
+                    });
+                }, this);
+
+                this.wait(false);
+            }, this);
+
+            this.setupFilterActions();
+
             this.listenTo(this.collection, 'sync', () => this.model.fetch());
+
+            if (this.getMetadata().get(['scopes', this.model.name, 'advancedFilters'])) {
+                this.listenTo(this.model, 'overview-filters-changed', () => {
+                    this.applyOverviewFilters();
+                });
+            }
+        },
+
+        applyOverviewFilters: function() {
+            const listView = this.getView('list');
+            const channelFilter = (this.model.advancedEntityView || {}).channelsFilter;
+
+            Object.keys(listView.nestedViews || {}).forEach(key => {
+                const rowView = listView.getView(key);
+                let hide = false;
+
+                if (channelFilter === 'onlyGlobalScope') {
+                    hide = rowView.model.get('scope') !== 'Global'
+                } else if (channelFilter) {
+                    if (rowView.model.get('scope') === 'Channel') {
+                        hide = !(rowView.model.get('channelsIds') || []).includes(channelFilter)
+                    }
+                }
+
+                this.controlRowVisibility(rowView, hide);
+            });
+        },
+
+        controlRowVisibility(row, hide) {
+            if (hide) {
+                row.$el.addClass('hidden');
+            } else {
+                row.$el.removeClass('hidden');
+            }
         },
 
         getSelectBoolFilterList() {