feat: add icons for entities

invm · Dec 31, 2023 · d2b1646 · d2b1646
1 parent 4019f1b
commit d2b1646
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/src/components/Screens/Console/Sidebar/Sidebar.tsx b/src/components/Screens/Console/Sidebar/Sidebar.tsx
@@ -158,15 +158,16 @@ export const Sidebar = () => {
         <For each={getSchemaEntity('tables')}>
           {(table) => (
             <div class="mb-1 px-2 min-w-full w-fit">
-              <TableColumnsCollapse title={table.name}>
+              <TableColumnsCollapse title={table.name} entity="tables">
                 <For each={table.columns}>
                   {(column) => (
                     <button
                       onClick={() => insertColumnName(column.name)}
                       class="flex btn-ghost w-full justify-between items-center w-full border-b-2 border-base-300">
                       <span class="text-xs font-semibold">{column.name}</span>
-                      {console.log({ column })}
-                      <span class="text-xs font-medium ml-2">{column.props.COLUMN_TYPE ?? column.props.column_type}</span>
+                      <span class="text-xs font-medium ml-2">
+                        {column.props.COLUMN_TYPE ?? column.props.column_type}
+                      </span>
                     </button>
                   )}
                 </For>
@@ -178,14 +179,16 @@ export const Sidebar = () => {
         <For each={getSchemaEntity('views')}>
           {(table) => (
             <div class="mb-1 px-2 min-w-full w-fit">
-              <TableColumnsCollapse title={table.name}>
+              <TableColumnsCollapse title={table.name} entity="routines">
                 <For each={table.columns}>
                   {(column) => (
                     <button
                       onClick={() => insertColumnName(column.name)}
                       class="flex btn-ghost w-full justify-between items-center w-full border-b-2 border-base-300">
                       <span class="text-xs font-semibold">{column.name}</span>
-                      <span class="text-xs font-medium ml-2">{column.props.COLUMN_TYPE}</span>
+                      <span class="text-xs font-medium ml-2">
+                        {column.props.COLUMN_TYPE ?? column.props.column_type}
+                      </span>
                     </button>
                   )}
                 </For>

diff --git a/src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx b/src/components/Screens/Console/Sidebar/TableColumnsCollapse.tsx
@@ -6,8 +6,9 @@ import { newContentTab, TableStructureContentTabData } from 'services/Connection
 
 import { invoke } from '@tauri-apps/api';
 import { QueryTaskEnqueueResult, ResultSet } from 'interfaces';
+import { Table } from 'components/UI/Icons';
 
-export const TableColumnsCollapse = (props: { title: string; children: JSXElement }) => {
+export const TableColumnsCollapse = (props: { entity: 'routines' | 'tables'; title: string; children: JSXElement }) => {
   const [open, setOpen] = createSignal(false);
 
   const {
@@ -108,7 +109,10 @@ export const TableColumnsCollapse = (props: { title: string; children: JSXElemen
             />
           </svg>
         </label>
-        <span class="ml-1 font-semibold">{props.title}</span>
+        <span class="px-2">
+          <Table color={props.entity === 'tables' ? 'info' : 'warning'} />
+        </span>
+        <span class="font-semibold">{props.title}</span>
       </span>
       <div
         class="pl-2"

diff --git a/src/components/UI/Alert.tsx b/src/components/UI/Alert.tsx
@@ -11,23 +11,17 @@ export type AlertTypes = keyof typeof AlertColors;
 
 const Alert = (props: { children: JSX.Element; color: AlertTypes }) => {
   return (
-    <div
-      class={`flex px-2 py-1 items-center text-sm rounded-lg ${AlertColors[props.color]
-        }`}
-      role="alert"
-    >
+    <div class={`flex px-2 py-1 items-center text-sm rounded-lg ${AlertColors[props.color]}`} role="alert">
       <svg
         aria-hidden="true"
         class="flex-shrink-0 inline w-5 h-5 mr-3"
         fill="currentColor"
         viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+        xmlns="http://www.w3.org/2000/svg">
         <path
           fill-rule="evenodd"
           d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-          clip-rule="evenodd"
-        ></path>
+          clip-rule="evenodd"></path>
       </svg>
       <span class="sr-only">{props.color}</span>
       <div>{props.children}</div>

diff --git a/src/components/UI/Icons/Table.tsx b/src/components/UI/Icons/Table.tsx
@@ -0,0 +1,25 @@
+export const Table = (props: { color: 'success' | 'warning' | 'info' | 'error' }) => {
+  const styles = {
+    success: 'w-3 h-3 text-success',
+    warning: 'w-3 h-3 text-warning',
+    info: 'w-3 h-3 text-info',
+    error: 'w-3 h-3 text-error',
+  };
+  const cls = styles[props.color];
+  return (
+    <svg
+      class={cls}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="14"
+      fill="none"
+      viewBox="0 0 20 14">
+      <path
+        stroke="currentColor"
+        stroke-width="2"
+        d="M1 5h18M1 9h18m-9-4v8m-8 0h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1Z"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/UI/Icons/index.ts b/src/components/UI/Icons/index.ts
@@ -10,6 +10,7 @@ export * from "./Home";
 export * from "./Pen";
 export * from "./QuestionMark";
 export * from "./Refresh";
+export * from "./Table";
 export * from "./Terminal";
 export * from "./ThreeDots";
 export * from "./UserSettings";