form view

packages/web/src/datagrid/DataGridCell.svelte

@@ -34,11 +34,14 @@
   export let isDeleted = false;
   export let isAutofillSelected = false;
   export let isFocusedColumn = false;
+  export let domCell = undefined;
+  export let hideContent = false;
 
   $: value = (rowData || {})[col.uniqueName];
 </script>
 
 <td
+  bind:this={domCell}
   data-row={rowIndex}
   data-col={colIndex == null ? col.colIndex : colIndex}
   class:isSelected
@@ -51,42 +54,46 @@
   class:isFocusedColumn
   style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
 >
-  {#if value == null}
+  {#if hideContent}
-    <span class="null">(NULL)</span>
+    <slot />
-  {:else if _.isDate(value)}
+  {:else}
-    {moment(value).format('YYYY-MM-DD HH:mm:ss')}
+    {#if value == null}
-  {:else if value === true}
+      <span class="null">(NULL)</span>
-    1
+    {:else if _.isDate(value)}
-  {:else if value === false}
+      {moment(value).format('YYYY-MM-DD HH:mm:ss')}
-    0
+    {:else if value === true}
-  {:else if _.isNumber(value)}
+      1
-    {#if value >= 10000 || value <= -10000}
+    {:else if value === false}
-      {value.toLocaleString()}
+      0
+    {:else if _.isNumber(value)}
+      {#if value >= 10000 || value <= -10000}
+        {value.toLocaleString()}
+      {:else}
+        {value.toString()}
+      {/if}
+    {:else if _.isString(value)}
+      {#if dateTimeRegex.test(value)}
+        {moment(value).format('YYYY-MM-DD HH:mm:ss')}
+      {:else}
+        {highlightSpecialCharacters(value)}
+      {/if}
+    {:else if _.isPlainObject(value)}
+      {#if _.isArray(value.data)}
+        {#if value.data.length == 1 && isTypeLogical(col.dataType)}
+          {value.data[0]}
+        {:else}
+          <span class="null">({value.data.length} bytes)</span>
+        {/if}
+      {:else}
+        <span class="null">(RAW)</span>
+      {/if}
     {:else}
       {value.toString()}
     {/if}
-  {:else if _.isString(value)}
-    {#if dateTimeRegex.test(value)}
-      {moment(value).format('YYYY-MM-DD HH:mm:ss')}
-    {:else}
-      {highlightSpecialCharacters(value)}
-    {/if}
-  {:else if _.isPlainObject(value)}
-    {#if _.isArray(value.data)}
-      {#if value.data.length == 1 && isTypeLogical(col.dataType)}
-        {value.data[0]}
-      {:else}
-        <span class="null">({value.data.length} bytes)</span>
-      {/if}
-    {:else}
-      <span class="null">(RAW)</span>
-    {/if}
-  {:else}
-    {value.toString()}
-  {/if}
 
-  {#if hintFieldsAllowed && hintFieldsAllowed.includes(col.uniqueName) && rowData}
+    {#if hintFieldsAllowed && hintFieldsAllowed.includes(col.uniqueName) && rowData}
-    <span class="hint">{rowData[col.hintColumnName]}</span>
+      <span class="hint">{rowData[col.hintColumnName]}</span>
+    {/if}
   {/if}
 </td>
 

packages/web/src/datagrid/DataGridCore.svelte

@@ -532,9 +532,9 @@
         selectedCells = getCellRange(cell, cell);
         dragStartCell = cell;
 
-        if (isRegularCell(cell) && !_.isEqual(cell, inplaceEditorState.cell) && _.isEqual(cell, oldCurrentCell)) {
+        if (isRegularCell(cell) && !_.isEqual(cell, $inplaceEditorState.cell) && _.isEqual(cell, oldCurrentCell)) {
           dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
-        } else if (!_.isEqual(cell, inplaceEditorState.cell)) {
+        } else if (!_.isEqual(cell, $inplaceEditorState.cell)) {
           dispatchInsplaceEditor({ type: 'close' });
         }
       }

packages/web/src/datagrid/DataGridRow.svelte

@@ -33,13 +33,15 @@
   <RowHeaderCell {rowIndex} />
   {#each visibleRealColumns as col (col.uniqueName)}
     {#if inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1]}
-      <InplaceEditor
+      <td>
-        width={col.width}
+        <InplaceEditor
-        {inplaceEditorState}
+          width={col.width}
-        {dispatchInsplaceEditor}
+          {inplaceEditorState}
-        cellValue={rowData[col.uniqueName]}
+          {dispatchInsplaceEditor}
-        onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
+          cellValue={rowData[col.uniqueName]}
-      />
+          onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
+        />
+      </td>
     {:else}
       <DataGridCell
         {rowIndex}

packages/web/src/datagrid/InplaceEditor.svelte

@@ -68,7 +68,7 @@
   on:keydown={handleKeyDown}
   on:blur={handleBlur}
   bind:this={domEditor}
-  style={`width:${widthCopy}px;min-width:${widthCopy}px;max-width:${widthCopy}px`}
+  style={widthCopy ? `width:${widthCopy}px;min-width:${widthCopy}px;max-width:${widthCopy}px` : undefined}
 />
 
 <style>

packages/web/src/formview/FormView.svelte

@@ -11,6 +11,10 @@
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().switchToTable(),
   });
+
+  function isDataCell(cell) {
+    return cell[1] % 2 == 1;
+  }
 </script>
 
 <script lang="ts">
@@ -23,10 +27,15 @@
 
   import registerCommand from '../commands/registerCommand';
   import DataGridCell from '../datagrid/DataGridCell.svelte';
+  import InplaceEditor from '../datagrid/InplaceEditor.svelte';
+  import { cellFromEvent } from '../datagrid/selection';
   import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import { plusExpandIcon } from '../icons/expandIcons';
+  import FontIcon from '../icons/FontIcon.svelte';
 
   import { getActiveTabId } from '../stores';
   import contextMenu from '../utility/contextMenu';
+  import createReducer from '../utility/createReducer';
 
   export let config;
   export let setConfig;
@@ -44,6 +53,7 @@
   const instance = get_current_component();
   const tabid = getContext('tabid');
   const tabVisible: any = getContext('tabVisible');
+  const domCells = {};
 
   let domFocusField;
 
@@ -70,6 +80,82 @@
     }));
   }
 
+  const handleTableMouseDown = event => {
+    if (event.target.closest('.buttonLike')) return;
+    if (event.target.closest('.resizeHandleControl')) return;
+    if (event.target.closest('input')) return;
+
+    event.preventDefault();
+    if (domFocusField) domFocusField.focus();
+
+    // event.target.closest('table').focus();
+    event.preventDefault();
+    const cell = cellFromEvent(event);
+
+    if (isDataCell(cell) && !_.isEqual(cell, inplaceEditorState.cell) && _.isEqual(cell, currentCell)) {
+      // @ts-ignore
+      if (rowData) {
+        dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+      }
+    } else if (!_.isEqual(cell, inplaceEditorState.cell)) {
+      // @ts-ignore
+      dispatchInsplaceEditor({ type: 'close' });
+    }
+
+    // @ts-ignore
+    currentCell = cell;
+  };
+
+  function getCellColumn(cell) {
+    const chunk = columnChunks[Math.floor(cell[1] / 2)];
+    if (!chunk) return;
+    const column = chunk[cell[0]];
+    return column;
+  }
+
+  function setCellValue(cell, value) {
+    const column = getCellColumn(cell);
+    if (!column) return;
+    former.setCellValue(column.uniqueName, value);
+  }
+
+  const getCellWidth = (row, col) => {
+    const element = domCells[`${row},${col}`];
+    if (element) return element.getBoundingClientRect().width;
+    return 100;
+  };
+
+  const [inplaceEditorState, dispatchInsplaceEditor] = createReducer((state, action) => {
+    switch (action.type) {
+      case 'show': {
+        const column = getCellColumn(action.cell);
+        if (!column) return state;
+        if (column.uniquePath.length > 1) return state;
+
+        // if (!grider.editable) return {};
+        return {
+          cell: action.cell,
+          text: action.text,
+          selectAll: action.selectAll,
+        };
+      }
+      case 'close': {
+        const [row, col] = currentCell || [];
+        if (domFocusField) domFocusField.focus();
+        // @ts-ignore
+        if (action.mode == 'enter' && row) setTimeout(() => moveCurrentCell(row + 1, col), 0);
+        // if (action.mode == 'save') setTimeout(handleSave, 0);
+        return {};
+      }
+      case 'shouldSave': {
+        return {
+          ...state,
+          shouldSave: true,
+        };
+      }
+    }
+    return {};
+  }, {});
   function createMenu() {
     return [{ command: 'dataForm.switchToTable' }];
   }
@@ -78,7 +164,7 @@
 <div class="outer">
   <div class="wrapper" use:contextMenu={createMenu} bind:clientHeight={wrapperHeight}>
     {#each columnChunks as chunk, chunkIndex}
-      <table>
+      <table on:mousedown={handleTableMouseDown}>
         {#each chunk as col, rowIndex}
           <tr>
             {#if chunkIndex == 0 && rowIndex == 0}
@@ -88,11 +174,32 @@
                 data-col={chunkIndex * 2}
                 bind:clientHeight={rowHeight}
                 style={`height: ${rowHeight}px`}
+                bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
+                class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
               >
                 <ColumnLabel {...col} headerText={col.columnName} />
               </td>
             {:else}
-              <td class="header-cell" data-row={rowIndex} data-col={chunkIndex * 2} style={`height: ${rowHeight}px`}>
+              <td
+                class="header-cell"
+                data-row={rowIndex}
+                data-col={chunkIndex * 2}
+                style={`height: ${rowHeight}px`}
+                class:isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
+                bind:this={domCells[`${rowIndex},${chunkIndex * 2}`]}
+              >
+                {#if col.foreignKey}
+                  <FontIcon
+                    icon={plusExpandIcon(formDisplay.isExpandedColumn(col.uniqueName))}
+                    on:click={e => {
+                      e.stopPropagation();
+                      formDisplay.toggleExpandedColumn(col.uniqueName);
+                    }}
+                  />
+                {:else}
+                  <FontIcon icon="icon invisible-box" />
+                {/if}
+                <span style={`margin-left: ${(col.uniquePath.length - 1) * 20}px`} />
                 <ColumnLabel {...col} headerText={col.columnName} />
               </td>
             {/if}
@@ -103,7 +210,23 @@
               colIndex={chunkIndex * 2 + 1}
               isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
               isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
-            />
+              bind:domCell={domCells[`${rowIndex},${chunkIndex * 2 + 1}`]}
+              hideContent={$inplaceEditorState.cell &&
+                rowIndex == $inplaceEditorState.cell[0] &&
+                chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
+            >
+              {#if $inplaceEditorState.cell && rowIndex == $inplaceEditorState.cell[0] && chunkIndex * 2 + 1 == $inplaceEditorState.cell[1]}
+                <InplaceEditor
+                  width={getCellWidth(rowIndex, chunkIndex * 2 + 1)}
+                  inplaceEditorState={$inplaceEditorState}
+                  {dispatchInsplaceEditor}
+                  cellValue={rowData[col.uniqueName]}
+                  onSetValue={value => {
+                    former.setCellValue(col.uniqueName, value);
+                  }}
+                />
+              {/if}
+            </DataGridCell>
           </tr>
         {/each}
       </table>
@@ -162,6 +285,9 @@
     background-color: var(--theme-bg-1);
     overflow: hidden;
   }
+  .header-cell.isSelected {
+    background: var(--theme-bg-selected);
+  }
 
   .focus-field {
     position: absolute;

packages/web/src/formview/SqlFormView.svelte

@@ -27,6 +27,7 @@
   export let formDisplay;
   export let changeSetState;
   export let dispatchChangeSet;
+  export let masterLoadedTime;
 
   let isLoadingData = false;
   let isLoadedData = false;
@@ -39,6 +40,7 @@
   let errorMessage = null;
 
   const handleLoadCurrentRow = async () => {
+    console.log('LOAD ROW');
     if (isLoadingData) return;
     let newLoadedRow = false;
     if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {
@@ -96,6 +98,18 @@
     errorMessage = null;
   }
 
+  $: {
+    if (masterLoadedTime && masterLoadedTime > loadedTime) {
+      formDisplay.reload();
+    }
+  }
+
+  $: {
+    if (formDisplay.cache.refreshTime > loadedTime) {
+      reload();
+    }
+  }
+
   $: {
     if (formDisplay.isLoadedCorrectly) {
       if (!isLoadedData && !isLoadingData) handleLoadCurrentRow();