55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import {ComponentContext} from "../../utils/ComponentContext";
|
||
import {observer} from "mobx-react";
|
||
import {ModalState} from "../../utils/modalState";
|
||
import {action, computed, makeObservable, observable} from "mobx";
|
||
import {ReactiveValue} from "../../utils/reactive/reactiveValue";
|
||
import {required, strLength, strPattern} from "../../utils/reactive/validators";
|
||
import {Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle} from "react-bootstrap";
|
||
import {StringInput} from "../custom/controls/ReactiveControls";
|
||
import {post} from "../../utils/request";
|
||
|
||
export interface CreateGroupModalProps {
|
||
modalState: ModalState;
|
||
}
|
||
|
||
@observer
|
||
export class AddGroupModal extends ComponentContext<CreateGroupModalProps> {
|
||
constructor(props: any) {
|
||
super(props);
|
||
makeObservable(this);
|
||
}
|
||
|
||
@observable name = new ReactiveValue<string>()
|
||
.addValidator(required)
|
||
.addValidator(strLength(3, 50))
|
||
.addInputRestriction(strPattern(/^[а-яА-ЯёЁ0-9_-]*$/, "Имя группы должно содержать только русские буквы, цифры и символы _-"));
|
||
|
||
@action.bound
|
||
creationRequest() {
|
||
post<void>('/group/create-group', {name: this.name.value}, false).then(() => {
|
||
this.notificationStore.success(`Группа ${this.name.value} создана`);
|
||
}).finally(() => {
|
||
this.props.modalState.close();
|
||
});
|
||
}
|
||
|
||
@computed
|
||
get formInvalid() {
|
||
return this.name.invalid || !this.name.touched;
|
||
}
|
||
|
||
render() {
|
||
return <Modal show={this.props.modalState.isOpen} centered>
|
||
<ModalHeader>
|
||
<ModalTitle>Добавление группы</ModalTitle>
|
||
</ModalHeader>
|
||
<ModalBody>
|
||
<StringInput value={this.name} label={'Имя группы'}/>
|
||
</ModalBody>
|
||
<ModalFooter>
|
||
<Button onClick={this.creationRequest} disabled={this.formInvalid}>Создать</Button>
|
||
<Button onClick={this.props.modalState.close} variant={'secondary'}>Закрыть</Button>
|
||
</ModalFooter>
|
||
</Modal>
|
||
}
|
||
} |