You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.0 KiB
116 lines
3.0 KiB
import {Component} from '../../lib/vues6.js'
|
|
|
|
const template = `
|
|
<div class="component-action-button">
|
|
<button
|
|
v-if="!hidden"
|
|
v-bind:style="{border: '2px solid lightgrey', borderRadius: '3px', backgroundColor: color, color: 'white'}"
|
|
@click="on_click($event)"
|
|
>{{ text }}</button>
|
|
</div>
|
|
`
|
|
|
|
/**
|
|
* Component representing an action button that can be embedded in the shared grid.
|
|
* @extends Component
|
|
*/
|
|
class GridActionButtonComponent extends Component {
|
|
static get selector() { return 'app-action-button' }
|
|
static get template() { return template }
|
|
static get props() { return ['row', 'col'] }
|
|
|
|
/**
|
|
* The text shown on the action button.
|
|
* @type {string}
|
|
*/
|
|
text = ''
|
|
|
|
/**
|
|
* The CSS color of the action button.
|
|
* @type {string}
|
|
*/
|
|
color = 'white'
|
|
|
|
/**
|
|
* If true, the action button will be hidden.
|
|
* @type {boolean}
|
|
*/
|
|
hidden = false
|
|
|
|
/**
|
|
* Called when the component is instantiated. Updates the text, color, and hide status.
|
|
* @return {Promise<void>}
|
|
*/
|
|
async vue_on_create() {
|
|
this.update_text()
|
|
this.update_color()
|
|
this.update_hidden()
|
|
}
|
|
|
|
/**
|
|
* Called when the row value changes. Updates the text, color, and hide status.
|
|
*/
|
|
watch_row() {
|
|
this.update_text()
|
|
this.update_color()
|
|
this.update_hidden()
|
|
}
|
|
|
|
/**
|
|
* Called when the column value changes. Updates the text, color, and hide status.
|
|
*/
|
|
watch_col() {
|
|
this.update_text()
|
|
this.update_color()
|
|
this.update_hidden()
|
|
}
|
|
|
|
/**
|
|
* Determine the text to show on the button based on the column definition.
|
|
*/
|
|
update_text() {
|
|
if ( typeof this.col.button_text === 'function' ) {
|
|
this.text = this.col.button_text(this.row, this.col)
|
|
} else {
|
|
this.text = this.col.button_text || ''
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Determine the color to show on the button based on the column definition.
|
|
*/
|
|
update_color() {
|
|
if ( typeof this.col.button_color === 'function' ) {
|
|
this.color = this.col.button_color(this.row, this.col)
|
|
} else {
|
|
this.color = this.col.button_color || 'white'
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Determine whether the button should be shown or not, based on the column definition.
|
|
*/
|
|
update_hidden() {
|
|
if ( !('button_hidden' in this.col) ) {
|
|
this.hidden = false;
|
|
} else if ( typeof this.col.button_hidden === 'function' ) {
|
|
this.hidden = this.col.button_hidden(this.row, this.col)
|
|
} else {
|
|
this.hidden = this.col.button_hidden
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Called when the button is clicked. Emits a click event and updates the text, color, and hide status.
|
|
* @param {MouseEvent} $event
|
|
*/
|
|
on_click($event) {
|
|
this.$emit('click', [this.row, this.col])
|
|
this.update_text()
|
|
this.update_color()
|
|
this.update_hidden()
|
|
}
|
|
}
|
|
|
|
export default GridActionButtonComponent
|