@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
191 lines (187 loc) • 7.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useEffect } from 'react';
import { Box, IconButton, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from '@mui/material';
import { Add, Edit, Delete } from '@mui/icons-material';
// Optional toast import - fallback to console if not available
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var toast;
try {
var toastModule = require('react-hot-toast');
toast = toastModule.toast || toastModule.default;
} catch (e) {
toast = {
error: function error(message) {
return console.error('Error:', message);
},
success: function success(message) {
return console.log('Success:', message);
},
dismiss: function dismiss() {
return console.log('Toast dismissed');
}
};
}
var ManageFieldsModal = function ManageFieldsModal(_ref) {
var open = _ref.open,
onClose = _ref.onClose,
initialFields = _ref.fields1,
onSave = _ref.onSave,
colors = _ref.colors,
setCustomFields = _ref.setCustomFields;
var _useState = useState(initialFields),
_useState2 = _slicedToArray(_useState, 2),
fields = _useState2[0],
setFields = _useState2[1];
var _useState3 = useState(Array(initialFields.length).fill(false)),
_useState4 = _slicedToArray(_useState3, 2),
editMode = _useState4[0],
setEditMode = _useState4[1];
// Sync modal state with initialFields
useEffect(function () {
setFields(initialFields);
setEditMode(Array(initialFields.length).fill(false));
}, [initialFields]);
var handleAddField = function handleAddField() {
if (fields.length >= 20) {
toast.error('Maximum of 20 fields allowed!');
return;
}
var newFields = [].concat(_toConsumableArray(fields), [{
originalField: '',
formattedField: ''
}]);
setFields(newFields);
setEditMode([].concat(_toConsumableArray(editMode), [true]));
};
var handleFieldChange = function handleFieldChange(index, value) {
var updatedFields = _toConsumableArray(fields);
updatedFields[index] = _objectSpread(_objectSpread({}, updatedFields[index]), {}, {
formattedField: value
});
setFields(updatedFields);
};
var toggleEditMode = function toggleEditMode(index) {
var updatedEditMode = _toConsumableArray(editMode);
updatedEditMode[index] = !updatedEditMode[index];
setEditMode(updatedEditMode);
};
var handleDeleteField = function handleDeleteField(index) {
if (fields.length <= 1) {
toast.error('At least one field must remain!');
return;
}
var updatedFields = fields.filter(function (_, i) {
return i !== index;
});
var updatedEditMode = editMode.filter(function (_, i) {
return i !== index;
});
setFields(updatedFields);
setEditMode(updatedEditMode);
};
var handleSaveChanges = function handleSaveChanges() {
// Dismiss all currently displayed toasts
toast.dismiss();
// Show a new success toast
toast.success('Changes saved!', {
id: 'save-toast',
// Use a unique ID for the toast
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
// Call your save and close functions
onSave(fields); // Save the updated fields
onClose();
};
return /*#__PURE__*/_jsxs(Dialog, {
open: open,
onClose: onClose,
maxWidth: "sm",
fullWidth: true,
classes: {
paper: 'rounded-lg p-4'
},
children: [/*#__PURE__*/_jsxs(DialogTitle, {
className: "text-center flex flex-col items-center",
children: [/*#__PURE__*/_jsx("span", {
className: "text-2xl font-semibold relative",
children: "Manage Fields"
}), /*#__PURE__*/_jsx("span", {
className: "w-1/3 h-[4px] bg-purple-500 mt-1"
})]
}), /*#__PURE__*/_jsx(DialogContent, {
sx: {
width: '100%'
},
children: /*#__PURE__*/_jsxs(Box, {
className: "space-y-4 w-full",
children: [fields.map(function (field, index) {
return /*#__PURE__*/_jsxs(Box, {
className: "flex items-center space-x-6 w-full",
children: [/*#__PURE__*/_jsx(TextField, {
variant: "outlined",
name: fields.formattedField,
placeholder: "Custom Field",
value: field.formattedField,
onChange: function onChange(e) {
return handleFieldChange(index, e.target.value);
},
disabled: !editMode[index],
sx: {
width: '70%'
},
InputProps: {
className: "h-12",
style: {
fontSize: "0.875rem",
width: "100%"
}
}
}), /*#__PURE__*/_jsx(IconButton, {
onClick: function onClick() {
return toggleEditMode(index);
},
color: colors.primary[300],
children: /*#__PURE__*/_jsx(Edit, {})
}), /*#__PURE__*/_jsx(IconButton, {
onClick: function onClick() {
return handleDeleteField(index);
},
color: colors.primary[300],
children: /*#__PURE__*/_jsx(Delete, {})
})]
}, index);
}), /*#__PURE__*/_jsxs(Button, {
onClick: handleAddField,
className: "font-semibold flex items-center mt-2",
disabled: fields.length >= 20,
sx: {
color: 'rgb(147 51 234)'
},
children: [/*#__PURE__*/_jsx(Add, {
className: "mr-1"
}), "Add Field"]
})]
})
}), /*#__PURE__*/_jsxs(DialogActions, {
children: [/*#__PURE__*/_jsx("button", {
onClick: onClose,
className: "bg-gray-300 px-4 py-2 rounded-md text-black",
children: "Cancel"
}), /*#__PURE__*/_jsx("button", {
onClick: handleSaveChanges,
className: "bg-purple-600 mr-2 text-white font-semibold rounded-md px-4 py-2 transition",
children: "Save"
})]
})]
});
};
export default ManageFieldsModal;