add help for groups and correct adding group

This commit is contained in:
Maren Süwer
2018-10-02 10:26:19 +02:00
parent 786f28ce01
commit 980f8f58e0
5 changed files with 33 additions and 7 deletions

View File

@@ -3,13 +3,15 @@ import React from "react";
import { AddButton } from "../buttons"; import { AddButton } from "../buttons";
import InputField from "./InputField"; import InputField from "./InputField";
import { translate } from "react-i18next";
type Props = { type Props = {
addEntry: string => void, addEntry: string => void,
disabled: boolean, disabled: boolean,
buttonLabel: string, buttonLabel: string,
fieldLabel: string, fieldLabel: string,
errorMessage: string errorMessage: string,
t: string => string,
}; };
type State = { type State = {
@@ -25,7 +27,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
} }
render() { render() {
const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props; const { disabled, buttonLabel, fieldLabel, errorMessage, t } = this.props;
return ( return (
<div className="field"> <div className="field">
<InputField <InputField
@@ -36,6 +38,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
value={this.state.entryToAdd} value={this.state.entryToAdd}
onReturnPressed={this.appendEntry} onReturnPressed={this.appendEntry}
disabled={disabled} disabled={disabled}
helpText={t("group-form.help.membersHelpText")}
/> />
<AddButton <AddButton
label={buttonLabel} label={buttonLabel}
@@ -65,4 +68,4 @@ class AddEntryToTableField extends React.Component<Props, State> {
}; };
} }
export default AddEntryToTableField; export default translate("groups")(AddEntryToTableField);

View File

@@ -1,5 +1,6 @@
//@flow //@flow
import React from "react"; import React from "react";
import {Help} from "../index";
export type SelectItem = { export type SelectItem = {
value: string, value: string,
@@ -10,7 +11,8 @@ type Props = {
label?: string, label?: string,
placeholder?: SelectItem[], placeholder?: SelectItem[],
value?: string, value?: string,
onChange: string => void onChange: string => void,
helpText?: string
}; };
class Textarea extends React.Component<Props> { class Textarea extends React.Component<Props> {
@@ -28,13 +30,26 @@ class Textarea extends React.Component<Props> {
return ""; return "";
}; };
renderHelp = () => {
const helpText = this.props.helpText;
if(helpText){
return (
<div className="control columns is-vcentered">
<Help message={helpText} />
</div>);
}
else
return null;
};
render() { render() {
const { placeholder, value } = this.props; const { placeholder, value } = this.props;
return ( return (
<div className="field"> <div className="field">
{this.renderLabel()} {this.renderLabel()}
<div className="control"> <div className="field is-grouped">
<div className="control is-expanded">
<textarea <textarea
className="textarea" className="textarea"
ref={input => { ref={input => {
@@ -45,6 +60,8 @@ class Textarea extends React.Component<Props> {
value={value} value={value}
/> />
</div> </div>
{this.renderHelp()}
</div>
</div> </div>
); );
} }

View File

@@ -42,7 +42,12 @@
"group-form": { "group-form": {
"submit": "Submit", "submit": "Submit",
"name-error": "Group name is invalid", "name-error": "Group name is invalid",
"description-error": "Description is invalid" "description-error": "Description is invalid",
"help": {
"nameHelpText": "Unique name of the group",
"descriptionHelpText": "A short description of the group",
"memberHelpText": "Usernames of the group members"
}
}, },
"delete-group-button": { "delete-group-button": {
"label": "Delete", "label": "Delete",

View File

@@ -80,6 +80,7 @@ class GroupForm extends React.Component<Props, State> {
onChange={this.handleGroupNameChange} onChange={this.handleGroupNameChange}
value={group.name} value={group.name}
validationError={this.state.nameValidationError} validationError={this.state.nameValidationError}
helpText={t("group-form.help.nameHelpText")}
/> />
); );
} }
@@ -93,6 +94,7 @@ class GroupForm extends React.Component<Props, State> {
onChange={this.handleDescriptionChange} onChange={this.handleDescriptionChange}
value={group.description} value={group.description}
validationError={false} validationError={false}
helpText={t("group-form.help.descriptionHelpText")}
/> />
<MemberNameTable <MemberNameTable
members={this.state.group.members} members={this.state.group.members}

View File

@@ -22,7 +22,6 @@ public class GroupDto extends HalRepresentation {
private Instant lastModified; private Instant lastModified;
@Pattern(regexp = "^[A-z0-9\\.\\-_@]|[^ ]([A-z0-9\\.\\-_@ ]*[A-z0-9\\.\\-_@]|[^ ])?$") @Pattern(regexp = "^[A-z0-9\\.\\-_@]|[^ ]([A-z0-9\\.\\-_@ ]*[A-z0-9\\.\\-_@]|[^ ])?$")
private String name; private String name;
@NotEmpty
private String type; private String type;
private Map<String, String> properties; private Map<String, String> properties;
private List<String> members; private List<String> members;