@nestledjs/data-browser 1.0.15 → 1.0.16

package/lib/pages/AdminDataListPage.js

@@ -15,52 +15,62 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
   const params = useParams();
   const [searchParams] = useSearchParams();
   const { sdk, databaseModels, basePath = "/admin/data" } = useAdminDataContext();
-  const getEnumValues = useCallback((enumType) => {
-    try {
-      const enumObject = sdk[enumType];
-      if (!enumObject || typeof enumObject !== "object") {
+  const getEnumValues = useCallback(
+    (enumType) => {
+      try {
+        const enumObject = sdk[enumType];
+        if (!enumObject || typeof enumObject !== "object") {
+          return null;
+        }
+        const values = Object.values(enumObject).filter((value) => typeof value === "string");
+        if (values.length === 0) {
+          const keys = Object.keys(enumObject).filter((key) => Number.isNaN(Number(key)));
+          return keys.length > 0 ? keys : null;
+        }
+        return values.filter((v) => typeof v === "string");
+      } catch (error2) {
+        console.error("Unexpected error:", error2);
         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)));
-        return keys.length > 0 ? keys : null;
-      }
-      return values;
-    } catch (error2) {
-      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];
+    },
+    [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;
         }
       }
-    } 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 updateSimpleFilter = useCallback((filters2, fieldName, value) => {
-    const newFilters = { ...filters2 };
-    if (value === void 0 || value === null || value === "") {
-      delete newFilters[fieldName];
-    } else {
-      newFilters[fieldName] = value;
-    }
-    return newFilters;
-  }, []);
+      return newFilters;
+    },
+    []
+  );
   const { state, dispatch } = useAdminList();
   const {
     search,
@@ -75,10 +85,6 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     showFilters,
     showSearchFieldSelector
   } = state;
-  useCallback(
-    (skip2) => dispatch({ type: "SET_SKIP", payload: skip2 }),
-    [dispatch]
-  );
   const setFilters = useCallback(
     (filters2) => dispatch({ type: "SET_FILTERS", payload: filters2 }),
     [dispatch]
@@ -160,7 +166,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
   }, [sdk, model]);
   const { listQuery: query } = documents;
   const dataPath = useMemo(() => {
-    return model?.pluralModelPropertyName || pluralParam.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    return model?.pluralModelPropertyName || pluralParam.replaceAll(/-([a-z])/g, (_, letter) => letter.toUpperCase());
   }, [model, pluralParam]);
   const paginationPath = useMemo(() => {
     return "counters";
@@ -216,11 +222,13 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     setVisibleColumns(filteredCols);
     const storedSort = AdminLocalStorage.getSortPreference(model.name);
     const sortFieldValid = storedSort && (storedSort.orderBy === "id" || fieldNames.includes(storedSort.orderBy));
-    const nextSort = sortFieldValid ? storedSort : { orderBy: "id", orderDirection: "desc" };
+    const nextSort = sortFieldValid && storedSort ? storedSort : { orderBy: "id", orderDirection: "desc" };
     dispatch({ type: "SET_SORT", payload: nextSort });
     const storedSearch = AdminLocalStorage.getSearchFields(model.name);
     const defaults = getDefaultSearchFields(searchableFieldNames);
-    const filteredSearch = (storedSearch || defaults).filter((f) => searchableFieldNames.includes(f));
+    const filteredSearch = (storedSearch || defaults).filter(
+      (f) => searchableFieldNames.includes(f)
+    );
     setSearchFields(filteredSearch);
     dispatch({ type: "SET_SEARCH", payload: "" });
     dispatch({ type: "SET_DEBOUNCED_SEARCH", payload: "" });
@@ -230,7 +238,16 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       dispatch({ type: "SET_FILTERS", payload: urlFilters });
       dispatch({ type: "SET_SHOW_FILTERS", payload: true });
     }
-  }, [model?.name, fieldNames, searchableFieldNames, getDefaultSearchFields, setVisibleColumns, setSearchFields, dispatch, urlFilters]);
+  }, [
+    model?.name,
+    fieldNames,
+    searchableFieldNames,
+    getDefaultSearchFields,
+    setVisibleColumns,
+    setSearchFields,
+    dispatch,
+    urlFilters
+  ]);
   const setSortSafely = useCallback(
     (newSort) => {
       const resolvedSort = typeof newSort === "function" ? newSort(sort) : newSort;
@@ -285,7 +302,22 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       filters: Object.keys(filters).length > 0 ? filters : void 0
     }
   };
