| /*
 * 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/plate', 'pim:views/product/record/list',
    Dep => Dep.extend({
        template: 'pim:product/record/plate',
        type: 'plate',
        name: 'plate',
        listContainerEl: '.list > div > .plate > .row',
        itemsInRow: null,
        itemsInRowOptions: [],
        events: _.extend({
            'click .item-container': function (e) {
                const id = $(e.currentTarget).data('id');
                if (id
                    && !$.contains(this.$el.find(`.item-container[data-id="${id}"] .actions`).get(0), e.target)
                    && !$.contains(this.$el.find(`.item-container[data-id="${id}"] .field-name`).get(0), e.target)
                    && !$.contains(this.$el.find(`.item-container[data-id="${id}"] .field-preview`).get(0), e.target)
                ) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.actionQuickView({id});
                }
            },
            'click [data-action="sortByDirection"]': function (e) {
                e.stopPropagation();
                e.preventDefault();
                this.sortByDirection();
            },
            'click [data-action="sortByField"]': function (e) {
                e.stopPropagation();
                e.preventDefault();
                this.sortByField($(e.currentTarget).data('name'));
            },
            'click [data-action="setItemsInRow"]': function (e) {
                e.stopPropagation();
                e.preventDefault();
                this.setItemsInRow($(e.currentTarget).data('name'));
            }
        }, Dep.prototype.events),
        setup() {
            Dep.prototype.setup.call(this);
            this.initItemsInRow();
        },
        data() {
            return _.extend({
                sortFields: this.getSortFieldsList(),
                itemsInRowOptions: this.itemsInRowOptions,
                itemsInRow: this.itemsInRow,
                itemContainerWidth: 100 / this.itemsInRow
            }, Dep.prototype.data.call(this));
        },
        getSortFieldsList() {
            const fields = [];
            const fieldDefs = this.getMetadata().get(['entityDefs', this.scope, 'fields']);
            for (let field in fieldDefs) {
                if (!fieldDefs[field].disabled
                    && !fieldDefs[field].layoutListDisabled
                    && !this.getMetadata().get(['fields', fieldDefs[field].type, 'notSortable'])
                ) {
                    fields.push(field);
                }
            }
            fields.sort(function (v1, v2) {
                return this.translate(v1, 'fields', this.scope).localeCompare(this.translate(v2, 'fields', this.scope));
            }.bind(this));
            return fields;
        },
        buildRow(i, model, callback) {
            const key = model.id;
            this.rowList.push(key);
            const acl =  {
                edit: this.getAcl().checkModel(model, 'edit'),
                delete: this.getAcl().checkModel(model, 'delete')
            };
            this.createView(key, this.getItemView(), {
                model: model,
                acl: acl,
                el: this.options.el + ' .item-container[data-id="' + key +'"]',
                optionsToPass: ['acl'],
                noCache: true,
                name: this.type + '-' + model.name,
                setViewBeforeCallback: this.options.skipBuildRows && !this.isRendered(),
                rowActionsView: this.rowActionsView
            }, callback);
        },
        getItemView() {
            return this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.plateItem') || 'views/asset/record/plate-item';
        },
        getRowSelector(id) {
            return `.item-container[data-id="${id}"]`;
        },
        getSelectAttributeList(callback) {
            callback(this.modifyAttributeList(['name', 'productStatus', 'type', 'imageId', 'imageName']));
        },
        getRowContainerHtml(id) {
            return `<div class="col-xs-6 col-sm-3 item-container" data-id="${id}"></div>`;
        },
        checkRecord(id, $target, isSilent) {
            Dep.prototype.checkRecord.call(this, id, $target, isSilent);
            $target = $target || this.$el.find('.record-checkbox[data-id="' + id + '"]');
            if ($target.get(0)) {
                $target.closest('.plate-item').addClass('active');
            }
        },
        uncheckRecord(id, $target, isSilent) {
            Dep.prototype.uncheckRecord.call(this, id, $target, isSilent);
            $target = $target || this.$el.find('.record-checkbox[data-id="' + id + '"]');
            if ($target.get(0)) {
                $target.closest('.plate-item').removeClass('active');
            }
        },
        selectAllHandler(isChecked) {
            Dep.prototype.selectAllHandler.call(this, isChecked);
            var plateItems = this.$el.find('.list .plate-item');
            if (isChecked) {
                plateItems.addClass('active');
            } else {
                plateItems.removeClass('active');
            }
        },
        selectAllResult() {
            Dep.prototype.selectAllResult.call(this);
            this.$el.find('.list .plate-item').addClass('active');
        },
        sortByDirection() {
            this.toggleSort(this.collection.sortBy);
        },
        sortByField(field) {
            var asc = this.collection.asc;
            this.notify('Please wait...');
            this.collection.once('sync', function () {
                this.notify(false);
                this.trigger('sort', {sortBy: field, asc: asc});
            }, this);
            var maxSizeLimit = this.getConfig().get('recordListMaxSizeLimit') || 200;
            while (this.collection.length > maxSizeLimit) {
                this.collection.pop();
            }
            this.collection.sort(field, asc);
            this.deactivate();
        },
        initItemsInRow() {
            const $window = $(window);
            this.itemsInRow = this.getStorage().get('itemsInRow', `plate-${this.scope}`) || this.getItemsInRowToWindowWidth($window.width());
            this.itemsInRowOptions = [1, 2, 3, 4, 5, 6];
        },
        setItemsInRow(count) {
            if (this.itemsInRow !== count) {
                this.itemsInRow = count;
                this.reRender();
                this.getStorage().set('itemsInRow', `plate-${this.scope}`, this.itemsInRow);
            }
        },
        getItemsInRowToWindowWidth(windowWidth) {
            let count = this.itemsInRow;
            if (windowWidth < 768) {
                count = 2;
            } else if (windowWidth < 992) {
                count = 3;
            } else if (windowWidth < 1200) {
                count = 4;
            } else {
                count = 5;
            }
            return count;
        }
    })
);
 |