robossembler/webstudio
7
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

formbuilder fix

Browse source
This commit is contained in:
IDONTSUDO 2024-04-17 15:21:40 +03:00
parent 2b8d0fa88b
commit f11dfa7e57
8 changed files with 113 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

21
ui/src/core/ui/form_builder/form_builder.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { InputBuilderViewModel, InputType } from "./form_view_model";
import { FormViewModel, InputBuilderViewModel, InputType } from "./form_view_model";
import { observer } from "mobx-react-lite";
import { FormBuilderStore } from "./form_builder_store";
import { FormBuilderValidationModel } from "../../../features/dataset/dataset_model";
@ -9,8 +9,7 @@ import { Icon } from "../icons/icons";
import { CoreText, CoreTextType } from "../text/text";
export interface IFormBuilder {
context: string;
result: string;
formBuilder: FormBuilderValidationModel;
onChange: (change: FormBuilderValidationModel) => void;
}
@ -18,11 +17,19 @@ export const FormBuilder = observer((props: IFormBuilder) => {
const [store] = React.useState(() => new FormBuilderStore());
React.useEffect(() => {
store.init(props.context, props.result);
store.init(props.formBuilder.context, props.formBuilder.result);
if (props.formBuilder.form.isNotEmpty()) {
store.formViewModel = new FormViewModel(
props.formBuilder.form.map((el) => InputBuilderViewModel.fromJSON(el)),
props.formBuilder.context,
props.formBuilder.result
);
console.log(props.formBuilder.form.map((el) => InputBuilderViewModel.fromJSON(el)));
}
store.changerForm.on((event) => {
if (event) props.onChange(event);
});
}, [store, props]);
}, []);
return (
<div>
@ -105,7 +112,7 @@ export const FormBuilder = observer((props: IFormBuilder) => {
: undefined
}
error="только числа"
value={subSubArrayItem.defaultValue}
value={subSubArrayItem.totalValue ?? subSubArrayItem.defaultValue}
label={subSubArrayItem.name}
/>
</div>
@ -131,7 +138,7 @@ export const FormBuilder = observer((props: IFormBuilder) => {
onChange={(e) => {
store.changeTotalValue(element.id, e);
}}
value={element.defaultValue}
value={element.totalValue ?? element.defaultValue}
error="только числа"
label={element.name}
style={{ margin: 20 }}

6
ui/src/core/ui/form_builder/form_builder_store.ts
View file

@ -40,7 +40,7 @@ export class FormBuilderStore {
}
});
console.log(this.formViewModel?.fromFormBuilderValidationModel());
this.changerForm.emit(this.formViewModel?.fromFormBuilderValidationModel());
}
}
@ -72,10 +72,6 @@ export class FormBuilderStore {
this.changerForm.emit(this.formViewModel?.fromFormBuilderValidationModel());
}
saveForm(): void {
console.log(this.formViewModel?.toResult());
}
open = (id: string) => {
if (this.formViewModel)
this.formViewModel.inputs = this.formViewModel?.inputs.map((el) => {

74
ui/src/core/ui/form_builder/form_view_model.ts
View file

@ -19,15 +19,33 @@ export class InputBuilderViewModel {
public values: string[] | undefined | InputBuilderViewModel[] = undefined,
public totalValue: any | undefined = undefined,
public isOpen: boolean = false,
public subType: string | undefined = undefined
public subType: string | undefined = undefined,
id: string | undefined = undefined
) {
this.id = uuidv4();
this.id = id ?? uuidv4();
}
static fromJSON(json: any) {
return new InputBuilderViewModel(json.name, json.type, json.defaultValue, json.values, json.isOpen, json.id);
try {
const value = JSON.parse(json);
return new InputBuilderViewModel(
value.name,
value.type,
value.defaultValue,
value.values,
value.totalValue,
value.isOpen,
value.subType,
value.id
);
} catch (error) {
console.log("InputBuilderViewModel.fromJSON(): " + json);
throw new Error("InputBuilderViewModel.fromJSON");
}
}
public toJson(): string {
try {
console.log(this.id);
console.log(this.totalValue);
return JSON.stringify(this);
} catch (error) {
console.log("InputBuilderViewModel.toJson(): " + this.id);
@ -54,8 +72,13 @@ export class FormViewModel {
this.inputs = inputs;
makeAutoObservable(this);
}
public json(){
return JSON.parse(this.toResult().replaceAll("\n", "").replaceAll("\\", "").replaceAll("/", ""))
public json() {
const result = this.toResult();
try {
return JSON.parse(result).replaceAll("\n", "").replaceAll("\\", "").replaceAll("/", "");
} catch (error) {
console.log(result);
}
}
public fromFormBuilderValidationModel() {
return new FormBuilderValidationModel(
@ -66,7 +89,7 @@ export class FormViewModel {
);
}
public toResult(): string {
let result = this.result;
let result = "";
this.inputs.forEach((element) => {
let inputResult = element.totalValue ?? element.defaultValue;
@ -81,25 +104,26 @@ export class FormViewModel {
inputResult = "[]";
} else {
inputResult = [];
// @ts-ignore
element.totalValue.forEach((el) => {
const objectUnion = {};
if (el instanceof Array)
el.forEach((subElement) => {
let subResult = subElement.totalValue ?? subElement.defaultValue;
if (element.type.isEqualMany([InputType.STRING, InputType.ENUM])) {
subResult = `"${String(subResult)}"`;
}
if (element.type.isEqual(InputType.NUMBER)) {
subResult = Number(subResult);
}
// @ts-ignore
objectUnion[subElement.name] = subResult;
});
if (Object.keys(objectUnion).length !== 0) {
inputResult.push(objectUnion);
}
});
if (element.totalValue instanceof Array) {
element.totalValue.forEach((el) => {
const objectUnion = {};
if (el instanceof Array)
el.forEach((subElement) => {
let subResult = subElement.totalValue ?? subElement.defaultValue;
if (element.type.isEqualMany([InputType.STRING, InputType.ENUM])) {
subResult = `"${String(subResult)}"`;
}
if (element.type.isEqual(InputType.NUMBER)) {
subResult = Number(subResult);
}
// @ts-ignore
objectUnion[subElement.name] = subResult;
});
if (Object.keys(objectUnion).length !== 0) {
inputResult.push(objectUnion);
}
});
}
}
}
if (inputResult instanceof Array) inputResult = JSON.stringify(inputResult);