WIP gristlabs#1015

app/client/models/DocPageModel.ts

@@ -85,6 +85,7 @@ export interface DocPageModel {
   isTutorialFork: Observable<boolean>;
   isTemplate: Observable<boolean>;
 
+  type: Observable<DocumentType|null>;
   importSources: ImportSource[];
 
   undoState: Observable<IUndoState|null>;          // See UndoStack for details.
@@ -492,7 +493,8 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
   const isFork = Boolean(idParts.forkId || idParts.snapshotId);
   const isBareFork = isFork && idParts.trunkId === NEW_DOCUMENT_CODE;
   const isSnapshot = Boolean(idParts.snapshotId);
-  const isTutorial = doc.type === 'tutorial';
+  const type = doc.type;
+  const isTutorial = type === 'tutorial';
   const isTutorialTrunk = isTutorial && !isFork && mode !== 'default';
   const isTutorialFork = isTutorial && isFork;
 
@@ -504,7 +506,7 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
       // mode. Since the document's 'openMode' has no effect, don't bother trying
       // to set it here, as it'll potentially be confusing for other code reading it.
       openMode = 'default';
-    } else if (!isFork && doc.type === 'template') {
+    } else if (!isFork && type === 'template') {
       // Templates should always open in fork mode by default.
       openMode = 'fork';
     } else {
@@ -514,7 +516,7 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
   }
 
   const isPreFork = openMode === 'fork';
-  const isTemplate = doc.type === 'template' && (isFork || isPreFork);
+  const isTemplate = type === 'template' && (isFork || isPreFork);
   const isEditable = !isSnapshot && (canEdit(doc.access) || isPreFork);
   return {
     ...doc,
@@ -526,6 +528,7 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
     isSnapshot,
     isTutorialTrunk,
     isTutorialFork,
+    type,
     isTemplate,
     isReadonly: !isEditable,
     idParts,

app/client/ui/DocumentSettings.ts

@@ -28,7 +28,7 @@ import {EngineCode} from 'app/common/DocumentSettings';
 import {commonUrls, GristLoadConfig} from 'app/common/gristUrls';
 import {not, propertyCompare} from 'app/common/gutil';
 import {getCurrency, locales} from 'app/common/Locales';
-import {Computed, Disposable, dom, fromKo, IDisposableOwner, makeTestId, Observable, styled} from 'grainjs';
+import {Computed, Disposable, dom, fromKo, IDisposableOwner, makeTestId, observable, Observable, styled} from 'grainjs';
 import * as moment from 'moment-timezone';
 
 const t = makeT('DocumentSettings');
@@ -40,6 +40,7 @@ export class DocSettingsPage extends Disposable {
   private _timezone = this._docInfo.timezone;
   private _locale: KoSaveableObservable<string> = this._docInfo.documentSettingsJson.prop('locale');
   private _currency: KoSaveableObservable<string|undefined> = this._docInfo.documentSettingsJson.prop('currency');
+  // private _type: KoSaveableObservable<string|undefined> = this._docInfo.documentSettingsJson.prop('type');
   private _engine: Computed<EngineCode|undefined> = Computed.create(this, (
     use => use(this._docInfo.documentSettingsJson.prop('engine'))
   ))
@@ -58,6 +59,8 @@ export class DocSettingsPage extends Disposable {
     const canChangeEngine = getSupportedEngineChoices().length > 0;
     const docPageModel = this._gristDoc.docPageModel;
     const isTimingOn = this._gristDoc.isTimingOn;
+    const typeModel = observable(null);
+    docPageModel.getDocType().then((type) => typeModel.set(type));
 
     return cssContainer(
       dom.create(AdminSection, t('Document Settings'), [
@@ -189,6 +192,14 @@ export class DocSettingsPage extends Disposable {
           value: cssSmallLinkButton(t('Manage webhooks'), urlState().setLinkUrl({docPage: 'webhook'})),
         }),
       ]),
+      dom.create(AdminSection, t('Document conversion'), [
+        dom.create(AdminSectionItem, {
+          id: 'document-type',
+          name: t('Document type'),
+          description: t('Convert the document'),
+        })
+        // value: dom.create(buildTypeSelect, this._type),
+      ]),
     );
   }
 
@@ -338,6 +349,31 @@ function buildLocaleSelect(
   );
 }
 
+function buildTypeSelect(
+  owner: IDisposableOwner,
+  type: KoSaveableObservable<string>
+) {
+  const typeList: ACSelectItem[] = [{
+    value: '',
+    label: t('Regular')
+  }, {
+    value: 'template',
+    label: t('Template')
+  },
+  {
+    value: 'tutorial',
+    label: t('Tutorial')
+  }].map((el) => el.label.trim().toLowerCase());
+  const valueObs = Computed.create(owner, use => use(type));
+  const acIndex = new ACIndexImpl<LocaleItem>(typeList, {maxResults: 200, keepOrder: true});
+  return buildACSelect(owner, {
+    acIndex, valueObs,
+    save(_value, item: ACSelectItem|undefined) {
+      type.saveOnly(item?.value ?? '').catch(reportError);
+    }
+  });
+}
+
 const cssContainer = styled('div', `
   overflow-y: auto;
   position: relative;