From 970e9310999779cbcf6ab50ba492dc1495aed946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Gessler?=
 <36667834+gessfred@users.noreply.github.com>
Date: Mon, 15 Jan 2024 23:48:37 +0000
Subject: [PATCH] implement basic worksheet without parsing

---
 app/src/App.jsx                       |  4 ++-
 app/src/components/Code.jsx           | 52 +++++++++++++++++----------
 app/src/components/DataSourceGrid.jsx |  2 +-
 app/src/components/Table.jsx          | 47 ++++++++++++++++++++++++
 app/src/pages/Home.jsx                |  4 +--
 app/src/pages/Worksheet.jsx           | 31 ++++++++++++++--
 6 files changed, 116 insertions(+), 24 deletions(-)

diff --git a/app/src/App.jsx b/app/src/App.jsx
index f075800..c699cab 100644
--- a/app/src/App.jsx
+++ b/app/src/App.jsx
@@ -221,6 +221,7 @@ function App() {
       setStateProperty({user: JSON.parse(cachedUser), pageid: 'main'})
     }
   }, [])
+  console.log('state')
   return (
     <>
       <Signin 
@@ -234,11 +235,12 @@ function App() {
       <Home 
         show={state.pageid === 'main'} 
         api={api}
-        createWorksheet={() => setStateProperty({pageid: 'worksheet'})}
+        createWorksheet={(ds) => setStateProperty({pageid: 'worksheet', datasource: ds})}
       />
       <Worksheet 
         show={state.pageid === 'worksheet'}
         api={api}
+        datasource={state.datasource}
       />
     </>
   )
diff --git a/app/src/components/Code.jsx b/app/src/components/Code.jsx
index dc7a6e1..2663121 100644
--- a/app/src/components/Code.jsx
+++ b/app/src/components/Code.jsx
@@ -2,29 +2,43 @@ import { useRef, useEffect } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { sql } from '@codemirror/lang-sql'
 
+function extractTextBetweenSemicolons(text, caretPos) {
+  // Find the position of the semicolon before the caret
+  let startPos = text.lastIndexOf(';', caretPos - 1);
+
+  // If there is no semicolon before the caret, start from the beginning
+  startPos = startPos === -1 ? 0 : startPos + 1;
+
+  // Find the position of the semicolon after the caret
+  let endPos = text.indexOf(';', caretPos);
+
+  // If there is no semicolon after the caret, go to the end of the text
+  endPos = endPos === -1 ? text.length : endPos;
+
+  // Extract and return the text between the semicolons
+  return text.substring(startPos, endPos);
+}
+
 export function CodeEditor({code, setCode, onCtrlEnter}) {
-  /*return (
-    <div contentEditable={true} onInput={(e) => console.log(e.target.value)}>
-      {code}
-    </div>
-  )*/
-  //if(!onCtrlEnter) onCtrlEnter = () => {}
-  const sqlEditorRef = useRef(null)
-  useEffect(() => {
-    if(sqlEditorRef.current) {
-      console.log("attaching")
-      const cm = sqlEditorRef.current
-    cm.on('keydown', (editor, event) => {
-      if (event.ctrlKey && event.keyCode === 13) { // 13 is the keyCode for Enter
-        console.log("ctrl+key")
-      }
-    })
+  const handleCmdEnter = (event) => {
+    console.log('cut @', window.getSelection())
+    const {keyCode, ctrlKey}  = event
+    if(ctrlKey && keyCode == 13) {
+      console.log(window.getSelection().toString())
+      const execode = extractTextBetweenSemicolons(code, window.getSelection().baseOffset)
+      console.log("EXEC", execode)
+      onCtrlEnter()
+    } else {
+      console.log(keyCode)
     }
-  }, [])
+  }
   return (
     <CodeMirror 
       value={code}
-      onChange={(code, view) => setCode(code)}
+      onChange={(code, view) => {
+        console.log(code, view)
+        setCode(code)
+      }}
       height='500px'
       basicSetup={{lineNumbers: false}}
       extensions={[sql()]}
@@ -32,6 +46,8 @@ export function CodeEditor({code, setCode, onCtrlEnter}) {
         extraKeys: {
           'Ctrl-Enter': (cm) => console.log("ctrl+enter")
         }}}
+      onKeyDown={handleCmdEnter}
+    
     />
   )
 }
\ No newline at end of file
diff --git a/app/src/components/DataSourceGrid.jsx b/app/src/components/DataSourceGrid.jsx
index 2aacbf2..eed3140 100644
--- a/app/src/components/DataSourceGrid.jsx
+++ b/app/src/components/DataSourceGrid.jsx
@@ -35,7 +35,7 @@ export default function DataSourceGrid({datasources, createWorksheet, editDataSo
               <div className="flex w-0 flex-1">
                 <button
                   className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900"
-                  onClick={createWorksheet}
+                  onClick={() => createWorksheet(ds)}
                 >
                   <CodeBracketIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                   Worksheet
diff --git a/app/src/components/Table.jsx b/app/src/components/Table.jsx
index e69de29..81d99a4 100644
--- a/app/src/components/Table.jsx
+++ b/app/src/components/Table.jsx
@@ -0,0 +1,47 @@
+const transactions = [
+    {
+      id: 'AAPS0L',
+      company: 'Chase & Co.',
+      share: 'CAC',
+      commission: '+$4.37',
+      price: '$3,509.00',
+      quantity: '12.00',
+      netAmount: '$4,397.00',
+    },
+    // More transactions...
+  ]
+  
+  export default function Table({columns, rows, metadata}) {
+    return (
+      <div className="px-4 sm:px-6 lg:px-8">
+        <div className="mt-8 flow-root">
+          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead>
+                  <tr>
+                    {(columns || []).map(column => (
+                        <th
+                        scope="col"
+                        className="whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900"
+                        >
+                        {column}
+                        </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                  {(rows || []).map((row) => (
+                    <tr key={row.id}>
+                      {row.map(column => <td className="whitespace-nowrap px-2 py-2 text-sm text-gray-900">{column}</td>)}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
\ No newline at end of file
diff --git a/app/src/pages/Home.jsx b/app/src/pages/Home.jsx
index 386d798..1abf3a6 100644
--- a/app/src/pages/Home.jsx
+++ b/app/src/pages/Home.jsx
@@ -212,8 +212,8 @@ const user = {
               </div>
               <button className='bg-gray'>Create</button>
               <ConnectionEditor show={false} onHide={() => {}} />
-              <h1>Files</h1>
-              <FilesExplorer worksheets={state.worksheets}  />
+              {false && <h1>Files</h1>}
+              {false && <FilesExplorer worksheets={state.worksheets}  />}
             </div>
           </main>
         </div>
diff --git a/app/src/pages/Worksheet.jsx b/app/src/pages/Worksheet.jsx
index a3c5f41..f0f71a8 100644
--- a/app/src/pages/Worksheet.jsx
+++ b/app/src/pages/Worksheet.jsx
@@ -14,6 +14,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline'
 import { ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import Table from "../components/Table"
 
 const navigation = [
   { name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
@@ -346,11 +347,37 @@ function Sidebar({children}) {
   )
 }
 
-export default function Worksheet({show}) {
+function execSql(api, query, datasource, onSuccess, onError) {
+  console.log(query, datasource, {"query": query, datasource_id: datasource})
+  api.post('/query', {"query": query, datasource_id: datasource.datasource_id}, {
+    json: (j) => {
+    console.log(j)
+    onSuccess(j)
+
+    },
+    error: err => {
+      console.log(err)
+      onError && onError(err)
+    }
+  })
+}
+
+
+export default function Worksheet({api, show, datasource}) {
+  const [state, setState] = useState({code: "select * from hello_world"})
+  const setStateProperty = property => value => setState(prev => Object.assign({}, prev, {[property]: value}))
   if(!show) return <span></span>
   return (
     <Sidebar>
-      <CodeEditor code="select * from hello_world" />
+      <CodeEditor code={state.code} setCode={setStateProperty('code')} onCtrlEnter={() => {
+         console.log("invoking exec sql with", datasource)
+        execSql(api, state.code, datasource, setStateProperty('result'), console.log)
+      }} />
+      {state.result && <Table 
+        columns={state.result.columns}
+        rows={state.result.rows} 
+        
+      />}
     </Sidebar>
   )
 }
\ No newline at end of file