(core) Record Cards

Summary:
Adds a new Record Card view section to each non-summary table, which can be from opened from various parts of the Grist UI to view and edit records in a popup card view.

Work is still ongoing, so the feature is locked away behind a flag; follow-up work is planned to finish up the implementation and add end-to-end tests.

Test Plan: Python and server tests. Browser tests will be included in a follow-up.

Reviewers: jarek, paulfitz

Reviewed By: jarek

Subscribers: paulfitz

Differential Revision: https://phab.getgrist.com/D4114

app/client/models/entities/TableRec.ts

@@ -15,6 +15,7 @@ export interface TableRec extends IRowModel<"_grist_Tables"> {
 
   primaryView: ko.Computed<ViewRec>;
   rawViewSection: ko.Computed<ViewSectionRec>;
+  recordCardViewSection: ko.Computed<ViewSectionRec>;
   summarySource: ko.Computed<TableRec>;
 
   // A Set object of colRefs for all summarySourceCols of table.
@@ -52,6 +53,7 @@ export function createTableRec(this: TableRec, docModel: DocModel): void {
 
   this.primaryView = refRecord(docModel.views, this.primaryViewId);
   this.rawViewSection = refRecord(docModel.viewSections, this.rawViewSectionRef);
+  this.recordCardViewSection = refRecord(docModel.viewSections, this.recordCardViewSectionRef);
   this.summarySource = refRecord(docModel.tables, this.summarySourceTable);
   this.isHidden = this.autoDispose(
     // This is repeated logic from isHiddenTable.

app/client/models/entities/ViewSectionRec.ts

@@ -85,6 +85,19 @@ export interface ViewSectionRec extends IRowModel<"_grist_Views_section">, RuleO
   // true if this record is its table's rawViewSection, i.e. a 'raw data view'
   // in which case the UI prevents various things like hiding columns or changing the widget type.
   isRaw: ko.Computed<boolean>;
+
+  tableRecordCard: ko.Computed<ViewSectionRec>
+  isRecordCard: ko.Computed<boolean>;
+
+  /** True if this section is disabled. Currently only used by Record Card sections. */
+  disabled: modelUtil.KoSaveableObservable<boolean>;
+
+  /**
+   * True if the Record Card section of this section's table is disabled. Shortcut for
+   * `this.tableRecordCard().disabled()`.
+   */
+  isTableRecordCardDisabled: ko.Computed<boolean>;
+
   isVirtual: ko.Computed<boolean>;
   isCollapsed: ko.Computed<boolean>;
 
@@ -443,7 +456,13 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
 
   // true if this record is its table's rawViewSection, i.e. a 'raw data view'
   // in which case the UI prevents various things like hiding columns or changing the widget type.
-  this.isRaw = this.autoDispose(ko.pureComputed(() => this.table().rawViewSectionRef() === this.getRowId()));
+  this.isRaw = this.autoDispose(ko.pureComputed(() => this.table().rawViewSectionRef() === this.id()));
+
+  this.tableRecordCard = this.autoDispose(ko.pureComputed(() => this.table().recordCardViewSection()));
+  this.isRecordCard = this.autoDispose(ko.pureComputed(() =>
+    this.table().recordCardViewSectionRef() === this.id()));
+  this.disabled = modelUtil.fieldWithDefault(this.optionsObj.prop('disabled'), false);
+  this.isTableRecordCardDisabled = ko.pureComputed(() => this.tableRecordCard().disabled());
 
   this.isVirtual = this.autoDispose(ko.pureComputed(() => typeof this.id() === 'string'));
 
@@ -818,7 +837,7 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel):
     let newColInfo: NewColInfo;
     await docModel.docData.bundleActions('Insert column', async () => {
       newColInfo = await docModel.dataTables[this.tableId.peek()].sendTableAction(action);
-      if (!this.isRaw.peek()) {
+      if (!this.isRaw.peek() && !this.isRecordCard.peek()) {
         const fieldInfo = {
           colRef: newColInfo.colRef,
           parentId: this.id.peek(),

app/client/models/features.ts

@@ -33,3 +33,7 @@ export function PERMITTED_CUSTOM_WIDGETS(): Observable<string[]> {
   }
   return G.window.PERMITTED_CUSTOM_WIDGETS;
 }
+
+export function RECORD_CARDS() {
+  return Boolean(getGristConfig().experimentalPlugins);
+}