1318 lines
78 KiB
JavaScript
1318 lines
78 KiB
JavaScript
"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 {import("@/package-shared/types").DSQL_FieldSchemaType[]} params.tableFields
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} params.setTableFields
|
|
* @param {React.Dispatch<React.SetStateAction<number>>} [params.setRefresh]
|
|
* @param {React.Dispatch<React.SetStateAction<number>>} [params.setPageRefresh]
|
|
* @param {React.MutableRefObject<React.Dispatch<React.SetStateAction<number>> | 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 {import("@/package-shared/types").DSQL_FieldSchemaType[]} params.tableFields
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} params.setTableFields
|
|
* @param {React.MutableRefObject<React.Dispatch<React.SetStateAction<number>> | undefined>} params.refreshFieldsListRef
|
|
* @param {"up" | "down"} params.order
|
|
* @param {import("@/package-shared/types").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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType | null>>} [props.setTargetField]
|
|
* @param {Object} [props.fieldIndex]
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} props.tableFields
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} 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<React.SetStateAction<boolean>>} 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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} params.setTableFields
|
|
* @param {React.MutableRefObject<React.Dispatch<React.SetStateAction<number>>>} 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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} 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<React.SetStateAction<string>>} props.setLiteralValue
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.tempFieldData
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} props.setTempFieldData
|
|
* @param {string} props.dataTypeValue
|
|
* @param {React.Dispatch<React.SetStateAction<string>>} props.setDataTypeValue
|
|
* @param {string} props.dataType
|
|
* @param {React.Dispatch<React.SetStateAction<string>>} props.setDataType
|
|
* @param {string} props.dataTypeDesc
|
|
* @param {React.Dispatch<React.SetStateAction<string>>} 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<HTMLDivElement | undefined>} */ 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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} 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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>] } */ const [tempFieldData, setTempFieldData] = tempFieldDataState;
|
|
/** @type {React.LegacyRef<HTMLDivElement | undefined>} */ 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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType | null>>} props.setTargetField
|
|
* @param {number} props.fieldIndex
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} props.tableFields
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} props.setTableFields
|
|
* @param {React.MutableRefObject<React.Dispatch<React.SetStateAction<number>> | 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<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} props.setTableFields
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType | null>>} props.setTargetField
|
|
* @param {React.MutableRefObject<React.Dispatch<React.SetStateAction<number>> | undefined>} props.refreshFieldsListRef
|
|
* @param {boolean} [props.updateTable]
|
|
* @param {(setLoading?: React.Dispatch<React.SetStateAction<boolean>>) => 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
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |