@nestledjs/data-browser 0.1.12 → 0.1.13

package/lib/layouts/AdminDataLayout.js

@@ -4,7 +4,7 @@ import { useNavigate, useParams, Outlet } from "react-router";
 import { AdminLocalStorage } from "../utils/secure-storage.js";
 import { spacedWords, kebabCase } from "../utils/string-utils.js";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/layouts/AdminDataLayout.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/layouts/AdminDataLayout.tsx";
 function AdminDataLayout() {
   const navigate = useNavigate();
   const params = useParams();
@@ -58,18 +58,16 @@ function AdminDataLayout() {
     link.download = `admin-data-preferences-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.json`;
     document.body.appendChild(link);
     link.click();
-    document.body.removeChild(link);
+    link.remove();
     URL.revokeObjectURL(url);
     showNotification("success", "Preferences exported successfully");
   };
-  const handleImport = (event) => {
+  const handleImport = async (event) => {
     var _a;
     const file = (_a = event.target.files) == null ? void 0 : _a[0];
     if (!file) return;
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      var _a2;
-      const content2 = (_a2 = e.target) == null ? void 0 : _a2.result;
+    try {
+      const content2 = await file.text();
       if (!content2) {
         showNotification("error", "Failed to read file");
         return;
@@ -77,186 +75,185 @@ function AdminDataLayout() {
       const success = AdminLocalStorage.importConfig(content2);
       if (success) {
         showNotification("success", "Preferences imported successfully. Refreshing...");
-        setTimeout(() => window.location.reload(), 1500);
+        setTimeout(() => globalThis.location.reload(), 1500);
       } else {
         showNotification("error", "Invalid preferences file");
       }
-    };
-    reader.onerror = () => {
+    } catch {
       showNotification("error", "Failed to read file");
-    };
-    reader.readAsText(file);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
+    } finally {
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
     }
   };
   const triggerImport = () => {
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
-  const content = /* @__PURE__ */ React.createElement("div", { className: "max-w-full mx-auto flex flex-col", __self: this, __source: {
+  const content = /* @__PURE__ */ React.createElement("div", { className: "max-w-full mx-auto flex flex-col p-0.5", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 122,
+    lineNumber: 119,
     columnNumber: 5
   } }, notification && /* @__PURE__ */ React.createElement("div", { className: `mb-4 px-4 py-3 rounded-md border ${notification.type === "success" ? "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200" : "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200"}`, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 125,
+    lineNumber: 122,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 130,
+    lineNumber: 127,
     columnNumber: 11
   } }, notification.type === "success" ? /* @__PURE__ */ React.createElement("svg", { className: "w-5 h-5 mr-2", fill: "currentColor", viewBox: "0 0 20 20", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 132,
+    lineNumber: 129,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 133,
+    lineNumber: 130,
     columnNumber: 17
   } })) : /* @__PURE__ */ React.createElement("svg", { className: "w-5 h-5 mr-2", fill: "currentColor", viewBox: "0 0 20 20", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 136,
+    lineNumber: 133,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 137,
+    lineNumber: 134,
     columnNumber: 17
   } })), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 140,
+    lineNumber: 137,
     columnNumber: 13
   } }, notification.message))), /* @__PURE__ */ React.createElement("div", { className: "mb-6 space-y-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 146,
+    lineNumber: 143,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-end gap-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 147,
+    lineNumber: 144,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex-1", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 148,
+    lineNumber: 145,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "model-selector", className: "block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 149,
+    lineNumber: 146,
     columnNumber: 13
   } }, "Select Model"), /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 152,
+    lineNumber: 149,
     columnNumber: 13
   } }, /* @__PURE__ */ React.createElement("select", { id: "model-selector", value: (currentModel == null ? void 0 : currentModel.name) || "", onChange: handleModelChange, className: "w-full h-[50px] pl-4 pr-10 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-base appearance-none cursor-pointer", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 153,
+    lineNumber: 150,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("option", { value: "", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 159,
+    lineNumber: 156,
     columnNumber: 17
   } }, "Choose a model..."), sortedModels.map((model) => /* @__PURE__ */ React.createElement("option", { key: model.name, value: model.name, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 161,
+    lineNumber: 158,
     columnNumber: 19
   } }, getPluralName(spacedWords(model.name))))), /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 167,
