Source: frontend/src/components/Grid.component.js

import {Component} from '../../lib/vues6.js'

/**
 * An enum representing the different grid cell renderer types for the shared grid.
 * @type {object}
 */
const GridCellRenderType = {
    Simple: Symbol('simple'),
    HTML: Symbol('html'),
    Component: Symbol('component'),
}

export {GridCellRenderType}

const template = `
<div class="component-app-grid">
    <table>
        <tr>
            <th v-if="show_row_numbers">#</th>
            <th v-for="col of column_defs" :title="col.title || ''">{{ col.header || '' }}</th>
        </tr>
        <tr v-for="(row, idx) of data">
            <td v-if="show_row_numbers">{{ idx + 1 }}</td>
            <td v-for="col of column_defs">
                <div v-if="!col.type || col.type === GridCellRenderType.Simple">{{ row[col.key] }}</div>
                <div v-if="col.type === GridCellRenderType.HTML" v-html="col.renderer(row[col.key], row)"></div>
                <div v-if="col.type === GridCellRenderType.Component">
                    <component :is="col.component" :row="row" :col="col" :idx="idx" @click="on_col_click(col, $event)"></component>
                </div>
            </td>
        </tr>
    </table>
</div>
`

/**
 * Shared grid component used to show tables in various interfaces.
 * @extends Component
 */
class GridComponent extends Component {
    static get selector() { return 'app-grid' }
    static get template() { return template }
    static get props() {
        return [
            'show_row_numbers',
            'column_defs',
            'data',
        ]
    }

    GridCellRenderType = GridCellRenderType

    /**
     * Called when the component is instantiated.
     * @return {Promise<void>}
     */
    async vue_on_create() {

    }

    /**
     * Called when the component renderer emits a click event, to pass it along to the column definition.
     * @param {object} col - the column definition
     * @param {object} row - the row clicked
     * @param {object} passcol - the column emitted from the component
     */
    on_col_click(col, [row, passcol]) {
        col.on_click(row, passcol)
    }
}

export default GridComponent