transfer field to add new entry of each component to global one

This commit is contained in:
Maren Süwer
2018-08-21 11:59:12 +02:00
parent d9e66fdbaa
commit ebed0d0997
8 changed files with 97 additions and 293 deletions

View File

@@ -0,0 +1,68 @@
//@flow
import React from "react";
import { AddButton } from "../buttons";
import InputField from "./InputField";
type Props = {
addEntry: string => void,
disabled: boolean,
buttonLabel: string,
fieldLabel: string,
errorMessage: string
};
type State = {
entryToAdd: string
};
class AddEntryToTableField extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
entryToAdd: ""
};
}
render() {
const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props;
return (
<div className="field">
<InputField
label={fieldLabel}
errorMessage={errorMessage}
onChange={this.handleAddEntryChange}
validationError={false}
value={this.state.entryToAdd}
onReturnPressed={this.appendEntry}
disabled={disabled}
/>
<AddButton
label={buttonLabel}
action={this.addButtonClicked}
disabled={disabled}
/>
</div>
);
}
addButtonClicked = (event: Event) => {
event.preventDefault();
this.appendEntry();
};
appendEntry = () => {
const { entryToAdd } = this.state;
this.props.addEntry(entryToAdd);
this.setState({ ...this.state, entryToAdd: "" });
};
handleAddEntryChange = (entryname: string) => {
this.setState({
...this.state,
entryToAdd: entryname
});
};
}
export default AddEntryToTableField;

View File

@@ -1,67 +0,0 @@
//@flow
import React from "react";
import { translate } from "react-i18next";
import { AddButton } from "../../../components/buttons";
import InputField from "../../../components/forms/InputField";
type Props = {
t: string => string,
addGroup: string => void,
disabled: boolean
};
type State = {
groupToAdd: string
};
class AddAdminGroupField extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
groupToAdd: ""
};
}
render() {
const { t, disabled } = this.props;
return (
<div className="field">
<InputField
label={t("admin-settings.add-group-textfield")}
errorMessage={t("admin-settings.add-group-error")}
onChange={this.handleAddGroupChange}
validationError={false}
value={this.state.groupToAdd}
onReturnPressed={this.appendGroup}
disabled={disabled}
/>
<AddButton
label={t("admin-settings.add-group-button")}
action={this.addButtonClicked}
disabled={disabled}
/>
</div>
);
}
addButtonClicked = (event: Event) => {
event.preventDefault();
this.appendGroup();
};
appendGroup = () => {
const { groupToAdd } = this.state;
this.props.addGroup(groupToAdd);
this.setState({ ...this.state, groupToAdd: "" });
};
handleAddGroupChange = (groupname: string) => {
this.setState({
...this.state,
groupToAdd: groupname
});
};
}
export default translate("config")(AddAdminGroupField);

View File

@@ -1,73 +0,0 @@
//@flow
import React from "react";
import { translate } from "react-i18next";
import { AddButton } from "../../../components/buttons";
import InputField from "../../../components/forms/InputField";
type Props = {
t: string => string,
addUser: string => void,
disabled: boolean
};
type State = {
userToAdd: string
//validationError: boolean
};
class AddAdminUserField extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
userToAdd: ""
//validationError: false
};
}
render() {
const { t, disabled } = this.props;
return (
<div className="field">
<InputField
label={t("admin-settings.add-user-textfield")}
errorMessage={t("admin-settings.add-user-error")}
onChange={this.handleAddUserChange}
validationError={false}
value={this.state.userToAdd}
onReturnPressed={this.appendUser}
disabled={disabled}
/>
<AddButton
label={t("admin-settings.add-user-button")}
action={this.addButtonClicked}
disabled={disabled}
//disabled={!isMemberNameValid(this.state.memberToAdd)}
/>
</div>
);
}
addButtonClicked = (event: Event) => {
event.preventDefault();
this.appendUser();
};
appendUser = () => {
const { userToAdd } = this.state;
//if (isMemberNameValid(memberToAdd)) {
this.props.addUser(userToAdd);
this.setState({ ...this.state, userToAdd: "" });
// }
};
handleAddUserChange = (username: string) => {
this.setState({
...this.state,
userToAdd: username
//validationError: membername.length > 0 && !isMemberNameValid(membername)
});
};
}
export default translate("config")(AddAdminUserField);

View File

@@ -1,73 +0,0 @@
//@flow
import React from "react";
import { translate } from "react-i18next";
import { AddButton } from "../../../components/buttons";
import InputField from "../../../components/forms/InputField";
type Props = {
t: string => string,
addProxyExclude: string => void,
disabled: boolean
};
type State = {
proxyExcludeToAdd: string
//validationError: boolean
};
class AddProxyExcludeField extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
proxyExcludeToAdd: ""
//validationError: false
};
}
render() {
const { t } = this.props;
return (
<div className="field">
<InputField
label={t("proxy-settings.add-proxy-exclude-textfield")}
errorMessage={t("proxy-settings.add-proxy-exclude-error")}
onChange={this.handleAddProxyExcludeChange}
validationError={false}
value={this.state.proxyExcludeToAdd}
onReturnPressed={this.appendProxyExclude}
disabled={this.props.disabled}
/>
<AddButton
label={t("proxy-settings.add-proxy-exclude-button")}
action={this.addButtonClicked}
disabled={this.props.disabled}
//disabled={!isMemberNameValid(this.state.memberToAdd)}
/>
</div>
);
}
addButtonClicked = (event: Event) => {
event.preventDefault();
this.appendProxyExclude();
};
appendProxyExclude = () => {
const { proxyExcludeToAdd } = this.state;
//if (isMemberNameValid(memberToAdd)) {
this.props.addProxyExclude(proxyExcludeToAdd);
this.setState({ ...this.state, proxyExcludeToAdd: "" });
// }
};
handleAddProxyExcludeChange = (username: string) => {
this.setState({
...this.state,
proxyExcludeToAdd: username
//validationError: membername.length > 0 && !isMemberNameValid(membername)
});
};
}
export default translate("config")(AddProxyExcludeField);

