"use strict"; exports.id = 9788; exports.ids = [9788]; exports.modules = { /***/ 4559: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { // EXPORTS __webpack_require__.d(__webpack_exports__, { "Z": () => (/* binding */ TableEntryField) }); // EXTERNAL MODULE: external "react/jsx-runtime" var jsx_runtime_ = __webpack_require__(997); // EXTERNAL MODULE: external "react" var external_react_ = __webpack_require__(6689); var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_); ;// CONCATENATED MODULE: ./functions/frontend/generateFormElementsForEntry.js // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} params * @param {DSQL_FieldSchemaType} params.fieldObject * @param {any} params.dataTypeSchema * @param {React.MutableRefObject} params.elementRef * @param {any} params.entry */ function generateFormElementsForEntry({ fieldObject , dataTypeSchema , elementRef , entry , }) { /** * Javascript Variables * * @abstract Non hook variables and functions */ let formElement; const titleSlugHandler = (/** @type {any} */ e)=>{ const parentForm = e.target.closest("form"); if (!parentForm) return; const slug = parentForm?.querySelector("#slug"); if (slug) { slug.value = e.target.value.toLowerCase().replace(/ /g, "-").replace(/[^a-z\-0-9]/g, ""); } }; /** * Javascript Variables * * @abstract Non hook variables and functions */ if (fieldObject.defaultField) { formElement = /*#__PURE__*/ jsx_runtime_.jsx("input", { ref: elementRef, type: "text", name: "def_field_" + fieldObject.fieldName, id: "def_field_" + fieldObject.fieldName, placeholder: fieldObject.fieldName, defaultValue: entry && entry[fieldObject.fieldName || ""] ? entry[fieldObject.fieldName || ""] : fieldObject.defaultValue ? fieldObject.defaultValue : "", style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, readOnly: true, "data-default": "true" }); return formElement; } //////////////////////////////////////// if (fieldObject.dataType?.match(/varchar/i)) { formElement = /*#__PURE__*/ jsx_runtime_.jsx("textarea", { ref: elementRef, name: fieldObject.fieldName, id: fieldObject.fieldName, placeholder: fieldObject.fieldName, required: fieldObject.notNullValue ? true : false, maxLength: fieldObject.dataType?.match(/\d+/)?.[0] ? parseInt(fieldObject.dataType?.match(/\d+/)?.[0] || "") : undefined, defaultValue: entry && entry[fieldObject.fieldName || ""] ? entry[fieldObject.fieldName || ""] : fieldObject.defaultValue ? fieldObject.defaultValue : "", style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, onChange: (e)=>{ if (fieldObject.fieldName?.match(/^title$/)) titleSlugHandler(e); } }); } //////////////////////////////////////// if (fieldObject.dataType?.match(/int$/i)) { formElement = /*#__PURE__*/ jsx_runtime_.jsx("input", { ref: elementRef, type: "number", name: fieldObject.fieldName, id: fieldObject.fieldName, placeholder: fieldObject.fieldName, required: fieldObject.notNullValue ? true : false, max: dataTypeSchema.maxValue, style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, defaultValue: entry && entry[fieldObject.fieldName || ""] ? entry[fieldObject.fieldName || ""] : fieldObject.defaultValue ? fieldObject.defaultValue : "", onChange: (e)=>{} }); } //////////////////////////////////////// if (fieldObject.dataType?.match(/text$/i)) { formElement = /*#__PURE__*/ jsx_runtime_.jsx("textarea", { ref: elementRef, name: fieldObject.fieldName, id: fieldObject.fieldName, placeholder: fieldObject.fieldName, required: fieldObject.notNullValue ? true : false, defaultValue: entry && entry[fieldObject.fieldName || ""] ? entry[fieldObject.fieldName || ""] : fieldObject.defaultValue ? fieldObject.defaultValue : "", style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, rows: 10, onChange: (e)=>{} }); } //////////////////////////////////////// if (fieldObject.fieldName?.match(/password|^pass$|^key$/i)) { formElement = /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "w-full relative", children: [ /*#__PURE__*/ jsx_runtime_.jsx("input", { ref: elementRef, type: "password", name: fieldObject.fieldName, id: fieldObject.fieldName, placeholder: fieldObject.fieldName, required: fieldObject.notNullValue ? true : false, max: dataTypeSchema.maxValue, style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, defaultValue: entry && entry[fieldObject.fieldName] ? entry[fieldObject.fieldName] : fieldObject.defaultValue ? fieldObject.defaultValue : "", onChange: (e)=>{} }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "absolute right-4 cursor-pointer", onClick: (e)=>{ let input = e.target// @ts-ignore .closest("div").querySelector("input"); if (input.type === "password") { input.type = "text"; // @ts-ignore e.target.innerText = "Hide"; } else { input.type = "password"; // @ts-ignore e.target.innerText = "Reveal"; } }, children: "Reveal" }) ] }); } //////////////////////////////////////// if (!formElement) formElement = /*#__PURE__*/ jsx_runtime_.jsx("input", { ref: elementRef, type: "text", name: fieldObject.fieldName, id: fieldObject.fieldName, style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, defaultValue: entry && entry[fieldObject.fieldName || ""] ? entry[fieldObject.fieldName || ""] : fieldObject.defaultValue ? fieldObject.defaultValue : "", onChange: (e)=>{} }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// return formElement; } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./components/general/LoadingBlock.jsx var LoadingBlock = __webpack_require__(5264); // EXTERNAL MODULE: external "@mui/icons-material/LockOutlined" var LockOutlined_ = __webpack_require__(399); var LockOutlined_default = /*#__PURE__*/__webpack_require__.n(LockOutlined_); // EXTERNAL MODULE: external "@tinymce/tinymce-react" var tinymce_react_ = __webpack_require__(6451); // EXTERNAL MODULE: external "react-dom/client" var client_ = __webpack_require__(7849); var client_default = /*#__PURE__*/__webpack_require__.n(client_); ;// CONCATENATED MODULE: ./components/general/EmbedPopupContent.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props * @param {import("tinymce").Editor} props.editor * @param {HTMLElement} props.rootElement */ function EmbedPopupContent({ editor , rootElement }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "embed-popup-form-content-wrapper text-sm mt-2 flex-wrap bg-white p-10 rounded max-w-2xl w-full", children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("form", { onSubmit: (e)=>{ e.preventDefault(); /** @type {HTMLFormElement} */ // @ts-ignore const formEl = e.target; const htmlText = formEl["embed-text-area"].value; if (!htmlText?.match(/./)) return alert("Please Enter HTML Text to continue."); editor.insertContent(htmlText); document.body.removeChild(rootElement); }, className: "w-full flex flex-col items-stretch gap-2", children: [ /*#__PURE__*/ jsx_runtime_.jsx("h3", { className: "m-0 text-center text-lg", children: "Enter HTML code" }), /*#__PURE__*/ jsx_runtime_.jsx("textarea", { name: "embed-text-area", id: "embed-text-area", cols: 30, rows: 10, placeholder: "Paste Code here ..." }), /*#__PURE__*/ jsx_runtime_.jsx("button", { type: "submit", children: "Embed" }) ] }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ ;// CONCATENATED MODULE: ./functions/frontend/handleCopyHTML.js // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Auth user on client side * ============================================================================== * @param {object} params * @param {import("tinymce").Editor} [params.editor] * * @requires search-field name attribute */ function handleCopyHTML({ editor }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ navigator.clipboard.writeText(editor?.getContent() || "").then(()=>{ alert("Html Copied to Clipboard!"); }); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// // EXTERNAL MODULE: external "lucide-react" var external_lucide_react_ = __webpack_require__(2423); // EXTERNAL MODULE: external "html-prettify" var external_html_prettify_ = __webpack_require__(2329); var external_html_prettify_default = /*#__PURE__*/__webpack_require__.n(external_html_prettify_); ;// CONCATENATED MODULE: ./components/general/EditHTMLPopupContent.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props * @param {import("tinymce").Editor} props.editor * @param {HTMLElement} props.rootElement */ function EditHTMLPopupContent({ editor , rootElement }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const html = editor.getContent(); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ /** @type {React.RefObject} */ const editorRef = external_react_default().useRef(); /** @type {React.RefObject} */ // @ts-ignore const saveButtonRef = external_react_default().useRef(); /** @type {[state: AceAjax.Editor | null, setState: React.Dispatch>]} */ // @ts-ignore const [aceEditor, setAceEditor] = external_react_default().useState(null); external_react_default().useEffect(()=>{ try { if (!ace?.edit || !editorRef.current) { console.log("Ace Editor not found!"); return; } const editor = ace.edit(editorRef.current); editor.setOptions({ mode: "ace/mode/html", value: external_html_prettify_default()(html) }); setAceEditor(editor); try { const beautify = ace.require("ace/ext/beautify"); beautify.beautify(editor.session); } catch (/** @type {any} */ error) {} } catch (/** @type {any} */ error1) { console.log("JSON Editor ERROR =>", error1.message); } }, []); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { onKeyUp: (e)=>{ if (e.ctrlKey && e.key == "Enter") { saveButtonRef.current?.click(); } }, children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "embed-popup-form-content-wrapper relative flex flex-col items-center justify-center", children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "max-w-[1200px] rounded-md overflow-hidden bg-white w-[90vw] items-start justify-start relative", children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { ref: editorRef, className: "w-full h-[80vh] text-[18px]" }), /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "absolute bottom-4 right-4", onClick: (e)=>{ if (aceEditor) { /** @type {AceAjax.Editor} */ const finalAceEditor = aceEditor; const content = finalAceEditor.getValue(); editor.setContent(content); setTimeout(()=>{ document.body.removeChild(rootElement); }, 200); } }, ref: saveButtonRef, children: "Save" }) ] }) }), /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "absolute top-4 right-8 rounded-full white", onClick: ()=>{ try { document.body.removeChild(rootElement); } catch (error) {} }, style: { width: "40px", height: "40px", padding: "0", zIndex: "12039800000" }, children: /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.X, {}) }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ ;// CONCATENATED MODULE: ./functions/frontend/handleEditHTML.js // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Auth user on client side * ============================================================================== * @param {object} params * @param {import("tinymce").Editor} [params.editor] * * @requires search-field name attribute */ function handleEditHTML({ editor }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ const popupWrapper = document.createElement("div"); popupWrapper.style.position = "fixed"; popupWrapper.style.width = "100vw"; popupWrapper.style.height = "100vh"; popupWrapper.style.zIndex = "123000000000000000"; popupWrapper.style.backgroundColor = "rgba(0,0,0,0.8)"; popupWrapper.style.display = "flex"; popupWrapper.style.alignItems = "center"; popupWrapper.style.justifyContent = "center"; popupWrapper.style.top = "0"; popupWrapper.style.left = "0"; document.body.append(popupWrapper); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// popupWrapper.onclick = (e)=>{ /** @type {HTMLElement} */ // @ts-ignore const el = e.target; if (el.closest(".embed-popup-form-content-wrapper")) { return; } document.body.removeChild(popupWrapper); }; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// if (editor) { const root = client_default().createRoot(popupWrapper); root.render(/*#__PURE__*/ jsx_runtime_.jsx(EditHTMLPopupContent, { editor: editor, rootElement: popupWrapper })); } } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ;// CONCATENATED MODULE: ./functions/frontend/handleEmbed.js // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Auth user on client side * ============================================================================== * @param {object} params * @param {import("tinymce").Editor} [params.editor] * * @requires search-field name attribute */ function handleEmbed({ editor }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ const popupWrapper = document.createElement("div"); popupWrapper.style.position = "fixed"; popupWrapper.style.width = "100vw"; popupWrapper.style.height = "100vh"; popupWrapper.style.zIndex = "123000000000000000"; popupWrapper.style.backgroundColor = "rgba(0,0,0,0.8)"; popupWrapper.style.display = "flex"; popupWrapper.style.alignItems = "center"; popupWrapper.style.justifyContent = "center"; popupWrapper.style.top = "0"; popupWrapper.style.left = "0"; document.body.append(popupWrapper); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// popupWrapper.onclick = (e)=>{ /** @type {HTMLElement} */ // @ts-ignore const el = e.target; if (el.closest(".embed-popup-form-content-wrapper")) { console.log("Still In Form"); return; } document.body.removeChild(popupWrapper); }; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// if (editor) { const root = client_default().createRoot(popupWrapper); root.render(/*#__PURE__*/ jsx_runtime_.jsx(EmbedPopupContent, { editor: editor, rootElement: popupWrapper })); } } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ;// CONCATENATED MODULE: ./functions/frontend/tinyMCEEditorSetup.js // @ts-check /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * @param {object} params * @param {import("tinymce").Editor} params.editor * @param {string} [params.formButtonId] */ function tinyMCEEditorSetup({ editor , formButtonId }) { editor.addShortcut("meta+13", "Save Entry.", ()=>{ const confirm = window.confirm("Update this Form?"); if (!confirm) return; if (formButtonId) document.getElementById(formButtonId)?.click(); }); editor.addShortcut("meta+shift+e", "Edit Code.", ()=>{ handleEditHTML({ editor }); }); editor.addShortcut("meta+shift+d", "Embed Code.", ()=>{ handleEmbed({ editor }); }); editor.addShortcut("meta+shift+c", "Copy Code.", ()=>{ handleCopyHTML({ editor }); }); editor.ui.registry.addButton("editCode", { icon: "edit-block", onAction: (_)=>handleEditHTML({ editor }), tooltip: "Edit HTML Code" }); editor.ui.registry.addButton("embedCode", { icon: "sourcecode", onAction: (_)=>handleEmbed({ editor }), tooltip: "Embed Code" }); editor.ui.registry.addButton("copyCode", { icon: "copy", onAction: (_)=>handleCopyHTML({ editor }), tooltip: "Copy HTML" }); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ;// CONCATENATED MODULE: ./components/admin/databases/TableRichTextEntryField.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.fieldObject * @param {any} [props.dataTypeSchema] * @param {React.MutableRefObject} props.richTextEditors * @param {React.MutableRefObject} props.currentRichTextEditorForms * @param {any} props.entry * @param {boolean} [props.entryPage] * @param {string} [props.formButtonId] */ function TableRichTextEntryField({ fieldObject , dataTypeSchema , richTextEditors , entry , currentRichTextEditorForms , entryPage , formButtonId , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [ready, setReady] = external_react_default().useState(false); const elementRef = external_react_default().useRef(); /** @type {React.MutableRefObject} */ const editorRef = external_react_default().useRef(); const log = ()=>{ if (editorRef.current) { console.log(editorRef.current.getContent()); } }; external_react_default().useEffect(()=>{ setReady(true); }, []); external_react_default().useEffect(()=>{ if (ready) { richTextEditors.current.push({ fieldName: fieldObject.fieldName || "", // @ts-ignore ref: editorRef }); currentRichTextEditorForms.current.push({ fieldName: fieldObject.fieldName || "", // @ts-ignore ref: editorRef }); } }, [ ready ]); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-0 w-full rich-text-editor-wrapper", children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("label", { className: "font-bold text-slate-700 dark:text-slate-300 text-base px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-t-md border border-solid border-slate-300 dark:border-slate-300/20 flex items-center gap-2", htmlFor: fieldObject.fieldName, children: [ fieldObject.encrypted && /*#__PURE__*/ jsx_runtime_.jsx((LockOutlined_default()), { fontSize: "small", className: "opacity-50" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { children: fieldObject.fieldName }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { // @ts-ignore ref: elementRef, id: fieldObject.fieldName, className: "w-full p-0 sm:p-4 flex-col items-stretch bg-slate-100 relative dark:bg-slate-700 border border-solid border-slate-300 dark:border-slate-300/20", style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px" }, children: [ !ready && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, {}), ready && /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ jsx_runtime_.jsx(tinymce_react_.Editor, { tinymceScriptSrc: "/tinymce/tinymce.min.js", onInit: (evt, editor)=>{ editorRef.current = editor; }, initialValue: fieldObject.defaultValue || (entry && fieldObject.fieldName && entry[fieldObject.fieldName] ? entry[fieldObject.fieldName] : ""), init: { height: entryPage ? 400 : 300, width: "100%", convert_urls: false, menubar: false, plugins: [ "advlist", "lists", "link", "image", "charmap", "anchor", "searchreplace", "visualblocks", "code", "fullscreen", "insertdatetime", "media", "table", "preview", "help", "wordcount", ], toolbar: "undo redo | blocks | " + "bold italic forecolor | link image | alignleft aligncenter " + "alignright alignjustify | bullist numlist outdent indent | " + "removeformat help | editCode embedCode copyCode", placeholder: "Type something ...", document_base_url: "/", content_css: fieldObject.cssFiles || undefined, setup: (editor)=>{ tinyMCEEditorSetup({ editor, formButtonId }); } } }) }) ] }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./functions/frontend/fetchApi.js var fetchApi = __webpack_require__(6729); // EXTERNAL MODULE: external "@monaco-editor/react" var react_ = __webpack_require__(2587); ;// CONCATENATED MODULE: ./components/admin/databases/fields/text/ace-editor.js // @ts-check /** * # Setup ACE Editor * @param {object} param0 * @param {React.MutableRefObject} param0.jsonEditorRef * @param {import("@/package-shared/types").DSQL_FieldSchemaType} param0.fieldObject * @param {React.Dispatch>} param0.setRefresh * @param {import("./JSONEditor").AceTextType} param0.typeFinal * @param {any} param0.entry * @param {React.MutableRefObject} param0.jsonTextEditors * @param {React.MutableRefObject} param0.editorRef */ function aceEditorSetup({ jsonEditorRef , fieldObject , setRefresh , typeFinal , entry , jsonTextEditors , editorRef , }) { try { if (!ace?.edit || !jsonEditorRef.current || !fieldObject.fieldName) { console.log("Ace Editor not found!"); setTimeout(()=>{ setRefresh((prev)=>prev + 1); }, 1000); return; } const editor = ace.edit(jsonEditorRef.current); editor.setOptions({ mode: "ace/mode/" + typeFinal, // theme: "ace/theme/twilight", value: fieldObject.defaultValue ? fieldObject.defaultValue : entry?.[fieldObject.fieldName] ? (()=>{ if (typeFinal !== "json") return entry[fieldObject.fieldName]; try { return JSON.stringify(JSON.parse(entry[fieldObject.fieldName]), null, 4); } catch (error) { return entry[fieldObject.fieldName]; } })() : "", placeholder: typeFinal == "json" ? "{} ..." : "", enableBasicAutocompletion: true, enableLiveAutocompletion: true }); jsonTextEditors.current.push({ fieldName: fieldObject.fieldName, ref: editorRef }); editorRef.current = editor; try { const beautify = ace.require("ace/ext/beautify"); beautify.beautify(editor.session); } catch (/** @type {any} */ error) {} } catch (/** @type {any} */ error1) { console.log("JSON Editor ERROR =>", error1.message); } } ;// CONCATENATED MODULE: ./components/admin/databases/fields/text/JSONEditorHeader.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * # JSON editor Header * @param {Object} props * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.fieldObject * @param {import("./JSONEditor").AceTextType} props.typeFinal * @param {boolean} props.isExpanded * @param {React.Dispatch>} props.setHeight * @param {number} props.COLLAPSED_HEIGHT * @param {number} props.EXPANDED_HEIGHT * @returns */ function JSONEditorHeader({ fieldObject , typeFinal , isExpanded , setHeight , COLLAPSED_HEIGHT , EXPANDED_HEIGHT , }) { return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "gap-2 w-full", children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("label", { className: "font-bold text-slate-700 dark:text-slate-300 text-base px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-t-md border border-solid border-slate-300 dark:border-slate-300/20 flex items-center gap-2", htmlFor: fieldObject.fieldName, children: [ fieldObject.encrypted && /*#__PURE__*/ jsx_runtime_.jsx((LockOutlined_default()), { fontSize: "small", className: "opacity-50" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { children: fieldObject.fieldName }) ] }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "px-4 py-1 bg-secondary text-white rounded-full text-sm font-bold -mt-2", children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: typeFinal }) }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "ml-auto cursor-pointer gap-1 text-slate-400 hover:text-slate-800 -mt-2 items-center flex", onClick: (e)=>{ if (isExpanded) { setHeight(COLLAPSED_HEIGHT); } else { setHeight(EXPANDED_HEIGHT); } }, children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "font-semibold text-sm", children: isExpanded ? "Collapse" : "Expand" }), isExpanded ? /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.CircleMinus, { size: 18, className: "mt-[-1px]" }) : /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.CirclePlus, { size: 18, className: "mt-[-1px]" }) ] }) ] }); } ;// CONCATENATED MODULE: ./components/admin/databases/fields/text/JSONEditor.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * @typedef {"yaml" | "json" | "html" | "css" | "javascript" | "shell"} AceTextType */ const COLLAPSED_HEIGHT = 300; const EXPANDED_HEIGHT = 600; /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.fieldObject * @param {any} [props.dataTypeSchema] * @param {any | undefined} props.entry * @param {boolean} [props.entryPage] * @param {React.MutableRefObject} props.jsonTextEditors * @param {AceTextType} [props.type] */ function JSONEditor({ fieldObject , dataTypeSchema , entry , entryPage , jsonTextEditors , type , }) { /** * Get Contexts * * @abstract { React.useContext } */ /** @type {AceTextType} */ const typeFinal = type || "json"; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// try { /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [refresh, setRefresh] = external_react_default().useState(0); const [height, setHeight] = external_react_default().useState(COLLAPSED_HEIGHT); const isExpanded = height !== COLLAPSED_HEIGHT; /** @type {React.MutableRefObject} */ const jsonEditorRef = external_react_default().useRef(); /** @type {React.MutableRefObject} */ // @ts-ignore const editorRef = external_react_default().useRef(); external_react_default().useEffect(()=>{ aceEditorSetup({ editorRef, entry, fieldObject, jsonEditorRef, jsonTextEditors, setRefresh, typeFinal }); }, [ refresh ]); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-0 w-full rich-text-editor-wrapper", children: [ /*#__PURE__*/ jsx_runtime_.jsx(JSONEditorHeader, { fieldObject, isExpanded, setHeight, typeFinal, COLLAPSED_HEIGHT, EXPANDED_HEIGHT }), /*#__PURE__*/ jsx_runtime_.jsx(JSONContent, { height: height, jsonEditorRef: jsonEditorRef }) ] }) }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } catch (/** @type {any} */ error) { external_react_default().useEffect(()=>{ (0,fetchApi/* default */.Z)("/api/admin/clientError", { method: "post", body: { component: "DatabaseShellContent/catch-error-return", message: error.message } }); }, []); return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Editor Load Error" }) }); } } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * * @param {Object} props * @param {number} props.height * @param {React.MutableRefObject} props.jsonEditorRef * @returns */ function JSONContent({ height , jsonEditorRef }) { return /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "w-full p-0 sm:p-4 flex-col relative dark:bg-slate-700 border border-solid border-slate-300 dark:border-slate-300/20 overflow-hidden", style: { borderRadius: "0 5px 5px 5px", marginTop: "-1px", height: `${height}px` }, children: /*#__PURE__*/ jsx_runtime_.jsx("div", { // @ts-ignore ref: jsonEditorRef, className: `w-full text-[18px] h-full` }) }); } ;// CONCATENATED MODULE: ./components/admin/databases/TableEntryField.jsx // @ts-check /** # MODULE TRACE ====================================================================== * Detected 2 files that call this module. The files are listed below: ====================================================================== * `import` Statement Found in [TableEntryForm.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\TableEntryForm.jsx * `import` Statement Found in [UpdateEntryForm.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\UpdateEntryForm.jsx ==== MODULE TRACE END ==== */ /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.fieldObject * @param {Object} props.dataTypeSchema * @param {React.MutableRefObject} props.richTextEditors * @param {React.MutableRefObject} props.jsonTextEditors * @param {any} [props.entry] * @param {React.MutableRefObject} props.currentRichTextEditorForms * @param {any} props.confirmedDelegetedUser * @param {any} [props.query] * @param {boolean} [props.entryPage] * @param {string} [props.formButtonId] */ function TableEntryField({ fieldObject , dataTypeSchema , richTextEditors , jsonTextEditors , entry , currentRichTextEditorForms , confirmedDelegetedUser , query , entryPage , formButtonId , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const isDelegated = confirmedDelegetedUser?.delegated; const isTableEditable = confirmedDelegetedUser?.priviledges?.match(/Edit Tables/i); const isTableDeletable = confirmedDelegetedUser?.priviledges?.match(/Delete Tables/i); const isTableCreatable = confirmedDelegetedUser?.priviledges?.match(/Create Tables/i); const areEntriesEditable = confirmedDelegetedUser?.priviledges?.match(/Edit Entries/i); const areEntriesDeletable = confirmedDelegetedUser?.priviledges?.match(/Delete Entries/i); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const elementRef = external_react_default().useRef(); const formElement = generateFormElementsForEntry({ fieldObject, dataTypeSchema, elementRef, entry }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ if (fieldObject.dataType?.match(/text$/i) && fieldObject.richText && !fieldObject.plainText && !fieldObject.fieldName?.match(/^pass|^key$/i) && !fieldObject.encrypted || fieldObject.encrypted && fieldObject.richText) return /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ jsx_runtime_.jsx(TableRichTextEntryField, { fieldObject: fieldObject, dataTypeSchema: dataTypeSchema, richTextEditors: richTextEditors, currentRichTextEditorForms: currentRichTextEditorForms, entry: entry, entryPage: entryPage, formButtonId: formButtonId }) }); const isAceEditor = fieldObject.json || fieldObject.yaml || fieldObject.html || fieldObject.css || fieldObject.javascript || fieldObject.shell; /** * JSON Return * * @abstract Return if Datatype is JSON */ if (fieldObject.dataType?.match(/text$/i) && isAceEditor && !fieldObject.plainText && !fieldObject.fieldName?.match(/^pass|^key$/i) && !fieldObject.encrypted || fieldObject.encrypted && isAceEditor) { return /*#__PURE__*/ jsx_runtime_.jsx(JSONEditor, { fieldObject: fieldObject, dataTypeSchema: dataTypeSchema, entry: entry, entryPage: entryPage, jsonTextEditors: jsonTextEditors, type: (()=>{ if (fieldObject.json) return "json"; if (fieldObject.yaml) return "yaml"; if (fieldObject.html) return "html"; if (fieldObject.css) return "css"; if (fieldObject.javascript) return "javascript"; if (fieldObject.shell) return "shell"; return "json"; })() }); } //////////////////////////////////////// return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-0 w-full" + (fieldObject.defaultField ? " opacity-50" : ""), children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("label", { className: "font-bold text-slate-700 dark:text-slate-300 text-base px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-t-md border border-solid border-slate-300 dark:border-slate-300/20 flex items-center gap-2", htmlFor: fieldObject.fieldName, children: [ fieldObject.encrypted && /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ jsx_runtime_.jsx((LockOutlined_default()), { fontSize: "small", className: "opacity-50" }) }), /*#__PURE__*/ jsx_runtime_.jsx("span", { children: fieldObject.fieldName }), fieldObject.defaultField && /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "bg-white dark:bg-slate-900 text-primary dark:text-slate-300 font-semibold text-xs px-2 py-0.5 rounded-xs", children: "Default Field" }) ] }), formElement ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }), /***/ 8515: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "Z": () => (/* binding */ ActiveCloneTableBanner) /* harmony export */ }); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997); /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _mui_icons_material_MenuBookTwoTone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5557); /* harmony import */ var _mui_icons_material_MenuBookTwoTone__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_mui_icons_material_MenuBookTwoTone__WEBPACK_IMPORTED_MODULE_2__); // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props * @param {import("@/package-shared/types").DSQL_TableSchemaType} props.table * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database * @param {number} [props.activeDbClone] * @param {import("@/package-shared/types").UserType} props.user */ function ActiveCloneTableBanner({ table , database , user , activeDbClone , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const cloneParentDb = table?.childTableDbFullName ? table.childTableDbFullName.replace(new RegExp(/datasquirel_user_\d+_/), "") : null; const isCurrentDb = table.childTableDbFullName === database.db_full_name; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ if (!cloneParentDb) return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {}); return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", { className: "info small green gap-1" + (database?.active_clone ? " -mt-6" : ""), style: { fontWeight: "500" }, children: [ "This Table is an active clone of", " ", /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("a", { href: `/admin/${user?.id}/databases/${cloneParentDb}/tables/${table.childTableName}`, target: "_blank", className: "button gray outlined small-text", style: { display: "inline-block", fontSize: "12px", padding: "3px 7px" }, children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("b", { children: table.childTableName }) }), " ", "in", " ", isCurrentDb ? /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", { children: [ "this current database(", /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("b", { children: database.db_name }), ")." ] }) : /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), { children: [ /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("a", { href: `/admin/${user?.id}/databases/${cloneParentDb}`, target: "_blank", className: "button gray outlined small-text", style: { display: "inline-block", fontSize: "12px", padding: "3px 7px" }, children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("b", { children: cloneParentDb }) }), /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", { children: "database." }) ] }), " ", database?.active_clone ? "" : "Only Foreign keys and Entries can be updated." ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /***/ }) }; ;