attract/src/scripts/js/es6/common/vuecomponents/App.js

import { AssetsTable } from './assetstable/Table'
import { TasksTable } from './taskstable/Table'
import { ShotsTable } from './shotstable/Table'
import './detailedview/Viewer'
const BrowserHistoryState = pillar.vuecomponents.mixins.BrowserHistoryState;
const StateSaveMode = pillar.vuecomponents.mixins.StateSaveMode;

const TEMPLATE =`
<div class="attract-app">
    <div id="col_main">
        <component
            :is="tableComponentName"
            :projectId="projectId"
            :selectedIds="selectedIds"
            :canChangeSelectionCB="canChangeSelectionCB"
            @selectItemsChanged="onSelectItemsChanged"
            @isInitialized="onTableInitialized"
        />
    </div>
    <div class="col-splitter"/>
    <attract-detailed-view id="col_right"
        :items="selectedItems"
        :project="project"
        :contextType="contextType"
        @objects-are-edited="onEditingObjects"
    />
</div>
`;

Vue.component('attract-app', {
    template: TEMPLATE,
    mixins: [BrowserHistoryState],
    props: {
        projectId: String,
        selectedIds: {
            type: Array,
            default: []
        },
        contextType: {
            type: String,
            default: 'shots',
        }
    },
    data() {
        return {
            selectedItems: [],
            isEditing: false,
            isTableInited: false,
            project: null
        }
    },
    created() {
        pillar.api.thenGetProject(this.projectId)
            .then((project) =>{
                this.project = project;
            });
    },
    computed: {
        selectedNames() {
            return this.selectedItems.map(it => it.name);
        },
        tableComponentName() {
            switch (this.contextType) {
                case 'assets': return AssetsTable.options.name;
                case 'tasks': return TasksTable.options.name;
                case 'shots': return ShotsTable.options.name;
                default:
                    console.log('Unknown context type', this.contextType);
                    return ShotsTable.$options.name;
            }
        },
        /**
         * @override BrowserHistoryState
         */
        browserHistoryState() {
            if(this.isTableInited) {
                return {
                    'selectedIds': this.selectedIds
                };
            } else {
                return {};
            }
        },
        /**
         * @override BrowserHistoryState
         */
        historyStateUrl() {
            let projectUrl = ProjectUtils.projectUrl();
            if(this.selectedItems.length !== 1) {
                return `/attract/${projectUrl}/${this.contextType}/`;
            } else {
                let selected = this.selectedItems[0];
                let node_type = selected.node_type;
                if (node_type === 'attract_task' && this.contextType !== 'tasks') {
                    return `/attract/${projectUrl}/${this.contextType}/with-task/${selected._id}`;
                } else {
                    return `/attract/${projectUrl}/${this.contextType}/${selected._id}`;
                }
            }
            
        }
    },
    watch: {
        selectedItems(newValue) {
            function equals(arrA, arrB) {
                if (arrA.length === arrB.length) {
                    return arrA.every(it => arrB.includes(it)) &&
                           arrB.every(it => arrA.includes(it))
                }
                return false;
            }
            let newSelectedIds = newValue.map(item => item._id);
            // They will be equal for instance when we pop browser history
            if (equals(newSelectedIds, this.selectedIds)) return;

            this.selectedIds = newSelectedIds;
        }
    },
    methods: {
        onSelectItemsChanged(selectedItems) {
            this.selectedItems = selectedItems;
        },
        onEditingObjects(isEditing) {
            this.isEditing = !!isEditing;
        },
        onTableInitialized() {
            this.isTableInited = true;
        },
        canChangeSelectionCB() {
            if(this.isEditing) {
                let retval = confirm("You have unsaved data. Do you want to discard it?");
                return retval;
            }
            return true
        },
        /**
         * @override BrowserHistoryState
         */
        stateSaveMode(newState, oldState) {
            if (!this.isTableInited) {
                return StateSaveMode.IGNORE;
            }
            
            if (!oldState) {
                // Initial state. Replace what we have so we can go back to this state
                return StateSaveMode.REPLACE;
            }
            if (newState.selectedIds.length > 1 && oldState.selectedIds.length > 1) {
                // To not spam history when multiselecting items
                return StateSaveMode.REPLACE;
            }
            return StateSaveMode.PUSH;
        },
        /**
         * @override BrowserHistoryState
         */
        applyHistoryState(newState) {
            this.selectedIds = newState.selectedIds || this.selectedIds;
        }
    },
});