ractive-ez-table/lib/EzTableControls.js

Ractive Ez UI Table

/* 

     -----------------------------------------------
    | [Group 1] [Group 2]                       [C] |
    |-----------------------------------------------|
    | Column 1 [x]   Column 4 [ ]   Column 7 [ ]    |
    | Column 2 [x]   Column 5 [x]   Column 8 [x]    |
    | Column 3 [x]   Column 6 [x]   Column 9 [ ]    |
     -----------------------------------------------

    Interaction:
        1. Group box => drag groups to perform "group by"
        2. Group box => click group sort to change sort direction
        3. Group box => click group close to remove "group by"
        2. [C] menu button => click to open the detailed controls
        3. Detailed controls => lists all columns with a "visible" checkbox

*/

import Ractive  from 'ractive';
import utils    from './utils.js';
import settings from './settings.js';

require("./EzTableControls.less");

const EzTableControls = Ractive.components.EzTableControls = Ractive.extend({
    template: require("./EzTableControls.html"),

    data() {
        return {
            groups: null,
            columns: null,
            showDetails: false,
            columnContentType: settings.columnContentType,
			groupLabel: null
        };
    },

    toggleDetails() {
        this.set("showDetails", !this.get("showDetails"));
    },

    dragOverGroup(event) {
		const contentType = this.get("columnContentType");
		const allowDrop = event.dataTransfer.types.indexOf(contentType) != -1;
		
		if (allowDrop) {
			event.preventDefault();
			event.dropEffect = "move";
		}
    },

    dragStartGroup(event, column) {
		const contentType = this.get("columnContentType");
		const data = JSON.stringify(column);
		event.dataTransfer.setData(contentType, data);
    },

    dropGroup(event, targetGroup) {
        const columns = this.get("columns");
        const groups  = this.get("groups");
		const contentType = this.get("columnContentType");
		const data = JSON.parse(event.dataTransfer.getData(contentType));
		const sourceGroup = utils.find(columns, "name", data.name);
		
		// detect stop propagation
		if (event.cancelBubble) return;
        
        if (sourceGroup != null) {
            const sourceIndex = groups.indexOf(sourceGroup);
            const targetIndex = groups.indexOf(targetGroup);
            if (sourceIndex == targetIndex && sourceIndex != -1) return;

            event.stopPropagation();
			event.preventDefault();

            if (sourceIndex != -1) this.splice("groups", sourceIndex, 1);
            if (targetIndex == -1) return this.push("groups", sourceGroup);
            this.splice("groups", targetIndex, 0, sourceGroup);
        }
    },

    toggleSortDirection(column) {
        const index = this.get("columns").indexOf(column);
        if (index == -1) return;
        this.set("columns." + index + ".sortDirection", !column.sortDirection);
    },

    removeGroup(column) {
        const index = this.get("groups").indexOf(column);
        if (index == -1) return;
        this.splice("groups", index, 1);
    }
    
});

export default EzTableControls;