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

progress

Browse source
This commit is contained in:
IDONTSUDO 2024-04-12 17:02:49 +03:00
parent 0c03906518
commit 27763fc8d2
4 changed files with 45 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@ import { CoreText, CoreTextType } from "../text/text";
export interface IFormBuilder {
context: string;
result: string;
onChange: (change: FormBuilderValidationModel | undefined) => void;
onChange: (change: FormBuilderValidationModel) => void;
}
export const FormBuilder = observer((props: IFormBuilder) => {
@ -19,7 +19,9 @@ export const FormBuilder = observer((props: IFormBuilder) => {
React.useEffect(() => {
store.init(props.context, props.result);
store.changerForm.on((event) => props.onChange(event));
store.changerForm.on((event) => {
if (event) props.onChange(event);
});
}, [store, props]);
return (
@ -31,7 +33,6 @@ export const FormBuilder = observer((props: IFormBuilder) => {
{store.formViewModel?.inputs.map((element) => {
if (element.type.isEqual(InputType.ENUM)) {
const values = element.values as string[];
console.log(element.totalValue);
return (
<SelectCore
items={values}
@ -58,7 +59,7 @@ export const FormBuilder = observer((props: IFormBuilder) => {
}}
>
<CoreText text={element.name} type={CoreTextType.large} />
<Icon type="PlusCircle" style={{ width: 22 }} />
<Icon type="PlusCircle" style={{ width: 33 }} />
</div>
{element.isOpen ? (
@ -98,6 +99,11 @@ export const FormBuilder = observer((props: IFormBuilder) => {
onChange={(e) => {
store.changeTotalSubValue(element.id, subIndex, e);
}}
validation={
subSubArrayItem.type.isEqual(InputType.NUMBER)
? store.numberValidation
: undefined
}
value={subSubArrayItem.defaultValue}
label={subSubArrayItem.name}
/>
@ -120,6 +126,7 @@ export const FormBuilder = observer((props: IFormBuilder) => {
return (
<div>
<CoreInput
validation={element.type.isEqual(InputType.NUMBER) ? store.numberValidation : undefined}
onChange={(e) => {
store.changeTotalValue(element.id, e);
}}

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

@ -9,13 +9,14 @@ export class FormBuilderStore {
isError = false;
formViewModel?: FormViewModel;
changerForm: ChangerForm;
numberValidation: RegExp = new RegExp(/^\s*[+-]?(\d+|\d*\.\d+|\d+\.\d*)([Ee][+-]?\d+)?\s*$/);
constructor() {
makeAutoObservable(this);
this.changerForm = new ChangerForm();
}
changeTotalSubValue(id: string, subIndex: number, value: string) {
if (this.formViewModel?.inputs)
if (this.formViewModel?.inputs) {
this.formViewModel.inputs = this.formViewModel?.inputs.map((el) => {
if (!el.id.isEqual(id)) {
return el;
@ -27,9 +28,7 @@ export class FormBuilderStore {
if (subIndex !== i) {
return subSubElement;
}
subSubElement.totalValue = value;
return subSubElement;
});
}
@ -40,7 +39,9 @@ export class FormBuilderStore {
return el;
}
});
this.changerForm.emit(this.formViewModel?.fromFormBuilderValidationModel());
console.log(this.formViewModel?.fromFormBuilderValidationModel());
}
}
changeTotalValue(id: string, value: string) {

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

@ -27,7 +27,13 @@ export class InputBuilderViewModel {
return new InputBuilderViewModel(json.name, json.type, json.defaultValue, json.values, json.isOpen, json.id);
}
public toJson(): string {
return JSON.stringify(this);
try {
return JSON.stringify(this);
} catch (error) {
console.log("InputBuilderViewModel.toJson(): " + this.id);
console.log(error);
return "";
}
}
}

27
ui/src/core/ui/input/input.tsx
View file

@ -1,3 +1,4 @@
import React from "react";
import { CoreText, CoreTextType } from "../text/text";
interface IInputProps {
@ -5,16 +6,19 @@ interface IInputProps {
value?: string;
onChange?: (value: string) => void;
style?: React.CSSProperties;
validation?: RegExp;
}
export const CoreInput = (props: IInputProps) => {
const [value, setValue] = React.useState<string | undefined>(() => props.value);
return (
<div
style={Object.assign(
{
backgroundColor: "rgba(230, 224, 233, 1)",
height: 58,
borderRadius: " 4px 4px 0px 0px",
borderRadius: "4px 4px 0px 0px",
borderBottom: "solid 1px black",
padding: "10px 10px 10px 10px",
},
@ -24,15 +28,28 @@ export const CoreInput = (props: IInputProps) => {
<CoreText type={CoreTextType.small} text={props.label} />
<div
onChange={(event) => {
console.log(event);
}}
onInput={(e) => {
if (props.onChange && e.currentTarget.textContent) props.onChange(e.currentTarget.textContent);
// setValue(e.)
if (e.currentTarget.textContent) {
setValue(e.currentTarget.textContent);
if (
props.validation !== undefined &&
props.validation?.test(e.currentTarget.textContent) &&
props.onChange
) {
props.onChange(e.currentTarget.textContent);
return;
}
if (props.onChange) {
props.onChange(e.currentTarget.textContent);
return;
}
}
}}
style={{ fontSize: 16, fontFamily: "Roboto", color: "#1D1B20", height: 24 }}
contentEditable="true"
/>
{props.validation?.test(value ?? "") ?? false ? <div>Error</div> : null}
</div>
);
};