@nestledjs/data-browser 0.1.25 → 1.0.0

package/lib/pages/AdminDataListPage.js

@@ -6,9 +6,7 @@ import { getPluralName } from "../utils/get-plural-names.js";
 import { AdminLocalStorage } from "../utils/secure-storage.js";
 import { kebabCase, formatFieldName } from "../utils/string-utils.js";
 import { useParams, useSearchParams, Link } from "react-router";
-import { DateRangeFilter } from "../components/filters/DateRangeFilter.js";
-import { NumberRangeFilter } from "../components/filters/NumberRangeFilter.js";
-import { RelationFilterField } from "../components/filters/RelationFilterField.js";
+import { FilterField } from "../components/FilterField.js";
 import { useAdminList } from "../hooks/useAdminList.js";
 import { getAdminDocuments } from "../utils/graphql-utils.js";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
@@ -32,6 +30,36 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       return null;
     }
   }, [sdk]);
+  const updateRelatedEnumFilter = useCallback((filters2, relationName, enumFieldName, value) => {
+    const newFilters = { ...filters2 };
+    if (value === void 0 || value === null || value === "") {
+      const relationFilter = newFilters[relationName];
+      if (relationFilter && typeof relationFilter === "object") {
+        delete relationFilter[enumFieldName];
+        if (Object.keys(relationFilter).length === 0) {
+          delete newFilters[relationName];
+        }
+      }
+    } else {
+      if (!newFilters[relationName]) {
+        newFilters[relationName] = {};
+      }
+      const relationFilter = newFilters[relationName];
+      if (relationFilter && typeof relationFilter === "object") {
+        relationFilter[enumFieldName] = value;
+      }
+    }
+    return newFilters;
+  }, []);
+  const updateSimpleFilter = useCallback((filters2, fieldName, value) => {
+    const newFilters = { ...filters2 };
+    if (value === void 0 || value === null || value === "") {
+      delete newFilters[fieldName];
+    } else {
+      newFilters[fieldName] = value;
+    }
+    return newFilters;
+  }, []);
   const { state, dispatch } = useAdminList();
   const {
     search,
@@ -145,7 +173,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
   }, [model]);
   const filterableFieldNames = useMemo(() => {
     if (!model) return [];
-    return model.fields.filter((field) => {
+    const directFields = model.fields.filter((field) => {
       if (field.relationName && !field.isList) return true;
       if (field.relationName) return false;
       if (field.isList) return false;
@@ -153,7 +181,21 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       const fieldType = field.type.toLowerCase();
       return ["boolean", "int", "float", "date", "datetime"].includes(fieldType) || field.kind === "enum";
     }).map((field) => field.name);
-  }, [model]);
+    const relatedEnumFields = [];
+    model.fields.forEach((field) => {
+      if (field.relationName && !field.isList) {
+        const relatedModel = databaseModels.find((m) => m.name === field.type);
+        if (relatedModel) {
+          relatedModel.fields.forEach((relatedField) => {
+            if (relatedField.kind === "enum") {
+              relatedEnumFields.push(`${field.name}.${relatedField.name}`);
+            }
+          });
+        }
+      }
+    });
+    return [...directFields, ...relatedEnumFields];
+  }, [model, databaseModels]);
   const searchableFieldNames = useMemo(() => {
     if (!model) return [];
     return model.fields.filter((field) => {
@@ -588,108 +630,30 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: filterableFieldNames.map((fieldName) => {
-      const field = model.fields.find((f) => f.name === fieldName);
-      if (!field) return null;
-      const currentValue = filters[fieldName];
+      const isRelatedEnumField = fieldName.includes(".");
       const handleChange = (value) => {
-        const newFilters = { ...filters };
-        if (value === void 0 || value === null || value === "") {
-          delete newFilters[fieldName];
+        let newFilters;
+        if (isRelatedEnumField) {
+          const [relationName, enumFieldName] = fieldName.split(".");
+          newFilters = updateRelatedEnumFilter(filters, relationName, enumFieldName, value);
         } else {
-          newFilters[fieldName] = value;
+          newFilters = updateSimpleFilter(filters, fieldName, value);
         }
         setFilters(newFilters);
         dispatch({ type: "RESET_PAGINATION" });
       };
-      if (field.relationName && !field.isList) {
-        return /* @__PURE__ */ jsx(
-          RelationFilterField,
-          {
-            fieldName,
-            relatedModelName: field.type,
-            currentValue,
-            onChange: handleChange
-          },
-          fieldName
-        );
-      }
-      if (field.type.toLowerCase() === "datetime" || field.type.toLowerCase() === "date") {
-        return /* @__PURE__ */ jsx(
-          DateRangeFilter,
-          {
-            fieldName,
-            currentValue,
-            onChange: handleChange
-          },
-          fieldName
-        );
-      }
-      if (["int", "bigint", "float", "decimal"].includes(field.type.toLowerCase())) {
-        return /* @__PURE__ */ jsx(
-          NumberRangeFilter,
-          {
-            fieldName,
-            fieldType: field.type.toLowerCase(),
-            currentValue,
-            onChange: handleChange
-          },
-          fieldName
-        );
-      }
-      if (field.kind === "enum") {
-        const enumValues = getEnumValues(field.type);
-        if (enumValues) {
-          return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }),
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                value: typeof currentValue === "string" ? currentValue : "",
-                onChange: (e) => handleChange(e.target.value || void 0),
-                className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
-                  enumValues.map((val) => /* @__PURE__ */ jsx("option", { value: val, children: val }, val))
-                ]
-              }
-            )
-          ] }, fieldName);
-        }
-      }
-      if (field.type.toLowerCase() === "boolean") {
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: currentValue === void 0 || currentValue === null ? "" : currentValue.toString(),
-              onChange: (e) => {
-                const value = e.target.value;
-                handleChange(value === "" ? void 0 : value === "true");
-              },
-              className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm",
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
-                /* @__PURE__ */ jsx("option", { value: "true", children: "Yes" }),
-                /* @__PURE__ */ jsx("option", { value: "false", children: "No" })
-              ]
-            }
-          )
-        ] }, fieldName);
-      }
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: typeof currentValue === "string" ? currentValue : "",
-            onChange: (e) => handleChange(e.target.value || void 0),
-            placeholder: `Filter by ${formatFieldName(fieldName).toLowerCase()}...`,
-            className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm"
-          }
-        )
-      ] }, fieldName);
+      return /* @__PURE__ */ jsx(
+        FilterField,
+        {
+          fieldName,
+          model,
+          databaseModels,
+          filters,
+          onChange: handleChange,
+          getEnumValues
+        },
+        fieldName
+      );
     }) })
   ] });
   const searchFilter = /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [

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

@@ -1,5 +1,6 @@
 import { FormField } from '@nestledjs/forms';
 import { DatabaseModel } from '../types';
+import { DisplayFieldConfig } from '../context/AdminDataContext';
 /**
  * Get GraphQL documents for admin CRUD operations
  */
@@ -14,10 +15,20 @@ export declare function getAdminDocuments(sdk: any, model: DatabaseModel): {
  * Get the GraphQL mutation name for a given operation
  */
 export declare function getMutationName(model: DatabaseModel, operation: 'create' | 'update' | 'delete'): string;
+/**
+ * Options for building form fields
+ */
+export interface BuildFormFieldsOptions {
+    currentItem?: any;
+    isSubmitting?: boolean;
+    basePath?: string;
+    databaseModels?: DatabaseModel[];
+    displayFieldConfig?: DisplayFieldConfig;
+}
 /**
  * Build form fields for a model and operation
  */
-export declare function buildFormFields(sdk: any, model: DatabaseModel, operation: 'create' | 'update', currentItem?: any, isSubmitting?: boolean, basePath?: string, databaseModels?: DatabaseModel[]): FormField[];
+export declare function buildFormFields(sdk: any, model: DatabaseModel, operation: 'create' | 'update', options?: BuildFormFieldsOptions): FormField[];
 /**
  * Clean form input data for GraphQL mutations
  * Removes Apollo metadata and system fields

package/lib/utils/graphql-utils.js

@@ -9,6 +9,9 @@ function getEnumValues(sdk, enumType) {
     if (!enumObject || typeof enumObject !== "object") {
       return null;
     }
+    if (enumObject.kind === "Document" || enumObject.definitions) {
+      return null;
+    }
     const values = Object.values(enumObject).filter((value) => typeof value === "string");
     if (values.length === 0) {
       const keys = Object.keys(enumObject).filter((key) => isNaN(Number(key)));
@@ -31,11 +34,11 @@ function getAdminDocuments(sdk, model) {
   }
   const normalizedModelName = normalizeModelNameForDocument(model.name);
   const normalizedPluralName = normalizeModelNameForDocument(getPluralName(model.name));
-  const singleQueryDocumentName = `__Admin${normalizedModelName}Document`;
-  const listQueryDocumentName = `__Admin${normalizedPluralName}Document`;
-  const updateDocumentName = `__AdminUpdate${normalizedModelName}Document`;
-  const deleteDocumentName = `__AdminDelete${normalizedModelName}Document`;
-  const createDocumentName = `__AdminCreate${normalizedModelName}Document`;
+  const singleQueryDocumentName = `__Admin${normalizedModelName}`;
+  const listQueryDocumentName = `__Admin${normalizedPluralName}`;
+  const updateDocumentName = `__AdminUpdate${normalizedModelName}`;
+  const deleteDocumentName = `__AdminDelete${normalizedModelName}`;
+  const createDocumentName = `__AdminCreate${normalizedModelName}`;
   const documents = {
     query: sdk[singleQueryDocumentName],
     // For single item
@@ -90,9 +93,16 @@ function findForeignKeyFieldName(relatedModel, currentModelName, relationName) {
   });
   return ((_a = foreignKeyField == null ? void 0 : foreignKeyField.relationFromFields) == null ? void 0 : _a[0]) || null;
 }
-function buildFormFields(sdk, model, operation, currentItem, isSubmitting, basePath = "/admin/data", databaseModels) {
+function buildFormFields(sdk, model, operation, options = {}) {
+  const {
+    currentItem,
+    isSubmitting = false,
+    basePath = "/admin/data",
+    databaseModels,
+    displayFieldConfig
+  } = options;
   const editableFields = model.fields.filter((field) => {
-    if (operation === "create" && field.isId) return false;
+    if (field.isId) return false;
     if (field.isReadOnly || field.isGenerated) return false;
     if (field.isUpdatedAt || field.name === "createdAt") return false;
     return true;
@@ -100,6 +110,18 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
   const regularFields = editableFields.filter((f) => !(f.relationName && f.isList));
   const listRelationFields = editableFields.filter((f) => f.relationName && f.isList);
   const formFields = [];
+  if (operation === "update" && currentItem) {
+    const idField = model.fields.find((f) => f.isId);
+    if (idField) {
+      formFields.push(
+        FormFieldClass.text(idField.name, {
+          label: idField.name.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase()),
+          disabled: true,
+          helpText: "ID fields are immutable and cannot be changed"
+        })
+      );
+    }
+  }
   regularFields.forEach((field) => {
     var _a;
     const label = field.name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
@@ -132,7 +154,7 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
     }
     const isArrayField = Boolean(field.isList);
     const isRequired = isArrayField ? false : !field.isOptional;
-    const options = {
+    const options2 = {
       label,
       required: isRequired,
       ...initialValue !== void 0 && { value: initialValue }
@@ -141,35 +163,35 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
     switch (field.type.toLowerCase()) {
       case "string":
         if (field.name.toLowerCase().includes("email")) {
-          formField = FormFieldClass.email(field.name, options);
+          formField = FormFieldClass.email(field.name, options2);
         } else if (field.name.toLowerCase().includes("description") || field.name.toLowerCase().includes("content") || field.name.toLowerCase().includes("notes")) {
-          formField = FormFieldClass.textArea(field.name, options);
+          formField = FormFieldClass.textArea(field.name, options2);
         } else {
-          formField = FormFieldClass.text(field.name, options);
+          formField = FormFieldClass.text(field.name, options2);
         }
         break;
       case "int":
       case "bigint":
-        formField = FormFieldClass.text(field.name, options);
+        formField = FormFieldClass.text(field.name, options2);
         break;
       case "float":
       case "decimal":
-        formField = FormFieldClass.text(field.name, options);
+        formField = FormFieldClass.text(field.name, options2);
         break;
       case "boolean": {
         const booleanValue = currentItem && operation === "update" ? Boolean(currentItem[field.name]) : false;
         formField = FormFieldClass.checkbox(field.name, {
-          ...options,
+          ...options2,
           required: false,
           ...operation === "update" && { value: booleanValue }
         });
         break;
       }
       case "datetime":
-        formField = FormFieldClass.dateTimePicker(field.name, options);
+        formField = FormFieldClass.dateTimePicker(field.name, options2);
         break;
       case "date":
-        formField = FormFieldClass.datePicker(field.name, options);
+        formField = FormFieldClass.datePicker(field.name, options2);
         break;
       default: {
         const enumValues = getEnumValues(sdk, field.type);
@@ -179,7 +201,7 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
             label: value.replace(/_/g, " ").toLowerCase().replace(/^./, (str) => str.toUpperCase())
           }));
           formField = FormFieldClass.select(field.name, {
-            ...options,
+            ...options2,
             options: selectOptions
           });
           break;
@@ -200,25 +222,25 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
             relationValue = "";
           }
           const properPluralName = getPluralName(field.type);
-          const adminDocumentName = `__Admin${properPluralName}Document`;
-          const regularDocumentName = `${properPluralName}Document`;
+          const adminDocumentName = `__Admin${properPluralName}`;
+          const regularDocumentName = `${properPluralName}`;
           const relationDocument = sdk[adminDocumentName] || sdk[regularDocumentName];
           if (relationDocument) {
-            let searchField = "id";
-            if (field.type === "Course") {
-              searchField = "title";
-            } else if (field.type === "User") {
-              searchField = "name";
-            } else if (field.type === "Program") {
-              searchField = "name";
-            } else {
-              searchField = "title";
-            }
+            const config = displayFieldConfig == null ? void 0 : displayFieldConfig[field.type];
+            const displayFields = (config == null ? void 0 : config.display) || ["name", "title"];
+            const searchFields = (config == null ? void 0 : config.search) || displayFields;
+            const getDisplayLabel = (item) => {
+              const allValues = displayFields.map((field2) => item[field2]).filter((val) => val != null && val !== "");
+              if (allValues.length > 0) {
+                return allValues.join(" ");
+              }
+              return item.id;
+            };
             let initialOptions = [];
             if (currentItem && operation === "update") {
               const currentRelationData = currentItem[field.name];
               if (currentRelationData && typeof currentRelationData === "object" && currentRelationData.id) {
-                const displayLabel = currentRelationData[searchField] || currentRelationData.title || currentRelationData.name || currentRelationData.id;
+                const displayLabel = getDisplayLabel(currentRelationData);
                 initialOptions = [
                   {
                     value: currentRelationData.id,
@@ -230,16 +252,16 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
             formField = FormFieldClass.searchSelectApollo(relationFieldName, {
               label,
               // Remove "ID" suffix - just use the field name
-              required: options.required,
+              required: options2.required,
               dataType: properPluralName.charAt(0).toLowerCase() + properPluralName.slice(1),
               // e.g., Course → courses (camelCase)
               document: relationDocument,
-              searchFields: [searchField],
+              searchFields,
               // For searching
               selectOptionsFunction: (items) => {
                 const queryOptions = items.map((item) => ({
                   value: item.id,
-                  label: item[searchField] || item.title || item.name || item.id
+                  label: getDisplayLabel(item)
                 }));
                 const allOptions = [...initialOptions];
                 queryOptions.forEach((option) => {
@@ -247,6 +269,7 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
                     allOptions.push(option);
                   }
                 });
+                allOptions.sort((a, b) => a.label.localeCompare(b.label));
                 return allOptions;
               },
               ...initialOptions.length > 0 && { initialOptions },
@@ -270,7 +293,7 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
           } else {
             formField = FormFieldClass.text(relationFieldName, {
               label: `${label} ID`,
-              required: options.required,
+              required: options2.required,
               helpText: "Enter the ID of the related record",
               ...relationValue !== void 0 && { value: relationValue }
             });
@@ -283,12 +306,12 @@ function buildFormFields(sdk, model, operation, currentItem, isSubmitting, baseP
             label: value.replace(/_/g, " ").toLowerCase().replace(/^./, (str) => str.toUpperCase())
           }));
           formField = FormFieldClass.select(field.name, {
-            ...options,
+            ...options2,
             options: selectOptions
           });
           break;
         }
-        formField = FormFieldClass.text(field.name, options);
+        formField = FormFieldClass.text(field.name, options2);
         break;
       }
     }

package/lib/utils/string-utils.js

@@ -5,6 +5,20 @@ function spacedWords(name) {
   return name.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replaceAll(/([A-Z])([A-Z][a-z])/g, "$1 $2");
 }
 function formatFieldName(fieldName) {
+  if (fieldName.includes(".")) {
+    return fieldName.split(".").map((part) => {
+      if (part === part.toUpperCase() && part.length > 1) {
+        return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
+      }
+      return part.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
+    }).join(" ");
+  }
+  if (fieldName === fieldName.toUpperCase() && fieldName.length > 1) {
+    if (fieldName.includes("_")) {
+      return fieldName.split("_").map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(" ");
+    }
+    return fieldName.charAt(0).toUpperCase() + fieldName.slice(1).toLowerCase();
+  }
   return fieldName.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
 }
 function normalizeModelNameForDocument(modelName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestledjs/data-browser",
-  "version": "0.1.25",
+  "version": "1.0.0",
   "description": "Universal admin data browser for Nestled framework projects with full CRUD operations",
   "main": "./index.js",
   "module": "./index.js",
@@ -38,7 +38,7 @@
     "@apollo/client": "^4.0.0",
     "@heroicons/react": "^2.0.0",
     "@nestledjs/forms": "^0.5.0",
-    "@nestledjs/shared-components": "^0.1.25",
+    "@nestledjs/shared-components": "^1.0.0",
     "react": "^19.0.0",
     "react-router": "^7.0.0"
   },