"use strict"; exports.id = 4893; exports.ids = [4893]; exports.modules = { /***/ 4893: /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { // EXPORTS __webpack_require__.d(__webpack_exports__, { "Z": () => (/* binding */ TableFields) }); // 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: external "gsap" var external_gsap_ = __webpack_require__(4287); var external_gsap_default = /*#__PURE__*/__webpack_require__.n(external_gsap_); ;// CONCATENATED MODULE: ./functions/frontend/addNewTempField.js // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Auth user on client side * ============================================================================== * @param {object} params * @param {DSQL_FieldSchemaType[]} params.tableFields * @param {React.Dispatch>} params.setTableFields * @param {React.Dispatch>} [params.setRefresh] * @param {React.Dispatch>} [params.setPageRefresh] * @param {React.MutableRefObject> | undefined>} params.refreshFieldsListRef * * @requires search-field name attribute */ function addNewTempField({ tableFields , setTableFields , setRefresh , setPageRefresh , refreshFieldsListRef , }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ let newArray = tableFields; let spliceIndex = newArray.findIndex((field)=>field.fieldName === "date_created"); newArray.splice(spliceIndex, 0, { newTempField: true }); setTableFields(newArray); // setRefresh && setRefresh((prev) => prev + 1); // setPageRefresh && setPageRefresh((prev) => prev + 1); if (refreshFieldsListRef?.current) refreshFieldsListRef.current((prev)=>prev + 1); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// // EXTERNAL MODULE: ./components/general/ExpandBlock.jsx var ExpandBlock = __webpack_require__(6169); // EXTERNAL MODULE: ./components/general/LoadingBlock.jsx var LoadingBlock = __webpack_require__(5264); // EXTERNAL MODULE: ./functions/frontend/defaultFieldsRegexp.js var defaultFieldsRegexp = __webpack_require__(3907); // EXTERNAL MODULE: external "lodash" var external_lodash_ = __webpack_require__(6517); var external_lodash_default = /*#__PURE__*/__webpack_require__.n(external_lodash_); ;// CONCATENATED MODULE: ./functions/frontend/reorderField.js // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} params * @param {DSQL_FieldSchemaType[]} params.tableFields * @param {React.Dispatch>} params.setTableFields * @param {React.MutableRefObject> | undefined>} params.refreshFieldsListRef * @param {"up" | "down"} params.order * @param {DSQL_FieldSchemaType} params.field * @param {any} params.e */ function reorderField({ tableFields , setTableFields , refreshFieldsListRef , order , field , e , }) { /** * Javascript Variables * * @abstract Non hook variables and functions */ let newFields = external_lodash_default().cloneDeep(tableFields); let targetFieldIndex = newFields.findIndex((_field)=>_field.fieldName === field.fieldName); if (targetFieldIndex < 0) { return; } let targetField = newFields[targetFieldIndex]; if (order === "up" && targetFieldIndex && targetFieldIndex <= 1) { console.log("Min Reached =>", targetFieldIndex); return; } else if (order === "down" && targetFieldIndex && targetFieldIndex >= newFields.length - 7) { console.log("Max Reached =>", targetFieldIndex); return; } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// try { /** @type {HTMLDivElement} */ const targetFieldElement = e.target.closest(".table-field-wrapper"); const previousElement = targetFieldElement.previousElementSibling; const nextElement = targetFieldElement.nextElementSibling; // @ts-ignore const Flip = window.DSQL.Flip; const state = Flip.getState(targetFieldElement); let nextState; if (order === "up") { nextState = Flip.getState(previousElement); targetFieldElement.parentNode?.insertBefore(targetFieldElement, previousElement); } else if (nextElement?.nextElementSibling) { nextState = Flip.getState(nextElement); targetFieldElement.parentNode?.insertBefore(targetFieldElement, nextElement.nextElementSibling); } Flip.from(state, { duration: 0.3, ease: "power1.inOut" }); Flip.from(nextState, { duration: 0.3, ease: "power1.inOut" }); } catch (/** @type {any} */ error) { console.log("Error =>", error.message); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// if (!targetFieldIndex) { console.log("No target Field Index =>", targetFieldIndex); return; } newFields.splice(targetFieldIndex, 1); if (order === "up") { newFields.splice(targetFieldIndex - 1, 0, targetField); } else { newFields.splice(targetFieldIndex + 1, 0, targetField); } setTimeout(()=>{ setTableFields([ ...newFields ]); if (refreshFieldsListRef.current) refreshFieldsListRef.current((prev)=>prev + 1); }, 500); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./components/admin/databases/ExistingFieldEdit.jsx var ExistingFieldEdit = __webpack_require__(9967); // EXTERNAL MODULE: ./components/admin/databases/fields/fields-inputs/ForeignKey.jsx var ForeignKey = __webpack_require__(3699); // EXTERNAL MODULE: ./functions/frontend/fetchApi.js var fetchApi = __webpack_require__(6729); ;// CONCATENATED MODULE: ./components/admin/databases/ClonedSingleTableFieldCard.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout; /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.field * @param {React.Dispatch>} [props.setTargetField] * @param {Object} [props.fieldIndex] * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} props.tableFields * @param {React.Dispatch>} props.setTableFields * @param {any} [props.refreshFieldsListRef] * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database * @param {import("@/package-shared/types").DSQL_TableSchemaType} props.currentTable * @param {import("@/package-shared/types").UserType} props.user * @param {boolean} props.isDelegated * @param {React.Dispatch>} props.setLoading */ function ClonedSingleTableFieldCard({ field , setTargetField , fieldIndex , tableFields , setTableFields , refreshFieldsListRef , database , currentTable , user , isDelegated , setLoading , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [fieldData, setFieldData] = external_react_default().useState(field); const [activeEdit, setActiveEdit] = external_react_default().useState(false); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex-col w-full table-field-wrapper" + (activeEdit ? " shadow-2xl shadow-slate-700/40 relative z-50" : ""), children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "card no-hover items-center w-full py-4" + (activeEdit ? " rounded-t" : " rounded") + (fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) ? " text-slate-400 pointer-events-none border-slate-200 border" : " light-gray"), children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "font-bold" + (fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) ? " dark:text-slate-500" : " dark:text-white"), children: fieldData.fieldName }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "text-xs py-1 px-2 bg-slate-100 dark:bg-slate-700 dark:text-slate-200 rounded ", children: fieldData.dataType }), fieldData?.foreignKey && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "text-xs bg-primary text-white px-2 py-0.5 rounded-full", children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Foreign Key: " }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("span", { children: [ fieldData.foreignKey.destinationTableName, " (", " ", /*#__PURE__*/ jsx_runtime_.jsx("b", { children: fieldData.foreignKey.destinationTableColumnName }), " ", ")" ] }) ] }), fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) && /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "text-slate-300 text-sm font-semibold ml-0 md:ml-auto", children: "Default Field" }), !isDelegated && !fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) && fieldData.dataType?.match(/INT/) && !fieldData.foreignKey && !database?.active_clone?.toString()?.match(/1/) ? /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "ml-0 md:ml-auto flex-wrap", children: /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined py-1 text-xs gray", onClick: (e)=>{ if (activeEdit) { setActiveEdit(false); } else { setActiveEdit(true); } }, style: { color: "var(--slate-500)" }, children: "Add Foreign Key" }) }) : !isDelegated && !fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) && fieldData.dataType?.match(/INT/) && !database?.active_clone?.toString()?.match(/1/) ? /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "ml-0 md:ml-auto flex-wrap", children: /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button py-1 text-xs light-gray", onClick: (e)=>{ if (window.confirm("Delete this foreign Key?")) { delete field.foreignKey; setLoading(true); (0,fetchApi/* default */.Z)("/api/updateClonedTableForeignKeys", { method: "post", body: { tableData: currentTable, database: database.db_full_name, dbSlug: database.db_slug, delegated: window.location?.search?.match(/delegated=true/i) ? true : false } }, true).then((res)=>{ if (res.success) { window.location.reload(); } else { window.alert("Update Failed, Please Try again."); } }); } }, style: { color: "var(--slate-500)" }, children: "Delete Foreign Key" }) }) : /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, {}) ] }), activeEdit && !isDelegated && /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "card col w-full -mt-5 pt-0 no-hover", children: /*#__PURE__*/ jsx_runtime_.jsx(ForeignKey/* default */.Z, { targetField: field, setFieldData: setFieldData, tableFields: tableFields, setTableFields: setTableFields, database: database, currentTable: currentTable, user: user, setActiveEdit: setActiveEdit, activeClonedTable: true }) }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ ;// CONCATENATED MODULE: ./functions/frontend/addNewField.js // @ts-check /** # MODULE TRACE ====================================================================== * Detected 2 files that call this module. The files are listed below: ====================================================================== * `import` Statement Found in [ExistingFieldEdit.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\ExistingFieldEdit.jsx * `import` Statement Found in [NewFieldTemp.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\NewFieldTemp.jsx ==== MODULE TRACE END ==== */ /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** * ============================================================================== * Auth user on client side * ============================================================================== * @param {object} params * @param {number} params.fieldIndex * @param {React.Dispatch>} params.setTableFields * @param {React.MutableRefObject>>} params.refreshFieldsListRef * @param {import("@/package-shared/types").DSQL_FieldSchemaType} params.payload * * @requires search-field name attribute */ function addNewField({ fieldIndex , setTableFields , refreshFieldsListRef , payload , }) { /** * Check for user in local storage * * @description Preventdefault, declare variables */ setTableFields((prev)=>{ let newArray = prev; newArray.splice(fieldIndex, 1, payload); return newArray; }); // setRefresh && setRefresh((prev) => prev + 1); // setPageRefresh && setPageRefresh((prev) => prev + 1); if (refreshFieldsListRef?.current) refreshFieldsListRef.current((prev)=>prev + 1); } //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// // EXTERNAL MODULE: ./components/admin/databases/MoreOptionsModal.jsx + 5 modules var MoreOptionsModal = __webpack_require__(4209); // EXTERNAL MODULE: ./components/admin/databases/fields/text/JSONTextOption.jsx var JSONTextOption = __webpack_require__(4838); ;// CONCATENATED MODULE: ./components/admin/databases/NewFieldFormContent.jsx // @ts-check /** # MODULE TRACE ====================================================================== * Detected 1 files that call this module. The files are listed below: ====================================================================== * `import` Statement Found in [TableFields.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\TableFields.jsx ==== MODULE TRACE END ==== */ /** * ============================================================================== * Imports * ============================================================================== */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ let NewFieldFormContent_timeout; /** //////////////////////////////////////////////////////////////////////////////// */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {number} props.fieldIndex * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} [props.tableFields] * @param {React.Dispatch>} props.setTableFields * @param {any} props.refreshFieldsListRef * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable] * @param {import("@/package-shared/types").UserType} props.user * @param {boolean} props.isNewField * @param {string} props.literalValue * @param {React.Dispatch>} props.setLiteralValue * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.tempFieldData * @param {React.Dispatch>} props.setTempFieldData * @param {string} props.dataTypeValue * @param {React.Dispatch>} props.setDataTypeValue * @param {string} props.dataType * @param {React.Dispatch>} props.setDataType * @param {string} props.dataTypeDesc * @param {React.Dispatch>} props.setDataTypeDesc */ function NewFieldFormContent({ fieldIndex , setTableFields , database , user , isNewField , setLiteralValue , tempFieldData , setTempFieldData , dataTypeValue , setDataTypeValue , dataType , setDataType , dataTypeDesc , setDataTypeDesc , }) { /** * Get Contexts * * @abstract { React.useContext } */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** * Javascript Variables * * @abstract Non hook variables and functions */ const varcharDesc = "Varchar is simply letters and numbers within the range 0 - 255"; const dataTypes = __webpack_require__(9594); /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ /** @type {React.LegacyRef} */ const newFieldRef = external_react_default().useRef(); external_react_default().useEffect(()=>{ if (!newFieldRef.current) return; newFieldRef.current.scrollIntoView({ block: "center", behavior: "smooth" }); newFieldRef.current.querySelector("input")?.focus(); }, []); const isLiteral = Boolean(dataType.match(/uuid/i)); /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, { children: [ isNewField && /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "absolute -top-4 text-sm bg-fuchsia-600 dark:bg-white text-white dark:text-fuchsia-800 px-3 py-1 rounded-full", children: "New Field" }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "gap-4 flex-wrap xl:flex-nowrap flex-col xl:flex-row items-stretch w-full xl:w-auto", children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [ /*#__PURE__*/ jsx_runtime_.jsx("label", { htmlFor: "new_field_name", children: "Field Name" }), /*#__PURE__*/ jsx_runtime_.jsx("input", { type: "text", name: "new_field_name", id: "new_field_name", placeholder: "Eg. post_title", onInput: async (e)=>{ /** @type {HTMLInputElement} */ // @ts-ignore const inputEl = e.target; const parsedValue = inputEl.value.toLowerCase().replace(/ /g, "_"); inputEl.value = parsedValue; }, required: true }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-4 xl:gap-0.5", children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "items-start flex-wrap xl:flex-nowrap", children: [ /*#__PURE__*/ jsx_runtime_.jsx("label", { htmlFor: "new_field_data_type", children: "Data Type" }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "dropdown-wrapper reversed text-sm w-full items-start gap-2", children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "px-2 bg-slate-200 dark:bg-slate-700 rounded-full hover:bg-slate-100 dark:hover:bg-slate-600 hidden xl:flex", children: "Info" }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "dropdown mt-0 xl:-mt-2", children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: dataTypeDesc }) }) ] }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "w-full xl:w-auto", children: [ /*#__PURE__*/ jsx_runtime_.jsx("select", { name: "new_field_data_type", id: "new_field_data_type", className: "w-full xl:w-auto", onChange: (e)=>{ /** @type {HTMLSelectElement} */ // @ts-ignore const selectEl = e.target; setDataType(selectEl.value); selectEl.childNodes.forEach((/** @type {any} */ option)=>{ if (option.value === selectEl.value) { setDataTypeDesc(option.dataset.desc); } if (option.value === selectEl.value && option.dataset.literal) { setLiteralValue(option.dataset.literal); } }); }, children: dataTypes.map((type, index)=>{ if (type.name.match(/VARCHAR/)) { return /*#__PURE__*/ jsx_runtime_.jsx("option", { value: type.name, "data-desc": type.description, children: type.title + "(" + (dataTypeValue ? dataTypeValue : 200) + ")" }, index + 1); } else { return /*#__PURE__*/ jsx_runtime_.jsx("option", { value: type.name, "data-desc": type.description, "data-literal": type.valueLiteral || undefined, children: type.title }, index + 1); } }) }), dataType.match(/VARCHAR/) && /*#__PURE__*/ jsx_runtime_.jsx("input", { type: "number", defaultValue: dataTypeValue, className: "px-2", style: { maxWidth: "60px" }, max: 255, min: 5, onChange: (e)=>{ setDataTypeValue(e.target.value); } }) ] }) ] }), dataType?.match(/text/i) && /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, { children: /*#__PURE__*/ jsx_runtime_.jsx(JSONTextOption/* default */.Z, { targetField: tempFieldData }) }), !isLiteral && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-0.5", style: { minWidth: "70px" }, children: [ /*#__PURE__*/ jsx_runtime_.jsx("label", { htmlFor: "new_field_required", children: "Required?" }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", { name: "new_field_required", id: "new_field_required", className: "px-2", children: [ /*#__PURE__*/ jsx_runtime_.jsx("option", { value: "No", children: "No" }), /*#__PURE__*/ jsx_runtime_.jsx("option", { value: "Yes", children: "Yes" }) ] }) ] }), !isLiteral && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [ /*#__PURE__*/ jsx_runtime_.jsx("label", { htmlFor: "new_field_default_value", children: "Default Value (optional)" }), /*#__PURE__*/ jsx_runtime_.jsx("input", { type: "text", name: "new_field_default_value", id: "new_field_default_value", placeholder: "Default Value" }) ] }), !isLiteral && /*#__PURE__*/ jsx_runtime_.jsx(MoreOptionsModal/* default */.Z, { database, setFieldData: setTempFieldData, targetField: tempFieldData, user, fieldIndex }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "secondary mt-auto flex-wrap xl:flex-nowrap w-full xl:w-auto", children: [ /*#__PURE__*/ jsx_runtime_.jsx("button", { type: "submit", className: "secondary mt-auto py-3 w-full sm:w-auto justify-center grow", children: "Add Field" }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined-gray mt-auto py-2.5 w-full sm:w-auto justify-center grow", onClick: (e)=>{ setTableFields((prev)=>prev.filter((field, index)=>index != fieldIndex)); }, children: "Cancel" }) ] }) ] }); /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ } /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ ;// CONCATENATED MODULE: ./components/admin/databases/NewFieldTemp.jsx // @ts-check /** # MODULE TRACE ====================================================================== * Detected 1 files that call this module. The files are listed below: ====================================================================== * `import` Statement Found in [TableFields.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\TableFields.jsx ==== MODULE TRACE END ==== */ /** * ============================================================================== * Imports * ============================================================================== */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ let NewFieldTemp_timeout; /** //////////////////////////////////////////////////////////////////////////////// */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {number} props.fieldIndex * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} [props.tableFields] * @param {React.Dispatch>} props.setTableFields * @param {any} props.refreshFieldsListRef * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable] * @param {import("@/package-shared/types").UserType} props.user */ function NewFieldTemp({ fieldIndex , tableFields , setTableFields , refreshFieldsListRef , database , currentTable , user , }) { /** * Get Contexts * * @abstract { React.useContext } */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** * Javascript Variables * * @abstract Non hook variables and functions */ const varcharDesc = "Varchar is simply letters and numbers within the range 0 - 255"; const dataTypes = __webpack_require__(9594); /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [dataType, setDataType] = external_react_default().useState("VARCHAR"); const [dataTypeValue, setDataTypeValue] = external_react_default().useState("200"); // const dataTypeDescState = React.useState(); const [dataTypeDesc, setDataTypeDesc] = external_react_default().useState(varcharDesc); /** @type {any} */ const tempFieldDataState = external_react_default().useState({}); /** @type { [tempFieldData: import("@/package-shared/types").DSQL_FieldSchemaType, setTempFieldData: React.Dispatch>] } */ const [tempFieldData, setTempFieldData] = tempFieldDataState; /** @type {React.LegacyRef} */ const newFieldRef = external_react_default().useRef(); const [literalValue, setLiteralValue] = external_react_default().useState(""); external_react_default().useEffect(()=>{ if (!newFieldRef.current) return; newFieldRef.current.scrollIntoView({ block: "center", behavior: "smooth" }); newFieldRef.current.querySelector("input")?.focus(); }, []); const isLiteral = Boolean(dataType.match(/uuid/i)); /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "w-full mt-1 flex-wrap relative z-0 hover:z-20", // @ts-ignore ref: newFieldRef, children: /*#__PURE__*/ jsx_runtime_.jsx("form", { className: "flex flex-row items-start gap-4 w-full justify-between border border-solid p-4 pt-6 border-slate-400 rounded focus:shadow-lg shadow-slate-400/40 dark:shadow-black/30 relative flex-wrap xl:flex-nowrap shadow-xl", onSubmit: (e)=>{ e.preventDefault(); /** @type {import("@/package-shared/types").DSQL_ForeignKeyType | undefined} */ const targetForeignKey = tempFieldData.foreignKey; if (targetForeignKey && !targetForeignKey.destinationTableName) { delete tempFieldData.foreignKey; } /** @type {HTMLFormElement} */ // @ts-ignore const formEl = e.target; let new_field_name = formEl["new_field_name"].value; let new_field_data_type = formEl["new_field_data_type"].value; let new_field_required = formEl["new_field_required"]?.value; let new_field_default_value = formEl["new_field_default_value"]?.value; let new_field_encryption = formEl["encryption_field"]?.value; let rich_text_option = formEl["rich_text_option"]?.value; const foreignKeyElement = formEl["foreign_key_field"]; const foreignKeyDestinationTableElement = formEl["foreign_key_destination_table_name"]; const foreignKeyDestinationTableColumnElement = formEl["foreign_key_destination_table_column_name"]; let foreign_key_field = foreignKeyElement?.value; let newFieldObject = { ...tempFieldData, fieldName: new_field_name, dataType: tempFieldData?.dataType && tempFieldData?.foreignKey ? tempFieldData.dataType : new_field_data_type?.match(/VARCHAR/) ? `${new_field_data_type}(${dataTypeValue})` : new_field_data_type }; if (new_field_required?.match(/yes/i)) { newFieldObject.notNullValue = true; } else if (!new_field_default_value?.match(/./)) { newFieldObject.nullValue = true; } if (new_field_default_value?.match(/./)) { newFieldObject.defaultValue = new_field_default_value; } if (new_field_encryption?.match(/yes/i)) { newFieldObject.encrypted = true; } if (foreignKeyDestinationTableColumnElement?.value?.match(/./i) && !foreignKeyDestinationTableColumnElement?.value?.match(/^--$/i)) { newFieldObject.dataType = foreignKeyDestinationTableColumnElement.dataset.dataType; newFieldObject.foreignKey = { foreignKeyName: foreignKeyDestinationTableColumnElement.dataset.foreignKeyName, destinationTableName: foreignKeyDestinationTableElement.dataset.destinationTableName, destinationTableColumnName: foreignKeyDestinationTableColumnElement.dataset.destinationTableColumnName, cascadeDelete: true }; } if (rich_text_option?.match(/yes/i)) { newFieldObject.richText = true; } if (isLiteral) { newFieldObject.defaultValueLiteral = literalValue; newFieldObject.nullValue = false; } else { delete newFieldObject.defaultValueLiteral; } console.log("newFieldObject", newFieldObject); addNewField({ fieldIndex, setTableFields, refreshFieldsListRef, payload: newFieldObject }); }, children: /*#__PURE__*/ jsx_runtime_.jsx(NewFieldFormContent, { database, fieldIndex, isNewField: true, literalValue, refreshFieldsListRef, setLiteralValue, setTableFields, user, currentTable, tableFields, tempFieldData, setTempFieldData, dataTypeValue, setDataTypeValue, dataType, setDataType, dataTypeDesc, setDataTypeDesc }) }) }); /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ /** //////////////////////////////////////// */ } /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ /** //////////////////////////////////////////////////////////////////////////////// */ // EXTERNAL MODULE: ./components/general/ui/ButtonGroup.jsx var ButtonGroup = __webpack_require__(5449); // EXTERNAL MODULE: external "lucide-react" var external_lucide_react_ = __webpack_require__(2423); ;// CONCATENATED MODULE: ./components/admin/databases/SingleTableFieldCard.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let SingleTableFieldCard_timeout; /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.field * @param {React.Dispatch>} props.setTargetField * @param {number} props.fieldIndex * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} props.tableFields * @param {React.Dispatch>} props.setTableFields * @param {React.MutableRefObject> | undefined>} props.refreshFieldsListRef * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable] * @param {any} props.confirmedDelegetedUser * @param {import("@/package-shared/types").UserType} props.user */ function SingleTableFieldCard({ field , setTargetField , fieldIndex , tableFields , setTableFields , refreshFieldsListRef , database , currentTable , confirmedDelegetedUser , user , }) { /** * 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 { active_clone , active_clone_parent_db , remote_connected } = database; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [fieldData, setFieldData] = external_react_default().useState(field); const [activeEdit, setActiveEdit] = external_react_default().useState(false); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex-col w-full table-field-wrapper" + (activeEdit ? " shadow-2xl shadow-slate-300/40 dark:shadow-black/30 relative z-50" : ""), children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "card no-hover items-center w-full py-4" + (activeEdit ? " rounded-t" : " rounded") + (fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) ? " text-slate-400 pointer-events-none border-slate-200 border" : " light-gray"), children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "font-bold" + (fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) ? " dark:text-slate-500" : " dark:text-white"), children: fieldData.fieldName }), /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "text-xs py-1 px-2 bg-slate-100 dark:bg-slate-700 dark:text-slate-200 rounded ", children: fieldData.dataType }), fieldData?.foreignKey && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "text-xs bg-primary text-white px-2 py-0.5 rounded-full", children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Foreign Key: " }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("span", { children: [ fieldData.foreignKey.destinationTableName, " (", " ", /*#__PURE__*/ jsx_runtime_.jsx("b", { children: fieldData.foreignKey.destinationTableColumnName }), " ", ")" ] }) ] }), fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) && /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "text-slate-300 text-sm font-semibold ml-0 md:ml-auto", children: "Default Field" }), !fieldData.fieldName?.match(defaultFieldsRegexp/* default */.Z) && !active_clone_parent_db && !remote_connected && /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "ml-0 md:ml-auto flex-wrap", children: (!isDelegated || isDelegated && isTableEditable) && /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, { children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)(ButtonGroup/* default */.Z, { children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined py-1 text-xs gray", onClick: (e)=>{ if (activeEdit) { setActiveEdit(false); } else { setActiveEdit(true); } }, style: { color: "var(--slate-500)" }, children: "Edit" }), !active_clone_parent_db && !remote_connected && /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined py-1 text-xs gray", onClick: (e)=>{ if (window.confirm(`Delete "${field.fieldName}"?`)) { setTableFields((prev)=>prev.filter((field, index)=>index != fieldIndex)); } }, style: { color: "var(--slate-500)" }, children: "Delete" }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined gray p-2 w-8 h-8 rounded-full rotate-180", onClick: (e)=>{ reorderField({ tableFields, setTableFields, refreshFieldsListRef, order: "up", field, e }); }, children: /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.ChevronDown, { size: 20 }) }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined gray p-2 w-8 h-8 rounded-full", onClick: (e)=>{ reorderField({ tableFields, setTableFields, refreshFieldsListRef, order: "down", field, e }); }, children: /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.ChevronDown, { size: 20 }) }) ] }) ] }) }) ] }), activeEdit && /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "w-full", children: /*#__PURE__*/ jsx_runtime_.jsx(ExistingFieldEdit/* default */.Z, { fieldIndex: fieldIndex, tableFields: tableFields, setTableFields: setTableFields, refreshFieldsListRef: refreshFieldsListRef, targetField: field, setActiveEdit: setActiveEdit, database: database, currentTable: currentTable, user: user }) }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ // EXTERNAL MODULE: ./components/admin/databases/functions/generateTypeDefinition.js var generateTypeDefinition = __webpack_require__(5753); ;// CONCATENATED MODULE: ./components/admin/databases/TableFields.jsx // @ts-check /** * ============================================================================== * Imports * ============================================================================== */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let reactKey = 1; /** ****************************************************************************** */ /** * ============================================================================== * Main Component { Functional } * ============================================================================== * @param {Object} props - Server props * @param {import("@/package-shared/types").UserType} props.user * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} props.tableFields * @param {React.Dispatch>} props.setTableFields * @param {React.Dispatch>} props.setTargetField * @param {React.MutableRefObject> | undefined>} props.refreshFieldsListRef * @param {boolean} [props.updateTable] * @param {(setLoading?: React.Dispatch>) => void} [props.updateTableAfterFieldsUpdateFunction] * @param {boolean} [props.collapsed] * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.table] * @param {any} [props.confirmedDelegetedUser] * @param {any} props.query */ function TableFields({ user , tableFields , setTableFields , setTargetField , refreshFieldsListRef , updateTable , updateTableAfterFieldsUpdateFunction , collapsed , database , table , confirmedDelegetedUser , query , }) { /** * Get Contexts * * @abstract { React.useContext } */ //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * Javascript Variables * * @abstract Non hook variables and functions */ const cloneParentDb = table?.childTable ? table.childTableDbFullName?.replace(new RegExp(/datasquirel_user_\d+_/), "") : null; 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 { active_clone , active_clone_parent_db , remote_connected } = database; //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// /** * React Hooks * * @abstract { useState, useEffect, useRef, etc ... } */ const [refresh, setRefresh] = external_react_default().useState(0); refreshFieldsListRef.current = setRefresh; const [loading, setLoading] = external_react_default().useState(false); const [collapse, setCollapse] = external_react_default().useState(collapsed || false); external_react_default().useEffect(()=>{ const { Flip } = __webpack_require__(2700); external_gsap_default().registerPlugin(Flip); // @ts-ignore const DSQL = window.DSQL; if (DSQL) { DSQL.Flip = Flip; } }, []); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// if (isDelegated && !isTableEditable) { return /*#__PURE__*/ jsx_runtime_.jsx(jsx_runtime_.Fragment, {}); } /** * Function Return * * @abstract Main Function Return */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("section", { className: "paper green", children: [ loading && /*#__PURE__*/ jsx_runtime_.jsx(LoadingBlock/* default */.Z, {}), table?.childTable ? /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, { children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "w-full justify-between flex-wrap", children: [ /*#__PURE__*/ jsx_runtime_.jsx("h2", { className: "text-xl m-0 text-left title", children: "Fields" }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { children: [ /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined light-gray", onClick: (e)=>{ const txt = (0,generateTypeDefinition/* default */.Z)({ paradigm: "JavaScript", table, query, user }); if (txt) { navigator.clipboard.writeText(txt).then(()=>{ window.alert("JavaScript Type Definition Copied"); }); } }, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Copy TypeDef (JS)" }) }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined light-gray", onClick: (e)=>{ const txt = (0,generateTypeDefinition/* default */.Z)({ paradigm: "TypeScript", table, query, user }); if (txt) { navigator.clipboard.writeText(txt).then(()=>{ window.alert("TypeScript Type Definition Copied"); }); } }, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Copy TypeDef (TS)" }) }) ] }) ] }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "flex-col w-full", style: collapse ? { maxHeight: "200px" } : {}, children: tableFields && tableFields[0] && tableFields.map((field, index)=>{ reactKey++; return /*#__PURE__*/ jsx_runtime_.jsx(ClonedSingleTableFieldCard, { field: field, fieldIndex: index, setTargetField: setTargetField, setTableFields: setTableFields, refreshFieldsListRef: refreshFieldsListRef, tableFields: tableFields, database: database, setLoading: setLoading, currentTable: table, user: user, isDelegated: isDelegated }, reactKey); }) }), collapsed && /*#__PURE__*/ jsx_runtime_.jsx(ExpandBlock/* default */.Z, { collapse: collapse || false, setCollapse: setCollapse }) ] }) : /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, { children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "w-full justify-between flex-wrap", children: [ /*#__PURE__*/ jsx_runtime_.jsx("h2", { className: "text-xl m-0 text-left title", children: "Fields" }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { children: [ (!isDelegated || isDelegated && isTableEditable) && !active_clone_parent_db && !remote_connected && /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "button secondary outlined", onClick: (e)=>{ if (collapse) setCollapse(false); addNewTempField({ setTableFields, tableFields, setRefresh, refreshFieldsListRef }); }, children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "symbol", children: "+" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Add New Field" }) ] }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined light-gray", onClick: (e)=>{ if (!table) return; const txt = (0,generateTypeDefinition/* default */.Z)({ paradigm: "JavaScript", table, query, user }); if (txt) { navigator.clipboard.writeText(txt).then(()=>{ window.alert("JavaScript Type Definition Copied"); }); } }, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Copy TypeDef (JS)" }) }), /*#__PURE__*/ jsx_runtime_.jsx("div", { className: "button outlined light-gray", onClick: (e)=>{ if (!table) return; const txt = (0,generateTypeDefinition/* default */.Z)({ paradigm: "TypeScript", table, query, user }); if (txt) { navigator.clipboard.writeText(txt).then(()=>{ window.alert("TypeScript Type Definition Copied"); }); } }, children: /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Copy TypeDef (TS)" }) }) ] }) ] }), /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "flex-col w-full", style: collapse ? { maxHeight: "200px" } : {}, children: [ tableFields && tableFields[0] && tableFields.map((field, index)=>{ reactKey++; if (field.newTempField) { return /*#__PURE__*/ jsx_runtime_.jsx(NewFieldTemp, { fieldIndex: index, tableFields: tableFields, setTableFields: setTableFields, refreshFieldsListRef: refreshFieldsListRef, database: database, currentTable: table, user: user }, reactKey); } else { return /*#__PURE__*/ jsx_runtime_.jsx(SingleTableFieldCard, { field: field, fieldIndex: index, setTargetField: setTargetField, setTableFields: setTableFields, refreshFieldsListRef: refreshFieldsListRef, tableFields: tableFields, database: database, currentTable: table, confirmedDelegetedUser: confirmedDelegetedUser, user: user }, reactKey); } }), (!isDelegated || isDelegated && isTableEditable) && !active_clone_parent_db && !remote_connected && /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, { children: [ /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", { className: "button outlined gray w-full more-padding", style: { borderStyle: "dashed" }, onClick: (e)=>{ if (collapse) setCollapse(false); addNewTempField({ setTableFields, tableFields, setRefresh, refreshFieldsListRef }); }, children: [ /*#__PURE__*/ jsx_runtime_.jsx("span", { className: "symbol", children: "+" }), /*#__PURE__*/ jsx_runtime_.jsx("span", { children: "Add New Field" }) ] }), updateTable && /*#__PURE__*/ jsx_runtime_.jsx("button", { className: "secondary w-full py-3", onClick: (e)=>{ setLoading(true); updateTableAfterFieldsUpdateFunction && updateTableAfterFieldsUpdateFunction(setLoading); }, children: "Update Table Fields" }) ] }) ] }), collapsed && /*#__PURE__*/ jsx_runtime_.jsx(ExpandBlock/* default */.Z, { collapse: collapse, setCollapse: setCollapse }) ] }) ] }); //////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// } /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /***/ }) }; ;