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.
78 lines
3.5 KiB
78 lines
3.5 KiB
import { createGroup } from "app/client/components/commands";
|
|
import { duplicatePage } from "app/client/components/duplicatePage";
|
|
import { GristDoc } from "app/client/components/GristDoc";
|
|
import { PageRec } from "app/client/models/DocModel";
|
|
import { urlState } from "app/client/models/gristUrlState";
|
|
import * as MetaTableModel from "app/client/models/MetaTableModel";
|
|
import { find as findInTree, fromTableData, TreeItemRecord, TreeRecord,
|
|
TreeTableData} from "app/client/models/TreeModel";
|
|
import { TreeViewComponent } from "app/client/ui/TreeViewComponent";
|
|
import { buildPageDom, PageActions } from "app/client/ui2018/pages";
|
|
import { mod } from 'app/common/gutil';
|
|
import { Computed, Disposable, dom, fromKo, observable, Observable } from "grainjs";
|
|
|
|
// build dom for the tree view of pages
|
|
export function buildPagesDom(owner: Disposable, activeDoc: GristDoc, isOpen: Observable<boolean>) {
|
|
const pagesTable = activeDoc.docModel.pages;
|
|
const buildDom = buildDomFromTable.bind(null, pagesTable, activeDoc);
|
|
|
|
const records = Computed.create<TreeRecord[]>(owner, (use) =>
|
|
use(activeDoc.docModel.visibleDocPages).map(page => ({
|
|
id: page.getRowId(),
|
|
indentation: use(page.indentation),
|
|
pagePos: use(page.pagePos),
|
|
viewRef: use(page.viewRef),
|
|
}))
|
|
);
|
|
const getTreeTableData = (): TreeTableData => ({
|
|
getRecords: () => records.get(),
|
|
sendTableActions: (...args) => pagesTable.tableData.sendTableActions(...args),
|
|
});
|
|
|
|
// create the model and keep in sync with the table
|
|
const model = observable(fromTableData(getTreeTableData(), buildDom));
|
|
owner.autoDispose(records.addListener(() => {
|
|
model.set(fromTableData(getTreeTableData(), buildDom, model.get()));
|
|
}));
|
|
|
|
// create a computed that reads the selected page from the url and return the corresponding item
|
|
const selected = Computed.create(owner, activeDoc.activeViewId, (use, viewId) =>
|
|
findInTree(model.get(), (i: TreeItemRecord) => i.record.viewRef === viewId) || null
|
|
);
|
|
|
|
owner.autoDispose(createGroup({
|
|
nextPage: () => selected.get() && otherPage(selected.get()!, +1),
|
|
prevPage: () => selected.get() && otherPage(selected.get()!, -1)
|
|
}, null, true));
|
|
|
|
// dom
|
|
return dom('div', dom.create(TreeViewComponent, model, {isOpen, selected, isReadonly: activeDoc.isReadonly}));
|
|
}
|
|
|
|
function buildDomFromTable(pagesTable: MetaTableModel<PageRec>, activeDoc: GristDoc, id: number) {
|
|
const {isReadonly} = activeDoc;
|
|
const pageName = pagesTable.rowModels[id].view.peek().name;
|
|
const viewId = pagesTable.rowModels[id].view.peek().id.peek();
|
|
const docData = pagesTable.tableData.docData;
|
|
const actions: PageActions = {
|
|
onRename: (newName: string) => newName.length && pageName.saveOnly(newName),
|
|
onRemove: () => docData.sendAction(['RemoveRecord', '_grist_Views', viewId]),
|
|
// TODO: duplicate should prompt user for confirmation
|
|
onDuplicate: () => duplicatePage(activeDoc, id),
|
|
// Can't remove last visible page
|
|
isRemoveDisabled: () => activeDoc.docModel.visibleDocPages.peek().length <= 1,
|
|
isReadonly
|
|
};
|
|
|
|
return buildPageDom(fromKo(pageName), actions, urlState().setLinkUrl({docPage: viewId}));
|
|
}
|
|
|
|
// Select another page in cyclic ordering of pages. Order is downard if given a positive `delta`,
|
|
// upward otherwise.
|
|
function otherPage(currentPage: TreeItemRecord, delta: number) {
|
|
const records = currentPage.storage.records;
|
|
const index = mod(currentPage.index + delta, records.length);
|
|
const docPage = records[index].viewRef;
|
|
return urlState().pushUrl({docPage});
|
|
}
|