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 InputField from "./InputField";
import { translate } from "react-i18next";
type Props = {
addEntry: string => void,
disabled: boolean,
buttonLabel: string,
fieldLabel: string,
errorMessage: string
errorMessage: string,
t: string => string,
};
type State = {
@@ -25,7 +27,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
}
render() {
const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props;
const { disabled, buttonLabel, fieldLabel, errorMessage, t } = this.props;
return (
<div className="field">
<InputField
@@ -36,6 +38,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
value={this.state.entryToAdd}
onReturnPressed={this.appendEntry}
disabled={disabled}
helpText={t("group-form.help.membersHelpText")}
/>
<AddButton
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
import React from "react";
import {Help} from "../index";
export type SelectItem = {
value: string,
@@ -10,7 +11,8 @@ type Props = {
label?: string,
placeholder?: SelectItem[],
value?: string,
onChange: string => void
onChange: string => void,
helpText?: string
};
class Textarea extends React.Component<Props> {
@@ -28,13 +30,26 @@ class Textarea extends React.Component<Props> {
return "";
};
renderHelp = () => {
const helpText = this.props.helpText;
if(helpText){
return (
<div className="control columns is-vcentered">
<Help message={helpText} />
</div>);
}
else
return null;
};
render() {
const { placeholder, value } = this.props;
return (
<div className="field">
{this.renderLabel()}
<div className="control">
<div className="field is-grouped">
<div className="control is-expanded">
<textarea
className="textarea"
ref={input => {
@@ -45,6 +60,8 @@ class Textarea extends React.Component<Props> {
value={value}
/>
</div>
{this.renderHelp()}
</div>
</div>
);
}

View File

@@ -42,7 +42,12 @@
"group-form": {
"submit": "Submit",
"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": {
"label": "Delete",

View File

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

View File

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