1472 lines
84 KiB
JavaScript
1472 lines
84 KiB
JavaScript
"use strict";
|
|
exports.id = 9967;
|
|
exports.ids = [9967];
|
|
exports.modules = {
|
|
|
|
/***/ 9967:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ ExistingFieldEdit)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _MoreOptionsModal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4209);
|
|
/* harmony import */ var _fields_text_JSONTextOption__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4838);
|
|
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6517);
|
|
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_4__);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField
|
|
* @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").UserType} props.user
|
|
* @param {React.Dispatch<React.SetStateAction<boolean>>} [props.setActiveEdit]
|
|
* @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable]
|
|
*/ function ExistingFieldEdit({ targetField , fieldIndex , tableFields , setTableFields , refreshFieldsListRef , setActiveEdit , 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";
|
|
let defaultType = targetField?.dataType ? targetField.dataType.replace(/\d|\(|\)/g, "") : null;
|
|
let defaultDataTypeValue = targetField?.dataType ? targetField.dataType.replace(/[^\d]/g, "") : "200";
|
|
const dataTypes = __webpack_require__(9594);
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ /** @type {React.Ref<import("@/package-shared/types").DSQL_FieldSchemaType>} */ const initialField = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(targetField));
|
|
const newFieldRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
|
|
const [fieldData, setFieldData] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField);
|
|
const [fieldName, setFieldName] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField?.fieldName);
|
|
const [dataType, setDataType] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(defaultType);
|
|
const [dataTypeValue, setDataTypeValue] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(defaultDataTypeValue);
|
|
const [dataTypeDesc, setDataTypeDesc] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(varcharDesc);
|
|
const [isRichText, setIsRichText] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField?.richText && !targetField?.encrypted ? "Yes" : "No");
|
|
const isLiteral = Boolean(dataType?.match(/uuid/i));
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "w-full -mt-3 bg-white dark:bg-slate-800 flex-wrap",
|
|
// @ts-ignore
|
|
ref: newFieldRef,
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("form", {
|
|
className: "flex flex-col xl:flex-row items-start gap-4 w-full justify-between border border-solid p-4 border-slate-200 dark:border-slate-600 rounded rounded-t-none focus:shadow-lg shadow-slate-700 dark:shadow-black relative flex-wrap",
|
|
onSubmit: (e)=>{
|
|
e.preventDefault();
|
|
setTableFields((prev)=>{
|
|
let newArray = prev;
|
|
newArray[fieldIndex] = fieldData;
|
|
return newArray;
|
|
});
|
|
refreshFieldsListRef.current((/** @type {any} */ prev)=>prev + 1);
|
|
/** @type {HTMLFormElement} */ // @ts-ignore
|
|
const formEl = e.target;
|
|
formEl.closest(".table-field-wrapper")?.querySelector(".edit-table-field-section")?.classList.toggle("hidden");
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "gap-4 flex-wrap w-full md:w-auto flex-col xl:flex-row items-stretch",
|
|
children: [
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
|
htmlFor: "new_field_name",
|
|
children: "Field Name"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.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;
|
|
inputEl.value = inputEl.value.toLowerCase().replace(/ /g, "_");
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
existingFieldData.fieldName = inputEl.value;
|
|
existingFieldData.updatedField = true;
|
|
if (!existingFieldData.originName) existingFieldData.originName = fieldName;
|
|
return existingFieldData;
|
|
});
|
|
},
|
|
required: true,
|
|
defaultValue: fieldName
|
|
})
|
|
]
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-4 xl:gap-0.5",
|
|
children: [
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex-wrap xl:flex-nowrap w-full md:w-auto",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
|
htmlFor: "new_field_data_type",
|
|
children: "Data Type"
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "dropdown-wrapper reversed text-sm items-start",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.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__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "dropdown mt-0 xl:-mt-2",
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|
children: dataTypeDesc
|
|
})
|
|
})
|
|
]
|
|
})
|
|
]
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "w-auto",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.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 && option.dataset.desc) {
|
|
setDataTypeDesc(option.dataset.desc);
|
|
}
|
|
if (option.value === selectEl.value && option.dataset.literal) {
|
|
fieldData.defaultValueLiteral = option.dataset.literal;
|
|
fieldData.nullValue = false;
|
|
} else {
|
|
delete fieldData.defaultValueLiteral;
|
|
}
|
|
});
|
|
targetField.dataType = selectEl.value + (selectEl.value.match(/VARCHAR/) ? `(${dataTypeValue ? dataTypeValue : 200})` : "");
|
|
},
|
|
defaultValue: dataType || undefined,
|
|
children: dataTypes.map((type, index)=>{
|
|
if (type.name.match(/VARCHAR/)) {
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: type.name,
|
|
"data-desc": type.description,
|
|
children: type.title + "(" + (dataTypeValue ? dataTypeValue : 200) + ")"
|
|
}, index + 1);
|
|
} else {
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: type.name,
|
|
"data-desc": type.description,
|
|
"data-literal": type.valueLiteral || undefined,
|
|
children: type.title
|
|
}, index + 1);
|
|
}
|
|
})
|
|
}),
|
|
dataType?.match(/VARCHAR/) && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
|
type: "number",
|
|
defaultValue: dataTypeValue ? dataTypeValue : 200,
|
|
className: "px-2",
|
|
style: {
|
|
maxWidth: "60px"
|
|
},
|
|
max: 255,
|
|
min: 5,
|
|
onChange: (e)=>{
|
|
setDataTypeValue(e.target.value);
|
|
targetField.dataType = dataType + `(${e.target.value})`;
|
|
}
|
|
})
|
|
]
|
|
})
|
|
]
|
|
}),
|
|
dataType?.match(/text/i) && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_fields_text_JSONTextOption__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
|
|
targetField: targetField
|
|
})
|
|
}),
|
|
!targetField.dataType?.match(/text/i) && !isLiteral && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
|
htmlFor: "new_field_required",
|
|
children: "Required?"
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
|
|
name: "new_field_required",
|
|
id: "new_field_required",
|
|
className: "px-2",
|
|
defaultValue: targetField?.notNullValue ? "Yes" : "No",
|
|
onChange: (e)=>{
|
|
console.log(targetField);
|
|
if (e.target.value === "Yes") {
|
|
targetField.notNullValue = true;
|
|
} else {
|
|
targetField.notNullValue = false;
|
|
delete targetField.notNullValue;
|
|
// if (!targetField?.dataType?.match(/text/i)) {
|
|
// targetField.nullValue = true;
|
|
// }
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "No",
|
|
children: "No"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "Yes",
|
|
children: "Yes"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
}),
|
|
!isLiteral && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
|
htmlFor: "new_field_default_value",
|
|
children: fieldData?.dataType?.match(/text$/i) ? "Can't Set Default for text values" : "Default Value (optional)"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
|
|
type: "text",
|
|
name: "new_field_default_value",
|
|
id: "new_field_default_value",
|
|
className: fieldData?.dataType?.match(/text$/i) ? "pointer-events-none opacity-50" : "",
|
|
placeholder: "Default Value",
|
|
defaultValue: fieldData?.defaultValue ? fieldData.defaultValue : fieldData?.nullValue ? "NULL" : "",
|
|
onInput: (e)=>{
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
|
const inputEl = e.target;
|
|
if (fieldData.dataType?.match(/text$/i)) return;
|
|
setFieldData((prev)=>{
|
|
let newFieldData = prev;
|
|
if (inputEl.value.match(/./)) {
|
|
delete newFieldData.notNullValue;
|
|
} else {
|
|
delete newFieldData.defaultValue;
|
|
delete newFieldData.nullValue;
|
|
}
|
|
if (inputEl.value.match(/^null$/i)) {
|
|
delete newFieldData.defaultValue;
|
|
newFieldData.nullValue = true;
|
|
} else if (inputEl.value.match(/./)) {
|
|
delete newFieldData.nullValue;
|
|
newFieldData.defaultValue = inputEl.value;
|
|
}
|
|
return newFieldData;
|
|
});
|
|
}
|
|
})
|
|
]
|
|
}),
|
|
!isLiteral && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_MoreOptionsModal__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
|
|
database,
|
|
setFieldData,
|
|
setTableFields,
|
|
tableFields,
|
|
targetField,
|
|
user,
|
|
currentTable,
|
|
fieldIndex
|
|
})
|
|
]
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "secondary mt-auto flex-wrap w-full xl:w-auto",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|
type: "submit",
|
|
className: "secondary mt-auto py-3 w-full md:w-auto grow",
|
|
children: "Save Updates"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "button outlined gray mt-auto py-2.5 w-full md:w-auto justify-center grow",
|
|
onClick: (e)=>{
|
|
if (initialField.current) targetField = lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(initialField.current);
|
|
setTableFields((prev)=>{
|
|
const newFields = lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(prev);
|
|
if (fieldIndex && initialField.current) newFields[fieldIndex] = lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(initialField.current);
|
|
return newFields;
|
|
});
|
|
if (setActiveEdit) setActiveEdit(false);
|
|
},
|
|
children: "Cancel"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
})
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 4209:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
|
|
// EXPORTS
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
"Z": () => (/* binding */ MoreOptionsModal)
|
|
});
|
|
|
|
// 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 "@mui/icons-material/Close"
|
|
var Close_ = __webpack_require__(4173);
|
|
// EXTERNAL MODULE: ./components/form/FormInput.jsx + 2 modules
|
|
var FormInput = __webpack_require__(7901);
|
|
// EXTERNAL MODULE: external "lucide-react"
|
|
var external_lucide_react_ = __webpack_require__(2423);
|
|
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/CSSFiles.jsx
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {DSQL_FieldSchemaType} props.targetField - Field object
|
|
*/ function CSSFiles({ targetField }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ if (!targetField?.richText) return null;
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ /** @type {[ state: string[], dispatch: React.Dispatch<React.SetStateAction<string[]>> ]} */ // @ts-ignore
|
|
const [cssFiles, setCssFiles] = external_react_default().useState(targetField.cssFiles || []);
|
|
/** @type {React.Ref<HTMLInputElement | null>} */ const cssFileInputRef = external_react_default().useRef(null);
|
|
external_react_default().useEffect(()=>{
|
|
targetField.cssFiles = cssFiles;
|
|
}, [
|
|
cssFiles
|
|
]);
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-2 w-full my-4",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "label text-xs text-slate-500",
|
|
children: "Add CSS"
|
|
}),
|
|
cssFiles.map((url, index)=>/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "relative border border-solid border-slate-300 text-xs px-2 py-1 rounded-full",
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
children: url
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.X, {
|
|
size: 20,
|
|
onClick: ()=>{
|
|
setCssFiles((prev)=>prev.filter((ln)=>ln !== url));
|
|
},
|
|
className: "cursor-pointer hover:opacity-60 "
|
|
})
|
|
]
|
|
}, index + 1)),
|
|
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "row w-full",
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx(FormInput/* default */.Z, {
|
|
name: "css-file",
|
|
placeholder: "CSS file URL",
|
|
elementRef: cssFileInputRef
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("button", {
|
|
className: "secondary outlined",
|
|
onClick: ()=>{
|
|
const url = cssFileInputRef.current?.value;
|
|
if (url?.match(/./)) {
|
|
setCssFiles((prev)=>[
|
|
...new Set([
|
|
...prev,
|
|
url
|
|
])
|
|
]);
|
|
}
|
|
},
|
|
children: "Add"
|
|
})
|
|
]
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "text-sm text-slate-600",
|
|
children: "Add CSS files to your Rich Text field"
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/EncryptionSelect.jsx
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let EncryptionSelect_timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {DSQL_FieldSchemaType} props.targetField - Field object
|
|
* @param {React.Dispatch<React.SetStateAction<DSQL_FieldSchemaType>>} props.setFieldData - React state dispatch function
|
|
*/ function EncryptionSelect({ targetField , setFieldData }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("label", {
|
|
htmlFor: "encryption_field",
|
|
children: "Encrypt?"
|
|
}),
|
|
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", {
|
|
name: "encryption_field",
|
|
id: "encryption_field",
|
|
className: "px-2",
|
|
defaultValue: targetField?.encrypted ? "Yes" : "No",
|
|
onChange: (e)=>{
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
if (e.target.value.match(/yes/i)) {
|
|
existingFieldData.encrypted = true;
|
|
} else {
|
|
existingFieldData.encrypted = false;
|
|
delete existingFieldData.encrypted;
|
|
}
|
|
return existingFieldData;
|
|
});
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("option", {
|
|
value: "No",
|
|
children: "No"
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("option", {
|
|
value: "Yes",
|
|
children: "Yes"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
// EXTERNAL MODULE: ./components/admin/databases/fields/fields-inputs/ForeignKey.jsx
|
|
var ForeignKey = __webpack_require__(3699);
|
|
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/AutoIncrement.jsx
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let AutoIncrement_timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {DSQL_FieldSchemaType} props.targetField - Field object
|
|
* @param {React.Dispatch<React.SetStateAction<DSQL_FieldSchemaType>>} [props.setFieldData] - React state dispatch function
|
|
*/ function AutoIncrement({ targetField , setFieldData }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ return null;
|
|
if (!targetField?.dataType?.match(/int$/i)) {
|
|
return null;
|
|
}
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("label", {
|
|
htmlFor: "encryption_field",
|
|
children: "Auto Increment?"
|
|
}),
|
|
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", {
|
|
name: "encryption_field",
|
|
id: "encryption_field",
|
|
className: "px-2",
|
|
defaultValue: targetField?.autoIncrement ? "Yes" : "No",
|
|
onChange: (e)=>{
|
|
if (targetField) {
|
|
if (e.target.value?.match(/yes/i)) {
|
|
targetField.autoIncrement = true;
|
|
} else {
|
|
delete targetField.autoIncrement;
|
|
}
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("option", {
|
|
value: "No",
|
|
children: "No"
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("option", {
|
|
value: "Yes",
|
|
children: "Yes"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/RegexPattern.jsx
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let RegexPattern_timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {DSQL_FieldSchemaType} props.targetField - Field object
|
|
*/ function RegexPattern({ targetField }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-2 w-full",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("label", {
|
|
htmlFor: "encryption_field",
|
|
children: "Pattern"
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "text-sm text-slate-500",
|
|
children: 'This describes a pattern that must be matched for this field to be valid. If you add a pattern and make a db entry that doesn\'t match, the entry will be "NULL" or an empty string or the default value.'
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("input", {
|
|
type: "text",
|
|
placeholder: "Regex Pattern. Eg: '\\\\.[a-z]+'",
|
|
onInput: (e)=>{
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
|
const inputEl = e.target;
|
|
if (inputEl?.value?.length > 0) {
|
|
targetField.pattern = inputEl.value;
|
|
} else {
|
|
delete targetField.pattern;
|
|
}
|
|
},
|
|
defaultValue: targetField?.pattern
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("input", {
|
|
type: "text",
|
|
placeholder: "Regex Pattern Flags. Eg: igm",
|
|
onInput: (e)=>{
|
|
/** @type {HTMLInputElement} */ // @ts-ignore
|
|
const inputEl = e.target;
|
|
if (inputEl?.value?.length > 0) {
|
|
targetField.patternFlags = inputEl.value;
|
|
} else {
|
|
delete targetField.patternFlags;
|
|
}
|
|
},
|
|
defaultValue: targetField?.patternFlags
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
// EXTERNAL MODULE: external "lodash"
|
|
var external_lodash_ = __webpack_require__(6517);
|
|
var external_lodash_default = /*#__PURE__*/__webpack_require__.n(external_lodash_);
|
|
// EXTERNAL MODULE: ./components/general/Modal.jsx
|
|
var Modal = __webpack_require__(9471);
|
|
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/UniqueFieldSelect.jsx
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* @param {Object} props - Server props
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} props.setFieldData - React state dispatch function
|
|
*/ function UniqueFieldSelect({ targetField , setFieldData }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5 w-full",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("label", {
|
|
htmlFor: "unique_field",
|
|
children: "Unique Field?"
|
|
}),
|
|
/*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", {
|
|
name: "unique_field",
|
|
id: "unique_field",
|
|
className: "px-2",
|
|
defaultValue: targetField?.unique ? "Yes" : "No",
|
|
onChange: (e)=>{
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
if (e.target.value.match(/yes/i)) {
|
|
existingFieldData.unique = true;
|
|
} else {
|
|
existingFieldData.unique = false;
|
|
delete existingFieldData.unique;
|
|
}
|
|
return existingFieldData;
|
|
});
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("option", {
|
|
value: "No",
|
|
children: "No"
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("option", {
|
|
value: "Yes",
|
|
children: "Yes"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
;// CONCATENATED MODULE: ./components/admin/databases/MoreOptionsModal.jsx
|
|
// @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
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* @param {Object} props
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} props.setFieldData
|
|
* @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable]
|
|
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} [props.tableFields]
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} [props.setTableFields]
|
|
* @param {import("@/package-shared/types").UserType} props.user
|
|
* @param {number} props.fieldIndex
|
|
*/ function MoreOptionsModal({ targetField , currentTable , database , tableFields , setTableFields , setFieldData , user , fieldIndex , }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ const [openExtraOptions, setOpenExtraOptions] = external_react_default().useState(false);
|
|
/** @type {React.Ref<import("@/package-shared/types").DSQL_FieldSchemaType>} */ const initialField = external_react_default().useRef(external_lodash_default().cloneDeep(targetField));
|
|
external_react_default().useEffect(()=>{}, []);
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, {
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "button outlined gray mt-5 w-full xl:w-auto",
|
|
onClick: ()=>{
|
|
setOpenExtraOptions(true);
|
|
},
|
|
children: "More"
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(Modal/* default */.Z, {
|
|
open: openExtraOptions,
|
|
onClose: ()=>{
|
|
if (initialField.current) {
|
|
const oldTargetField = external_lodash_default().cloneDeep(initialField.current);
|
|
targetField = oldTargetField;
|
|
}
|
|
setOpenExtraOptions(false);
|
|
},
|
|
maxWidth: "600px",
|
|
children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
|
|
className: "m-auto flex flex-col max-w-xl w-full max-h-[90vh] overflow-y-auto",
|
|
children: [
|
|
/*#__PURE__*/ jsx_runtime_.jsx("div", {
|
|
className: "w-full justify-between",
|
|
children: /*#__PURE__*/ jsx_runtime_.jsx("span", {
|
|
className: "text-xl",
|
|
children: "More Options"
|
|
})
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(CSSFiles, {
|
|
targetField: targetField
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(UniqueFieldSelect, {
|
|
targetField: targetField,
|
|
setFieldData: setFieldData
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(EncryptionSelect, {
|
|
targetField: targetField,
|
|
setFieldData: setFieldData
|
|
}),
|
|
currentTable && /*#__PURE__*/ jsx_runtime_.jsx(ForeignKey/* default */.Z, {
|
|
targetField: targetField,
|
|
setFieldData: setFieldData,
|
|
database: database,
|
|
tableFields: tableFields,
|
|
setTableFields: setTableFields,
|
|
currentTable: currentTable,
|
|
user: user
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(AutoIncrement, {
|
|
targetField: targetField,
|
|
setFieldData: setFieldData
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx(RegexPattern, {
|
|
targetField: targetField
|
|
}),
|
|
/*#__PURE__*/ jsx_runtime_.jsx("button", {
|
|
className: "w-full outlined more-padding",
|
|
onClick: ()=>{
|
|
setOpenExtraOptions(false);
|
|
},
|
|
children: "Done"
|
|
})
|
|
]
|
|
})
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 3699:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ ForeignKey)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6729);
|
|
/* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5264);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - DSQL schema field object
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} [props.setFieldData] - React state dispatch function
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} [props.tableFields] - All Fields Array
|
|
* @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} [props.setTableFields] - React state dispatch function
|
|
* @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database - MYSQL user_databases object
|
|
* @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable] - MYSQL user_databases object
|
|
* @param {import("@/package-shared/types").UserType} [props.user] - User object
|
|
* @param {React.Dispatch<React.SetStateAction<boolean>>} [props.setActiveEdit] - React state dispatch function
|
|
* @param {boolean} [props.activeClonedTable] - Is table an active clone?
|
|
*/ function ForeignKey({ targetField , setFieldData , tableFields , setTableFields , database , currentTable , user , setActiveEdit , activeClonedTable , }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ const [isForeignKey, setIsForeignKey] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField?.foreignKey ? true : false);
|
|
/** @type {any} */ const tablesState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
|
|
/** @type {[import("@/package-shared/types").DSQL_TableSchemaType[] | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_TableSchemaType[]>>]} */ const [tables, setTables] = tablesState;
|
|
/** @type {any} */ const foreignKeyTableState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
|
|
/** @type {[import("@/package-shared/types").DSQL_TableSchemaType | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_TableSchemaType>>]} */ const [foreignKeyTable, setForeignKeyTable] = foreignKeyTableState;
|
|
/** @type {any} */ const columnsState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
|
|
/** @type {[import("@/package-shared/types").DSQL_FieldSchemaType[] | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>]} */ const [columns, setColumns] = columnsState;
|
|
/** @type {any} */ const foreignKeyTableColumnState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
|
|
/** @type {[import("@/package-shared/types").DSQL_FieldSchemaType | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>]} */ const [foreignKeyTableColumn, setForeignKeyTableColumn] = foreignKeyTableColumnState;
|
|
const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
|
|
react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
|
|
if (!isForeignKey && !targetField?.foreignKey) return;
|
|
// const fetchUrl =`/api/getUserSchemaData?dbSlug=${database.db_slug}${window.location.search.match("delegated=true") ? "&delegated=true" : ""}`;
|
|
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(`/api/getUserSchemaData`).then((res)=>{
|
|
if (res.success) {
|
|
try {
|
|
/** @type {import("@/package-shared/types").DSQL_DatabaseSchemaType[]} */ const userSchemaData = res.schemaData;
|
|
const targetDatabase = userSchemaData.filter((db)=>db.dbFullName === database.db_full_name);
|
|
const filteredTables = currentTable ? targetDatabase[0].tables.filter((table)=>table.tableName !== currentTable.tableName) : targetDatabase[0].tables;
|
|
setTables(filteredTables);
|
|
if (targetField?.foreignKey) {
|
|
const destinationTargetTable = filteredTables.filter((table)=>table.tableName === targetField?.foreignKey?.destinationTableName);
|
|
setForeignKeyTable(destinationTargetTable[0]);
|
|
if (destinationTargetTable[0]?.fields) setColumns(destinationTargetTable[0].fields);
|
|
}
|
|
// const targetTable = targetDatabase[0].tables.filter(table => table.tableName === "")
|
|
} catch (/** @type {any} */ error) {
|
|
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/admin/clientError", {
|
|
method: "post",
|
|
body: {
|
|
component: "ForeignKey/fetch-error-getUserSchemaData/lines-65-77",
|
|
message: error.message,
|
|
user: user
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}, [
|
|
isForeignKey
|
|
]);
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-2 w-full mt-2 relative",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label", {
|
|
htmlFor: "foreign_key_field",
|
|
className: "flex flex-wrap items-center gap-2 mt-2",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|
children: "Foreign Key?"
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "dropdown-wrapper reversed text-sm items-start",
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|
className: "px-2 bg-slate-200 rounded-full hover:bg-slate-100 hidden xl:flex text-slate-600",
|
|
children: "Info"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "dropdown mt-0 xl:-mt-2",
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
|
|
children: "Foriegn key links the current table to another table"
|
|
})
|
|
})
|
|
]
|
|
})
|
|
]
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
|
|
name: "foreign_key_field",
|
|
id: "foreign_key_field",
|
|
className: "px-2",
|
|
defaultValue: targetField?.foreignKey ? "Yes" : "No",
|
|
onChange: (e)=>{
|
|
if (e.target.value.match(/yes/i)) {
|
|
setIsForeignKey(true);
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
existingFieldData["foreignKey"] = {
|
|
foreignKeyName: undefined,
|
|
destinationTableName: undefined,
|
|
destinationTableColumnName: undefined,
|
|
cascadeDelete: true
|
|
};
|
|
return existingFieldData;
|
|
});
|
|
}
|
|
} else {
|
|
setIsForeignKey(false);
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
delete existingFieldData.foreignKey;
|
|
return existingFieldData;
|
|
});
|
|
}
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "No",
|
|
children: "No"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "Yes",
|
|
children: "Yes"
|
|
})
|
|
]
|
|
}),
|
|
isForeignKey && tables && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
|
|
children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
|
|
name: "foreign_key_destination_table_name",
|
|
id: "foreign_key_destination_table_name",
|
|
className: "px-2",
|
|
defaultValue: targetField?.foreignKey?.destinationTableName ? targetField.foreignKey.destinationTableName : undefined,
|
|
onChange: (e)=>{
|
|
/** @type {HTMLSelectElement} */ const selectEl = e.target;
|
|
if (e.target.value?.match(/--/)) {
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
/** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
|
|
if (targetForeignKey) targetForeignKey.destinationTableName = undefined;
|
|
return existingFieldData;
|
|
});
|
|
} else {
|
|
selectEl.dataset.destinationTableName = undefined;
|
|
}
|
|
return;
|
|
}
|
|
const targetTable = tables.filter((tb)=>tb.tableName === e.target.value)[0];
|
|
setForeignKeyTable(targetTable);
|
|
if (targetTable?.fields) setColumns(targetTable.fields);
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
/** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
|
|
if (targetForeignKey) targetForeignKey.destinationTableName = e.target.value;
|
|
return existingFieldData;
|
|
});
|
|
} else {
|
|
e.target.dataset.destinationTableName = e.target.value;
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "--",
|
|
children: "--Select Table--"
|
|
}),
|
|
tables.map((table, index)=>{
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: table.tableName,
|
|
children: table.tableFullName
|
|
}, index + 1);
|
|
})
|
|
]
|
|
})
|
|
}),
|
|
foreignKeyTable && columns && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
|
|
children: [
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
|
|
name: "foreign_key_destination_table_column_name",
|
|
id: "foreign_key_destination_table_column_name",
|
|
className: "px-2",
|
|
defaultValue: targetField?.foreignKey?.destinationTableColumnName ? targetField.foreignKey.destinationTableColumnName : undefined,
|
|
onChange: (e)=>{
|
|
try {
|
|
const targetColumn = columns.filter((column)=>column.fieldName === e.target.value)[0];
|
|
setForeignKeyTableColumn(targetColumn);
|
|
if (e.target.value?.match(/--/)) {
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
/** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
|
|
if (targetForeignKey) targetForeignKey.destinationTableColumnName = undefined;
|
|
return existingFieldData;
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
const keyName = `dsql_${database.user_id}_${database.db_slug}_${Date.now()}`;
|
|
if (setFieldData) {
|
|
setFieldData((prev)=>{
|
|
let existingFieldData = prev;
|
|
existingFieldData.dataType = targetColumn.dataType;
|
|
/** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
|
|
if (targetForeignKey) {
|
|
targetForeignKey.destinationTableColumnName = targetColumn.fieldName;
|
|
targetForeignKey.destinationTableColumnType = targetColumn.dataType;
|
|
targetForeignKey.foreignKeyName = keyName;
|
|
}
|
|
return existingFieldData;
|
|
});
|
|
} else {
|
|
e.target.dataset.dataType = targetColumn.dataType;
|
|
e.target.dataset.destinationTableColumnName = targetColumn.fieldName;
|
|
// e.target.dataset.foreignKeyName = `dsql_${user.id}_${tableName}_table_${targetField?.fieldName ? targetField.fieldName : "{{__tmp_field_name}}"}_${foreignKeyTable.tableName}_${targetColumn.fieldName}_ref`;
|
|
e.target.dataset.foreignKeyName = keyName;
|
|
}
|
|
} catch (/** @type {any} */ error) {
|
|
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/admin/clientError", {
|
|
method: "post",
|
|
body: {
|
|
component: "ForeignKey/lines-232-264",
|
|
message: error.message,
|
|
user: user
|
|
}
|
|
});
|
|
}
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "--",
|
|
children: "--Select Column--"
|
|
}),
|
|
columns.map((field, index)=>{
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: field.fieldName,
|
|
children: field.fieldName
|
|
}, index + 1);
|
|
})
|
|
]
|
|
}),
|
|
activeClonedTable && foreignKeyTableColumn && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|
className: "secondary w-full",
|
|
onClick: (e)=>{
|
|
setLoading(true);
|
|
(0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["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.alert("Foreign Key Added Successfully!");
|
|
} else {
|
|
window.alert("Update Failed, Please Try again.");
|
|
}
|
|
setTimeout(()=>{
|
|
if (setActiveEdit) setActiveEdit(false);
|
|
}, 1000);
|
|
});
|
|
},
|
|
children: "Add Foreign Key"
|
|
})
|
|
]
|
|
}),
|
|
activeClonedTable && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|
className: "light-gray w-full",
|
|
onClick: (e)=>{
|
|
delete targetField.foreignKey;
|
|
setActiveEdit && setActiveEdit(false);
|
|
},
|
|
children: "Cancel"
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ 4838:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ JSONTextOption)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
|
|
/** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - Server props
|
|
* @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
|
|
*/ function JSONTextOption({ targetField }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @abstract { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @abstract Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @abstract { useState, useEffect, useRef, etc ... }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @abstract Main Function Return
|
|
*/ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "flex flex-col items-start gap-0.5",
|
|
style: {
|
|
minWidth: "70px"
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
|
|
htmlFor: "rich_text_option",
|
|
children: "Text Type"
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
|
|
name: "rich_text_option",
|
|
id: "rich_text_option",
|
|
className: "px-2",
|
|
onChange: (e)=>{
|
|
delete targetField.json;
|
|
delete targetField.richText;
|
|
delete targetField.yaml;
|
|
delete targetField.html;
|
|
delete targetField.javascript;
|
|
delete targetField.shell;
|
|
switch(e.target.value){
|
|
case "plain":
|
|
break;
|
|
case "rte":
|
|
targetField.richText = true;
|
|
break;
|
|
case "json":
|
|
targetField.json = true;
|
|
break;
|
|
case "yaml":
|
|
targetField.yaml = true;
|
|
break;
|
|
case "html":
|
|
targetField.html = true;
|
|
break;
|
|
case "css":
|
|
targetField.css = true;
|
|
break;
|
|
case "javascript":
|
|
targetField.javascript = true;
|
|
break;
|
|
case "shell":
|
|
targetField.shell = true;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
defaultValue: (()=>{
|
|
if (targetField.richText) return "rte";
|
|
if (targetField.json) return "json";
|
|
if (targetField.yaml) return "yaml";
|
|
if (targetField.html) return "html";
|
|
if (targetField.javascript) return "javascript";
|
|
if (targetField.shell) return "shell";
|
|
if (targetField.css) return "css";
|
|
return "plain";
|
|
})(),
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "plain",
|
|
children: "Plain Text"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "rte",
|
|
children: "Rich Text"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "json",
|
|
children: "JSON"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "yaml",
|
|
children: "YAML"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "html",
|
|
children: "HTML"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "css",
|
|
children: "CSS"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "javascript",
|
|
children: "Javascript"
|
|
}),
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
|
|
value: "shell",
|
|
children: "Shell"
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
} /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |