Add context menu items

yy0931 · Apr 12, 2023 · 8623a07 · 8623a07
1 parent c733cf9
commit 8623a07
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/ui/components.tsx b/ui/components.tsx
@@ -8,7 +8,7 @@ import type { ReactElement } from "react"
 import { render } from "preact"
 
 /** Typed version of `<select>` */
-export const Select = <T extends string>(props: { options: Record<T, { text?: string, disabled?: boolean, disabledReason?: string, group?: string }>, value: T, onChange: (value: T) => void, style?: JSXInternal.CSSProperties, tabIndex?: number, class?: string, "data-testid"?: string }) => {
+export const Select = <T extends string>(props: { options: Record<T, { text?: string, disabled?: boolean, disabledReason?: string, group?: string }>, value: T, onChange: (value: T) => void, onContextMenu?: (ev: JSXInternal.TargetedMouseEvent<HTMLSelectElement>) => void, style?: JSXInternal.CSSProperties, tabIndex?: number, class?: string, "data-testid"?: string }) => {
     const ref1 = useRef<HTMLSelectElement>(null)
     const ref2 = useRef<HTMLSelectElement>(null)
     useLayoutEffect(() => {
@@ -24,15 +24,24 @@ export const Select = <T extends string>(props: { options: Record<T, { text?: st
     }
 
     return <>
-        <select autocomplete="off" value={props.value} style={props.style} class={"pl-[15px] pr-[15px] " + (props.class ?? "")} ref={ref1} onChange={(ev) => props.onChange(ev.currentTarget.value as T)} tabIndex={props.tabIndex} data-testid={props["data-testid"]}>{
-            ([...groups.entries()] as [string, T[]][]).map(([group, values]) => {
-                const options = values.map((value) => <option value={value} disabled={props.options[value].disabled} title={props.options[value].disabled ? props.options[value].disabledReason : undefined}>{props.options[value].text ?? value}</option>)
-                if (group === undefined) {
-                    return options
-                }
-                return <optgroup label={group}>{options}</optgroup>
-            })
-        }</select>
+        <select
+            autocomplete="off"
+            value={props.value}
+            style={props.style}
+            class={"pl-[15px] pr-[15px] " + (props.class ?? "")}
+            ref={ref1}
+            onChange={(ev) => props.onChange(ev.currentTarget.value as T)}
+            tabIndex={props.tabIndex}
+            onContextMenu={props.onContextMenu}
+            data-testid={props["data-testid"]}>{
+                ([...groups.entries()] as [string, T[]][]).map(([group, values]) => {
+                    const options = values.map((value) => <option value={value} disabled={props.options[value].disabled} title={props.options[value].disabled ? props.options[value].disabledReason : undefined}>{props.options[value].text ?? value}</option>)
+                    if (group === undefined) {
+                        return options
+                    }
+                    return <optgroup label={group}>{options}</optgroup>
+                })
+            }</select>
 
         {/* Hidden replication for auto resizing */}
         <span class="select-none inline-block pointer-events-none w-0 h-0 overflow-hidden">

diff --git a/ui/main.tsx b/ui/main.tsx
@@ -151,7 +151,24 @@ const App = () => {
                     <Highlight>SELECT </Highlight>
                     <span class="px-2 cursor-pointer hover:bg-gray-300 border-b-[1px] border-b-gray-500" onClick={() => { columnSelectDialogRef.current?.showModal() }}>{visibleColumnsSQL}</span>
                     <Highlight> FROM </Highlight>
-                    {tableName === undefined ? <>No tables</> : <Select value={tableName} onChange={(value) => { setViewerQuery({ tableName: value }).catch(console.error) }} options={Object.fromEntries(tableList.map(({ name: tableName, type }) => [tableName, { group: type }] as const).sort((a, b) => a[0].localeCompare(b[0])))} class="primary" data-testid="table-name" />}
+                    {tableName === undefined ? <>No tables</> : <Select
+                        value={tableName}
+                        onChange={(value) => { setViewerQuery({ tableName: value }).catch(console.error) }}
+                        options={Object.fromEntries(tableList.map(({ name: tableName, type }) => [tableName, { group: type }] as const).sort((a, b) => a[0].localeCompare(b[0])))}
+                        class="primary"
+                        onContextMenu={(ev) => {
+                            renderContextmenu(ev, <>
+                                <button onClick={async () => { setIsSettingsViewOpen(!isSettingsViewOpen) }}>Show Table Schema and Indexes</button>
+                                {tableType === "table" && <button onClick={async () => { useEditorStore.getState().dropTable(tableName); flash(document.querySelector("#editor")!) }}>Drop Table</button>}
+                                {tableType === "view" && <button onClick={async () => { useEditorStore.getState().dropView(tableName); flash(document.querySelector("#editor")!) }}>Drop View</button>}
+                                {tableType === "table" && <button onClick={async () => { await useEditorStore.getState().alterTable(tableName, undefined); flash(document.querySelector("#editor")!) }}>Alter Table</button>}
+                                <button onClick={async () => { useEditorStore.getState().createTable(tableName); flash(document.querySelector("#editor")!) }}>Create Table</button>
+                                {tableType === "table" && <button onClick={async () => { useEditorStore.getState().createIndex(tableName); flash(document.querySelector("#editor")!) }}>Create Index</button>}
+                                <hr />
+                                <button onClick={async () => { await navigator.clipboard.writeText(tableName); flash(document.querySelector("#editor")!) }}>Copy Table Name</button>
+                            </>)
+                        }}
+                        data-testid="table-name" />}
                 </>}
 
                 {/* Custom Query */}

diff --git a/ui/table.tsx b/ui/table.tsx
@@ -425,6 +425,8 @@ export const Table = () => {
                                     <button disabled={visibleColumns.length === 1} onClick={async () => {
                                         await setVisibleColumns(visibleColumns.filter((v) => v !== name))
                                     }}>Hide</button>
+                                    <hr />
+                                    <button disabled={visibleColumns.length === 1} onClick={() => navigator.clipboard.writeText(name)}>Copy Column Name</button>
                                 </>)
                             }}>
                             <code class="inline-block [word-break:break-word] [color:inherit] [font-family:inherit] [font-size:inherit]">
@@ -543,6 +545,9 @@ const TableRow = (props: { selected: boolean, readonly selectedColumn: string |
                         if (!await beforeUnmount()) { return }
                         await delete_(tableName, props.record, props.row)
                     }}>Delete…</button>
+                    <hr />
+                    <button onClick={() => navigator.clipboard.writeText(props.rowNumber + "")}>Copy Row Number</button>
+                    <button onClick={() => navigator.clipboard.writeText(props.record.rowid + "")}>Copy Rowid</button>
                 </>)
             }}
             data-testid={`row number ${props.rowNumber}`}>{props.rowNumber}</td>
@@ -567,7 +572,6 @@ const TableRow = (props: { selected: boolean, readonly selectedColumn: string |
                 onMouseDown={onMouseDown}
                 onContextMenu={(ev) => {
                     if (input?.textarea && !input.textarea.classList.contains("single-click")) { return }  // if the in-place input is visible
-                    ev.preventDefault()
                     renderContextmenu(ev, <>
                         <button onClick={onMouseDown}>Update</button>
                         <hr />