Improved the formatting of list and object tquery columns.

mblajek · Dec 15, 2023 · 7772e0b · 7772e0b
1 parent 856e72a
commit 7772e0b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/resources/js/components/ui/Table/TQueryTable.tsx b/resources/js/components/ui/Table/TQueryTable.tsx
@@ -177,8 +177,8 @@ export const TQueryTable: VoidComponent<TQueryTableProps> = (props) => {
     ["date", {cell: tableCells.date}],
     ["datetime", {cell: tableCells.datetime}],
     ["int", {cell: tableCells.int, size: 150}],
-    ["list", {cell: tableCells.list, enableSorting: false}],
-    ["object", {cell: tableCells.object, enableSorting: false}],
+    ["list", {enableSorting: false}],
+    ["object", {enableSorting: false}],
     ["string", {}],
     ["text", {enableSorting: false}],
     ["uuid", {cell: tableCells.uuid, enableSorting: false, size: 80}],

diff --git a/resources/js/components/ui/Table/table_cells.tsx b/resources/js/components/ui/Table/table_cells.tsx
@@ -24,17 +24,11 @@ export function useTableCells() {
   const dictionaries = useDictionaries();
   return {
     defaultHeader: ((ctx) => <Header ctx={ctx} />) satisfies HeaderComponent,
-    default: cellFunc((v) => <div class="wrapText">{String(v)}</div>),
+    default: cellFunc((v) => <div class="wrapText">{defaultFormatValue(v)}</div>),
     bool: cellFunc<boolean>((v) => (v ? t("bool_values.yes") : t("bool_values.no"))),
     date: cellFunc<string>((v) => DateTime.fromISO(v).toLocaleString(DATE_FORMAT)),
     datetime: cellFunc<string>((v) => DateTime.fromISO(v).toLocaleString(DATE_TIME_FORMAT)),
     int: cellFunc<number>((v) => <span class="w-full text-right">{NUMBER_FORMAT.format(v)}</span>),
-    list: cellFunc<readonly unknown[]>((v) => (
-      <ul>
-        <Index each={v}>{(item) => <li>{String(item())}</li>}</Index>
-      </ul>
-    )),
-    object: cellFunc<unknown>((v) => <pre>{JSON.stringify(v)}</pre>),
     uuid: cellFunc<string>((v) => <IdColumn id={v} />),
     uuidList: cellFunc<readonly string[]>((v) => (
       <div class="w-full flex flex-col">
@@ -50,6 +44,22 @@ export function useTableCells() {
   };
 }
 
+function defaultFormatValue(value: unknown) {
+  if (value == undefined) {
+    return "";
+  } else if (Array.isArray(value)) {
+    return (
+      <ul>
+        <Index each={value}>{(item) => <li>{defaultFormatValue(item())}</li>}</Index>
+      </ul>
+    );
+  } else if (typeof value === "object") {
+    return JSON.stringify(value);
+  } else {
+    return String(value);
+  }
+}
+
 export function cellFunc<V>(
   func: <T>(v: V, ctx: CellContext<T, unknown>) => JSX.Element | undefined,
   fallback?: () => JSX.Element,