@nestledjs/data-browser 0.1.11 → 0.1.13

package/lib/utils/graphql-utils.d.ts

@@ -17,7 +17,7 @@ export declare function getMutationName(model: DatabaseModel, operation: 'create
 /**
  * Build form fields for a model and operation
  */
-export declare function buildFormFields(sdk: any, model: DatabaseModel, operation: 'create' | 'update', currentItem?: any, isSubmitting?: boolean): FormField[];
+export declare function buildFormFields(sdk: any, model: DatabaseModel, operation: 'create' | 'update', currentItem?: any, isSubmitting?: boolean, basePath?: string): FormField[];
 /**
  * Clean form input data for GraphQL mutations
  * Removes Apollo metadata and system fields

package/lib/utils/graphql-utils.js

@@ -1,5 +1,8 @@
+import React from "react";
+import { Link } from "react-router";
 import { FormFieldClass } from "@nestledjs/forms";
 import { getPluralName } from "@nestledjs/helpers";
+import { RelationFieldWrapper } from "../components/RelationFieldWrapper.js";
 function getEnumValues(sdk, enumType) {
   try {
     const enumObject = sdk[enumType];
@@ -78,15 +81,24 @@ function getMutationName(model, operation) {
       return modelName;
   }
 }
-function buildFormFields(sdk, model, operation, currentItem, isSubmitting) {
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function toLowerCamelCase(str) {
+  if (!str) return "";
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+function buildFormFields(sdk, model, operation, currentItem, isSubmitting, basePath = "/admin/data") {
   const editableFields = model.fields.filter((field) => {
     if (operation === "create" && field.isId) return false;
     if (field.isReadOnly || field.isGenerated) return false;
     if (field.isUpdatedAt || field.name === "createdAt") return false;
-    if (field.relationName && field.isList) return false;
     return true;
   });
-  const formFields = editableFields.map((field) => {
+  const regularFields = editableFields.filter((f) => !(f.relationName && f.isList));
+  const listRelationFields = editableFields.filter((f) => f.relationName && f.isList);
+  const formFields = [];
+  regularFields.forEach((field) => {
     var _a;
     const label = field.name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
     let initialValue = currentItem && operation === "update" ? currentItem[field.name] : void 0;
@@ -124,44 +136,52 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting) {
       required: isRequired,
       ...initialValue !== void 0 && { value: initialValue }
     };
+    let formField;
     switch (field.type.toLowerCase()) {
       case "string":
         if (field.name.toLowerCase().includes("email")) {
-          return FormFieldClass.email(field.name, options);
-        }
-        if (field.name.toLowerCase().includes("description") || field.name.toLowerCase().includes("content") || field.name.toLowerCase().includes("notes")) {
-          return FormFieldClass.textArea(field.name, options);
+          formField = FormFieldClass.email(field.name, options);
+        } else if (field.name.toLowerCase().includes("description") || field.name.toLowerCase().includes("content") || field.name.toLowerCase().includes("notes")) {
+          formField = FormFieldClass.textArea(field.name, options);
+        } else {
+          formField = FormFieldClass.text(field.name, options);
         }
-        return FormFieldClass.text(field.name, options);
+        break;
       case "int":
       case "bigint":
-        return FormFieldClass.text(field.name, options);
+        formField = FormFieldClass.text(field.name, options);
+        break;
       case "float":
       case "decimal":
-        return FormFieldClass.text(field.name, options);
+        formField = FormFieldClass.text(field.name, options);
+        break;
       case "boolean": {
         const booleanValue = currentItem && operation === "update" ? Boolean(currentItem[field.name]) : false;
-        return FormFieldClass.checkbox(field.name, {
+        formField = FormFieldClass.checkbox(field.name, {
           ...options,
           required: false,
           ...operation === "update" && { value: booleanValue }
         });
+        break;
       }
       case "datetime":
-        return FormFieldClass.dateTimePicker(field.name, options);
+        formField = FormFieldClass.dateTimePicker(field.name, options);
+        break;
       case "date":
-        return FormFieldClass.datePicker(field.name, options);
-      default:
+        formField = FormFieldClass.datePicker(field.name, options);
+        break;
+      default: {
         const enumValues = getEnumValues(sdk, field.type);
         if (enumValues) {
           const selectOptions = enumValues.map((value) => ({
             value,
             label: value.replace(/_/g, " ").toLowerCase().replace(/^./, (str) => str.toUpperCase())
           }));
-          return FormFieldClass.select(field.name, {
+          formField = FormFieldClass.select(field.name, {
             ...options,
             options: selectOptions
           });
+          break;
         }
         if (field.relationName && !field.isList) {
           const relationFieldName = ((_a = field.relationFromFields) == null ? void 0 : _a[0]) || field.name;
@@ -172,8 +192,9 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting) {
           if (relationValue === null) {
             relationValue = "";
           }
-          const adminDocumentName = `__Admin${field.type}sDocument`;
-          const regularDocumentName = `${field.type}sDocument`;
+          const properPluralName = getPluralName(field.type);
+          const adminDocumentName = `__Admin${properPluralName}Document`;
+          const regularDocumentName = `${properPluralName}Document`;
           const relationDocument = sdk[adminDocumentName] || sdk[regularDocumentName];
           if (relationDocument) {
             let searchField = "id";
@@ -199,12 +220,12 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting) {
                 ];
               }
             }
-            return FormFieldClass.searchSelectApollo(relationFieldName, {
+            formField = FormFieldClass.searchSelectApollo(relationFieldName, {
               label,
               // Remove "ID" suffix - just use the field name
               required: options.required,
-              dataType: field.type.toLowerCase() + "s",
-              // e.g., Course → courses
+              dataType: properPluralName.charAt(0).toLowerCase() + properPluralName.slice(1),
+              // e.g., Course → courses (camelCase)
               document: relationDocument,
               searchFields: [searchField],
               // For searching
@@ -223,18 +244,33 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting) {
               },
               ...initialOptions.length > 0 && { initialOptions },
               // Provide initial options if available
-              ...relationValue !== void 0 && { value: relationValue }
+              ...relationValue !== void 0 && { value: relationValue },
+              // Add custom wrapper to show view record link
+              customWrapper: (fieldElement) => {
+                return React.createElement(
+                  RelationFieldWrapper,
+                  {
+                    relationType: field.type,
+                    initialValue: relationValue,
+                    fieldName: relationFieldName,
+                    basePath
+                  },
+                  fieldElement
+                );
+              }
             });
+            break;
           } else {
             console.warn(
               `GraphQL document ${adminDocumentName} or ${regularDocumentName} not found for relation ${field.type}. Using text input instead.`
             );
-            return FormFieldClass.text(relationFieldName, {
+            formField = FormFieldClass.text(relationFieldName, {
               label: `${label} ID`,
               required: options.required,
               helpText: "Enter the ID of the related record",
               ...relationValue !== void 0 && { value: relationValue }
             });
+            break;
           }
         }
         if (field.kind === "enum" && field.enumValues) {
@@ -242,12 +278,71 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting) {
             value,
             label: value.replace(/_/g, " ").toLowerCase().replace(/^./, (str) => str.toUpperCase())
           }));
-          return FormFieldClass.select(field.name, {
+          formField = FormFieldClass.select(field.name, {
             ...options,
             options: selectOptions
           });
+          break;
         }
-        return FormFieldClass.text(field.name, options);
+        formField = FormFieldClass.text(field.name, options);
+        break;
+      }
+    }
+    formFields.push(formField);
+  });
+  listRelationFields.forEach((field) => {
+    var _a, _b;
+    const label = field.name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
+    if (operation === "update" && currentItem) {
+      const pluralModelName = getPluralName(field.type);
+      const relatedModelKebab = toKebabCase(pluralModelName);
+      const displayName = field.type.replace(/([a-z])([A-Z])/g, "$1 $2");
+      const pluralDisplayName = getPluralName(displayName);
+      const foreignKeyFieldName = ((_a = field.relationToFields) == null ? void 0 : _a[0]) || `${toLowerCamelCase(model.name)}Id`;
+      const filterUrl = `${basePath}/${relatedModelKebab}?${foreignKeyFieldName}=${currentItem.id}`;
+      const countData = (_b = currentItem._count) == null ? void 0 : _b[field.name];
+      const countText = countData !== void 0 ? ` (${countData})` : "";
+      const formField = FormFieldClass.content(field.name, {
+        content: React.createElement("div", { className: "py-2" }, [
+          React.createElement(
+            "label",
+            {
+              key: "label",
+              className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            },
+            label
+          ),
+          React.createElement(
+            Link,
+            {
+              key: "link",
+              to: filterUrl,
+              className: "inline-flex items-center text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline"
+            },
+            [
+              React.createElement(
+                "svg",
+                {
+                  key: "icon",
+                  className: "h-4 w-4 mr-1",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  xmlns: "http://www.w3.org/2000/svg"
+                },
+                React.createElement("path", {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                })
+              ),
+              `See Related ${pluralDisplayName}${countText}`
+            ]
+          )
+        ])
+      });
+      formFields.push(formField);
     }
   });
   const loadingText = operation === "create" ? "Creating..." : "Updating...";

package/lib/utils/string-utils.js

@@ -1,11 +1,11 @@
 function kebabCase(name) {
-  return name.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+  return name.replaceAll(/([a-z])([A-Z])/g, "$1-$2").replaceAll(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
 }
 function spacedWords(name) {
-  return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z])([A-Z][a-z])/g, "$1 $2");
+  return name.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replaceAll(/([A-Z])([A-Z][a-z])/g, "$1 $2");
 }
 function formatFieldName(fieldName) {
-  return fieldName.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
+  return fieldName.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
 }
 function normalizeModelNameForDocument(modelName) {
   if (modelName === modelName.toUpperCase() && modelName.length > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestledjs/data-browser",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Universal admin data browser for Nestled framework projects with full CRUD operations",
   "main": "./index.js",
   "module": "./index.js",
@@ -32,14 +32,14 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/nestledjs/nestled_template.git",
-    "directory": "libs/admin-data"
+    "directory": "libs/data-browser"
   },
   "peerDependencies": {
     "@apollo/client": "^4.0.0",
     "@heroicons/react": "^2.0.0",
     "@nestledjs/forms": "^0.5.0",
     "@nestledjs/helpers": "^0.1.0",
-    "@nestledjs/shared-components": "^0.1.11",
+    "@nestledjs/shared-components": "^0.1.12",
     "react": "^19.0.0",
     "react-router": "^7.0.0"
   },