form view

packages/web/src/formview/ChangeSetFormer.ts

@@ -0,0 +1,94 @@
+import {
+  ChangeSet,
+  changeSetContainsChanges,
+  changeSetInsertNewRow,
+  createChangeSet,
+  deleteChangeSetRows,
+  findExistingChangeSetItem,
+  getChangeSetInsertedRows,
+  TableFormViewDisplay,
+  revertChangeSetRowChanges,
+  setChangeSetValue,
+  ChangeSetRowDefinition,
+} 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: {};
+
+  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));
+    }
+  }
+
+  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));
+  }
+
+  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 canUndo() {
+    return this.changeSetState.canUndo;
+  }
+  get canRedo() {
+    return this.changeSetState.canRedo;
+  }
+  get containsChanges() {
+    return changeSetContainsChanges(this.changeSet);
+  }
+}

packages/web/src/formview/FormView.svelte

@@ -0,0 +1,171 @@
+<script lang="ts" context="module">
+  let lastFocusedFormView = null;
+  const getCurrentDataForm = () =>
+    lastFocusedFormView?.getTabId && lastFocusedFormView?.getTabId() == getActiveTabId() ? lastFocusedFormView : null;
+
+  registerCommand({
+    id: 'dataForm.switchToTable',
+    category: 'Data form',
+    name: 'Switch to table',
+    keyText: 'F4',
+    testEnabled: () => getCurrentDataForm() != null,
+    onClick: () => getCurrentDataForm().switchToTable(),
+  });
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+
+  import { getContext } from 'svelte';
+  import { get_current_component } from 'svelte/internal';
+
+  import invalidateCommands from '../commands/invalidateCommands';
+
+  import registerCommand from '../commands/registerCommand';
+  import DataGridCell from '../datagrid/DataGridCell.svelte';
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+
+  import { getActiveTabId } from '../stores';
+  import contextMenu from '../utility/contextMenu';
+
+  export let config;
+  export let setConfig;
+  export let focusOnVisible = false;
+  export let allRowCount;
+  export let rowCountBefore;
+  export let isLoading;
+  export let former;
+  export let formDisplay;
+
+  let wrapperHeight = 1;
+  let rowHeight = 1;
+  let currentCell = [0, 0];
+
+  const instance = get_current_component();
+  const tabid = getContext('tabid');
+  const tabVisible: any = getContext('tabVisible');
+
+  let domFocusField;
+
+  $: if ($tabVisible && domFocusField && focusOnVisible) {
+    domFocusField.focus();
+  }
+
+  $: rowData = former?.rowData;
+  $: rowStatus = former?.rowStatus;
+
+  $: rowCount = Math.floor((wrapperHeight - 20) / rowHeight);
+
+  $: columnChunks = _.chunk(formDisplay.columns, rowCount) as any[][];
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export function switchToTable() {
+    setConfig(cfg => ({
+      ...cfg,
+      isFormView: false,
+      formViewKey: null,
+    }));
+  }
+
+  function createMenu() {
+    return [{ command: 'dataForm.switchToTable' }];
+  }
+</script>
+
+<div class="outer">
+  <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
+    {#each columnChunks as chunk, chunkIndex}
+      <table>
+        {#each chunk as col, rowIndex}
+          <tr>
+            {#if chunkIndex == 0 && rowIndex == 0}
+              <td
+                class="header-cell"
+                data-row={rowIndex}
+                data-col={chunkIndex * 2}
+                bind:clientHeight={rowHeight}
+                style={`height: ${rowHeight}px`}
+              >
+                <ColumnLabel {...col} headerText={col.columnName} />
+              </td>
+            {:else}
+              <td class="header-cell" data-row={rowIndex} data-col={chunkIndex * 2} style={`height: ${rowHeight}px`}>
+                <ColumnLabel {...col} headerText={col.columnName} />
+              </td>
+            {/if}
+            <DataGridCell
+              {rowIndex}
+              {col}
+              {rowData}
+              colIndex={chunkIndex * 2 + 1}
+              isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
+              isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
+            />
+          </tr>
+        {/each}
+      </table>
+    {/each}
+    <input
+      type="text"
+      class="focus-field"
+      bind:this={domFocusField}
+      on:focus={() => {
+        lastFocusedFormView = instance;
+        invalidateCommands();
+      }}
+    />
+  </div>
+</div>
+
+<style>
+  table {
+    border-collapse: collapse;
+    outline: none;
+  }
+
+  .outer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    overflow-x: scroll;
+  }
+
+  tr {
+    background-color: var(--theme-bg-0);
+  }
+  tr:nth-child(6n + 3) {
+    background-color: var(--theme-bg-1);
+  }
+  tr:nth-child(6n + 6) {
+    background-color: var(--theme-bg-alt);
+  }
+
+  .header-cell {
+    border: 1px solid var(--theme-border);
+    text-align: left;
+    padding: 0;
+    margin: 0;
+    background-color: var(--theme-bg-1);
+    overflow: hidden;
+  }
+
+  .focus-field {
+    position: absolute;
+    left: -1000px;
+    top: -1000px;
+  }
+</style>

packages/web/src/formview/Former.ts

@@ -0,0 +1,53 @@
+// 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;
+  }
+  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]);
+    }
+  }
+}

