@proteinjs/db-ui 1.0.3

package/dist/src/table/RecordTable.js

@@ -0,0 +1,138 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordTable = void 0;
+var react_1 = __importDefault(require("react"));
+var icons_material_1 = require("@mui/icons-material");
+var string_1 = __importDefault(require("string"));
+var ui_1 = require("@proteinjs/ui");
+var db_1 = require("@proteinjs/db");
+var QueryTableLoader_1 = require("./QueryTableLoader");
+var RecordFormPage_1 = require("../pages/RecordFormPage");
+var RecordTablePage_1 = require("../pages/RecordTablePage");
+function deleteButton(table) {
+    var _this = this;
+    return {
+        name: "Delete selected rows",
+        icon: icons_material_1.Delete,
+        visibility: {
+            showWhenRowsSelected: true,
+            showWhenNoRowsSelected: false,
+        },
+        onClick: function (selectedRows, navigate) { return __awaiter(_this, void 0, void 0, function () {
+            var qb;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        qb = new db_1.QueryBuilderFactory().getQueryBuilder(table)
+                            .condition({ field: 'id', operator: 'IN', value: selectedRows.map(function (row) { return row.id; }) });
+                        return [4 /*yield*/, (0, db_1.getDb)().delete(table, qb)];
+                    case 1:
+                        _a.sent();
+                        navigate((0, RecordTablePage_1.recordTableLink)(table));
+                        return [2 /*return*/];
+                }
+            });
+        }); },
+    };
+}
+function createButton(table) {
+    var _this = this;
+    return {
+        name: "Create ".concat((0, string_1.default)(table.name).humanize().s),
+        icon: icons_material_1.Add,
+        visibility: {
+            showWhenRowsSelected: false,
+            showWhenNoRowsSelected: true,
+        },
+        onClick: function (selectedRows, navigate) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                navigate((0, RecordFormPage_1.newRecordFormLink)(table.name));
+                return [2 /*return*/];
+            });
+        }); },
+    };
+}
+function RecordTable(props) {
+    function defaultColumns() {
+        var _a, _b;
+        var columnProperties = [];
+        if (props.table.columns['name'])
+            columnProperties.push('name');
+        for (var _i = 0, _c = Object.keys(props.table.columns); _i < _c.length; _i++) {
+            var columnProperty = _c[_i];
+            if (columnProperties.length >= 5)
+                break;
+            if (columnProperty == 'name' || columnProperty == 'created' || columnProperty == 'updated')
+                continue;
+            var column = props.table.columns[columnProperty];
+            if ((_b = (_a = column.options) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.hidden)
+                continue;
+            if ((column instanceof db_1.StringColumn && column.maxLength === 'MAX') || column instanceof db_1.ReferenceArrayColumn)
+                continue;
+            columnProperties.push(columnProperty);
+        }
+        columnProperties.push('created');
+        columnProperties.push('updated');
+        return columnProperties;
+    }
+    function defaultTableLoader() {
+        return new QueryTableLoader_1.QueryTableLoader(props.table, undefined, [{ field: 'updated', desc: true }]);
+    }
+    function defaultRowOnClickRedirectUrl(row) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, (0, RecordFormPage_1.recordFormLink)(props.table.name, row.id)];
+            });
+        });
+    }
+    function buttons() {
+        var buttons = [];
+        if (props.buttons)
+            buttons.push.apply(buttons, props.buttons);
+        buttons.push(deleteButton(props.table));
+        buttons.push(createButton(props.table));
+        return buttons;
+    }
+    return (react_1.default.createElement(ui_1.Table, { title: props.title ? props.title : "".concat((0, string_1.default)(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() }));
+}
+exports.RecordTable = RecordTable;
+//# sourceMappingURL=RecordTable.js.map

package/dist/src/table/RecordTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordTable.js","sourceRoot":"","sources":["../../../src/table/RecordTable.tsx"],"names":[],"mappings":"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"}

package/generated/index.ts

@@ -0,0 +1,49 @@
+/** Load Dependency Source Graphs */
+
+import '@emotion/react';
+import '@emotion/styled';
+import '@mui/icons-material';
+import '@mui/material';
+import '@proteinjs/db';
+import '@proteinjs/reflection';
+import '@proteinjs/ui';
+import '@proteinjs/util';
+import 'moment';
+import 'react';
+import 'string';
+import 'uuid';
+
+
+/** Generate Source Graph */
+
+const sourceGraph = "{\"options\":{\"directed\":true,\"multigraph\":false,\"compound\":false},\"nodes\":[{\"v\":\"@proteinjs/db-ui/QueryTableLoader\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"QueryTableLoader\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/table/QueryTableLoader.ts\",\"qualifiedName\":\"@proteinjs/db-ui/QueryTableLoader\",\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"properties\":[{\"name\":\"table\",\"type\":{\"packageName\":\"\",\"name\":\"Table<T>\",\"filePath\":null,\"qualifiedName\":\"/Table<T>\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"private\"},{\"name\":\"query\",\"type\":{\"packageName\":\"\",\"name\":\"Query<T>\",\"filePath\":null,\"qualifiedName\":\"/Query<T>\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"private\"},{\"name\":\"sort\",\"type\":{\"packageName\":\"\",\"name\":\"SortCriteria<T>[]\",\"filePath\":null,\"qualifiedName\":\"/SortCriteria<T>[]\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":true,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"private\"}],\"methods\":[{\"name\":\"load\",\"returnType\":{\"packageName\":\"\",\"name\":\"Promise<RowWindow<T>>\",\"filePath\":null,\"qualifiedName\":\"/Promise<RowWindow<T>>\",\"typeParameters\":null,\"directParents\":null},\"isAsync\":true,\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"parameters\":[{\"name\":\"startIndex\",\"type\":{\"packageName\":\"\",\"name\":\"number\",\"filePath\":null,\"qualifiedName\":\"/number\",\"typeParameters\":null,\"directParents\":null}},{\"name\":\"endIndex\",\"type\":{\"packageName\":\"\",\"name\":\"number\",\"filePath\":null,\"qualifiedName\":\"/number\",\"typeParameters\":null,\"directParents\":null}}]}],\"typeParameters\":[\"/T extends Record\"],\"directParentInterfaces\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"TableLoader\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/TableLoader\",\"properties\":[],\"methods\":[],\"typeParameters\":[\"/T\"],\"directParents\":[]}],\"directParentClasses\":[],\"sourceType\":2}},{\"v\":\"@proteinjs/ui/TableLoader\"},{\"v\":\"@proteinjs/db-ui/RecordFormCustomization\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"RecordFormCustomization\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/form/RecordFormCustomization.tsx\",\"qualifiedName\":\"@proteinjs/db-ui/RecordFormCustomization\",\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"properties\":[{\"name\":\"table\",\"type\":{\"packageName\":\"\",\"name\":\"Table<any>\",\"filePath\":null,\"qualifiedName\":\"/Table<any>\",\"typeParameters\":null,\"directParents\":null},\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"}],\"methods\":[{\"name\":\"getFormButtons\",\"returnType\":{\"packageName\":\"\",\"name\":\"FormButtons<any>\",\"filePath\":null,\"qualifiedName\":\"/FormButtons<any>\",\"typeParameters\":null,\"directParents\":null},\"isAsync\":false,\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"parameters\":[{\"name\":\"record\",\"type\":{\"packageName\":\"\",\"name\":\"any\",\"filePath\":null,\"qualifiedName\":\"/any\",\"typeParameters\":null,\"directParents\":null}},{\"name\":\"defaultFormButtons\",\"type\":{\"packageName\":\"\",\"name\":\"FormButtons<any>\",\"filePath\":null,\"qualifiedName\":\"/FormButtons<any>\",\"typeParameters\":null,\"directParents\":null}}]}],\"typeParameters\":[],\"directParentInterfaces\":[{\"packageName\":\"@proteinjs/reflection\",\"name\":\"Loadable\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/reflection/Loadable\",\"properties\":[],\"methods\":[],\"typeParameters\":[],\"directParents\":[]}],\"directParentClasses\":[],\"sourceType\":2}},{\"v\":\"@proteinjs/reflection/Loadable\"},{\"v\":\"@proteinjs/db-ui/recordFormPage\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"recordFormPage\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/pages/RecordFormPage.tsx\",\"qualifiedName\":\"@proteinjs/db-ui/recordFormPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}},{\"v\":\"@proteinjs/ui/Page\"},{\"v\":\"@proteinjs/db-ui/recordTablePage\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"recordTablePage\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/pages/RecordTablePage.tsx\",\"qualifiedName\":\"@proteinjs/db-ui/recordTablePage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}},{\"v\":\"@proteinjs/db-ui/tablesPage\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"tablesPage\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/pages/TablesPage.tsx\",\"qualifiedName\":\"@proteinjs/db-ui/tablesPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}},{\"v\":\"@proteinjs/db-ui/uuidGeneratorPage\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"uuidGeneratorPage\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/pages/UuidGeneratorPage.tsx\",\"qualifiedName\":\"@proteinjs/db-ui/uuidGeneratorPage\",\"type\":{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":[{\"packageName\":\"@proteinjs/ui\",\"name\":\"Page\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/ui/Page\",\"typeParameters\":[],\"directParents\":null}]},\"isExported\":true,\"isConst\":true,\"sourceType\":0}},{\"v\":\"@proteinjs/db-ui/MigrationRecordFormCustomization\",\"value\":{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"MigrationRecordFormCustomization\",\"filePath\":\"/home/runner/work/db/db/packages/ui/src/form/customizations/MigrationRecordFormCustomization.tsx\",\"qualifiedName\":\"@proteinjs/db-ui/MigrationRecordFormCustomization\",\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"properties\":[{\"name\":\"table\",\"type\":null,\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\"}],\"methods\":[{\"name\":\"getFormButtons\",\"returnType\":{\"packageName\":\"\",\"name\":\"FormButtons<any>\",\"filePath\":null,\"qualifiedName\":\"/FormButtons<any>\",\"typeParameters\":null,\"directParents\":null},\"isAsync\":false,\"isOptional\":false,\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"parameters\":[{\"name\":\"migration\",\"type\":{\"packageName\":\"@proteinjs/db\",\"name\":\"Migration\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/db/Migration\",\"typeParameters\":null,\"directParents\":null}},{\"name\":\"defaultFormButtons\",\"type\":{\"packageName\":\"\",\"name\":\"FormButtons<any>\",\"filePath\":null,\"qualifiedName\":\"/FormButtons<any>\",\"typeParameters\":null,\"directParents\":null}}]}],\"typeParameters\":[],\"directParentInterfaces\":[],\"directParentClasses\":[{\"packageName\":\"@proteinjs/db-ui\",\"name\":\"RecordFormCustomization\",\"filePath\":null,\"qualifiedName\":\"@proteinjs/db-ui/RecordFormCustomization\",\"isAbstract\":false,\"isStatic\":false,\"visibility\":\"public\",\"properties\":[],\"methods\":[],\"typeParameters\":[],\"directParentInterfaces\":[],\"directParentClasses\":[]}],\"sourceType\":2}}],\"edges\":[{\"v\":\"@proteinjs/db-ui/QueryTableLoader\",\"w\":\"@proteinjs/ui/TableLoader\",\"value\":\"implements interface\"},{\"v\":\"@proteinjs/db-ui/RecordFormCustomization\",\"w\":\"@proteinjs/reflection/Loadable\",\"value\":\"implements interface\"},{\"v\":\"@proteinjs/db-ui/recordFormPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"},{\"v\":\"@proteinjs/db-ui/recordTablePage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"},{\"v\":\"@proteinjs/db-ui/tablesPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"},{\"v\":\"@proteinjs/db-ui/uuidGeneratorPage\",\"w\":\"@proteinjs/ui/Page\",\"value\":\"has type\"},{\"v\":\"@proteinjs/db-ui/MigrationRecordFormCustomization\",\"w\":\"@proteinjs/db-ui/RecordFormCustomization\",\"value\":\"extends class\"}]}";
+
+
+/** Generate Source Links */
+
+import { QueryTableLoader } from '../src/table/QueryTableLoader';
+import { RecordFormCustomization } from '../src/form/RecordFormCustomization';
+import { recordFormPage } from '../src/pages/RecordFormPage';
+import { recordTablePage } from '../src/pages/RecordTablePage';
+import { tablesPage } from '../src/pages/TablesPage';
+import { uuidGeneratorPage } from '../src/pages/UuidGeneratorPage';
+import { MigrationRecordFormCustomization } from '../src/form/customizations/MigrationRecordFormCustomization';
+
+const sourceLinks = {
+	'@proteinjs/db-ui/QueryTableLoader': QueryTableLoader,
+	'@proteinjs/db-ui/RecordFormCustomization': RecordFormCustomization,
+	'@proteinjs/db-ui/recordFormPage': recordFormPage,
+	'@proteinjs/db-ui/recordTablePage': recordTablePage,
+	'@proteinjs/db-ui/tablesPage': tablesPage,
+	'@proteinjs/db-ui/uuidGeneratorPage': uuidGeneratorPage,
+	'@proteinjs/db-ui/MigrationRecordFormCustomization': MigrationRecordFormCustomization,
+};
+
+
+/** Load Source Graph and Links */
+
+import { SourceRepository } from '@proteinjs/reflection';
+SourceRepository.merge(sourceGraph, sourceLinks);
+
+
+export * from '../index';

package/index.ts

@@ -0,0 +1,4 @@
+export * from './src/table/RecordTable'
+export * from './src/table/QueryTableLoader'
+export * from './src/form/RecordForm'
+export * from './src/form/RecordFormCustomization'

package/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+	"roots": [
+	  	"<rootDir>/test"
+	],
+	"transform": {
+	  	"^.+\\.tsx?$": "ts-jest"
+	},
+	"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+	"moduleFileExtensions": [
+		"ts",
+		"tsx",
+		"js",
+		"jsx",
+		"json",
+		"node"
+	],
+	"testEnvironment": "node"
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@proteinjs/db-ui",
+    "version": "1.0.3",
+    "description": "Db ui components",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/proteinjs/db.git"
+    },
+    "bugs": {
+        "url": "https://github.com/proteinjs/db/issues"
+    },
+    "homepage": "https://github.com/proteinjs/db#readme",
+    "author": "Brent Bahry",
+    "license": "MIT",
+    "scripts": {
+        "clean": "rm -rf dist/ node_modules/ generated/ package-lock.json",
+        "build": "reflection-build && tsc",
+        "watch": "reflection-watch"
+    },
+    "dependencies": {
+        "@emotion/react": "11.11.1",
+        "@emotion/styled": "11.11.0",
+        "@mui/icons-material": "5.14.11",
+        "@mui/material": "5.14.11",
+        "@proteinjs/db": "1.0.3",
+        "@proteinjs/reflection": "1.0.2",
+        "@proteinjs/ui": "1.0.1",
+        "@proteinjs/util": "1.0.18",
+        "moment": "2.29.4",
+        "react": "18.2.0",
+        "string": "3.3.3",
+        "uuid": "8.3.0"
+    },
+    "devDependencies": {
+        "@proteinjs/reflection-build": "1.0.5",
+        "@types/jest": "29.5.5",
+        "@types/node": "14.0.27",
+        "@types/react": "18.2.23",
+        "@types/string": "0.0.33",
+        "@types/uuid": "8.3.0",
+        "jest": "29.7.0",
+        "ts-jest": "29.1.1",
+        "typescript": "5.2.2"
+    },
+    "main": "./dist/generated/index.js",
+    "types": "./dist/generated/index.d.ts",
+    "gitHead": "d85d27f2ad767c150f9651afe32d2317ba82439c"
+}

