vue-gantt-3
Version:
A gantt component for Vue 3
193 lines (192 loc) • 6.82 kB
JavaScript
import { defineComponent, ref, inject, watch, createElementBlock, openBlock, withDirectives, createVNode, createElementVNode, normalizeStyle, vShow, unref } from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { useTableColumns } from "./useTableColumn.mjs";
import { useTableRow } from "./useTableRow.mjs";
import { useTableScroll } from "./useTableScroll.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "TableView",
props: {
getRowId: { type: Function },
columns: {},
rows: {},
rowNodeMap: {},
defaultCol: {},
rowHeight: {},
headerHeight: {},
rowBuffer: {},
rowSelection: {},
getEmptyRows: { type: Function }
},
emits: ["viewPortChanged", "cellDoubleClicked", "selectionChanged", "cellContextMenu", "triggerGanttViewScroll"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const tableViewRef = ref();
const tableRef = ref();
const tableBodyView = ref(null);
const tableBodyVerticalScrollViewport = ref(null);
const selectedRowIds = inject("selectedRowIds");
const showSecondLevel = inject("showSecondLevel");
const showFirstLevel = inject("showFirstLevel");
const domLayout = ref("normal");
const gridOptions = {
rowClass: "vg-row",
doesExternalFilterPass,
isExternalFilterPresent
};
const onGridReady = (params) => {
var _a, _b;
tableRef.value = params.api;
tableBodyView.value = tableViewRef.value.querySelector(".ag-body-viewport");
(_a = tableBodyView.value) == null ? void 0 : _a.addEventListener("wheel", bodyWheel, { passive: false });
tableBodyVerticalScrollViewport.value = tableViewRef.value.querySelector(".ag-body-vertical-scroll-viewport");
(_b = tableBodyVerticalScrollViewport.value) == null ? void 0 : _b.addEventListener("scroll", verticalScrollViewportScroll);
};
const emitTriggerGanttViewScroll = (options) => {
emit("triggerGanttViewScroll", options);
};
watch(selectedRowIds, () => {
setTableRowSelected();
}, { deep: true });
const setTableRowSelected = () => {
var _a, _b;
(_a = tableRef.value) == null ? void 0 : _a.deselectAll();
const rowNodes = [];
const rowIds = [...selectedRowIds.value];
rowIds.forEach((id) => {
var _a2;
const rowNode = (_a2 = tableRef.value) == null ? void 0 : _a2.getRowNode(id);
rowNode && rowNodes.push(rowNode);
});
(_b = tableRef.value) == null ? void 0 : _b.setNodesSelected({ nodes: rowNodes, newValue: true });
};
const onViewPortChanged = (data) => {
const firstRow = data.firstRow;
const lastRow = data.lastRow;
emit("viewPortChanged", visibleRowDataList.value.slice(firstRow, lastRow + 1));
};
const onCellDoubleClicked = (data) => {
emit("cellDoubleClicked", data.data, data.colDef);
};
const onSelectionChanged = (data) => {
emit("selectionChanged", data);
};
const onCellContextMenu = (data) => {
emit("cellContextMenu", data);
};
const processRowPostCreate = (data) => {
var _a;
if (!((_a = data.node.data) == null ? void 0 : _a.isEmpty)) {
data.eRow.setAttribute("data-row-id", data.node.id);
}
};
function isExternalFilterPresent() {
return true;
}
function doesExternalFilterPass(node) {
const currentRowNode = getRowNode(node.data);
return !(currentRowNode == null ? void 0 : currentRowNode.hide);
}
const onFilterChanged = () => {
var _a;
handleEmptyRowChanged();
(_a = tableRef.value) == null ? void 0 : _a.onFilterChanged();
};
const refreshCells = (rowIds, force = false) => {
var _a;
const rowNodes = [];
rowIds.forEach((id) => {
var _a2;
const rowNode = (_a2 = tableRef.value) == null ? void 0 : _a2.getRowNode(id);
rowNode && rowNodes.push(rowNode);
});
if (rowNodes.length) {
(_a = tableRef.value) == null ? void 0 : _a.refreshCells({ rowNodes, force });
}
};
const getFirstDisplayedRow = () => {
var _a;
return (_a = tableRef.value) == null ? void 0 : _a.getFirstDisplayedRow();
};
const getLastDisplayedRow = () => {
var _a;
return (_a = tableRef.value) == null ? void 0 : _a.getLastDisplayedRow();
};
const {
rowData,
getTableRowId,
getRowNode,
handleEmptyRowChanged,
visibleRowDataList
} = useTableRow({
props,
setTableRowSelected,
rowClass: gridOptions.rowClass,
tableRef,
tableBodyView,
tableBodyVerticalScrollViewport
});
const { columnDefs } = useTableColumns({ props, getRowNode });
const {
scrollTo,
bodyWheel,
verticalScrollViewportScroll
} = useTableScroll({
tableBodyView,
tableBodyVerticalScrollViewport,
emitTriggerGanttViewScroll
});
__expose({
scrollTo,
refreshCells,
onFilterChanged,
handleEmptyRowChanged,
getFirstDisplayedRow,
getLastDisplayedRow
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "tableViewRef",
ref: tableViewRef,
class: "vg-table-view"
}, [
withDirectives(createElementVNode("div", {
class: "first-level-header",
style: normalizeStyle({ height: _ctx.headerHeight + 1 + "px" })
}, null, 4), [
[vShow, unref(showSecondLevel) && unref(showFirstLevel)]
]),
createVNode(unref(AgGridVue), {
class: "ag-theme-alpine ag-theme-mgantttheme",
gridOptions,
getRowId: unref(getTableRowId),
columnDefs: unref(columnDefs),
rowData: unref(rowData),
defaultColDef: _ctx.defaultCol,
rowHeight: _ctx.rowHeight,
headerHeight: _ctx.headerHeight,
rowBuffer: _ctx.rowBuffer,
suppressNoRowsOverlay: true,
rowSelection: _ctx.rowSelection,
alwaysShowHorizontalScroll: true,
suppressRowHoverHighlight: true,
suppressCellFocus: true,
suppressRowClickSelection: true,
processRowPostCreate,
domLayout: domLayout.value,
onGridReady,
onViewportChanged: onViewPortChanged,
onCellDoubleClicked,
onSelectionChanged,
onCellContextMenu
}, null, 8, ["getRowId", "columnDefs", "rowData", "defaultColDef", "rowHeight", "headerHeight", "rowBuffer", "rowSelection", "domLayout"])
], 512);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=TableView.vue.mjs.map