@nestledjs/data-browser 1.0.1 → 1.0.3

package/lib/pages/AdminDataListPage.js

@@ -447,7 +447,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       "button",
       {
         onClick: () => setShowColumnSelector(!showColumnSelector),
-        className: "inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
+        className: "inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
         children: [
           "Columns",
           /* @__PURE__ */ jsx(
@@ -470,8 +470,8 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         ]
       }
     ),
-    showColumnSelector && /* @__PURE__ */ jsx("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-50 border border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 mb-3", children: "Visible Columns" }),
+    showColumnSelector && /* @__PURE__ */ jsx("div", { className: "absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 mb-3", children: "Visible Columns" }),
       /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-64 overflow-y-auto", children: fieldNames.map((field) => /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -483,12 +483,12 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
               setVisibleColumns(newColumns);
               AdminLocalStorage.setColumnVisibility(model.name, newColumns);
             },
-            className: "h-4 w-4 mt-0.5 flex-shrink-0 text-green-web focus:ring-green-web border-gray-300 rounded"
+            className: "h-4 w-4 mt-0.5 flex-shrink-0 text-green-web focus:ring-green-web border-gray-300 dark:border-gray-600 rounded"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 leading-5", children: formatFieldName(field) })
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300 leading-5", children: formatFieldName(field) })
       ] }, field)) }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200 flex justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 flex justify-between", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -508,7 +508,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
               setVisibleColumns(defaults);
               AdminLocalStorage.setColumnVisibility(model.name, defaults);
             },
-            className: "text-xs text-gray-600 hover:text-gray-800",
+            className: "text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200",
             children: "Reset to Defaults"
           }
         )
@@ -520,7 +520,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
       "button",
       {
         onClick: () => setShowSearchFieldSelector(!showSearchFieldSelector),
-        className: "h-full px-3 border-l border-gray-300 text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600",
+        className: "h-full px-3 border-l border-gray-300 dark:border-gray-600 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:text-gray-600 dark:focus:text-gray-300",
         "aria-label": "Configure search fields",
         children: /* @__PURE__ */ jsx(
           "svg",
@@ -541,8 +541,8 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         )
       }
     ),
-    showSearchFieldSelector && /* @__PURE__ */ jsx("div", { className: "absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50 border border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 mb-3", children: "Search Fields" }),
+    showSearchFieldSelector && /* @__PURE__ */ jsx("div", { className: "absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 mb-3", children: "Search Fields" }),
       searchableFieldNames.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-48 overflow-y-auto", children: searchableFieldNames.map((field) => /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2 cursor-pointer", children: [
           /* @__PURE__ */ jsx(
@@ -555,12 +555,12 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
                 setSearchFields(newFields);
                 AdminLocalStorage.setSearchFields(model.name, newFields);
               },
-              className: "h-4 w-4 mt-0.5 flex-shrink-0 text-green-web focus:ring-green-web border-gray-300 rounded"
+              className: "h-4 w-4 mt-0.5 flex-shrink-0 text-green-web focus:ring-green-web border-gray-300 dark:border-gray-600 rounded"
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 leading-5", children: formatFieldName(field) })
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300 leading-5", children: formatFieldName(field) })
         ] }, field)) }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200 flex justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 flex justify-between", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -580,17 +580,17 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
                 setSearchFields(defaults);
                 AdminLocalStorage.setSearchFields(model.name, defaults);
               },
-              className: "text-xs text-gray-600 hover:text-gray-800",
+              className: "text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200",
               children: "Reset to Defaults"
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "No searchable text fields available" })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No searchable text fields available" })
     ] }) })
   ] });