View File

@@ -4,8 +4,7 @@ import { translate } from "react-i18next";
import Subtitle from "../../../components/layout/Subtitle";
import AdminGroupTable from "../table/AdminGroupTable";
import AdminUserTable from "../table/AdminUserTable";
import AddAdminGroupField from "../fields/AddAdminGroupField";
import AddAdminUserField from "../fields/AddAdminUserField";
import AddEntryToTableField from "../../../components/forms/AddEntryToTableField";
type Props = {
adminGroups: string[],
@@ -29,8 +28,14 @@ class AdminSettings extends React.Component<Props> {
}
disabled={!hasUpdatePermission}
/>
<AddAdminGroupField addGroup={this.addGroup} disabled={!hasUpdatePermission}
<AddEntryToTableField
addEntry={this.addGroup}
disabled={!hasUpdatePermission}
buttonLabel={t("admin-settings.add-group-button")}
fieldLabel={t("admin-settings.add-group-textfield")}
errorMessage={t("admin-settings.add-group-error")}
/>
<AdminUserTable
adminUsers={adminUsers}
onChange={(isValid, changedValue, name) =>
@@ -38,7 +43,12 @@ class AdminSettings extends React.Component<Props> {
}
disabled={!hasUpdatePermission}
/>
<AddAdminUserField addUser={this.addUser} disabled={!hasUpdatePermission}
<AddEntryToTableField
addEntry={this.addUser}
disabled={!hasUpdatePermission}
buttonLabel={t("admin-settings.add-user-button")}
fieldLabel={t("admin-settings.add-user-textfield")}
errorMessage={t("admin-settings.add-user-error")}
/>
</div>
);

View File

@@ -4,7 +4,7 @@ import { translate } from "react-i18next";
import { Checkbox, InputField } from "../../../components/forms/index";
import Subtitle from "../../../components/layout/Subtitle";
import ProxyExcludesTable from "../table/ProxyExcludesTable";
import AddProxyExcludeField from "../fields/AddProxyExcludeField";
import AddEntryToTableField from "../../../components/forms/AddEntryToTableField";
type Props = {
proxyPassword: string,
@@ -65,6 +65,7 @@ class ProxySettings extends React.Component<Props> {
onChange={this.handleProxyUserChange}
disabled={!enableProxy || !hasUpdatePermission}
/>
<ProxyExcludesTable
proxyExcludes={proxyExcludes}
onChange={(isValid, changedValue, name) =>
@@ -72,9 +73,12 @@ class ProxySettings extends React.Component<Props> {
}
disabled={!enableProxy || !hasUpdatePermission}
/>
<AddProxyExcludeField
addProxyExclude={this.addProxyExclude}
<AddEntryToTableField
addEntry={this.addProxyExclude}
disabled={!enableProxy || !hasUpdatePermission}
buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
errorMessage={t("proxy-settings.add-proxy-exclude-error")}
/>
</div>
);

View File

@@ -1,71 +0,0 @@
//@flow
import React from "react";
import { translate } from "react-i18next";
import { AddButton } from "../../components/buttons";
import InputField from "../../components/forms/InputField";
import { isMemberNameValid } from "./groupValidation";
type Props = {
t: string => string,
addMember: string => void
};
type State = {
memberToAdd: string,
validationError: boolean
};
class AddMemberField extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
memberToAdd: "",
validationError: false
};
}
render() {
const { t } = this.props;
return (
<div className="field">
<InputField
label={t("add-member-textfield.label")}
errorMessage={t("add-member-textfield.error")}
onChange={this.handleAddMemberChange}
validationError={this.state.validationError}
value={this.state.memberToAdd}
onReturnPressed={this.appendMember}
/>
<AddButton
label={t("add-member-button.label")}
action={this.addButtonClicked}
disabled={!isMemberNameValid(this.state.memberToAdd)}
/>
</div>
);
}
addButtonClicked = (event: Event) => {
event.preventDefault();
this.appendMember();
};
appendMember = () => {
const { memberToAdd } = this.state;
if (isMemberNameValid(memberToAdd)) {
this.props.addMember(memberToAdd);
this.setState({ ...this.state, memberToAdd: "" });
}
};
handleAddMemberChange = (membername: string) => {
this.setState({
...this.state,
memberToAdd: membername,
validationError: membername.length > 0 && !isMemberNameValid(membername)
});
};
}
export default translate("groups")(AddMemberField);

View File

@@ -6,9 +6,9 @@ import { SubmitButton } from "../../components/buttons";
import { translate } from "react-i18next";
import type { Group } from "../types/Group";
import * as validator from "./groupValidation";
import AddMemberField from "./AddMemberField";
import MemberNameTable from "./MemberNameTable";
import Textarea from "../../components/forms/Textarea";
import AddEntryToTableField from "../../components/forms/AddEntryToTableField";
type Props = {
t: string => string,
@@ -96,7 +96,13 @@ class GroupForm extends React.Component<Props, State> {
members={this.state.group.members}
memberListChanged={this.memberListChanged}
/>
<AddMemberField addMember={this.addMember} />
<AddEntryToTableField
addEntry={this.addMember}
disabled={false}
buttonLabel={t("add-member-button.label")}
fieldLabel={t("add-member-textfield.label")}
errorMessage={t("add-member-textfield.error")}
/>
<SubmitButton
disabled={!this.isValid()}
label={t("group-form.submit")}