cell data view

packages/web/src/celldata/CellDataView.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SelectField } from '../utility/inputs';
+import ErrorInfo from '../widgets/ErrorInfo';
+import styled from 'styled-components';
+import TextCellView from './TextCellView';
+
+const Toolbar = styled.div`
+  display: flex;
+  background: #ccc;
+  align-items: center;
+`;
+
+const MainWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+
+const DataWrapper = styled.div`
+  display: flex;
+  flex: 1;
+`;
+
+const formats = [
+  {
+    type: 'text',
+    title: 'Text',
+    Component: TextCellView,
+    single: true,
+  },
+];
+
+export default function CellDataView({ selection, grider }) {
+  const [selectedFormat, setSelectedFormat] = React.useState(formats[0]);
+  let value = null;
+  if (grider && selection.length == 1) {
+    const rowData = grider.getRowData(selection[0].row);
+    const { column } = selection[0];
+    if (rowData) value = rowData[column];
+  }
+  const { Component } = selectedFormat || {};
+
+  return (
+    <MainWrapper>
+      <Toolbar>
+        Format:
+        <SelectField
+          value={selectedFormat && selectedFormat.type}
+          onChange={(value) => setSelectedFormat(formats.find((x) => x.type == value))}
+        >
+          {formats.map((fmt) => (
+            <option value={fmt.type} key={fmt.type}>
+              {fmt.title}
+            </option>
+          ))}
+        </SelectField>
+      </Toolbar>
+
+      <DataWrapper>
+        {selectedFormat == null || (selectedFormat.single && value == null) ? (
+          <ErrorInfo message="Must be selected one cell" />
+        ) : (
+          <Component value={value} grider={grider} selection={selection} />
+        )}
+      </DataWrapper>
+    </MainWrapper>
+  );
+}

packages/web/src/celldata/TextCellView.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledInput = styled.textarea`
+  flex: 1;
+`;
+
+export default function TextCellView({ value, grider, selection }) {
+  return (
+    <StyledInput
+      value={value}
+      wrap="off"
+      readOnly
+      //   readOnly={grider ? !grider.editable : true}
+      //   onChange={(e) => grider.setCellValue(selection[0].row, selection[0].column, e.target.value)}
+    />
+  );
+}

packages/web/src/datagrid/DataGrid.js

@@ -5,6 +5,7 @@ import ColumnManager from './ColumnManager';
 import ReferenceManager from './ReferenceManager';
 import { HorizontalSplitter } from '../widgets/Splitter';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
+import CellDataView from '../celldata/CellDataView';
 
 const LeftContainer = styled.div`
   background-color: white;
@@ -20,23 +21,28 @@ const DataGridContainer = styled.div`
 export default function DataGrid(props) {
   const { GridCore } = props;
   const [managerSize, setManagerSize] = React.useState(0);
+  const [selection, setSelection] = React.useState([]);
+  const [grider, setGrider] = React.useState(null);
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
         <WidgetColumnBar>
-          <WidgetColumnBarItem title="Columns" name="columns" height="60%">
+          <WidgetColumnBarItem title="Columns" name="columns" height="50%">
             <ColumnManager {...props} managerSize={managerSize} />
           </WidgetColumnBarItem>
           {props.showReferences && (
-            <WidgetColumnBarItem title="References" name="references">
+            <WidgetColumnBarItem title="References" name="references" height="30%">
               <ReferenceManager {...props} managerSize={managerSize} />
             </WidgetColumnBarItem>
           )}
+          <WidgetColumnBarItem title="Cell data" name="cellData">
+            <CellDataView selection={selection} grider={grider} />
+          </WidgetColumnBarItem>
         </WidgetColumnBar>
       </LeftContainer>
 
       <DataGridContainer>
-        <GridCore {...props} />
+        <GridCore {...props} onSelectionChanged={setSelection} onChangeGrider={setGrider} />
       </DataGridContainer>
     </HorizontalSplitter>
   );

