feat: order

Author: invisal

src/libs/QueryBuilder.ts

@@ -25,6 +25,7 @@ interface QueryStates {
   select: (string | QueryRaw)[];
   limit?: number;
   offset?: number;
+  orderBy: { name: string; order: 'ASC' | 'DESC' }[];
 }
 
 abstract class QueryDialect {
@@ -48,6 +49,7 @@ export class QueryBuilder {
     type: 'select',
     where: [],
     select: [],
+    orderBy: [],
   };
 
   constructor(dialect: 'mysql') {
@@ -129,6 +131,10 @@ export class QueryBuilder {
     return this;
   }
 
+  orderBy(name: string, order: 'ASC' | 'DESC' = 'ASC') {
+    this.states.orderBy.push({ name, order });
+  }
+
   protected buildWhere(where: QueryWhere[]): {
     sql: string;
     binding: unknown[];
@@ -226,6 +232,14 @@ export class QueryBuilder {
           'FROM',
           this.dialect.escapeIdentifier(this.states.table),
           whereSql ? 'WHERE ' + whereSql : whereSql,
+          this.states.orderBy.length > 0
+            ? 'ORDER BY ' +
+              this.states.orderBy
+                .map(
+                  ({ name, order }) => `${this.escapeIdentifier(name)} ${order}`
+                )
+                .join(',')
+            : undefined,
           limitPart,
         ]
           .filter(Boolean)

src/renderer/components/OptimizeTable/TableHeader.tsx

@@ -30,6 +30,10 @@ export default function TableHeader({
 
       <div className={styles.tableCellContent}>{header.name}</div>
 
+      {header.rightIcon && (
+        <div className={styles.tableHeaderIcon}>{header.rightIcon}</div>
+      )}
+
       {header.resizable && (
         <TableHeaderResizeHandler idx={idx} onResize={onHeaderResize} />
       )}

src/renderer/components/OptimizeTable/index.tsx

@@ -15,6 +15,7 @@ export interface OptimizeTableHeaderProps {
   initialSize: number;
   resizable?: boolean;
   icon?: ReactElement;
+  rightIcon?: ReactElement;
   tooltip?: string;
   menu?: ContextMenuItemProps[];
 }

src/renderer/components/OptimizeTable/styles.module.css

@@ -34,6 +34,7 @@
 
 .tableCellContent {
   overflow: hidden;
+  flex-grow: 1;
   white-space: nowrap;
 }
 

src/renderer/screens/DatabaseScreen/QueryResultViewer/QueryResultTable.tsx

@@ -9,13 +9,29 @@ import { useTableCellManager } from './TableCellManager';
 import OptimizeTable from 'renderer/components/OptimizeTable';
 import Icon from 'renderer/components/Icon';
 import useDataTableContextMenu from './useDataTableContextMenu';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowDown,
+  faArrowUp,
+  faChevronDown,
+  faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
 
 interface QueryResultTableProps {
   headers: QueryResultHeader[];
   result: QueryResultWithIndex[];
+  onSortHeader?: (header: QueryResultHeader, by: 'ASC' | 'DESC') => void;
+  onSortReset?: () => void;
+  sortedHeader?: { header: QueryResultHeader; by: 'ASC' | 'DESC' };
 }
 
-function QueryResultTable({ headers, result }: QueryResultTableProps) {
+function QueryResultTable({
+  headers,
+  result,
+  onSortHeader,
+  onSortReset,
+  sortedHeader,
+}: QueryResultTableProps) {
   const [newRowCount, setNewRowCount] = useState(0);
   const { collector } = useQueryResultChange();
   const { cellManager } = useTableCellManager();
@@ -104,17 +120,53 @@ function QueryResultTable({ headers, result }: QueryResultTableProps) {
       icon: header?.schema?.primaryKey ? (
         <Icon.GreenKey size="sm" />
       ) : undefined,
+      rightIcon:
+        sortedHeader && sortedHeader.header.name === header.name ? (
+          sortedHeader.by === 'ASC' ? (
+            <FontAwesomeIcon icon={faChevronDown} />
+          ) : (
+            <FontAwesomeIcon icon={faChevronUp} />
+          )
+        ) : undefined,
       tooltip: header.columnDefinition?.comment,
       menu: [
-        { text: 'Order by ASC', disabled: true },
-        { text: 'Order by DESC', disabled: true },
+        {
+          text: 'Reset Order',
+          separator: true,
+          disabled: !onSortHeader,
+          onClick: () => {
+            if (onSortReset) {
+              onSortReset();
+            }
+          },
+        },
+        {
+          text: 'Order by ASC',
+          icon: <FontAwesomeIcon icon={faArrowDown} />,
+          disabled: !onSortHeader,
+          onClick: () => {
+            if (onSortHeader) {
+              onSortHeader(header, 'ASC');
+            }
+          },
+        },
+        {
+          text: 'Order by DESC',
+          icon: <FontAwesomeIcon icon={faArrowUp} />,
+          disabled: !onSortHeader,
+          onClick: () => {
+            if (onSortHeader) {
+              onSortHeader(header, 'DESC');
+            }
+          },
+        },
       ],
       initialSize: Math.max(
         header.name.length * 10,
         getInitialSizeByHeaderType(idx, header)
       ),
     }));
-  }, [result]);
+  }, [result, onSortHeader, sortedHeader]);
 
   const renderCell = useCallback(
     (y: number, x: number) => {

src/renderer/screens/DatabaseScreen/TableDataViewer/index.tsx

@@ -30,8 +30,16 @@ export default function TableDataViewer({
   const [loading, setLoading] = useState(true);
   const [totalRows, setTotalRows] = useState(0);
   const [data, setData] = useState<QueryResultWithIndex[]>([]);
-  const [headers, setHeaders] = useState<QueryResultHeader[]>([]);
 
+  const [sortedHeader, setSortedHeader] = useState<
+    | {
+        by: 'ASC' | 'DESC';
+        header: QueryResultHeader;
+      }
+    | undefined
+  >();
+
+  const [headers, setHeaders] = useState<QueryResultHeader[]>([]);
   const [rowRange, setRowRange] = useState<{ start: number; end: number }>({
     start: 0,
     end: 0,
@@ -52,12 +60,17 @@ export default function TableDataViewer({
   }, [databaseName, tableName, setTotalRows]);
 
   useEffect(() => {
-    const selectSql = qb()
+    const builder = qb()
       .table(`${databaseName}.${tableName}`)
       .select()
       .offset(PAGE_SIZE * page)
-      .limit(PAGE_SIZE)
-      .toRawSQL();
+      .limit(PAGE_SIZE);
+
+    if (sortedHeader) {
+      builder.orderBy(sortedHeader.header.name, sortedHeader.by);
+    }
+
+    const selectSql = builder.toRawSQL();
 
     setLoading(true);
     runner
@@ -80,7 +93,15 @@ export default function TableDataViewer({
         });
       })
       .catch();
-  }, [runner, page, setHeaders, setData, setTotalRows, setLoading]);
+  }, [
+    runner,
+    page,
+    sortedHeader,
+    setHeaders,
+    setData,
+    setTotalRows,
+    setLoading,
+  ]);
 
   const onNextPage = useCallback(() => {
     setPage((prev) => prev + 1);
@@ -97,7 +118,13 @@ export default function TableDataViewer({
           {!loading && (
             <QueryResultChangeProvider>
               <TableCellManagerProvider>
-                <QueryResultTable headers={headers} result={data} />
+                <QueryResultTable
+                  headers={headers}
+                  result={data}
+                  onSortHeader={(header, by) => setSortedHeader({ by, header })}
+                  onSortReset={() => setSortedHeader(undefined)}
+                  sortedHeader={sortedHeader}
+                />
               </TableCellManagerProvider>
             </QueryResultChangeProvider>
           )}

src/stories/OptimizedTable.stories.tsx

@@ -16,7 +16,9 @@ function StoryPage() {
       <ContextMenuProvider>
         <div
           style={{ width: '700px', height: 400, overflow: 'auto' }}
-          onContextMenu={(e) => e.preventDefault()}
+          onContextMenu={(e) => {
+            e.preventDefault();
+          }}
         >
           <OptimizeTable
             headers={[
@@ -26,6 +28,7 @@ function StoryPage() {
                 initialSize: 250,
                 tooltip: 'Hello Tooltip with resize',
                 resizable: true,
+                rightIcon: <FontAwesomeIcon icon={faArrowDown} />,
                 menu: [
                   {
                     text: 'Clear Order',