package/src/form/RecordForm.tsx

@@ -0,0 +1,191 @@
+import React from 'react'
+import S from 'string'
+import moment from 'moment'
+import { StringUtil } from '@proteinjs/util'
+import { Form, Fields, textField, FormButtons } from '@proteinjs/ui'
+import { Table, Record, Column, getDbService, DateTimeColumn, ReferenceArrayColumn, BooleanColumn, StringColumn } from '@proteinjs/db'
+import { recordTableLink } from '../pages/RecordTablePage'
+import { recordFormLink } from '../pages/RecordFormPage'
+import { getRecordFormCustomization } from './RecordFormCustomization'
+
+export type RecordFormProps<T extends Record> = {
+  table: Table<T>,
+  record?: T,
+}
+
+export function RecordForm<T extends Record>({ table, record }: RecordFormProps<T>) {
+  const isNewRecord = typeof record === 'undefined';
+  const recordFormCustomization = getRecordFormCustomization(table.name);
+  return (
+    <Form
+      name={S(table.name).humanize().s}
+      createFields={createFields()}
+      fieldLayout={fieldLayout()}
+      buttons={recordFormCustomization?.getFormButtons ? recordFormCustomization.getFormButtons(record, buttons()) : buttons()}
+      onLoad={onLoad}
+      onLoadProgressMessage={`Loading ${S(table.name).humanize().s}`}
+    />
+  );
+
+  function getColumns() {
+    const columns: {[columnPropertyName: string]: Column<T, any>} = {};
+    const nameColumn = (table.columns as any)['name'] as Column<T, any>;
+    if (nameColumn)
+      columns['name'] = nameColumn;
+
+    for (let columnPropertyName in table.columns) {
+      const column = (table.columns as any)[columnPropertyName] as Column<T, any>;
+      if (columnPropertyName == 'name' || columnPropertyName == 'created' || columnPropertyName == 'updated')
+        continue;
+
+      if (column.options?.ui?.hidden)
+        continue;
+
+      if ((column instanceof StringColumn && column.maxLength === 'MAX') || column instanceof ReferenceArrayColumn)
+        continue;
+
+      columns[columnPropertyName] = column;
+    }
+
+    if (!isNewRecord) {
+      columns['created'] = (table.columns as any)['created'] as Column<T, any>;
+      columns['updated'] = (table.columns as any)['updated'] as Column<T, any>;
+    }
+
+    return columns;
+  }
+  
+  function createFields(): () => Fields {
+    return () => {
+      const fields: Fields = {};
+      for (let columnPropertyName in getColumns()) {
+        fields[columnPropertyName] = textField({
+          name: columnPropertyName,
+          label: StringUtil.humanizeCamel(columnPropertyName), 
+        });
+      }
+
+      return fields;
+    };
+  }
+
+  function fieldLayout(): any {
+    const columns = getColumns();
+    const layoutColumns = Object.entries(columns).length > 6 ? 2 : 1;
+    if (layoutColumns > 1) {
+      const layout: (keyof T)[][] = [];
+      for (let columnPropertyName in columns) {
+        if (layout.length == 0 || layout[layout.length - 1].length >= layoutColumns)
+          layout.push([]);
+
+        layout[layout.length - 1].push(columnPropertyName as keyof T);
+      }
+
+      return layout;
+    }
+
+    return Object.keys(columns) as (keyof T)[];
+  }
+
+  function buttons(): FormButtons<any> {
+    let newRecord: T;
+    return {
+      delete: {
+        name: 'Delete',
+        accessibility: {
+          hidden: isNewRecord,
+        },
+        style: {
+          color: 'primary',
+          variant: 'text',
+        },
+        redirect: async (fields: Fields, buttons: FormButtons<Fields>) => {
+          return { path: recordTableLink(table) };
+        },
+        onClick: async (fields: Fields, buttons: FormButtons<Fields>) => {
+          if (!record || !record.id)
+            throw new Error(`Unable to delete record, record or id undefined`);
+
+          await getDbService().delete(table, { id: record.id } as any);
+          return `Deleted ${S(table.name).humanize().s}`;
+        },
+        progressMessage: (fields: Fields) => { return `Deleting ${S(table.name).humanize().s}` },
+      },
+      save: {
+        name: 'Save',
+        accessibility: {
+          hidden: isNewRecord,
+        },
+        style: {
+          color: 'primary',
+          variant: 'contained',
+        },
+        onClick: async (fields: Fields, buttons: FormButtons<Fields>) => {
+          if (!record || !record.id)
+            throw new Error(`Unable to save record, record or id undefined`);
+
+          for (let columnPropertyName in fields) {
+            const field = fields[columnPropertyName];
+            (record as any)[columnPropertyName] = field.field.value;
+          }
+
+          await getDbService().update(table, record);
+          return `Saved ${S(table.name).humanize().s}`;
+        },
+        progressMessage: (fields: Fields) => { return `Saving ${S(table.name).humanize().s}` },
+      },
+      create: {
+        name: 'Create',
+        accessibility: {
+          hidden: !isNewRecord,
+        },
+        style: {
+          color: 'primary',
+          variant: 'contained',
+        },
+        redirect: async (fields: Fields, buttons: FormButtons<Fields>) => {
+          return { path: recordFormLink(table.name, newRecord.id) };
+        },
+        onClick: async (fields: Fields, buttons: FormButtons<Fields>) => {
+          const record: any = {};
+          for (let columnPropertyName in fields) {
+            const field = fields[columnPropertyName];
+            (record as any)[columnPropertyName] = field.field.value;
+          }
+
+          newRecord = await getDbService().insert(table, record);
+          return `Created ${S(table.name).humanize().s}`;
+        },
+        progressMessage: (fields: Fields) => { return `Creating ${S(table.name).humanize().s}` },
+      },
+    }
+  }
+
+  async function onLoad(fields: Fields, buttons: FormButtons<Fields>) {
+    if (isNewRecord)
+      return;
+
+    for (let columnPropertyName in fields) {
+      const column = (table.columns as any)[columnPropertyName] as Column<any, any>;
+      const field = fields[columnPropertyName].field;
+      let fieldValue = (record as any)[columnPropertyName];
+      if (moment.isMoment(fieldValue))
+        fieldValue = fieldValue.format('ddd, MMM Do YY, h:mm:ss a');
+      else if (column instanceof BooleanColumn)
+        fieldValue = fieldValue == true ? 'True' : 'False';
+      
+      field.value = fieldValue;
+      if (
+        columnPropertyName == 'created' || 
+        columnPropertyName == 'updated' || 
+        columnPropertyName == 'id' ||
+        column instanceof DateTimeColumn
+      ) {
+        if (!field.accessibility)
+          field.accessibility = {};
+
+        field.accessibility.readonly = true;
+      }
+    }
+  }
+}

