form view refactor - basically works

2026-04-19 20:06:00 +00:00 · 2023-01-22 16:26:48 +01:00
parent ba644a37b7
commit 6dd3945724
11 changed files with 636 additions and 600 deletions
--- a/packages/web/src/formview/ChangeSetFormer.ts
+++ b/packages/web/src/formview/ChangeSetFormer.ts
@@ -1,96 +1,96 @@
-import type { ChangeSet, ChangeSetRowDefinition } from 'dbgate-datalib';
-import {
-  changeSetContainsChanges,
-  changeSetInsertNewRow,
-  createChangeSet,
-  deleteChangeSetRows,
-  findExistingChangeSetItem,
-  getChangeSetInsertedRows,
-  TableFormViewDisplay,
-  revertChangeSetRowChanges,
-  setChangeSetValue,
-} from 'dbgate-datalib';
-import Former from './Former';
+// import type { ChangeSet, ChangeSetRowDefinition } from 'dbgate-datalib';
+// import {
+//   changeSetContainsChanges,
+//   changeSetInsertNewRow,
+//   createChangeSet,
+//   deleteChangeSetRows,
+//   findExistingChangeSetItem,
+//   getChangeSetInsertedRows,
+//   TableFormViewDisplay,
+//   revertChangeSetRowChanges,
+//   setChangeSetValue,
+// } from 'dbgate-datalib';
+// import Former from './Former';

-export default class ChangeSetFormer extends Former {
-  public changeSet: ChangeSet;
-  public setChangeSet: Function;
-  private batchChangeSet: ChangeSet;
-  public rowDefinition: ChangeSetRowDefinition;
-  public rowStatus;
-  public rowData: {};
+// export default class ChangeSetFormer extends Former {
+//   public changeSet: ChangeSet;
+//   public setChangeSet: Function;
+//   private batchChangeSet: ChangeSet;
+//   public rowDefinition: ChangeSetRowDefinition;
+//   public rowStatus;
+//   public rowData: {};

-  constructor(
-    public sourceRow: any,
-    public changeSetState,
-    public dispatchChangeSet,
-    public display: TableFormViewDisplay
-  ) {
-    super();
-    this.changeSet = changeSetState && changeSetState.value;
-    this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
-    this.batchChangeSet = null;
-    this.rowDefinition = display.getChangeSetRow(sourceRow);
-    const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition);
-    this.rowData = matchedChangeSetItem ? { ...sourceRow, ...matchedChangeSetItem.fields } : sourceRow;
-    let status = 'regular';
-    if (matchedChangeSetItem && matchedField == 'updates') status = 'updated';
-    if (matchedField == 'deletes') status = 'deleted';
-    this.rowStatus = {
-      status,
-      modifiedFields:
-        matchedChangeSetItem && matchedChangeSetItem.fields ? new Set(Object.keys(matchedChangeSetItem.fields)) : null,
-    };
-  }
+//   constructor(
+//     public sourceRow: any,
+//     public changeSetState,
+//     public dispatchChangeSet,
+//     public display: TableFormViewDisplay
+//   ) {
+//     super();
+//     this.changeSet = changeSetState && changeSetState.value;
+//     this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
+//     this.batchChangeSet = null;
+//     this.rowDefinition = display.getChangeSetRow(sourceRow);
+//     const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition);
+//     this.rowData = matchedChangeSetItem ? { ...sourceRow, ...matchedChangeSetItem.fields } : sourceRow;
+//     let status = 'regular';
+//     if (matchedChangeSetItem && matchedField == 'updates') status = 'updated';
+//     if (matchedField == 'deletes') status = 'deleted';
+//     this.rowStatus = {
+//       status,
+//       modifiedFields:
+//         matchedChangeSetItem && matchedChangeSetItem.fields ? new Set(Object.keys(matchedChangeSetItem.fields)) : null,
+//     };
+//   }