+    lineNumber: 164,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("svg", { className: "h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 168,
+    lineNumber: 165,
     columnNumber: 17
   } }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 169,
+    lineNumber: 166,
     columnNumber: 19
   } }))))), /* @__PURE__ */ React.createElement("button", { onClick: toggleFullscreen, className: "h-[50px] px-4 py-3 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web transition-colors", title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 176,
+    lineNumber: 173,
     columnNumber: 11
   } }, isFullscreen ? /* @__PURE__ */ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 182,
+    lineNumber: 179,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 183,
+    lineNumber: 180,
     columnNumber: 17
   } })) : /* @__PURE__ */ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 186,
+    lineNumber: 183,
     columnNumber: 15
   } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 187,
+    lineNumber: 184,
     columnNumber: 17
   } })))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-sm", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 194,
+    lineNumber: 191,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-600 dark:text-gray-400", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 195,
+    lineNumber: 192,
     columnNumber: 11
   } }, "Preferences:"), /* @__PURE__ */ React.createElement("button", { onClick: handleExport, className: "inline-flex items-center px-3 py-1.5 text-gray-700 dark:text-gray-300 hover:text-green-web dark:hover:text-green-web transition-colors", title: "Export your preferences to a file", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 196,
+    lineNumber: 193,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 201,
+    lineNumber: 198,
     columnNumber: 13
   } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 202,
+    lineNumber: 199,
     columnNumber: 15
   } })), "Export"), /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 dark:text-gray-600", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 206,
+    lineNumber: 203,
     columnNumber: 11
   } }, "|"), /* @__PURE__ */ React.createElement("button", { onClick: triggerImport, className: "inline-flex items-center px-3 py-1.5 text-gray-700 dark:text-gray-300 hover:text-green-web dark:hover:text-green-web transition-colors", title: "Import preferences from a file", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 207,
+    lineNumber: 204,
     columnNumber: 11
   } }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 212,
+    lineNumber: 209,
     columnNumber: 13
   } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 213,
+    lineNumber: 210,
     columnNumber: 15
   } })), "Import"), /* @__PURE__ */ React.createElement("input", { ref: fileInputRef, type: "file", accept: "application/json,.json", onChange: handleImport, className: "hidden", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 217,
+    lineNumber: 214,
     columnNumber: 11
   } }))), /* @__PURE__ */ React.createElement("div", { __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 228,
+    lineNumber: 225,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement(Outlet, { __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 229,
+    lineNumber: 226,
     columnNumber: 9
   } })));
   if (isFullscreen) {
-    return /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 bg-white dark:bg-gray-900 flex flex-col", __self: this, __source: {
+    return /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 bg-white dark:bg-gray-900 flex flex-col overflow-auto", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 236,
+      lineNumber: 233,
       columnNumber: 7
     } }, /* @__PURE__ */ React.createElement("div", { className: "w-full p-6 md:p-8 lg:p-12", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 237,
+      lineNumber: 234,
       columnNumber: 9
     } }, content));
   }
   return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 245,
+    lineNumber: 242,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("main", { className: "w-full p-6 md:p-8 lg:p-12", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 246,
+    lineNumber: 243,
     columnNumber: 7
   } }, content));
 }

package/lib/pages/AdminDataCreatePage.js

@@ -1,13 +1,13 @@
+import React, { useState, useMemo, useEffect } from "react";
 import { gql } from "@apollo/client";
 import { useMutation } from "@apollo/client/react";
 import { ExclamationCircleIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
-import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { ErrorBoundary } from "@nestledjs/shared-components";
 import { Form } from "@nestledjs/forms";
-import { useState, useMemo, useEffect } from "react";
+import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { useParams, Link, useNavigate } from "react-router";
 import { getAdminDocuments, buildFormFields, cleanFormInput } from "../utils/graphql-utils.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/pages/AdminDataCreatePage.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/pages/AdminDataCreatePage.tsx";
 function toReadableText(text) {
   return text.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (str) => str.toUpperCase());
 }
