1292 lines
62 KiB
JavaScript
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."
|
||
|
|
]
|
||
|
|
});
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
////////////////////////////////////////
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/***/ })
|
||
|
|
|
||
|
|
};
|
||
|
|
;
|