-  applyModification(changeSetReducer) {
-    if (this.batchChangeSet) {
-      this.batchChangeSet = changeSetReducer(this.batchChangeSet);
-    } else {
-      this.setChangeSet(changeSetReducer(this.changeSet));
-    }
-  }
+//   applyModification(changeSetReducer) {
+//     if (this.batchChangeSet) {
+//       this.batchChangeSet = changeSetReducer(this.batchChangeSet);
+//     } else {
+//       this.setChangeSet(changeSetReducer(this.changeSet));
+//     }
+//   }

-  setCellValue(uniqueName: string, value: any) {
-    const row = this.sourceRow;
-    const definition = this.display.getChangeSetField(row, uniqueName);
-    this.applyModification(chs => setChangeSetValue(chs, definition, value));
-  }
+//   setCellValue(uniqueName: string, value: any) {
+//     const row = this.sourceRow;
+//     const definition = this.display.getChangeSetField(row, uniqueName);
+//     this.applyModification(chs => setChangeSetValue(chs, definition, value));
+//   }

-  deleteRow(index: number) {
-    this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinition));
-  }
+//   deleteRow(index: number) {
+//     this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinition));
+//   }

-  beginUpdate() {
-    this.batchChangeSet = this.changeSet;
-  }
-  endUpdate() {
-    this.setChangeSet(this.batchChangeSet);
-    this.batchChangeSet = null;
-  }
+//   beginUpdate() {
+//     this.batchChangeSet = this.changeSet;
+//   }
+//   endUpdate() {
+//     this.setChangeSet(this.batchChangeSet);
+//     this.batchChangeSet = null;
+//   }

-  revertRowChanges() {
-    this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinition));
-  }
-  revertAllChanges() {
-    this.applyModification(chs => createChangeSet());
-  }
-  undo() {
-    this.dispatchChangeSet({ type: 'undo' });
-  }
-  redo() {
-    this.dispatchChangeSet({ type: 'redo' });
-  }
-  get editable() {
-    return this.display.editable;
-  }
-  get canUndo() {
-    return this.changeSetState.canUndo;
-  }
-  get canRedo() {
-    return this.changeSetState.canRedo;
-  }
-  get containsChanges() {
-    return changeSetContainsChanges(this.changeSet);
-  }
-}
+//   revertRowChanges() {
+//     this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinition));
+//   }
+//   revertAllChanges() {
+//     this.applyModification(chs => createChangeSet());
+//   }
+//   undo() {
+//     this.dispatchChangeSet({ type: 'undo' });
+//   }
+//   redo() {
+//     this.dispatchChangeSet({ type: 'redo' });
+//   }
+//   get editable() {
+//     return this.display.editable;
+//   }
+//   get canUndo() {
+//     return this.changeSetState.canUndo;
+//   }
+//   get canRedo() {
+//     return this.changeSetState.canRedo;
+//   }
+//   get containsChanges() {
+//     return changeSetContainsChanges(this.changeSet);
+//   }
+// }
--- a/packages/web/src/formview/FormView.svelte
+++ b/packages/web/src/formview/FormView.svelte
@@ -39,8 +39,8 @@
    category: 'Data form',
    name: 'Revert row changes',
    keyText: 'CtrlOrCommand+U',