@@ -202,7 +202,7 @@ function AdminDataCreatePageContent({
       columnNumber: 17
     } }, "Return to Data Browser"))))));
   }
-  const formFields = buildFormFields(sdk, model, "create");
+  const formFields = buildFormFields(sdk, model, "create", void 0, submissionState.status === "loading", basePath);
   const handleSubmit = async (formData) => {
     try {
       setSubmissionState({

package/lib/pages/AdminDataEditPage.js

@@ -1,15 +1,15 @@
+import React, { useState, useMemo, useEffect } from "react";
 import { gql } from "@apollo/client";
 import { useQuery, useMutation } from "@apollo/client/react";
 import { loadDevMessages, loadErrorMessages } from "@apollo/client/dev";
 import { ExclamationCircleIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
 import { TrashIcon } from "@heroicons/react/24/solid";
-import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { ErrorBoundary } from "@nestledjs/shared-components";
 import { Form } from "@nestledjs/forms";
-import { useState, useMemo, useEffect } from "react";
+import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { useParams, Link, useNavigate } from "react-router";
 import { getAdminDocuments, buildFormFields, cleanFormInput } from "../utils/graphql-utils.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/pages/AdminDataEditPage.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/pages/AdminDataEditPage.tsx";
 function toLowerCamelCase(name) {
   if (!name) return "";
   return name.charAt(0).toLowerCase() + name.slice(1);
@@ -423,7 +423,7 @@ function AdminDataEditPageContent({
       columnNumber: 17
     } }, "Back to List"))))));
   }
-  const formFields = buildFormFields(sdk, model, "update");
+  const formFields = buildFormFields(sdk, model, "update", item, submissionState.status === "loading", basePath);
   const initialValues = {};
   if (item) {
     const editableFields = model.fields.filter((field) => {

package/lib/pages/AdminDataIndexPage.js

@@ -1,8 +1,9 @@
+import React from "react";
 import { Link } from "react-router";
 import { getPluralName } from "@nestledjs/helpers";
 import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { kebabCase, spacedWords } from "../utils/string-utils.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/pages/AdminDataIndexPage.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/pages/AdminDataIndexPage.tsx";
 function AdminDataIndexPage() {
   const {
     databaseModels,
@@ -10,51 +11,51 @@ function AdminDataIndexPage() {
   } = useAdminDataContext();
   return /* @__PURE__ */ React.createElement("div", { className: "text-center py-12", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 13,
+    lineNumber: 14,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("div", { className: "max-w-2xl mx-auto", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 14,
+    lineNumber: 15,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 15,
+    lineNumber: 16,
     columnNumber: 9
   } }, "Database Administration"), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-600 dark:text-gray-300 mb-8", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 16,
+    lineNumber: 17,
     columnNumber: 9
   } }, "Choose a data model from the sidebar to get started with managing your database records."), /* @__PURE__ */ React.createElement("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg p-6 mb-8", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 20,
+    lineNumber: 21,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 21,
+    lineNumber: 22,
     columnNumber: 11
   } }, "Available Models"), /* @__PURE__ */ React.createElement("p", { className: "text-blue-700 dark:text-blue-300 mb-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 22,
+    lineNumber: 23,
     columnNumber: 11
   } }, "You can manage ", databaseModels.length, " different data models in your database:"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2 text-sm", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 25,
+    lineNumber: 26,
     columnNumber: 11
   } }, databaseModels.slice(0, 12).map((model) => /* @__PURE__ */ React.createElement(Link, { key: model.name, to: `${basePath}/${kebabCase(getPluralName(model.name))}`, className: "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 27,
+    lineNumber: 28,
     columnNumber: 15
   } }, getPluralName(spacedWords(model.name)))), databaseModels.length > 12 && /* @__PURE__ */ React.createElement("span", { className: "text-blue-600 dark:text-blue-400 italic", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 36,
+    lineNumber: 37,
     columnNumber: 15
   } }, "+", databaseModels.length - 12, " more..."))), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 41,
+    lineNumber: 42,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("p", { __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 42,
+    lineNumber: 43,
     columnNumber: 11
   } }, "This interface provides full CRUD (Create, Read, Update, Delete) operations for all your database models. Select a model from the sidebar to view and manage records."))));
 }