@proteinjs/db-ui 1.0.3

package/src/pages/RecordTablePage.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { FormPage, Page, PageComponentProps } from '@proteinjs/ui'
+import { tableByName, Table } from '@proteinjs/db'
+import { RecordTable } from '../table/RecordTable'
+
+export const recordTablePage: Page = {
+  name: 'Record Table',
+  path: 'record/table',
+  auth: {
+    allUsers: true,
+  },
+  component: ({...props}) => (
+    <FormPage>
+      <DynamicRecordTable {...props} />
+    </FormPage>
+  )
+}
+
+export const recordTableLink = (table: Table<any>) => {
+  return `/${recordTablePage.path}?name=${table.name}`;
+}
+
+export const recordTableLinkByName = (tableName: string) => {
+  return `/${recordTablePage.path}?name=${tableName}`;
+}
+
+const DynamicRecordTable = ({ urlParams }: PageComponentProps) => {
+  function Table() {
+    const tableName = urlParams['name'];
+    let table;
+    let error;
+    if (tableName) {
+      try {
+        table = tableByName(tableName);
+      } catch (error) {
+        error = `Table not accessible in UI: ${tableName}`;
+      }
+    } else {
+      error = `Table not provided via the 'name' url param`;
+    }
+
+    if (!table) {
+      return <div>{ error }</div>;
+    }
+
+    return (
+      <RecordTable
+        table={table}
+      />
+    );
+  }
+
+  return (
+    <Table />
+  );
+}

package/src/pages/TablesPage.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { FormPage, Page, TableLoader, Table as TableComponent, RowWindow } from '@proteinjs/ui'
+import { getTables, getDbService, Table } from '@proteinjs/db'
+import { recordTableLinkByName } from './RecordTablePage'
+
+export const tablesPage: Page = {
+  name: 'Tables',
+  path: 'tables',
+  component: () => (
+    <FormPage>
+      <Tables />
+    </FormPage>
+  )
+}
+
+type TableSummary = {
+  name: string,
+  rowCount: number,
+}
+
+class TableSummaryLoader implements TableLoader<TableSummary> {
+  constructor(private tables: Table<any>[]) {}
+
+  async load(startIndex: number, endIndex: number) {
+    const page: RowWindow<TableSummary> = { rows: [], totalCount: this.tables.length };
+    const tables = this.tables.slice(startIndex, endIndex);
+    const dbService = getDbService();
+    for (let table of tables) {
+      const rowCount = await dbService.getRowCount(table);
+      page.rows.push({ name: table.name, rowCount });
+    }
+
+    return page;
+  }
+}
+
+const Tables = () => {
+  return (
+    <TableComponent
+      title='Tables'
+      columns={['name', 'rowCount']}
+      tableLoader={new TableSummaryLoader(getTables())}
+      rowOnClickRedirectUrl={async (row: TableSummary) => {
+        return recordTableLinkByName(row.name);
+      }}
+    />
+  );
+}

package/src/pages/UuidGeneratorPage.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { FormPage, Page, Form, Fields, textField, FormButtons } from '@proteinjs/ui'
+import { v1 as uuidv1 } from 'uuid'
+
+export const uuidGeneratorPage: Page = {
+  name: 'Uuid Generator',
+  path: 'uuid-generator',
+  component: () => (
+    <FormPage>
+      <Form<UuidFields, typeof buttons>
+        name='Uuid Generator'
+        createFields={() => new UuidFields()}
+        fieldLayout={['uuid']}
+        buttons={buttons}
+      />
+    </FormPage>
+  )
+}
+
+class UuidFields extends Fields {
+  uuid = textField<UuidFields>({
+    name: 'uuid'
+  });
+}
+
+const buttons: FormButtons<UuidFields> = {
+	generate: {
+		name: 'Generate',
+		style: {
+			color: 'primary',
+			variant: 'contained',
+		},
+		onClick: async (fields: UuidFields, buttons: FormButtons<UuidFields>) => {
+			fields.uuid.field.value = uuidv1().split('-').join('');
+		},
+	},
+};

package/src/table/QueryTableLoader.ts

@@ -0,0 +1,23 @@
+import { Query, QueryBuilderFactory, Record, SortCriteria, Table, getDb } from '@proteinjs/db'
+import { RowWindow, TableLoader } from '@proteinjs/ui'
+
+export class QueryTableLoader<T extends Record> implements TableLoader<T> {
+  constructor(
+    private table: Table<T>,
+    private query?: Query<T>,
+    private sort?: SortCriteria<T>[]
+  ) {}
+
+  async load(startIndex: number, endIndex: number): Promise<RowWindow<T>> {
+    const db = getDb();
+    const sort: any = this.sort ? this.sort : [{ field: 'created', desc: true }];
+    const qb = new QueryBuilderFactory().getQueryBuilder(this.table, this.query)
+      .sort(sort)
+      .paginate({ start: startIndex, end: endIndex })
+    ;
+    const queryPromise = db.query(this.table, qb);
+    const rowCountPromise = db.getRowCount(this.table, qb);
+    const [rows, totalCount] = await Promise.all([queryPromise, rowCountPromise]);
+    return { rows, totalCount };
+  }
+}