packages/web/src/datagrid/DataGridCore.js

@@ -210,7 +210,7 @@ export default function DataGridCore(props) {
 
   React.useEffect(() => {
     if (onSelectionChanged) {
-      onSelectionChanged(getSelectedMacroCells());
+      onSelectionChanged(getSelectedCellsPublished());
     }
   }, [onSelectionChanged, selectedCells]);
 
@@ -549,13 +549,30 @@ export default function DataGridCore(props) {
     return _.uniq((selectedCells || []).map((x) => x[1])).filter((x) => _.isNumber(x));
   }
 
-  function getSelectedMacroCells() {
+  function getSelectedCellsPublished() {
     const regular = cellsToRegularCells(selectedCells);
     // @ts-ignore
-    return regular.map((cell) => ({
+    return regular
-      row: cell[0],
+      .map((cell) => ({
-      column: realColumnUniqueNames[cell[1]],
+        row: cell[0],
-    }));
+        column: realColumnUniqueNames[cell[1]],
+      }))
+      .filter((x) => x.column);
+
+    // return regular.map((cell) => {
+    //   const row = cell[0];
+    //   const column = realColumnUniqueNames[cell[1]];
+    //   let value = null;
+    //   if (grider && column) {
+    //     let rowData = grider.getRowData(row);
+    //     if (rowData) value = rowData[column];
+    //   }
+    //   return {
+    //     row,
+    //     column,
+    //     value,
+    //   };
+    // });
   }
 
   function getSelectedRowData() {

packages/web/src/datagrid/LoadingDataGridCore.js

@@ -13,6 +13,7 @@ export default function LoadingDataGridCore(props) {
     openQuery,
     griderFactory,
     griderFactoryDeps,
+    onChangeGrider,
   } = props;
 
   const [loadProps, setLoadProps] = React.useState({
@@ -109,6 +110,10 @@ export default function LoadingDataGridCore(props) {
   const griderProps = { ...props, sourceRows: loadedRows };
   const grider = React.useMemo(() => griderFactory(griderProps), griderFactoryDeps(griderProps));
 
+  React.useEffect(() => {
+    if (onChangeGrider) onChangeGrider(grider);
+  }, [grider]);
+
   const handleLoadNextData = () => {
     if (!isLoadedAll && !errorMessage && !grider.disableLoadNextPage) {
       if (dataPageAvailable(props)) {

packages/web/src/datagrid/SqlDataGridCore.js

@@ -60,7 +60,7 @@ async function loadRowCount(props) {
 
 /** @param props {import('./types').DataGridProps} */
 export default function SqlDataGridCore(props) {
-  const { conid, database, display, changeSetState, dispatchChangeSet, tabVisible } = props;
+  const { conid, database, display, changeSetState, dispatchChangeSet } = props;
   const showModal = useShowModal();
   const setOpenedTabs = useSetOpenedTabs();
 

packages/web/src/widgets/WidgetColumnBar.js

@@ -10,7 +10,7 @@ import {
 import { VerticalSplitHandle, useSplitterDrag } from './Splitter';
 import useDimensions from '../utility/useDimensions';
 
-export function WidgetColumnBarItem({ title, children, name, height = undefined }) {
+export function WidgetColumnBarItem({ title, children, name, height = undefined, collapsed = false }) {
   return <></>;
 }
 
@@ -42,7 +42,7 @@ export default function WidgetColumnBar({ children }) {
   const childArray = _.isArray(children) ? children : [children];
   const [refNode, dimensions] = useDimensions();
   const [collapsedWidgets, setCollapsedWidgets] = React.useState(() =>
-    childArray.filter((x) => x && x.props.collapsed).map((x) => x.props.key)
+    childArray.filter((x) => x && x.props.collapsed).map((x) => x.props.name)
   );
   const toggleCollapsed = (name) => {
     if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name));