import { Component } from '../../lib/vues6/vues6.js'
import { action_service } from '../service/Action.service.js'
import { message_service } from '../service/Message.service.js'
import { resource_service } from '../service/Resource.service.js'
const template = `
{{ resource_class.plural }}
# |
{{ col.name }} |
|
{{ index + 1 }} |
{{ col.renderer(row[col.field]) }}
{{ row[col.field] ? t['common.yes'] : t['common.no'] }}
{{ col.field in row ? row[col.field] : '-' }}
|
|
`
export default class ListingComponent extends Component {
static get selector() { return 'cobalt-listing' }
static get template() { return template }
static get props() { return ['resource'] }
definition = {}
data = []
resource_class = {}
access_msg = ''
can_access = false
t = {}
async vue_on_create() {
this.t = await T(
'common.yes',
'common.no',
'common.not_permission',
'common.view',
'common.are_you_sure',
'common.action_resource_confirm',
'common.cancel',
'common.continue'
)
// Load the resource
this.resource_class = await resource_service.get(this.resource)
// Make sure we have permission
if ( !(await this.resource_class.can('list')) ) {
this.access_msg = this.t['common.not_permission'].replace('ACTION', this.t['common.view'])
this.can_access = false
return
} else {
this.access_msg = ''
this.can_access = true
}
await this.load()
}
async load() {
this.definition = this.resource_class.listing_definition
this.data = await this.resource_class.list()
}
async perform($event, action, row = undefined) {
if ( action.confirm ) {
message_service.modal({
title: this.t['common.are_you_sure'],
message: this.t['common.action_resource_confirm'].replace('ACTION', action.action).replace('RESOURCE', this.resource_class.item),
buttons: [
{
text: this.t['common.cancel'],
type: 'close',
},
{
text: this.t['common.continue'],
class: ['btn', 'btn-primary'],
type: 'close',
on_click: async () => {
await action_service.perform({...action, resource: this.resource, ...(row ? {id: row.id} : {})})
await this.load()
},
},
],
})
} else {
await action_service.perform({...action, resource: this.resource, ...(row ? {id: row.id} : {})})
await this.load()
}
}
}