open form view detail from grid

packages/web/src/datagrid/DataGridCore.js

@@ -303,8 +303,38 @@ export default function DataGridCore(props) {
   const handleSetFormView = React.useMemo(
     () =>
       formViewAvailable && display.baseTable && display.baseTable.primaryKey
-        ? (rowData) => {
-            display.switchToFormView(rowData);
+        ? (rowData, column) => {
+            if (column) {
+              const formViewKey = _.fromPairs(
+                column.foreignKey.columns.map(({ refColumnName, columnName }) => [refColumnName, rowData[columnName]])
+              );
+              console.log('formViewKey', formViewKey);
+              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,
+                }
+              );
+            } else {
+              display.switchToFormView(rowData);
+            }
           }
         : null,
     [formViewAvailable, display]

packages/web/src/datagrid/DataGridRow.js

@@ -90,11 +90,11 @@ const TableBodyCell = styled.td`
 `;
 
 const HintSpan = styled.span`
-  color: gray;
+  color: ${(props) => props.theme.gridbody_font3};
   margin-left: 5px;
 `;
 const NullSpan = styled.span`
-  color: gray;
+  color: ${(props) => props.theme.gridbody_font3};
   font-style: italic;
 `;
 
@@ -131,11 +131,16 @@ const AutoFillPoint = styled.div`
 
 const ShowFormButton = styled.div`
   position: absolute;
-  right: 2px;
-  top: 2px;
+  right: 0px;
+  top: 1px;
+  color: ${(props) => props.theme.gridbody_font3};
+  background-color: ${(props) => props.theme.gridheader_background};
+  border: 1px solid ${(props) => props.theme.gridheader_background};
   &:hover {
-    background-color: ${(props) => props.theme.gridheader_background_blue[4]};
+    color: ${(props) => props.theme.gridheader_font_hover};
     border: 1px solid ${(props) => props.theme.border};
+    top: 1px;
+    right: 0px;
   }
 `;
 
@@ -154,8 +159,8 @@ function highlightSpecialCharacters(value) {
 
 const dateTimeRegex = /^\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d(\.\d\d\d)?Z?$/;
 
-export function CellFormattedValue({ value, dataType }) {
-  if (value == null) return <NullSpan>(NULL)</NullSpan>;
+export function CellFormattedValue({ value, dataType, theme }) {
+  if (value == null) return <NullSpan theme={theme}>(NULL)</NullSpan>;
   if (_.isDate(value)) return moment(value).format('YYYY-MM-DD HH:mm:ss');
   if (value === true) return '1';
   if (value === false) return '0';
@@ -172,9 +177,9 @@ export function CellFormattedValue({ value, dataType }) {
   if (_.isPlainObject(value)) {
     if (_.isArray(value.data)) {
       if (value.data.length == 1 && isTypeLogical(dataType)) return value.data[0];
-      return <NullSpan>({value.data.length} bytes)</NullSpan>;
+      return <NullSpan theme={theme}>({value.data.length} bytes)</NullSpan>;
     }
-    return <NullSpan>(RAW)</NullSpan>;
+    return <NullSpan theme={theme}>(RAW)</NullSpan>;
   }
   return value.toString();
 }
@@ -298,8 +303,22 @@ function DataGridRow(props) {
             />
           ) : (
             <>
-              <CellFormattedValue value={rowData[col.uniqueName]} dataType={col.dataType} />
-              {hintFieldsAllowed.includes(col.uniqueName) && <HintSpan>{rowData[col.hintColumnName]}</HintSpan>}
+              <CellFormattedValue value={rowData[col.uniqueName]} dataType={col.dataType} theme={theme} />
+              {hintFieldsAllowed.includes(col.uniqueName) && (
+                <HintSpan theme={theme}>{rowData[col.hintColumnName]}</HintSpan>
+              )}
+              {col.foreignKey && rowData[col.uniqueName] && (
+                <ShowFormButton
+                  theme={theme}
+                  className="buttonLike"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSetFormView(rowData, col);
+                  }}
+                >
+                  <FontIcon icon="icon form" />
+                </ShowFormButton>
+              )}
             </>
           )}
           {autofillMarkerCell && autofillMarkerCell[1] == col.colIndex && autofillMarkerCell[0] == rowIndex && (

packages/web/src/formview/FormView.js

@@ -476,7 +476,7 @@ export default function FormView(props) {
                   />
                 ) : (
                   <>
-                    <CellFormattedValue value={rowData && rowData[col.columnName]} dataType={col.dataType} />
+                    <CellFormattedValue value={rowData && rowData[col.columnName]} dataType={col.dataType} theme={theme} />
                     {!!col.hintColumnName &&
                       rowData &&
                       !(rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) && (

packages/web/src/theme/fillTheme.js

@@ -6,10 +6,12 @@ function fillOne(theme, name, type, add, background, fontName, invFontName, chan
   add[`${name}_font1`] = add[`${fontName}1`];
   add[`${name}_font2`] = add[`${fontName}2`];
   add[`${name}_font3`] = add[`${fontName}3`];
+  add[`${name}_font4`] = add[`${fontName}4`];
 
   add[`${name}_invfont1`] = add[`${invFontName}1`];
   add[`${name}_invfont2`] = add[`${invFontName}2`];
   add[`${name}_invfont3`] = add[`${invFontName}3`];
+  add[`${name}_invfont4`] = add[`${invFontName}4`];
   // add[`${name}_fontDisabled`] = add.fontBlack3;
 
   if (background) {
@@ -51,10 +53,12 @@ function fillThemeCore(theme) {
   add.fontWhite1 = add.fontWhite1 || '#FFFFFF';
   add.fontWhite2 = add.fontWhite2 || darkenByTenth(add.fontWhite1, 0.3);
   add.fontWhite3 = add.fontWhite3 || darkenByTenth(add.fontWhite2, 0.2);
+  add.fontWhite4 = add.fontWhite4 || darkenByTenth(add.fontWhite3, 0.2);
 
   add.fontBlack1 = add.fontBlack1 || '#000000';
   add.fontBlack2 = add.fontBlack2 || lightenByTenth(add.fontBlack1, 0.3);
   add.fontBlack3 = add.fontBlack3 || lightenByTenth(add.fontBlack2, 0.2);
+  add.fontBlack4 = add.fontBlack4 || lightenByTenth(add.fontBlack3, 0.2);
 
   for (const key of _.keys(theme)) {
     const matchType = key.match(/^(.*)_type$/);

packages/web/src/utility/useGridConfig.js

@@ -3,7 +3,12 @@ import React from 'react';
 
 const loadGridConfigFunc = (tabid) => () => {
   const existing = localStorage.getItem(`tabdata_grid_${tabid}`);
-  if (existing) return JSON.parse(existing);
+  if (existing) {
+    return {
+      ...createGridConfig(),
+      ...JSON.parse(existing),
+    };
+  }
   return createGridConfig();
 };