c5785a7c97
Updates Tabulator package from 5.4 to 6.3 The relevant breaking change is the change of the `selectable` variable to `selectableRows` Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104390 Reviewed-by: Sybren A. Stüvel <sybren@blender.org>
62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import { TabulatorFull as Tabulator } from 'tabulator-tables';
|
|
import { useNotifs } from '@/stores/notifications';
|
|
import * as datetime from '@/datetime';
|
|
|
|
const notifs = useNotifs();
|
|
|
|
const tabOptions = {
|
|
columns: [
|
|
{
|
|
title: 'Time',
|
|
field: 'time',
|
|
sorter: 'alphanum',
|
|
sorterParams: { alignEmptyValues: 'top' },
|
|
formatter(cell) {
|
|
const cellValue = cell.getData().time;
|
|
return datetime.shortened(cellValue);
|
|
},
|
|
widthGrow: 1,
|
|
resizable: true,
|
|
},
|
|
{
|
|
title: 'Message',
|
|
field: 'msg',
|
|
sorter: 'string',
|
|
widthGrow: 100,
|
|
resizable: true,
|
|
},
|
|
],
|
|
initialSort: [{ column: 'time', dir: 'asc' }],
|
|
headerVisible: false,
|
|
layout: 'fitDataStretch',
|
|
resizableColumnFit: true,
|
|
height: 'calc(25vh - 3rem)', // Must be set in order for the virtual DOM to function correctly.
|
|
data: notifs.history,
|
|
placeholder: 'Notification history will appear here',
|
|
selectableRows: false,
|
|
};
|
|
|
|
let tabulator = null;
|
|
onMounted(() => {
|
|
tabulator = new Tabulator('#notification_list', tabOptions);
|
|
tabulator.on('tableBuilt', _scrollToBottom);
|
|
tabulator.on('tableBuilt', _subscribeToPinia);
|
|
});
|
|
|
|
function _scrollToBottom() {
|
|
if (notifs.empty) return;
|
|
tabulator.scrollToRow(notifs.lastID, 'bottom', false);
|
|
}
|
|
function _subscribeToPinia() {
|
|
notifs.$subscribe(() => {
|
|
tabulator.setData(notifs.history).then(_scrollToBottom);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="notification_list"></div>
|
|
</template>
|