dsql-admin/dsql-app/.local_dist/server/chunks/9788.js
2024-11-05 12:12:42 +01:00

1292 lines
62 KiB
JavaScript

"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<any>} 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<any>} */ const editorRef = external_react_default().useRef();
/** @type {React.RefObject<HTMLButtonElement>} */ // @ts-ignore
const saveButtonRef = external_react_default().useRef();
/** @type {[state: AceAjax.Editor | null, setState: React.Dispatch<React.SetStateAction<AceAjax.Editor | null>>]} */ // @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<import("@/package-shared/types").RichTextEditorsRefArray[]>} props.richTextEditors
* @param {React.MutableRefObject<import("@/package-shared/types").RichTextEditorsRefArray[]>} 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<import("tinymce").Editor | undefined>} */ 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<HTMLDivElement | undefined>} param0.jsonEditorRef
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} param0.fieldObject
* @param {React.Dispatch<React.SetStateAction<number>>} param0.setRefresh
* @param {import("./JSONEditor").AceTextType} param0.typeFinal
* @param {any} param0.entry
* @param {React.MutableRefObject<import("@/package-shared/types").JSONTextEditorsRefArray[]>} param0.jsonTextEditors
* @param {React.MutableRefObject<AceAjax.Editor>} 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<React.SetStateAction<number>>} 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<import("@/package-shared/types").JSONTextEditorsRefArray[]>} 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<HTMLDivElement | undefined>} */ const jsonEditorRef = external_react_default().useRef();
/** @type {React.MutableRefObject<AceAjax.Editor>} */ // @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<HTMLDivElement | undefined>} 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<import("@/package-shared/types").RichTextEditorsRefArray[]>} props.richTextEditors
* @param {React.MutableRefObject<import("@/package-shared/types").JSONTextEditorsRefArray[]>} props.jsonTextEditors
* @param {any} [props.entry]
* @param {React.MutableRefObject<import("@/package-shared/types").RichTextEditorsRefArray[]>} 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."
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
/***/ })
};
;