9s-fe-core
Version:
Core functionalities for authentication, configuration, and repository management.
112 lines (111 loc) • 7.01 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.updateFieldListValue = exports.FormView = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const antd_1 = require("antd");
const react_1 = require("react");
const FormContext_1 = require("../../utils/FormContext");
const template_utils_1 = require("../../utils/template_utils");
const field_type_enum_1 = require("../../enums/field-type.enum");
const repository_1 = require("../../../repository");
const renderField = (fieldItem) => {
const child = (0, template_utils_1.renderFormField)(fieldItem);
const rules = (0, template_utils_1.getFieldRules)(fieldItem);
return ((0, jsx_runtime_1.jsx)(antd_1.Form.Item, { id: fieldItem.key, label: fieldItem.label, name: fieldItem.key, rules: rules, children: child }, fieldItem.key));
};
const FormView = ({ actionSchema, dataItem, isOpen, onClose, submitSuccess, }) => {
var _a;
const [form] = antd_1.Form.useForm();
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
const [payload, setPayload] = (0, react_1.useState)();
const [requestFiles, setRequestFiles] = (0, react_1.useState)();
const [fieldList, setFieldList] = (0, react_1.useState)((_a = actionSchema === null || actionSchema === void 0 ? void 0 : actionSchema.response_fields) !== null && _a !== void 0 ? _a : []);
(0, react_1.useEffect)(() => {
const dataFieldList = (0, template_utils_1.integrateFieldsWithData)(fieldList, dataItem);
setFieldList(dataFieldList);
}, [actionSchema, dataItem]);
(0, react_1.useEffect)(() => {
const fetchData = () => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b, _c;
if (!payload)
return;
const apiUrl = (0, template_utils_1.buildApiUrl)(actionSchema.api.path, dataItem);
const request = {
apiUrl: apiUrl,
httpMethod: (_b = (_a = actionSchema === null || actionSchema === void 0 ? void 0 : actionSchema.api) === null || _a === void 0 ? void 0 : _a.method) !== null && _b !== void 0 ? _b : repository_1.HttpMethod.GET,
type: (_c = actionSchema === null || actionSchema === void 0 ? void 0 : actionSchema.api) === null || _c === void 0 ? void 0 : _c.type,
payload,
requestFiles,
};
const result = yield repository_1.baseRepository.submitRequest(request);
if (result.status === 201 || result.status === 200) {
submitSuccess(result.dataResponse);
}
else {
antd_1.message.error(result.message);
}
});
fetchData();
}, [payload, requestFiles]);
const onSubmit = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
// try {
const requestFiles = [];
setIsLoading(true);
yield form.validateFields();
const payload = {};
fieldList.forEach((field) => {
(0, template_utils_1.convertFieldToPayload)(field, payload, requestFiles);
if (field.type === field_type_enum_1.FieldTypeEnum.IMAGE &&
(dataItem === null || dataItem === void 0 ? void 0 : dataItem[field.key]) &&
!(payload === null || payload === void 0 ? void 0 : payload[field.key])) {
payload[field.key] = null;
}
});
setPayload(payload);
setRequestFiles(requestFiles);
}), [fieldList, dataItem]);
(0, react_1.useEffect)(() => {
const values = {};
fieldList.forEach((field) => {
values[field.key] = field.value;
});
form.setFieldsValue(values);
}, [fieldList]);
return ((0, jsx_runtime_1.jsx)(antd_1.Drawer, { title: (0, jsx_runtime_1.jsx)("div", { className: "text-primary", children: dataItem ? 'Edit' : 'Create' }), open: isOpen, onClose: onClose, placement: "right", width: 700, footer: (0, jsx_runtime_1.jsxs)(antd_1.Space, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { onClick: onClose, danger: true, className: "!font-bold", children: "Cancel" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { onClick: () => form.submit(), className: "!bg-primary !text-white !font-bold !border-r-amber-50", children: dataItem ? 'Edit' : 'Add' })] }), children: (0, jsx_runtime_1.jsx)(antd_1.Spin, { spinning: isLoading, children: (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: {
fieldList,
setFieldList,
updateFieldValue: (key, value) => {
setFieldList(prevList => (0, exports.updateFieldListValue)(prevList, key, value));
},
}, children: (0, jsx_runtime_1.jsx)(antd_1.Form, { name: actionSchema === null || actionSchema === void 0 ? void 0 : actionSchema.api.type, layout: "vertical", className: "mt-5", onFinish: onSubmit, form: form, children: (0, jsx_runtime_1.jsx)(antd_1.Row, { gutter: 16, children: fieldList.map((fieldItem, index) => {
var _a, _b;
if (fieldItem.key == 'service_ids') {
console.log('fieldItem.value:', JSON.stringify(fieldItem.value, null, 2));
}
return ((0, jsx_runtime_1.jsx)(antd_1.Col, { span: ((_b = (_a = fieldItem === null || fieldItem === void 0 ? void 0 : fieldItem.html) === null || _a === void 0 ? void 0 : _a.col) !== null && _b !== void 0 ? _b : 12) * 2, children: renderField(fieldItem) }, fieldItem.key));
}) }) }) }) }) }));
};
exports.FormView = FormView;
const updateFieldListValue = (prevList, key, value) => {
const changedField = prevList.find(field => field.key === key);
return prevList.map(field => {
var _a;
if (field.key === key) {
return Object.assign(Object.assign({}, field), { value });
}
if ((_a = changedField === null || changedField === void 0 ? void 0 : changedField.refresh_change_fields) === null || _a === void 0 ? void 0 : _a.includes(field.key)) {
return Object.assign(Object.assign({}, field), { value: [] });
}
return field;
});
};
exports.updateFieldListValue = updateFieldListValue;