-  const filterPanel = showFilters && /* @__PURE__ */ jsxs("div", { className: "mb-4 bg-gray-50 border border-gray-200 rounded-lg p-4", children: [
+  const filterPanel = showFilters && /* @__PURE__ */ jsxs("div", { className: "mb-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Filters" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Filters" }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -599,7 +599,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
               setFilters({});
               dispatch({ type: "RESET_PAGINATION" });
             },
-            className: "text-xs text-gray-600 hover:text-gray-800",
+            className: "text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200",
             children: "Clear All"
           }
         ),
@@ -607,7 +607,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
           "button",
           {
             onClick: () => setShowFilters(false),
-            className: "text-gray-400 hover:text-gray-600",
+            className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
             children: /* @__PURE__ */ jsx(
               "svg",
               {
@@ -712,7 +712,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
           {
             id: "search",
             name: "search",
-            className: "block w-full pl-10 pr-12 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-green-web focus:border-green-web sm:text-sm",
+            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()}...`,
             type: "search",
             value: state.search || "",
@@ -727,7 +727,7 @@ function AdminDataListPage({ modelName: propModelName } = {}) {
         "button",
         {
           onClick: () => setShowFilters(!showFilters),
-          className: `inline-flex items-center px-3 py-2 border text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web ${showFilters || Object.keys(filters).length > 0 ? "border-green-web text-green-web bg-green-50 hover:bg-green-100" : "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"}`,
+          className: `inline-flex items-center px-3 py-2 border text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web ${showFilters || Object.keys(filters).length > 0 ? "border-green-web text-green-web bg-green-50 dark:bg-green-900/30 hover:bg-green-100 dark:hover:bg-green-900/50" : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700"}`,
           children: [
             /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
               "path",

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

@@ -32,5 +32,6 @@ export declare function buildFormFields(sdk: any, model: DatabaseModel, operatio
 /**
  * Clean form input data for GraphQL mutations
  * Removes Apollo metadata and system fields
+ * Handles Prisma array field update syntax
  */
 export declare function cleanFormInput(input: Record<string, unknown>, model?: DatabaseModel): Record<string, unknown>;

package/lib/utils/graphql-utils.js

@@ -436,11 +436,14 @@ function processNestedObject(value, model) {
   return Object.keys(cleanedNested).length > 0 ? cleanedNested : null;
 }
 function cleanFormInput(input, model) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const cleaned = {};
   const booleanFields = new Set(
     ((_b = (_a = model == null ? void 0 : model.fields) == null ? void 0 : _a.filter((field) => field.type.toLowerCase() === "boolean")) == null ? void 0 : _b.map((field) => field.name)) || []
   );
+  const arrayFields = new Map(
+    ((_d = (_c = model == null ? void 0 : model.fields) == null ? void 0 : _c.filter((field) => field.isList && !field.relationName)) == null ? void 0 : _d.map((field) => [field.name, { isRequired: !field.isOptional }])) || []
+  );
   for (const [key, value] of Object.entries(input)) {
     if (booleanFields.has(key) && value === void 0) {
       cleaned[key] = false;
@@ -449,8 +452,23 @@ function cleanFormInput(input, model) {
     if (shouldSkipValue(key, value)) {
       continue;
     }
+    const arrayFieldInfo = arrayFields.get(key);
+    if (arrayFieldInfo) {
+      if (value === null || value === "") {
+        cleaned[key] = arrayFieldInfo.isRequired ? { set: [] } : null;
+        continue;
+      }
+      let arrayValue;
+      if (Array.isArray(value)) {
+        arrayValue = value;
+      } else {
+        arrayValue = [value];
+      }
+      cleaned[key] = { set: arrayValue };
+      continue;
+    }
     if (typeof value === "string") {
-      const field = (_c = model == null ? void 0 : model.fields) == null ? void 0 : _c.find((f) => f.name === key);
+      const field = (_e = model == null ? void 0 : model.fields) == null ? void 0 : _e.find((f) => f.name === key);
       const convertedValue = convertStringValue(value, field);
       cleaned[key] = convertedValue;
       continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nestledjs/data-browser",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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": "^1.0.1",
+    "@nestledjs/shared-components": "^1.0.3",
     "react": "^19.0.0",
     "react-router": "^7.0.0"
   },