packages/web/src/formview/SqlFormView.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" context="module">
+  async function loadRow(props, sql) {
+    const { conid, database } = props;
+
+    if (!sql) return null;
+
+    const response = await axiosInstance.request({
+      url: 'database-connections/query-data',
+      method: 'post',
+      params: {
+        conid,
+        database,
+      },
+      data: { sql },
+    });
+
+    if (response.data.errorMessage) return response.data;
+    return response.data.rows[0];
+  }
+</script>
+
+<script lang="ts">
+  import axiosInstance from '../utility/axiosInstance';
+  import ChangeSetFormer from './ChangeSetFormer';
+  import FormView from './FormView.svelte';
+
+  export let formDisplay;
+  export let changeSetState;
+  export let dispatchChangeSet;
+
+  let isLoadingData = false;
+  let isLoadedData = false;
+  let rowData = null;
+  let isLoadingCount = false;
+  let isLoadedCount = false;
+  let loadedTime = new Date().getTime();
+  let allRowCount = null;
+  let rowCountBefore = null;
+  let errorMessage = null;
+
+  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');
+    }
+  };
+
+  const handleLoadRowCount = async () => {
+    isLoadingCount = true;
+    const countRow = await loadRow($$props, formDisplay.getCountQuery());
+    const countBeforeRow = await loadRow($$props, formDisplay.getBeforeCountQuery());
+
+    isLoadedCount = true;
+    isLoadingCount = false;
+    allRowCount = countRow ? parseInt(countRow.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();
+  };
+
+  export function reload() {
+    isLoadingData = false;
+    isLoadedData = false;
+    isLoadingCount = false;
+    isLoadedCount = false;
+    rowData = null;
+    loadedTime = new Date().getTime();
+    allRowCount = null;
+    rowCountBefore = null;
+    errorMessage = null;
+  }
+
+  $: {
+    if (formDisplay.isLoadedCorrectly) {
+      if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();
+      if (isLoadedData && !isLoadingCount && !isLoadedCount) handleLoadRowCount();
+    }
+  }
+
+  $: former = new ChangeSetFormer(rowData, changeSetState, dispatchChangeSet, formDisplay);
+</script>
+
+<FormView {...$$props} {former} isLoading={isLoadingData} {allRowCount} {rowCountBefore} />

packages/web/src/formview/openReferenceForm.ts

@@ -0,0 +1,31 @@
+import _ from 'lodash';
+import openNewTab from '../utility/openNewTab';
+
+export default function openReferenceForm(rowData, column, conid, database) {
+  const formViewKey = _.fromPairs(
+    column.foreignKey.columns.map(({ refColumnName, columnName }) => [refColumnName, rowData[columnName]])
+  );
+  openNewTab(
+    {
+      title: column.foreignKey.refTableName,
+      icon: 'img table',
+      tabComponent: 'TableDataTab',
+      props: {
+        schemaName: column.foreignKey.refSchemaName,
+        pureName: column.foreignKey.refTableName,
+        conid,
+        database,
+        objectTypeField: 'tables',
+      },
+    },
+    {
+      grid: {
+        isFormView: true,
+        formViewKey,
+      },
+    },
+    {
+      forceNewTab: true,
+    }
+  );
+}