CoreID/app/assets/app/dash/SideBar.component.js

import { Component } from '../../lib/vues6/vues6.js'
import { event_bus } from '../service/EventBus.service.js'
import { action_service } from '../service/Action.service.js'
import { resource_service } from '../service/Resource.service.js'
import { session } from '../service/Session.service.js'

const template = `
<div class="bg-light border-right coreid-sidebar-wrapper" id="sidebar-wrapper" v-bind:class="{ collapsed: isCollapsed }">
    <div class="sidebar-heading"><i id="sidebar-collapser" @click="toggle()" class="fa fa-arrow-left"></i> {{ app_name }}</div>
    <div class="list-group list-group-flush">
        <a
            href="#"
            @click="perform(action)"
            class="list-group-item list-group-item-action bg-light"
            v-for="action in actions"
        >{{ action.text }}</a>
    </div>
</div>
`

export default class SideBarComponent extends Component {
    static get selector() { return 'coreid-sidebar' }
    static get props() { return ['app_name'] }
    static get template() { return template }

    constructor() {
        super()

        this.actions = []

        this.isCollapsed = false

        this.possible_actions = [
            {
                text: 'Profile',
                action: 'navigate',
                page: 'dash.profile',
            },
            {
                text: 'Users',
                action: 'list',
                type: 'resource',
                resource: 'auth/User',
            },
            {
                text: 'Groups',
                action: 'list',
                type: 'resource',
                resource: 'auth/Group',
            },
            {
                text: 'Applications',
                action: 'list',
                type: 'resource',
                resource: 'App',
            },
            {
                text: 'IAM Policy',
                action: 'list',
                type: 'resource',
                resource: 'iam/Policy',
            },
            {
                text: 'IAM Permissions',
                action: 'list',
                type: 'resource',
                resource: 'iam/Permission',
            },
            {
                text: 'Computers',
                action: 'list',
                type: 'resource',
                resource: 'ldap/Machine',
            },
            {
                text: 'Computer Groups',
                action: 'list',
                type: 'resource',
                resource: 'ldap/MachineGroup',
            },
            {
                text: 'LDAP Clients',
                action: 'list',
                type: 'resource',
                resource: 'ldap/Client',
            },
            {
                text: 'OAuth2 Clients',
                action: 'list',
                type: 'resource',
                resource: 'oauth/Client',
            },
            {
                text: 'RADIUS Clients',
                action: 'list',
                type: 'resource',
                resource: 'radius/Client',
            },
            {
                text: 'OpenID Connect Clients',
                action: 'list',
                type: 'resource',
                resource: 'openid/Client',
            },
            {
                text: 'SAML Service Providers',
                action: 'list',
                type: 'resource',
                resource: 'saml/Provider',
            },
            {
                text: 'Settings',
                action: 'list',
                type: 'resource',
                resource: 'Setting',
            },
        ]

        event_bus.event('sidebar.toggle').subscribe(() => {
            this.toggle()
        })
    }

    async vue_on_create() {
        const new_actions = []

        const perm_lookups = []
        for ( const action of this.possible_actions ) {
            if ( action.resource ) {
                action.rsc = await resource_service.get(action.resource)
                perm_lookups.push(`${action.rsc.permission_base}:list`)
            }
        }

        const perms = await session.check_permissions(...perm_lookups)

        for ( const action of this.possible_actions ) {
            if ( action.resource ) {
                if ( perms[`${action.rsc.permission_base}:list`] ) {
                    new_actions.push(action)
                }
            } else {
                new_actions.push(action)
            }
        }

        this.actions = new_actions
    }

    toggle() {
        this.isCollapsed = !this.isCollapsed
    }

    perform(action) {
        return action_service.perform({delay: 0, ...action})
    }
}