package/src/table/RecordTable.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { Delete, Add } from '@mui/icons-material'
+import S from 'string'
+import { TableButton, Table as TableComponent, TableLoader, TableProps } from '@proteinjs/ui'
+import { Column, QueryBuilderFactory, Record, ReferenceArrayColumn, StringColumn, Table, getDb } from '@proteinjs/db'
+import { QueryTableLoader } from './QueryTableLoader'
+import { newRecordFormLink, recordFormLink } from '../pages/RecordFormPage'
+import { recordTableLink } from '../pages/RecordTablePage'
+
+export type RecordTableProps<T extends Record> = {
+  table: Table<T>,
+  tableLoader?: TableLoader<T>,
+  title?: TableProps<T>['title'],
+  description?: TableProps<T>['description'],
+  columns?: TableProps<T>['columns'],
+  defaultRowsPerPage?: TableProps<T>['defaultRowsPerPage'],
+  buttons?: TableProps<T>['buttons'],
+  rowOnClickRedirectUrl?: TableProps<T>['rowOnClickRedirectUrl'],
+}
+
+function deleteButton<T extends Record>(table: Table<T>): TableButton<T> {
+  return {
+    name: `Delete selected rows`,
+    icon: Delete,
+    visibility: {
+      showWhenRowsSelected: true,
+      showWhenNoRowsSelected: false,
+    },
+    onClick: async (selectedRows, navigate) => {
+      const qb = new QueryBuilderFactory().getQueryBuilder(table)
+        .condition({ field: 'id', operator: 'IN', value: selectedRows.map(row => row.id) as T[keyof T][] })
+      ;
+      await getDb().delete(table, qb);
+      navigate(recordTableLink(table));
+    },
+  };
+}
+
+function createButton<T extends Record>(table: Table<T>): TableButton<T> {
+  return {
+    name: `Create ${S(table.name).humanize().s}`,
+    icon: Add,
+    visibility: {
+      showWhenRowsSelected: false,
+      showWhenNoRowsSelected: true,
+    },
+    onClick: async (selectedRows, navigate) => {
+      navigate(newRecordFormLink(table.name));
+    },
+  };
+}
+
+export function RecordTable<T extends Record>(props: RecordTableProps<T>) {
+  function defaultColumns() {
+    const columnProperties: (keyof T)[] = [];
+    if ((props.table.columns as any)['name'])
+      columnProperties.push('name' as keyof T);
+
+    for (let columnProperty of Object.keys(props.table.columns)) {
+      if (columnProperties.length >= 5)
+        break;
+
+      if (columnProperty == 'name' || columnProperty == 'created' || columnProperty == 'updated')
+        continue;
+
+      const column: Column<T, any> = (props.table.columns as any)[columnProperty];
+      if (column.options?.ui?.hidden)
+        continue;
+
+      if ((column instanceof StringColumn && column.maxLength === 'MAX') || column instanceof ReferenceArrayColumn)
+        continue;
+
+      columnProperties.push(columnProperty as keyof T);
+    }
+
+    columnProperties.push('created');
+    columnProperties.push('updated');
+
+    return columnProperties;
+  }
+
+  function defaultTableLoader() {
+    return new QueryTableLoader(props.table, undefined, [{ field: 'updated', desc: true }]);
+  }
+
+  async function defaultRowOnClickRedirectUrl(row: T) {
+    return recordFormLink(props.table.name, row.id);
+  }
+
+  function buttons() {
+    const buttons: TableButton<T>[] = [];
+    if (props.buttons)
+      buttons.push(...props.buttons);
+
+    buttons.push(deleteButton(props.table));
+    buttons.push(createButton(props.table));
+
+    return buttons;
+  }
+  
+  return (
+    <TableComponent
+      title={props.title ? props.title : `${S(props.table.name).humanize().toString()} Table`}
+      description={props.description}
+      columns={props.columns ? props.columns : defaultColumns()}
+      tableLoader={props.tableLoader ? props.tableLoader : defaultTableLoader()}
+      rowOnClickRedirectUrl={props.rowOnClickRedirectUrl ? props.rowOnClickRedirectUrl : defaultRowOnClickRedirectUrl}
+      defaultRowsPerPage={props.defaultRowsPerPage}
+      buttons={buttons()}
+    />
+  );
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "rootDir": "./",
+        "target": "es5",
+        "module": "commonjs",
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist/",
+        "strict": true,
+        "noImplicitAny": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "jsx": "react"
+    }
+}