mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
24fc3a2d00
Summary: The old Examples and Templates workspace is now a page that pulls templates from a new public Grist Templates org. The All Documents view will pull featured templates from that org, where featured templates are simply pinned documents in Grist Templates. The Examples and Templates page will also show the featured templates, as well as the rest of the available templates organized by category. The categories are equivalent to workspaces in Grist Templates, and are generated dynamically. Test Plan: Browser tests. Reviewers: paulfitz, dsagal Reviewed By: paulfitz, dsagal Subscribers: dsagal, paulfitz, jarek Differential Revision: https://phab.getgrist.com/D2930
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import {docUrl, urlState} from 'app/client/models/gristUrlState';
|
|
import {colors} 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: ${colors.slate};
|
|
`);
|
|
|
|
const cssTemplateDocs = styled('div', `
|
|
margin-bottom: 16px;
|
|
`);
|