package/src/form/RecordFormCustomization.tsx

@@ -0,0 +1,20 @@
+import { Loadable, SourceRepository } from '@proteinjs/reflection'
+import { FormButtons } from '@proteinjs/ui'
+import { Table } from '@proteinjs/db'
+
+export const getRecordFormCustomizations = () => SourceRepository.get().objects<RecordFormCustomization>('@proteinjs/db-ui/RecordFormCustomization');
+
+export const getRecordFormCustomization = (tableName: string) => {
+  const recordFormCustomizations = getRecordFormCustomizations();
+  for (let recordFormCustomization of recordFormCustomizations) {
+    if (recordFormCustomization.table.name == tableName)
+      return recordFormCustomization;
+  }
+}
+
+export abstract class RecordFormCustomization implements Loadable {
+  abstract table: Table<any>;
+	getFormButtons(record: any, defaultFormButtons: FormButtons<any>): FormButtons<any> {
+    return defaultFormButtons;
+  }
+}

package/src/form/customizations/MigrationRecordFormCustomization.tsx

@@ -0,0 +1,29 @@
+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'];
+    delete formButtons['delete'];
+    formButtons['run'] = {
+      name: 'Run',
+      accessibility: {
+        hidden: !migration || migration.status === 'running',
+      },
+      style: {
+        color: 'primary',
+        variant: 'contained',
+      },
+      onClick: async (fields: Fields, buttons: FormButtons<Fields>) => {
+        await getMigrationRunnerService().runMigration(migration.id);
+        return `Started migration`;
+      },
+      progressMessage: (fields: Fields) => { return `Starting migration` },
+    };
+    return formButtons;
+  }
+}

package/src/pages/RecordFormPage.tsx

@@ -0,0 +1,81 @@
+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',
+  path: 'record/form',
+  auth: {
+    allUsers: true,
+  },
+  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();
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const { table } = getTable();
+      if (!table)
+        return;
+
+      const recordId = urlParams['record'];
+      if (!recordId)
+        return;
+
+      const fetchedRecord = await getDbService().get(table, { id: recordId });
+      setRecord(fetchedRecord);
+    };
+
+    fetchData();
+  }, [urlParams.table, urlParams.record]);
+
+  function getTable() {
+    const tableName = urlParams['table'];
+    let table;
+    let error;
+    if (tableName) {
+      try {
+        table = tableByName(tableName);
+      } catch (error) {
+        error = `Table not accessible in UI: ${tableName}`;
+      }
+    } else {
+      error = `Table name not provided via the 'table' url param`;
+    }
+
+    return { table, error };
+  }
+
+  function Form() {
+    const { table, error } = getTable();
+    if (!table) {
+      return <div>{ error }</div>;
+    }
+
+    return (
+      <RecordForm
+        table={table}
+        record={record}
+      />
+    );
+  }
+
+  return (
+    <Form />
+  );
+}