@proteinjs/db-ui 1.0.15 → 1.0.17

package/src/form/customizations/MigrationRecordFormCustomization.tsx

@@ -1,10 +1,10 @@
-import { Fields, FormButtons } from '@proteinjs/ui'
-import { Migration, getMigrationRunnerService, tables } from '@proteinjs/db'
-import { RecordFormCustomization } from '../RecordFormCustomization'
+import { Fields, FormButtons } from '@proteinjs/ui';
+import { Migration, getMigrationRunnerService, tables } from '@proteinjs/db';
+import { RecordFormCustomization } from '../RecordFormCustomization';
 
 export class MigrationRecordFormCustomization extends RecordFormCustomization {
   public table = tables.Migration;
-  
+
   getFormButtons(migration: Migration, defaultFormButtons: FormButtons<any>): FormButtons<any> {
     const formButtons = { ...defaultFormButtons };
     delete formButtons['create'];
@@ -22,8 +22,10 @@ export class MigrationRecordFormCustomization extends RecordFormCustomization {
         await getMigrationRunnerService().runMigration(migration.id);
         return `Started migration`;
       },
-      progressMessage: (fields: Fields) => { return `Starting migration` },
+      progressMessage: (fields: Fields) => {
+        return `Starting migration`;
+      },
     };
     return formButtons;
   }
-}
+}

package/src/pages/RecordFormPage.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import { FormPage, Page, PageComponentProps } from '@proteinjs/ui'
-import { getDbService, tableByName } from '@proteinjs/db'
-import { RecordForm } from '../form/RecordForm'
+import React from 'react';
+import { FormPage, Page, PageComponentProps } from '@proteinjs/ui';
+import { getDbService, tableByName } from '@proteinjs/db';
+import { RecordForm } from '../form/RecordForm';
 
 export const recordFormPage: Page = {
   name: 'Record Form',
@@ -9,20 +9,20 @@ export const recordFormPage: Page = {
   auth: {
     allUsers: true,
   },
-  component: ({...props}) => (
+  component: ({ ...props }) => (
     <FormPage>
       <DynamicRecordForm {...props} />
     </FormPage>
-  )
-}
+  ),
+};
 
 export const recordFormLink = (tableName: string, recordId: string) => {
   return `/${recordFormPage.path}?table=${tableName}&record=${recordId}`;
-}
+};
 
 export const newRecordFormLink = (tableName: string) => {
   return `/${recordFormPage.path}?table=${tableName}`;
-}
+};
 
 const DynamicRecordForm = ({ urlParams }: PageComponentProps) => {
   const [record, setRecord] = React.useState();
@@ -30,12 +30,14 @@ const DynamicRecordForm = ({ urlParams }: PageComponentProps) => {
   React.useEffect(() => {
     const fetchData = async () => {
       const { table } = getTable();
-      if (!table)
+      if (!table) {
         return;
+      }
 
       const recordId = urlParams['record'];
-      if (!recordId)
+      if (!recordId) {
         return;
+      }
 
       const fetchedRecord = await getDbService().get(table, { id: recordId });
       setRecord(fetchedRecord);
@@ -52,6 +54,7 @@ const DynamicRecordForm = ({ urlParams }: PageComponentProps) => {
       try {
         table = tableByName(tableName);
       } catch (error) {
+        // eslint-disable-next-line no-ex-assign
         error = `Table not accessible in UI: ${tableName}`;
       }
     } else {
@@ -64,18 +67,11 @@ const DynamicRecordForm = ({ urlParams }: PageComponentProps) => {
   function Form() {
     const { table, error } = getTable();
     if (!table) {
-      return <div>{ error }</div>;
+      return <div>{error}</div>;
     }
 
-    return (
-      <RecordForm
-        table={table}
-        record={record}
-      />
-    );
+    return <RecordForm table={table} record={record} />;
   }
 
-  return (
-    <Form />
-  );
-}
+  return <Form />;
+};

package/src/pages/RecordTablePage.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import { FormPage, Page, PageComponentProps } from '@proteinjs/ui'
-import { tableByName, Table } from '@proteinjs/db'
-import { RecordTable } from '../table/RecordTable'
+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',
@@ -9,48 +9,42 @@ export const recordTablePage: Page = {
   auth: {
     allUsers: true,
   },
-  component: ({...props}) => (
+  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;
+    let errorMessage;
     if (tableName) {
       try {
         table = tableByName(tableName);
       } catch (error) {
-        error = `Table not accessible in UI: ${tableName}`;
+        errorMessage = `Table not accessible in UI: ${tableName}`;
       }
     } else {
-      error = `Table not provided via the 'name' url param`;
+      errorMessage = `Table not provided via the 'name' url param`;
     }
 
     if (!table) {
-      return <div>{ error }</div>;
+      return <div>{errorMessage}</div>;
     }
 
-    return (
-      <RecordTable
-        table={table}
-      />
-    );
+    return <RecordTable table={table} />;
   }
 
-  return (
-    <Table />
-  );
-}
+  return <Table />;
+};

package/src/pages/TablesPage.tsx

@@ -1,7 +1,7 @@
-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'
+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',
@@ -10,13 +10,13 @@ export const tablesPage: Page = {
     <FormPage>
       <Tables />
     </FormPage>
-  )
-}
+  ),
+};
 
 type TableSummary = {
-  name: string,
-  rowCount: number,
-}
+  name: string;
+  rowCount: number;
+};
 
 class TableSummaryLoader implements TableLoader<TableSummary> {
   constructor(private tables: Table<any>[]) {}
@@ -25,7 +25,7 @@ class TableSummaryLoader implements TableLoader<TableSummary> {
     const page: RowWindow<TableSummary> = { rows: [], totalCount: this.tables.length };
     const tables = this.tables.slice(startIndex, endIndex);
     const dbService = getDbService();
-    for (let table of tables) {
+    for (const table of tables) {
       const rowCount = await dbService.getRowCount(table);
       page.rows.push({ name: table.name, rowCount });
     }
@@ -45,4 +45,4 @@ const Tables = () => {
       }}
     />
   );
-}
+};

