dsql-admin/dsql-app/.local_dist/server/chunks/3974.js

1192 lines
57 KiB
JavaScript
Raw Normal View History

2024-11-05 11:12:42 +00:00
"use strict";
exports.id = 3974;
exports.ids = [3974];
exports.modules = {
/***/ 3726:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "Z": () => (/* binding */ AddDatabaseForm)
/* 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 _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5264);
/* harmony import */ var _pages_admin_user_id_databases_add_database__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6706);
/* harmony import */ var _functions_frontend_checkUniqueField__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4105);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5472);
/* harmony import */ var _DatabaseForm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3121);
/* harmony import */ var _DatabaseImage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1933);
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/ function AddDatabaseForm(props) {
/**
* Get Contexts
*
* @abstract { React.useContext }
*/ const { user , dbImage , setDbImage , query } = react__WEBPACK_IMPORTED_MODULE_1___default().useContext(_pages_admin_user_id_databases_add_database__WEBPACK_IMPORTED_MODULE_3__.AddDatabaseContext);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ if (!user) {
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {});
}
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* React Hooks
*
* @abstract { useState, useEffect, useRef, etc ... }
*/ const [alert, setAlert] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
// React.useEffect(() => {
// if (!dbImage?.imageBase64Full) {
// const presetImage = document.createElement("img");
// presetImage.src = "/images/database-placeholder.png";
// imageNodeToBase64SpecificWidth({ imageNode: presetImage, maxWidth: 400, mimeType: "image/png" }).then((res) => {
// setDbImage({ ...res, imageName: "Preset-db-image" })
// })
// }
// }, [])
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Function Return
*
* @abstract Main Function Return
*/ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("section", {
className: "card",
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "w-full grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch",
children: [
loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "flex-col items-start",
children: [
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
className: "text-xl m-0 text-left w-full",
children: "New Database Information"
}),
user && dbImage && setDbImage && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_DatabaseForm__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
user: user,
dbImage: dbImage,
setDbImage: setDbImage,
setLoading: setLoading,
query: query
})
]
}),
user && dbImage && setDbImage && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_DatabaseImage__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
user: user,
dbImage: dbImage,
setDbImage: setDbImage
})
]
})
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
/***/ }),
/***/ 3121:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"Z": () => (/* binding */ DatabaseForm)
});
// 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_);
// EXTERNAL MODULE: ./functions/frontend/checkUniqueField.js
var checkUniqueField = __webpack_require__(4105);
// EXTERNAL MODULE: ./components/general/FormAlertBlock.jsx
var FormAlertBlock = __webpack_require__(7037);
// EXTERNAL MODULE: external "react-dom"
var external_react_dom_ = __webpack_require__(6405);
// EXTERNAL MODULE: ./functions/frontend/fetchApi.js
var fetchApi = __webpack_require__(6729);
// EXTERNAL MODULE: ./functions/frontend/updateDiskUsage.js
var updateDiskUsage = __webpack_require__(1069);
;// CONCATENATED MODULE: ./functions/frontend/submitUpdateDatabaseForm.js
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
let timeout;
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} params
* @param {any} params.e
* @param {React.Dispatch<React.SetStateAction<boolean>>} params.setLoading
* @param {any} params.dbImage
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} params.database
* @param {import("@/package-shared/types").UserType} params.user
*/ async function submitUpdateDatabaseForm({ e , setLoading , dbImage , database , user , }) {
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ setLoading(true);
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ /** @type {any} */ let formBody = {
db_description: e.target["database_description"]?.value?.match(/./) ? e.target["database_description"].value : null,
db_name: e.target["database_name"]?.value?.match(/./) ? e.target["database_name"].value : null,
db_slug: e.target["database_slug"]?.value?.match(/./) ? e.target["database_slug"].value : null,
db_full_name: database.db_full_name,
id: database.id,
active_clone: database.active_clone,
active_clone_parent_db: database.active_clone_parent_db
};
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ if (dbImage) {
if (typeof dbImage === "string") {
formBody.db_image = dbImage;
} else if (typeof dbImage === "object") {
const uploadImage = await (0,fetchApi/* default */.Z)("/api/addUserMedia", {
method: "post",
body: {
media: [
dbImage
],
folder: formBody.db_slug.replace(/_/g, "-"),
type: "image"
}
}, true);
formBody.db_image = uploadImage?.mediaData[0]?.media_thumbnail_url ? uploadImage.mediaData[0].media_thumbnail_url : "/images/database-placeholder.png";
}
} else {
formBody.db_image = "/images/database-placeholder.png";
}
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ (0,fetchApi/* default */.Z)("/api/updateUserDatabase", {
method: "post",
body: formBody
}, true).then((res)=>{
if (res.success) {
(0,updateDiskUsage/* default */.Z)().then(()=>{
window.location.pathname = `/admin/${user?.id}/databases`;
setTimeout(()=>{
setLoading(false);
}, 1000);
});
} else {
alert("Error! Please Try Again");
setTimeout(()=>{
setLoading(false);
}, 1000);
}
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
;// CONCATENATED MODULE: ./functions/frontend/submitNewDatabaseForm.js
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
let submitNewDatabaseForm_timeout;
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} params
* @param {any} params.e
* @param {React.Dispatch<React.SetStateAction<boolean>>} params.setLoading
* @param {any} params.dbImage
* @param {boolean} params.keepUpdated
* @param {boolean} params.keepDataUpdated
* @param {any} params.query
* @param {import("@/package-shared/types").UserType} params.user
*/ async function submitNewDatabaseForm({ e , setLoading , dbImage , keepUpdated , keepDataUpdated , query , user , }) {
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ setLoading(true);
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ /** @type {any} */ let formBody = {
db_name: e.target["database_name"].value,
db_slug: e.target["database_slug"].value,
db_description: e.target["database_description"]?.value?.match(/./) ? e.target["database_description"].value : null
};
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ if (dbImage) {
if (typeof dbImage === "string") {
formBody.db_image = dbImage;
} else if (typeof dbImage === "object") {
const uploadImage = await (0,fetchApi/* default */.Z)("/api/addUserMedia", {
method: "post",
body: {
media: [
dbImage
],
folder: formBody.db_slug.replace(/_/g, "-"),
type: "image"
}
}, true);
formBody.db_image = uploadImage?.mediaData[0]?.media_thumbnail_url ? uploadImage.mediaData[0].media_thumbnail_url : "/images/database-placeholder.png";
}
}
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ if (query?.duplicate) {
formBody["duplicate"] = query.duplicate;
formBody["keepUpdated"] = keepUpdated ? keepUpdated : false;
formBody["keepDataUpdated"] = keepDataUpdated ? keepDataUpdated : false;
}
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ (0,fetchApi/* default */.Z)("/api/createUserDatabase", {
method: "post",
body: formBody
}, true).then((res)=>{
if (res.success) {
(0,updateDiskUsage/* default */.Z)().then(()=>{
window.location.pathname = `/admin/${user?.id}/databases/${formBody.db_slug}`;
});
} else {
setTimeout(()=>{
setLoading(false);
}, 1000);
}
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
// EXTERNAL MODULE: ./components/form/FormCheckboxes.jsx
var FormCheckboxes = __webpack_require__(9486);
;// CONCATENATED MODULE: ./components/admin/databases/DatabaseForm.jsx
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** @type {any} */ let DatabaseForm_timeout;
/** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
* @param {import("@/package-shared/types").UserType} props.user
* @param {string | import("@/package-shared/types").ImageObjectType} props.dbImage
* @param {React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>>} [props.setDbImage]
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} [props.database]
* @param {React.Dispatch<React.SetStateAction<boolean>>} props.setLoading
* @param {any} [props.query]
*/ function DatabaseForm({ user , dbImage , setDbImage , database , setLoading , query , }) {
/**
* Get Contexts
*
* @abstract { React.useContext }
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
* @param {string} value
*/ async function checkDuplicateSlug(value) {
if (database?.db_slug === value) {
return null;
}
const duplicate = await (0,checkUniqueField/* default */.Z)({
tableName: "user_databases",
columnName: "db_slug",
value: value,
userId: user.id
});
return duplicate;
}
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* React Hooks
*
* @abstract { useState, useEffect, useRef, etc ... }
*/ /** @type { any } */ const alertState = external_react_default().useState(null);
/** @type { [alert: string | null, setAlert: React.Dispatch<React.SetStateAction<string | null>>] } */ const [alert, setAlert] = alertState;
const [keepUpdated, setKeepUpdated] = external_react_default().useState(false);
const [keepDataUpdated, setKeepDataUpdated] = external_react_default().useState(false);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Function Return
*
* @abstract Main Function Return
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("form", {
className: "w-full max-w-none xl:max-w-lg flex flex-col items-start gap-4 relative",
onSubmit: (e)=>{
e.preventDefault();
if (database) {
submitUpdateDatabaseForm({
e,
setLoading,
dbImage,
database,
user
});
} else {
submitNewDatabaseForm({
e,
setLoading,
dbImage,
keepUpdated,
keepDataUpdated,
query,
user
});
}
},
children: [
alert && /*#__PURE__*/ jsx_runtime_.jsx(FormAlertBlock/* default */.Z, {
message: alert
}),
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
className: "flex flex-col items-start gap-0.5 w-full",
children: [
/*#__PURE__*/ jsx_runtime_.jsx("label", {
htmlFor: "database_name",
children: "Name"
}),
/*#__PURE__*/ jsx_runtime_.jsx("input", {
type: "text",
name: "database_name",
id: "database_name",
placeholder: "Database Name",
onInput: async (e)=>{
/** @type {HTMLInputElement} */ // @ts-ignore
const inputEl = e.target;
const form = inputEl.closest("form");
if (inputEl.value.match(/./)) {
inputEl.classList.remove("warning");
setAlert(null);
} else {
inputEl.classList.add("warning");
}
if (form) {
form["database_slug"].value = inputEl.value.toLowerCase().replace(/ /g, "_").replace(/[^a-zA-Z0-9-_]/g, "");
let slugValue = form["database_slug"].value;
window.clearTimeout(DatabaseForm_timeout);
DatabaseForm_timeout = setTimeout(()=>{
checkDuplicateSlug(slugValue).then((res)=>{
if (res?.result) {
form["database_slug"].classList.add("warning");
setAlert("Duplicate Database Name");
} else {
form["database_slug"].classList.remove("warning");
setAlert(null);
}
});
}, 300);
}
},
defaultValue: database ? database.db_name : "",
required: true
})
]
}),
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
className: "flex flex-col items-start gap-0.5 w-full",
children: [
/*#__PURE__*/ jsx_runtime_.jsx("label", {
htmlFor: "database_slug",
children: "Slug"
}),
/*#__PURE__*/ jsx_runtime_.jsx("input", {
type: "text",
name: "database_slug",
id: "database_slug",
placeholder: "Database Slug",
onInput: (e)=>{
/** @type {HTMLInputElement} */ // @ts-ignore
const inputEl = e.target;
if (inputEl.value.match(/./)) {
inputEl.classList.remove("warning");
setAlert(null);
} else {
inputEl.classList.add("warning");
}
let slugValue = inputEl.value;
window.clearTimeout(DatabaseForm_timeout);
DatabaseForm_timeout = setTimeout(()=>{
checkDuplicateSlug(slugValue).then((res)=>{
if (res?.result) {
inputEl.classList.add("warning");
setAlert("Duplicate Database Name");
} else {
inputEl.classList.remove("warning");
setAlert(null);
}
});
}, 300);
},
defaultValue: database ? database.db_slug : "",
required: true
})
]
}),
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
className: "flex flex-col items-start gap-0.5 w-full",
children: [
/*#__PURE__*/ jsx_runtime_.jsx("label", {
htmlFor: "database_description",
children: "Description (optional)"
}),
/*#__PURE__*/ jsx_runtime_.jsx("textarea", {
name: "database_description",
id: "database_description",
placeholder: "Short Description of database",
defaultValue: database ? database.db_description : ""
})
]
}),
query?.duplicate && /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, {
children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
className: "card col items-start",
children: [
/*#__PURE__*/ jsx_runtime_.jsx(FormCheckboxes/* default */.Z, {
checkBoxValues: [
{
payload: "Keep New Database Updated?",
title: "Keep New Database Updated?",
name: "clone_database",
onChangeHandler: (e)=>{
if (e.target.checked) {
setKeepUpdated(true);
} else {
setKeepUpdated(false);
}
}
},
]
}),
/*#__PURE__*/ jsx_runtime_.jsx("span", {
className: "text-sm italic text-slate-600 dark:text-slate-300",
children: "By checking this box the new Database stays up to date with changes to the structure of the parent Database"
})
]
})
}),
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("button", {
type: "submit",
className: "w-full",
children: [
database ? "Update" : "Create",
" Database"
]
})
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
/***/ }),
/***/ 1933:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "Z": () => (/* binding */ DatabaseImage)
/* 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 _functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6718);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472);
/* harmony import */ var _general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5449);
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
* @param {import("@/package-shared/types").UserType} props.user
* @param {string | null | import("@/package-shared/types").ImageObjectType} props.dbImage
* @param {React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>>} props.setDbImage
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} [props.database]
*/ function DatabaseImage({ user , dbImage , setDbImage , database }) {
/**
* Get Contexts
*
* @abstract { React.useContext }
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* React Hooks
*
* @abstract { useState, useEffect, useRef, etc ... }
*/ const imagePreviewRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Function Return
*
* @abstract Main Function Return
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "card no-hover col items-center justify-center",
children: [
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h4", {
className: "m-0",
children: "Database Image"
}),
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
className: "bg-white rounded-full overflow-hidden w-24 h-24",
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
src: dbImage ? typeof dbImage === "string" ? dbImage : dbImage.imageBase64Full : "/images/database-placeholder.png",
alt: "Database Image",
width: 100,
className: "w-full h-full object-cover",
// @ts-ignore
ref: imagePreviewRef,
"data-imagepreview": "image"
})
}),
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
className: "w-full flex-col",
id: "edit-database-image-option-wrapper",
children: [
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
column: true,
className: "w-full",
children: [
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
className: "outlined w-full whitespace-normal",
onClick: (e)=>{
(0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .openPopup */ .Mw)("user-media-popup");
},
children: "Choose Image from uploads"
}),
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
className: "outlined secondary w-full whitespace-normal",
onClick: (e)=>{
/** @type {HTMLButtonElement} */ // @ts-ignore
const buttonEl = e.target;
buttonEl?.closest("#edit-database-image-option-wrapper")?.querySelector("input")?.click();
},
children: "Choose Image from Computer"
})
]
}),
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
type: "file",
accept: ".png,.jpg,.jpeg,.webp",
placeholder: "Choose Database Image",
className: "hidden",
onChange: async (e)=>{
/** @type {File} */ // @ts-ignore
const imageInputFile = e.target.files[0];
let imageData = await (0,_functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)({
imageInputFile: imageInputFile,
maxWidth: 400
});
setDbImage(imageData);
}
})
]
})
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
/***/ }),
/***/ 9310:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "Z": () => (/* binding */ UserMediaPopup)
/* 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 _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6729);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472);
/* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5264);
/* harmony import */ var _ExistingFieldEdit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9967);
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
* @param {React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>>} props.setDbImage
*/ function UserMediaPopup({ setDbImage }) {
/**
* Get Contexts
*
* @abstract { React.useContext }
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* React Hooks
*
* @abstract { useState, useEffect, useRef, etc ... }
*/ const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true);
/** @type {any} */ const mediaState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
/** @type { [ media: import("@/package-shared/types").MYSQL_MediaType[] | null, setMedia: React.Dispatch<React.SetStateAction<import("@/package-shared/types").MYSQL_MediaType | null>> ] } */ const [media, setMedia] = mediaState;
react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z)("/api/getUserMedia").then((res)=>{
setLoading(false);
setMedia(res.media);
});
}, []);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Function Return
*
* @abstract Main Function Return
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .ZP, {
title: "user-media-popup",
children: [
loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
width: "20px"
}),
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h4", {
className: "m-0 text-lg",
children: "Your Uploaded Images"
}),
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
className: "grid grid-cols-2",
children: media && media[0] && media.filter((media)=>media.media_type == "image").map((mediaObject, index)=>{
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
className: "w-full h-44 cursor-pointer hover:opacity-70",
onClick: (e)=>{
setDbImage(mediaObject.media_thumbnail_url || null);
(0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .closePopup */ .j4)();
},
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
src: mediaObject.media_thumbnail_url,
alt: "User Media",
className: "w-full h-full object-contain"
})
}, index + 1);
})
})
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
/***/ }),
/***/ 4227:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
// @ts-check
const fs = __webpack_require__(7147);
const serverError = __webpack_require__(7023);
const NO_DB_HANDLER = __webpack_require__(2020);
/**
* Create database from Schema Function
* ==============================================================================
* @param {string} queryString - Query String
* @returns {Promise<any>}
*/ module.exports = async function noDatabaseDbHandler(queryString) {
"production"?.match(/dev/) && fs.appendFileSync("./.tmp/sqlQuery.sql", queryString + "\n" + Date() + "\n\n\n", "utf8");
/**
* Declare variables
*
* @description Declare "results" variable
*/ let results;
/**
* Fetch from db
*
* @description Fetch data from db if no cache
*/ try {
/** ********************* Run Query */ results = await NO_DB_HANDLER(queryString);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} catch (/** @type {any} */ error) {
serverError({
component: "noDatabaseDbHandler",
message: error.message
});
console.log("ERROR in noDatabaseDbHandler =>", error.message);
}
/**
* Return results
*
* @description Return results add to cache if "req" param is passed
*/ if (results) {
return results;
} else {
return null;
}
};
/***/ }),
/***/ 2020:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
// @ts-check
const fs = __webpack_require__(7147);
const path = __webpack_require__(1017);
const mysql = __webpack_require__(2261);
2024-11-06 12:06:51 +00:00
const SSL_DIR = process.env.DSQL_SSL_DIR || path.resolve(__dirname, "../../../../ssl");
2024-11-05 11:12:42 +00:00
let NO_DB = mysql({
config: {
host: process.env.DSQL_DB_HOST,
user: process.env.DSQL_DB_USERNAME,
password: process.env.DSQL_DB_PASSWORD,
charset: "utf8mb4",
ssl: {
ca: fs.readFileSync(`${SSL_DIR}/ca-cert.pem`)
}
}
});
/**
* DSQL user read-only DB handler
* @param {object} params
* @param {string} params.paradigm
* @param {string} params.database
* @param {string} params.queryString
* @param {string[]} [params.queryValues]
*/ // @ts-ignore
function NO_DB_HANDLER(...args) {
try {
return new Promise((resolve, reject)=>{
NO_DB.query(...args).then((results)=>{
NO_DB.end();
resolve(JSON.parse(JSON.stringify(results)));
}).catch((err)=>{
NO_DB.end();
resolve({
error: err.message,
sql: err.sql
});
});
});
} catch (/** @type {any} */ error) {
return {
success: false,
error: error.message
};
}
}
module.exports = NO_DB_HANDLER;
/***/ }),
/***/ 6706:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"AddDatabaseContext": () => (/* binding */ AddDatabaseContext),
"default": () => (/* binding */ AddDatabase),
"getServerSideProps": () => (/* binding */ getServerSideProps)
});
// 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_);
// EXTERNAL MODULE: ./layouts/AdminLayout.jsx + 2 modules
var AdminLayout = __webpack_require__(4858);
// EXTERNAL MODULE: ./functions/backend/userAuth.js
var userAuth = __webpack_require__(370);
var userAuth_default = /*#__PURE__*/__webpack_require__.n(userAuth);
// EXTERNAL MODULE: ./package-shared/functions/backend/noDatabaseDbHandler.js
var noDatabaseDbHandler = __webpack_require__(4227);
var noDatabaseDbHandler_default = /*#__PURE__*/__webpack_require__.n(noDatabaseDbHandler);
// EXTERNAL MODULE: ./components/general/BackButton.jsx
var BackButton = __webpack_require__(1781);
// EXTERNAL MODULE: ./components/general/Breadcrumbs.jsx
var Breadcrumbs = __webpack_require__(424);
// EXTERNAL MODULE: ./components/admin/databases/AddDatabaseForm.jsx
var AddDatabaseForm = __webpack_require__(3726);
;// CONCATENATED MODULE: ./components/admin/databases/AddDatabaseContent.jsx
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
*/ function AddDatabaseContent(props) {
/**
* Get Contexts
*
* @abstract { React.useContext }
*/ const { query , duplicateDb , user } = external_react_default().useContext(AddDatabaseContext);
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ const title = (()=>{
if (query?.duplicate) {
return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("span", {
children: [
"Duplicate",
" ",
/*#__PURE__*/ jsx_runtime_.jsx("a", {
href: `/admin/${user?.id}/databases/${duplicateDb?.db_slug}`,
target: "_blank",
children: duplicateDb?.db_name
}),
" ",
"Database"
]
});
}
return "Add A New Database";
})();
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* React Hooks
*
* @abstract { useState, useEffect, useRef, etc ... }
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Function Return
*
* @abstract Main Function Return
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, {
children: [
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
className: "flex-col items-start gap-0 w-full",
children: [
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
className: "flex-wrap",
children: [
/*#__PURE__*/ jsx_runtime_.jsx(BackButton/* default */.Z, {}),
/*#__PURE__*/ jsx_runtime_.jsx("h1", {
className: "text-3xl m-0",
children: title
})
]
}),
/*#__PURE__*/ jsx_runtime_.jsx(Breadcrumbs/* default */.Z, {
user: user
})
]
}),
/*#__PURE__*/ jsx_runtime_.jsx(AddDatabaseForm/* default */.Z, {})
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
// EXTERNAL MODULE: ./components/admin/databases/UserMediaPopup.jsx
var UserMediaPopup = __webpack_require__(9310);
// EXTERNAL MODULE: ./package-shared/utils/backend/global-db/DB_HANDLER.js
var DB_HANDLER = __webpack_require__(9395);
var DB_HANDLER_default = /*#__PURE__*/__webpack_require__.n(DB_HANDLER);
;// CONCATENATED MODULE: ./pages/admin/[user_id]/databases/add-database.jsx
// @ts-check
/**
* ==============================================================================
* Imports
* ==============================================================================
*/
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/** ****************************************************************************** */ /** @type {import("@/package-shared/types").AddDbContextType} */ let addDatabaseContextObject = {};
const AddDatabaseContext = /*#__PURE__*/ external_react_default().createContext(addDatabaseContextObject);
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Main Component { Functional }
* ==============================================================================
* @param {Object} props - Server props
* @param {import("@/package-shared/types").UserType} props.user
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type[]} props.databases
* @param {any} props.query
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.duplicateDb
*/ function AddDatabase({ user , databases , query , duplicateDb }) {
/**
* Get Contexts
*
* @abstract { React.useContext }
*/ ////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Javascript Variables
*
* @abstract Non hook variables and functions
*/ const pageTitle = "Add Database | Datasquirel";
const pageDescription = "Add a database";
let head = /*#__PURE__*/ (0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, {
children: [
/*#__PURE__*/ jsx_runtime_.jsx("title", {
children: pageTitle
}),
/*#__PURE__*/ jsx_runtime_.jsx("meta", {
name: "description",
content: pageDescription
})
]
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* React Hooks
*
* @abstract { useState, useEffect, useRef, etc ... }
*/ /** @type {any} */ const dbImageState = external_react_default().useState("/images/database-placeholder.png");
/** @type { [ dbImage:string | null | import("@/package-shared/types").ImageObjectType, setDbImage: React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>> ] } */ const [dbImage, setDbImage] = dbImageState;
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Function Return
*
* @abstract Main Function Return
*/ return /*#__PURE__*/ jsx_runtime_.jsx(AdminLayout/* default */.Z, {
head: head,
user: user,
children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)(AddDatabaseContext.Provider, {
value: {
user,
databases,
dbImage,
setDbImage,
query,
duplicateDb
},
children: [
/*#__PURE__*/ jsx_runtime_.jsx(AddDatabaseContent, {}),
/*#__PURE__*/ jsx_runtime_.jsx(UserMediaPopup/* default */.Z, {
setDbImage: setDbImage
})
]
})
});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
* ==============================================================================
* Server Side Props or Static Props
* ==============================================================================
* @type {import("next").GetServerSideProps}
*/ async function getServerSideProps({ req , res , query }) {
/**
* User Auth
*
* @description User Auth
*/ const user = await userAuth_default()(req, res);
if (!user?.logged_in_status) {
return {
redirect: {
destination: "/login",
permanent: false
}
};
}
if (!user?.verification_status?.toString()?.match(/1/)) {
return {
redirect: {
destination: "/admin",
permanent: false
}
};
}
/**
* Page/Site Data Data Fetching
*
* @description Fetch data on the server before returning
*/ const databases = await noDatabaseDbHandler_default()(`SELECT SCHEMA_NAME AS dbFullName FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME LIKE 'user_${user.id}%'`);
let duplicateDb = {};
if (query.duplicate) {
const dbDuplicateDb = await DB_HANDLER_default()(`SELECT * FROM user_databases WHERE db_full_name='${query.duplicate}'`);
if (dbDuplicateDb && dbDuplicateDb[0]) duplicateDb = dbDuplicateDb[0];
}
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/**
* Server props return
*
* @description Return data fetched on the server side
*/ return {
props: {
user: user,
databases: databases,
query,
duplicateDb
}
};
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
/***/ })
};
;