mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-10 22:06:46 +08:00
57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<div v-if="params.data.status" class="py-0.5">
|
|
<SelectDropdown
|
|
:options="statuses"
|
|
:value="params.data.status"
|
|
@change="changeStatus"
|
|
size="xs"
|
|
:borderless="true"
|
|
:optionRenderer="optionRenderer"
|
|
:labelRenderer="optionRenderer"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SelectDropdown from '../../shared/select_dropdown.vue';
|
|
|
|
export default {
|
|
name: 'StatusRenderer',
|
|
components: {
|
|
SelectDropdown
|
|
},
|
|
props: {
|
|
params: {
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
statuses: [
|
|
['not_started', this.i18n.t('projects.index.status.not_started')],
|
|
['started', this.i18n.t('projects.index.status.started')],
|
|
['completed', this.i18n.t('projects.index.status.completed')]
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
optionRenderer(option) {
|
|
let color = 'bg-sn-grey-500';
|
|
if (option[0] === 'started') {
|
|
color = 'bg-sn-science-blue';
|
|
} else if (option[0] === 'completed') {
|
|
color = 'bg-sn-alert-green';
|
|
}
|
|
|
|
return `
|
|
<div class="flex items-center gap-2">
|
|
<div class="${color} w-3 h-3 rounded-full"></div>
|
|
<span>${option[1]}</span>
|
|
</div>`;
|
|
},
|
|
changeStatus(newStatus) {
|
|
this.params.dtComponent.$emit('changeStatus', newStatus, this.params);
|
|
}
|
|
}
|
|
};
|
|
</script>
|