feat: ability to edit table column

src/drivers/common/MySQLCommonInterface.ts

@@ -292,6 +292,7 @@ export default class MySQLCommonInterface extends SQLCommonInterface {
               table_schema: database,
               table_name: table,
             })
+            .orderBy('ORDINAL_POSITION')
             .toRawSQL(),
         },
       ],

src/libs/QueryBuilder.ts

@@ -24,6 +24,7 @@ interface QueryStates {
   where: QueryWhere[];
   select: string[];
   limit?: number;
+  orderBy?: [string, 'ASC' | 'DESC'];
 }
 
 abstract class QueryDialect {
@@ -98,6 +99,12 @@ export class QueryBuilder {
     return this;
   }
 
+  orderBy(field: string, by: 'ASC' | 'DESC' = 'ASC') {
+    if (!['ASC', 'DESC'].includes(by)) throw 'Order by must be DESC or ASC';
+    this.states.orderBy = [field, by];
+    return this;
+  }
+
   select(...columns: string[]) {
     this.states.select = this.states.select.concat(columns);
     return this;
@@ -195,6 +202,12 @@ export class QueryBuilder {
           'FROM',
           this.dialect.escapeIdentifier(this.states.table),
           whereSql ? 'WHERE ' + whereSql : whereSql,
+          this.states.orderBy
+            ? 'ORDER BY ' +
+              this.dialect.escapeIdentifier(this.states.orderBy[0]) +
+              ' ' +
+              this.states.orderBy[1]
+            : null,
           this.states.limit ? `LIMIT ?` : null,
         ]
           .filter(Boolean)

src/renderer/components/OptimizeTable/CellCheckInput.tsx

@@ -0,0 +1,9 @@
+import styles from './cells.module.scss';
+
+export default function CellCheckInput() {
+  return (
+    <div className={styles.checkContainer}>
+      <input type="checkbox" checked />
+    </div>
+  );
+}

src/renderer/components/OptimizeTable/CellGroupSelectInput.tsx

@@ -0,0 +1,81 @@
+import { useState, useEffect, useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styles from './cells.module.scss';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import AvoidOffscreen from '../AvoidOffscreen';
+import DropContainer from '../DropContainer';
+import OptionList from '../OptionList';
+import OptionListGroup from '../OptionList/OptionListGroup';
+import OptionListItem from '../OptionList/OptionListItem';
+import TextField from '../TextField';
+
+interface CellGroupSelectInputProps {
+  items: { name: string; items: { value: string; text: string }[] }[];
+  value?: string;
+}
+
+export default function CellGroupSelectInput({
+  items,
+  value,
+}: CellGroupSelectInputProps) {
+  const [show, setShow] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current && show) {
+      const onDocumentClick = (e: MouseEvent) => {
+        if (ref.current && !ref.current.contains(e.target as Node)) {
+          setShow(false);
+        }
+      };
+
+      document.addEventListener('click', onDocumentClick);
+      return () => document.removeEventListener('click', onDocumentClick);
+    }
+  }, [ref, show, setShow]);
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <div
+        className={styles.dropdownContainer}
+        onClick={() => {
+          setShow(true);
+        }}
+      >
+        <div className={styles.dropdownContent}>{value}</div>
+        <div className={styles.dropdownArrow}>
+          <FontAwesomeIcon icon={faChevronDown} />
+        </div>
+      </div>
+      {show && (
+        <div style={{ position: 'absolute', zIndex: 100 }}>
+          <AvoidOffscreen>
+            <DropContainer>
+              <div style={{ padding: 5 }}>
+                <TextField autoFocus placeholder="Search type" />
+              </div>
+              <div
+                style={{ height: 300, width: 250, overflowY: 'auto' }}
+                className="scroll"
+              >
+                <OptionList>
+                  {items.map((group) => {
+                    return (
+                      <OptionListGroup key={group.name} text={group.name}>
+                        {group.items.map((sub) => {
+                          return (
+                            <OptionListItem key={sub.value} text={sub.text} />
+                          );
+                        })}
+                      </OptionListGroup>
+                    );
+                  })}
+                </OptionList>
+              </div>
+            </DropContainer>
+          </AvoidOffscreen>
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/OptimizeTable/CellSingleLineInput.tsx

@@ -0,0 +1,44 @@
+import styles from './cells.module.scss';
+
+interface CellInputProps {
+  onLostFocus?: (value: string | null | undefined) => void;
+  readOnly?: boolean;
+  value?: string | null;
+  alignRight?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export default function CellSingleLineInput({
+  onLostFocus,
+  readOnly,
+  value,
+  onChange,
+  alignRight,
+}: CellInputProps) {
+  return (
+    <div className={styles.inputContainer}>
+      <input
+        onKeyPress={(e) => {
+          if (e.key === 'Enter') {
+            if (onLostFocus) {
+              onLostFocus(value);
+            }
+          }
+        }}
+        spellCheck="false"
+        autoFocus
+        type="text"
+        readOnly={readOnly}
+        className={styles.input}
+        style={alignRight ? { textAlign: 'right' } : undefined}
+        onBlur={() => {
+          if (onLostFocus) onLostFocus(value);
+        }}
+        onChange={(e) => {
+          if (onChange) onChange(e.currentTarget.value);
+        }}
+        value={value ?? ''}
+      />
+    </div>
+  );
+}

src/renderer/components/OptimizeTable/cells.module.scss

@@ -0,0 +1,46 @@
+.checkContainer {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  padding: 0px 10px;
+  user-select: none;
+  justify-content: center;
+
+  input {
+    transform: scale(1.2)
+  }
+}
+
+.inputContainer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.input {
+  padding: 5px 10px;
+  border: 1px solid var(--color-surface);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  font-size: 1rem;
+}
+
+.dropdownContainer {
+  display: flex;
+  padding: 0px 10px;
+
+  .dropdownContent, .dropdownArrow {
+    line-height: 32px;
+  }
+
+  .dropdownContent {
+    flex-grow: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}

src/renderer/components/OptionList/OptionListGroup.tsx

@@ -1,3 +1,14 @@
-export default function OptionListGroup() {
-  return <div></div>;
+import { PropsWithChildren } from 'react';
+import styles from './styles.module.scss';
+
+export default function OptionListGroup({
+  children,
+  text,
+}: PropsWithChildren<{ text: string }>) {
+  return (
+    <div>
+      <div className={styles.groupLabel}>{text}</div>
+      <div>{children}</div>
+    </div>
+  );
 }

src/renderer/components/OptionList/styles.module.scss

@@ -22,6 +22,12 @@
 
 }
 
+.groupLabel {
+  font-weight: bold;
+  padding: 5px 10px;
+  padding-left: 15px;
+}
+
 .item {
   display: flex;
   cursor: pointer;

src/renderer/components/ResizableTable/styles.module.scss

@@ -39,10 +39,6 @@
     border-right: 1px solid var(--color-table-grid);
   }
 
-  td {
-    overflow: hidden;
-  }
-
   th {
     padding: 5px 10px;
     position: sticky;

src/renderer/components/SchemaEditor/TableColumnsAlterDiff.ts

@@ -0,0 +1,69 @@
+import { TableColumnSchema } from 'types/SqlSchema';
+
+interface TableColumnsAlterDiffNode {
+  index: number;
+  original: TableColumnSchema | null;
+  changed: Partial<TableColumnSchema> | null;
+}
+
+interface ColumnNode extends TableColumnsAlterDiffNode {
+  index: number;
+  original: TableColumnSchema | null;
+  changed: Partial<TableColumnSchema> | null;
+  next: ColumnNode | null;
+  prev: ColumnNode | null;
+}
+
+export class TableColumnsAlterDiff {
+  protected root: ColumnNode | null = null;
+
+  /**
+   * Initial from original columns
+   *
+   * @param columns
+   * @returns
+   */
+  constructor(columns: TableColumnSchema[]) {
+    const root: ColumnNode = {
+      next: null,
+      prev: null,
+      index: 0,
+      original: columns[0],
+      changed: {},
+    };
+
+    let currentNode = root;
+    for (let i = 1; i < columns.length; i++) {
+      const newNode: ColumnNode = {
+        next: null,
+        prev: currentNode,
+        index: i,
+        original: columns[i],
+        changed: {},
+      };
+
+      currentNode.next = newNode;
+      currentNode = newNode;
+    }
+
+    this.root = root;
+  }
+
+  toArray() {
+    if (!this.root) return [];
+
+    const arr: TableColumnsAlterDiffNode[] = [];
+    let ptr: ColumnNode | null = this.root;
+
+    while (ptr) {
+      arr.push({
+        index: ptr.index,
+        original: ptr.original ? Object.freeze({ ...ptr.original }) : null,
+        changed: Object.freeze({ ...ptr.changed }),
+      });
+      ptr = ptr.next;
+    }
+
+    return arr;
+  }
+}