-    testEnabled: () => getCurrentDataForm()?.getFormer()?.containsChanges,
-    onClick: () => getCurrentDataForm().getFormer().revertRowChanges(),
+    testEnabled: () => getCurrentDataForm()?.getGrider()?.containsChanges,
+    onClick: () => getCurrentDataForm().getGrider().revertRowChanges(0),
  });

  registerCommand({
@@ -60,8 +60,8 @@
    icon: 'icon undo',
    toolbar: true,
    isRelatedToTab: true,
-    testEnabled: () => getCurrentDataForm()?.getFormer()?.canUndo,
-    onClick: () => getCurrentDataForm().getFormer().undo(),
+    testEnabled: () => getCurrentDataForm()?.getGrider()?.canUndo,
+    onClick: () => getCurrentDataForm().getGrider().undo(),
  });

  registerCommand({
@@ -72,8 +72,8 @@
    icon: 'icon redo',
    toolbar: true,
    isRelatedToTab: true,
-    testEnabled: () => getCurrentDataForm()?.getFormer()?.canRedo,
-    onClick: () => getCurrentDataForm().getFormer().redo(),
+    testEnabled: () => getCurrentDataForm()?.getGrider()?.canRedo,
+    onClick: () => getCurrentDataForm().getGrider().redo(),
  });

  registerCommand({
@@ -194,8 +194,9 @@
  export let allRowCount;
  export let rowCountBefore;
  export let isLoading;
-  export let former;
-  export let formDisplay;
+  export let grider;
+  export let display;
+  // export let formDisplay;
  export let onNavigate;

  let wrapperHeight = 1;
@@ -212,23 +213,25 @@
    domFocusField.focus();
  }

-  $: rowData = former?.rowData;
-  $: rowStatus = former?.rowStatus;
+  $: rowData = grider?.getRowData(0);
+  $: rowStatus = grider?.getRowStatus(0);

  $: rowCount = Math.floor((wrapperHeight - 22) / (rowHeight + 2));

-  $: columnChunks = _.chunk(formDisplay.columns, rowCount) as any[][];
+  $: columnChunks = _.chunk(display?.columns || [], rowCount) as any[][];

-  $: rowCountInfo = getRowCountInfo(rowCountBefore, allRowCount);
+  $: rowCountInfo = getRowCountInfo(allRowCount);

-  function getRowCountInfo(rowCountBefore, allRowCount) {
+  function getRowCountInfo(allRowCount) {
    if (rowData == null) return 'No data';
-    if (allRowCount == null || rowCountBefore == null) return 'Loading row count...';
-    return `Row: ${(rowCountBefore + 1).toLocaleString()} / ${allRowCount.toLocaleString()}`;
+    if (allRowCount == null || display == null) return 'Loading row count...';
+    return `Row: ${(
+      (display.config.formViewRecordNumber || 0) + 1
+    ).toLocaleString()} / ${allRowCount.toLocaleString()}`;
  }

-  export function getFormer() {
-    return former;
+  export function getGrider() {
+    return grider;
  }

  // export function getFormDisplay() {
@@ -263,19 +266,19 @@

  export async function reconnect() {
    await apiCall('database-connections/refresh', { conid, database });
-    formDisplay.reload();
+    display.reload();
  }

  export async function refresh() {
-    formDisplay.reload();
+    display.reload();
  }

  export function filterSelectedValue() {
-    formDisplay.filterCellValue(getCellColumn(currentCell), rowData);
+    // display.filterCellValue(getCellColumn(currentCell), rowData);
  }

  export function addToFilter() {
-    formDisplay.addFilterColumn(getCellColumn(currentCell));
+    // display.addFilterColumn(getCellColumn(currentCell));
  }

  export const activator = createActivator('FormView', false);
@@ -319,7 +322,7 @@
  function setCellValue(cell, value) {
    const column = getCellColumn(cell);
    if (!column) return;
-    former.setCellValue(column.uniqueName, value);
+    grider.setCellValue(0, column.uniqueName, value);
  }

  const getCellWidth = (row, col) => {
@@ -331,7 +334,7 @@
  const [inplaceEditorState, dispatchInsplaceEditor] = createReducer((state, action) => {
    switch (action.type) {
      case 'show': {
-        if (!former.editable) return {};
+        if (!grider.editable) return {};
        const column = getCellColumn(action.cell);
        if (!column) return state;
        if (column.uniquePath.length > 1) return state;
@@ -418,14 +421,14 @@
    if (event.keyCode == keycodes.numPadAdd) {
      const col = getCellColumn(currentCell);
      if (col.foreignKey) {
-        formDisplay.toggleExpandedColumn(col.uniqueName, true);
+        display.toggleExpandedColumn(col.uniqueName, true);
      }
    }

    if (event.keyCode == keycodes.numPadSub) {
      const col = getCellColumn(currentCell);
      if (col.foreignKey) {
-        formDisplay.toggleExpandedColumn(col.uniqueName, false);
+        display.toggleExpandedColumn(col.uniqueName, false);
      }
    }

@@ -448,7 +451,7 @@
    if (shouldOpenMultilineDialog(cellData)) {
      showModal(EditCellDataModal, {
        value: cellData,
-        onSave: value => former.setCellValue(column.uniqueName, value),
+        onSave: value => grider.setCellValue(0, column.uniqueName, value),
      });
      return true;
    }
@@ -476,7 +479,7 @@
      columnIndex = incrementFunc(columnIndex);
      while (
        isInRange(columnIndex) &&
-        !filterName(formDisplay.config.formColumnFilterText, formDisplay.columns[columnIndex].columnName)
+        !filterName(display.config.formColumnFilterText, display.columns[columnIndex].columnName)
      ) {
        columnIndex = incrementFunc(columnIndex);
      }
@@ -484,13 +487,13 @@
        columnIndex = firstInRange;
        while (
          isInRange(columnIndex) &&
-          !filterName(formDisplay.config.formColumnFilterText, formDisplay.columns[columnIndex].columnName)
+          !filterName(display.config.formColumnFilterText, display.columns[columnIndex].columnName)
        ) {
          columnIndex = incrementFunc(columnIndex);
        }
      }
      if (!isInRange(columnIndex)) columnIndex = lastInRange;
-      return moveCurrentCell(columnIndex % formDisplay.columns.length, Math.floor(columnIndex / rowCount) * 2);
+      return moveCurrentCell(columnIndex % display.columns.length, Math.floor(columnIndex / rowCount) * 2);
    };

    if (isCtrlOrCommandKey(event)) {
@@ -507,23 +510,23 @@
      case keycodes.rightArrow:
        return moveCurrentCell(currentCell[0], currentCell[1] + 1);
      case keycodes.upArrow:
-        if (currentCell[1] % 2 == 0 && formDisplay.config.formColumnFilterText) {
+        if (currentCell[1] % 2 == 0 && display.config.formColumnFilterText) {
          return findFilteredColumn(
            x => x - 1,
            x => x >= 0,
-            formDisplay.columns.length - 1,
+            display.columns.length - 1,
            0
          );
        }

        return moveCurrentCell(currentCell[0] - 1, currentCell[1]);
      case keycodes.downArrow:
-        if (currentCell[1] % 2 == 0 && formDisplay.config.formColumnFilterText) {
+        if (currentCell[1] % 2 == 0 && display.config.formColumnFilterText) {
          return findFilteredColumn(
            x => x + 1,
-            x => x < formDisplay.columns.length,
+            x => x < display.columns.length,
            0,
-            formDisplay.columns.length - 1
+            display.columns.length - 1
          );
        }

@@ -547,10 +550,10 @@
    showModal(DictionaryLookupModal, {
      conid,
      database,
-      driver: formDisplay?.driver,
+      driver: display?.driver,
      pureName: col.foreignKey.refTableName,
      schemaName: col.foreignKey.refSchemaName,
-      onConfirm: value => former.setCellValue(col.uniqueName, value),
+      onConfirm: value => grider.setCellValue(0, col.uniqueName, value),
    });
  }
 </script>
@@ -566,18 +569,18 @@
              data-row={rowIndex}
              data-col={chunkIndex * 2}
              style={rowHeight > 1 ? `height: ${rowHeight}px` : undefined}
-              class:columnFiltered={formDisplay.config.formColumnFilterText &&
-                filterName(formDisplay.config.formColumnFilterText, col.columnName)}
+              class:columnFiltered={display.config.formColumnFilterText &&
+                filterName(display.config.formColumnFilterText, col.columnName)}
              class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
              bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
            >
              <div class="header-cell-inner">
                {#if col.foreignKey}
                  <FontIcon
-                    icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
+                    icon={plusExpandIcon(display.isExpandedColumn(col.uniqueName))}
                    on:click={e => {
                      e.stopPropagation();
-                      formDisplay.toggleExpandedColumn(col.uniqueName);
+                      display.toggleExpandedColumn(col.uniqueName);
                    }}
                  />
                {:else}
@@ -614,7 +617,7 @@
                  {dispatchInsplaceEditor}
                  cellValue={rowData[col.uniqueName]}
                  onSetValue={value => {
-                    former.setCellValue(col.uniqueName, value);
+                    grider.setCellValue(0, col.uniqueName, value);
                  }}
                />
              {/if}
--- a/packages/web/src/formview/Former.ts
+++ b/packages/web/src/formview/Former.ts
@@ -1,53 +1,53 @@
-// export interface GriderRowStatus {
-//     status: 'regular' | 'updated' | 'deleted' | 'inserted';
-//     modifiedFields?: Set<string>;
-//     insertedFields?: Set<string>;
-//     deletedFields?: Set<string>;
+// // export interface GriderRowStatus {
+// //     status: 'regular' | 'updated' | 'deleted' | 'inserted';
+// //     modifiedFields?: Set<string>;
+// //     insertedFields?: Set<string>;
+// //     deletedFields?: Set<string>;
+// //   }
+
+// export default abstract class Former {
+//   public rowData: any;
+
+//   // getRowStatus(index): GriderRowStatus {
+//   //   const res: GriderRowStatus = {
+//   //     status: 'regular',
+//   //   };
+//   //   return res;
+//   // }
+//   beginUpdate() {}
+//   endUpdate() {}
+//   setCellValue(uniqueName: string, value: any) {}
+//   revertRowChanges() {}
+//   revertAllChanges() {}
+//   undo() {}
+//   redo() {}
+//   get editable() {
+//     return false;
 //   }
-
-export default abstract class Former {
-  public rowData: any;
-
-  // getRowStatus(index): GriderRowStatus {
-  //   const res: GriderRowStatus = {
-  //     status: 'regular',
-  //   };
-  //   return res;
-  // }
-  beginUpdate() {}
-  endUpdate() {}
-  setCellValue(uniqueName: string, value: any) {}
-  revertRowChanges() {}
-  revertAllChanges() {}
-  undo() {}
-  redo() {}
-  get editable() {
-    return false;
-  }
-  get canInsert() {
-    return false;
-  }
-  get allowSave() {
-    return this.containsChanges;
-  }
-  get canUndo() {
-    return false;
-  }
-  get canRedo() {
-    return false;
-  }
-  get containsChanges() {
-    return false;
-  }
-  get disableLoadNextPage() {
-    return false;
-  }
-  get errors() {
-    return null;
-  }
-  updateRow(changeObject) {
-    for (const key of Object.keys(changeObject)) {
-      this.setCellValue(key, changeObject[key]);
-    }
-  }
-}
+//   get canInsert() {
+//     return false;
+//   }
+//   get allowSave() {
+//     return this.containsChanges;
+//   }
+//   get canUndo() {
+//     return false;
+//   }
+//   get canRedo() {
+//     return false;
+//   }
+//   get containsChanges() {
+//     return false;
+//   }
+//   get disableLoadNextPage() {
+//     return false;
+//   }
+//   get errors() {
+//     return null;
+//   }
+//   updateRow(changeObject) {
+//     for (const key of Object.keys(changeObject)) {
+//       this.setCellValue(key, changeObject[key]);
+//     }
+//   }
+// }
--- a/packages/web/src/formview/SqlFormView.svelte
+++ b/packages/web/src/formview/SqlFormView.svelte
@@ -16,17 +16,18 @@
 </script>

 <script lang="ts">
-  import ChangeSetFormer from './ChangeSetFormer';
  import FormView from './FormView.svelte';
  import { apiCall } from '../utility/api';
+  import ChangeSetGrider from '../datagrid/ChangeSetGrider';
+  import _ from 'lodash';

-  export let formDisplay;
  export let changeSetState;
  export let dispatchChangeSet;
  export let masterLoadedTime;
  export let conid;
  export let database;
  export let onReferenceSourceChanged;
+  export let display;

  let isLoadingData = false;
  let isLoadedData = false;
@@ -41,47 +42,49 @@
  const handleLoadCurrentRow = async () => {
    if (isLoadingData) return;
    let newLoadedRow = false;
-    if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {
-      isLoadingData = true;
-      const row = await loadRow($$props, formDisplay.getCurrentRowQuery());
-      isLoadingData = false;
-      isLoadedData = true;
-      rowData = row;
-      loadedTime = new Date().getTime();
-      newLoadedRow = row;
-    }
-    if (formDisplay.config.formViewKeyRequested && newLoadedRow) {
-      formDisplay.cancelRequestKey(newLoadedRow);
-    }
-    if (!newLoadedRow && !formDisplay.config.formViewKeyRequested) {
-      await handleNavigate('first');
-    }
+    // if (_.isNumber(display.config.formViewRecordNumber)) {
+    isLoadingData = true;
+    const row = await loadRow($$props, display.getPageQuery(display.config.formViewRecordNumber || 0, 1));
+    isLoadingData = false;
+    isLoadedData = true;
+    rowData = row;
+    loadedTime = new Date().getTime();
+    newLoadedRow = row;
+    // }
+    // if (formDisplay.config.formViewKeyRequested && newLoadedRow) {
+    //   formDisplay.cancelRequestKey(newLoadedRow);
+    // }
+    // if (!newLoadedRow && !formDisplay.config.formViewKeyRequested) {
+    //   await handleNavigate('first');
+    // }
  };

  const handleLoadRowCount = async () => {
    isLoadingCount = true;
-    const countRow = await loadRow($$props, formDisplay.getCountQuery());
-    const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());
+    const countRow = await loadRow($$props, display.getCountQuery());
+    // const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());

    isLoadedCount = true;
    isLoadingCount = false;
    allRowCount = countRow ? parseInt(countRow.count) : null;
-    rowCountBefore = countBeforeRow ? parseInt(countBeforeRow.count) : null;
+    // rowCountBefore = countBeforeRow ? parseInt(countBeforeRow.count) : null;
  };

  const handleNavigate = async command => {
-    isLoadingData = true;
-    const row = await loadRow($$props, formDisplay.navigateRowQuery(command));
-    if (row) {
-      formDisplay.navigate(row);
-    }
-    isLoadingData = false;
-    isLoadedData = true;
-    isLoadedCount = false;
-    allRowCount = null;
-    rowCountBefore = null;
-    rowData = row;
-    loadedTime = new Date().getTime();
+    display.formViewNavigate(command, allRowCount);
+
+    // isLoadingData = true;
+    // const row = await loadRow($$props, formDisplay.navigateRowQuery(command));
+    // if (row) {
+    //   formDisplay.navigate(row);
+    // }
+    // isLoadingData = false;
+    // isLoadedData = true;
+    // isLoadedCount = false;
+    // allRowCount = null;
+    // rowCountBefore = null;
+    // rowData = row;
+    // loadedTime = new Date().getTime();
  };

  export function reload() {
@@ -98,26 +101,26 @@

  $: {
    if (masterLoadedTime && masterLoadedTime > loadedTime) {
-      formDisplay.reload();
+      display.reload();
    }
  }

  $: {
-    if (formDisplay.cache.refreshTime > loadedTime) {
+    if (display?.cache?.refreshTime > loadedTime) {
      reload();
    }
  }

  $: {
-    if (formDisplay.isLoadedCorrectly) {
+    if (display?.isLoadedCorrectly) {
      if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
      if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
    }
  }

-  $: former = new ChangeSetFormer(rowData, changeSetState, dispatchChangeSet, formDisplay);
+  $: grider = new ChangeSetGrider(rowData ? [rowData] : [], changeSetState, dispatchChangeSet, display);

  $: if (onReferenceSourceChanged && rowData) onReferenceSourceChanged([rowData], loadedTime);
 </script>

-<FormView {...$$props} {former} isLoading={isLoadingData} {allRowCount} {rowCountBefore} onNavigate={handleNavigate} />
+<FormView {...$$props} {grider} isLoading={isLoadingData} {allRowCount} onNavigate={handleNavigate} />