package/src/pages/UuidGeneratorPage.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { FormPage, Page, Form, Fields, textField, FormButtons } from '@proteinjs/ui'
-import { v1 as uuidv1 } from 'uuid'
+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',
@@ -14,24 +14,24 @@ export const uuidGeneratorPage: Page = {
         buttons={buttons}
       />
     </FormPage>
-  )
-}
+  ),
+};
 
 class UuidFields extends Fields {
   uuid = textField<UuidFields>({
-    name: 'uuid'
+    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();
-		},
-	},
-};
+  generate: {
+    name: 'Generate',
+    style: {
+      color: 'primary',
+      variant: 'contained',
+    },
+    onClick: async (fields: UuidFields, buttons: FormButtons<UuidFields>) => {
+      fields.uuid.field.value = uuidv1();
+    },
+  },
+};

package/src/table/QueryTableLoader.ts

@@ -1,5 +1,5 @@
-import { Query, QueryBuilderFactory, Record, SortCriteria, Table, getDb } from '@proteinjs/db'
-import { RowWindow, TableLoader } from '@proteinjs/ui'
+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(
@@ -11,14 +11,14 @@ export class QueryTableLoader<T extends Record> implements TableLoader<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)
+    const qb = new QueryBuilderFactory()
+      .getQueryBuilder(this.table, this.query)
       .sort(sort)
-      .paginate({ start: startIndex, end: endIndex })
-    ;
+      .paginate({ start: startIndex, end: endIndex });
     const queryPromise = db.query(this.table, qb);
     const rowcountQb = new QueryBuilderFactory().getQueryBuilder(this.table, this.query);
     const rowCountPromise = db.getRowCount(this.table, rowcountQb);
     const [rows, totalCount] = await Promise.all([queryPromise, rowCountPromise]);
     return { rows, totalCount };
   }
-}
+}

package/src/table/RecordTable.tsx

@@ -1,22 +1,22 @@
-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, Table, getDb } from '@proteinjs/db'
-import { QueryTableLoader } from './QueryTableLoader'
-import { newRecordFormLink, recordFormLink } from '../pages/RecordFormPage'
-import { recordTableLink } from '../pages/RecordTablePage'
+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, 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'],
-}
+  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 {
@@ -27,9 +27,9 @@ function deleteButton<T extends Record>(table: Table<T>): TableButton<T> {
       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][] })
-      ;
+      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));
     },
@@ -53,19 +53,23 @@ function createButton<T extends Record>(table: Table<T>): TableButton<T> {
 export function RecordTable<T extends Record>(props: RecordTableProps<T>) {
   function defaultColumns() {
     const columnProperties: (keyof T)[] = [];
-    if ((props.table.columns as any)['name'])
+    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)
+    for (const columnProperty of Object.keys(props.table.columns)) {
+      if (columnProperties.length >= 5) {
         break;
+      }
 
-      if (columnProperty == 'name' || columnProperty == 'created' || columnProperty == 'updated')
+      if (columnProperty == 'name' || columnProperty == 'created' || columnProperty == 'updated') {
         continue;
+      }
 
       const column: Column<T, any> = (props.table.columns as any)[columnProperty];
-      if (column.options?.ui?.hidden)
+      if (column.options?.ui?.hidden) {
         continue;
+      }
 
       columnProperties.push(columnProperty as keyof T);
     }
@@ -86,15 +90,16 @@ export function RecordTable<T extends Record>(props: RecordTableProps<T>) {
 
   function buttons() {
     const buttons: TableButton<T>[] = [];
-    if (props.buttons)
+    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`}

package/tsconfig.json

@@ -1,18 +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"
-    }
-}
+  "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"
+  }
+}