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.
72 lines
2.4 KiB
72 lines
2.4 KiB
import {docUrl, urlState} from 'app/client/models/gristUrlState';
|
|
import {theme} from 'app/client/ui2018/cssVars';
|
|
import {Document, Workspace} from 'app/common/UserAPI';
|
|
import {dom, makeTestId, styled} from 'grainjs';
|
|
import {HomeModel, ViewSettings} from 'app/client/models/HomeModel';
|
|
import * as css from 'app/client/ui/DocMenuCss';
|
|
import {buildPinnedDoc} from 'app/client/ui/PinnedDocs';
|
|
import sortBy = require('lodash/sortBy');
|
|
|
|
const testId = makeTestId('test-dm-');
|
|
|
|
/**
|
|
* Builds all `templateDocs` according to the specified `viewSettings`.
|
|
*/
|
|
export function buildTemplateDocs(home: HomeModel, templateDocs: Document[], viewSettings: ViewSettings) {
|
|
const {currentView, currentSort} = viewSettings;
|
|
return dom.domComputed((use) => [use(currentView), use(currentSort)] as const, (opts) => {
|
|
const [view, sort] = opts;
|
|
// Template docs are sorted by name in HomeModel. We only re-sort if we want a different order.
|
|
let sortedDocs = templateDocs;
|
|
if (sort === 'date') {
|
|
sortedDocs = sortBy(templateDocs, (d) => d.removedAt || d.updatedAt).reverse();
|
|
}
|
|
return cssTemplateDocs(dom.forEach(sortedDocs, d => buildTemplateDoc(home, d, d.workspace, view)));
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Build a single template doc according to `view`.
|
|
*
|
|
* If `view` is set to 'list', the template will be rendered
|
|
* as a clickable row that includes a title and description.
|
|
*
|
|
* If `view` is set to 'icons', the template will be rendered
|
|
* as a clickable tile that includes a title, image and description.
|
|
*/
|
|
function buildTemplateDoc(home: HomeModel, doc: Document, workspace: Workspace, view: 'list'|'icons') {
|
|
if (view === 'icons') {
|
|
return buildPinnedDoc(home, doc, workspace, true);
|
|
} else {
|
|
return css.docRowWrapper(
|
|
cssDocRowLink(
|
|
urlState().setLinkUrl(docUrl(doc, {org: workspace.orgDomain})),
|
|
cssDocName(doc.name, testId('template-doc-title')),
|
|
doc.options?.description ? cssDocRowDetails(doc.options.description, testId('template-doc-description')) : null,
|
|
),
|
|
testId('template-doc'),
|
|
);
|
|
}
|
|
}
|
|
|
|
const cssDocRowLink = styled(css.docRowLink, `
|
|
display: block;
|
|
height: unset;
|
|
line-height: 1.6;
|
|
padding: 8px 0;
|
|
`);
|
|
|
|
const cssDocName = styled(css.docName, `
|
|
margin: 0 16px;
|
|
`);
|
|
|
|
const cssDocRowDetails = styled('div', `
|
|
margin: 0 16px;
|
|
line-height: 1.6;
|
|
color: ${theme.lightText};
|
|
`);
|
|
|
|
const cssTemplateDocs = styled('div', `
|
|
margin-bottom: 16px;
|
|
`);
|