-  const { data, loading, error, networkStatus, refetch } = useQuery(query ?? sdk.__AdminUsersDocument, {
+  const extractItems = useCallback((anyData, dataPath2) => {
+    let processedItems = dataPath2 && anyData[dataPath2] ? anyData[dataPath2] : [];
+    if (!processedItems || processedItems.length === 0) {
+      for (const [, value] of Object.entries(anyData)) {
+        if (Array.isArray(value) && value.length > 0 && value[0]?.id) {
+          processedItems = value;
+          break;
+        }
+      }
+    }
+    return processedItems;
+  }, []);
+  const filterValidItems = useCallback((items2) => {
+    return items2.filter((item) => item && typeof item === "object" && item.id);
+  }, []);
+  const { data, loading, error } = useQuery(query ?? sdk.__AdminUsersDocument, {
     variables,
     skip: !model || !query,
     errorPolicy: "all",
@@ -299,11 +331,6 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     }
   });
   const { validatedItems, validatedPagination, dataError } = useMemo(() => {
-    if (error) {
-      const apolloError = error;
-      if (apolloError.networkError) ;
-      if (apolloError.graphQLErrors?.length > 0) ;
-    }
     if (!data) {
       return {
         validatedItems: [],
@@ -313,18 +340,8 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
     }
     try {
       const anyData = data;
-      let processedItems = dataPath && anyData[dataPath] ? anyData[dataPath] : [];
       const processedPagination = paginationPath && anyData[paginationPath] ? anyData[paginationPath] : void 0;
-      if (!processedItems || processedItems.length === 0) {
-        for (const [key, value] of Object.entries(anyData)) {
-          if (Array.isArray(value)) {
-            if (value.length > 0 && value[0]?.id) {
-              processedItems = value;
-              break;
-            }
-          }
-        }
-      }
+      const processedItems = extractItems(anyData, dataPath);
       if (!Array.isArray(processedItems)) {
         return {
           validatedItems: [],
@@ -332,17 +349,8 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
           dataError: new Error("Invalid data format: expected array")
         };
       }
-      const filteredItems = processedItems.filter((item, index) => {
-        if (!item || typeof item !== "object") {
-          return false;
-        }
-        if (!item.id) {
-          return false;
-        }
-        return true;
-      });
       return {
-        validatedItems: filteredItems,
+        validatedItems: filterValidItems(processedItems),
         validatedPagination: processedPagination,
         dataError: null
       };
@@ -353,7 +361,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         dataError: err instanceof Error ? err : new Error("Unknown data processing error")
       };
     }
-  }, [data, dataPath, paginationPath, error]);
+  }, [data, dataPath, paginationPath, error, extractItems, filterValidItems]);
   const items = validatedItems;
   const pagination = validatedPagination;
   if (!model) {
@@ -422,7 +430,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => window.location.reload(),
+            onClick: () => globalThis.location.reload(),
             className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
             children: "Reload Page"
           }
@@ -710,7 +718,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
             id: "search",
             name: "search",
             className: "block w-full pl-10 pr-12 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:placeholder-gray-400 dark:focus:placeholder-gray-500 focus:ring-1 focus:ring-green-web focus:border-green-web sm:text-sm",
-            placeholder: `Search ${searchFields.length > 0 ? searchFields.map((field) => field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase())).join(", ") : getPluralName(model.name).toLowerCase()}...`,
+            placeholder: `Search ${searchFields.length > 0 ? searchFields.map((field) => field.replaceAll(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase())).join(", ") : getPluralName(model.name).toLowerCase()}...`,
             type: "search",
             value: state.search || "",
             onChange: (e) => dispatch({ type: "SET_SEARCH", payload: e.target.value })

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

@@ -1,4 +1,4 @@
-import { FormField } from '@nestledjs/forms';
+import { FormField } from '@nestledjs/forms-core';
 import { DatabaseModel } from '../types';
 import { DisplayFieldConfig } from '../context/AdminDataContext';
 /**
@@ -15,6 +15,10 @@ 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;
+/**
+ * Convert model name to kebab-case for URLs
+ */
+export declare function toKebabCase(str: string): string;
 /**
  * Options for building form fields
  */
@@ -34,3 +38,5 @@ export declare function buildFormFields(sdk: any, model: DatabaseModel, operatio
  * Removes Apollo metadata and system fields
  */
 export declare function cleanFormInput(input: Record<string, unknown>, model?: DatabaseModel): Record<string, unknown>;
+export declare function toReadableText(text: string): string;
+export declare function sanitizeInput(input: string | undefined): string;