mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-09 23:15:43 +01:00
use className instead of class
This commit is contained in:
Maren Süwer
@@ -1,211 +1,211 @@
|
||||
// @flow
|
||||
import React from "react";
|
||||
import { translate } from "react-i18next";
|
||||
import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
|
||||
import TypeSelector from "./TypeSelector";
|
||||
import type {
|
||||
PermissionCollection,
|
||||
PermissionCreateEntry,
|
||||
SelectValue
|
||||
} from "@scm-manager/ui-types";
|
||||
import * as validator from "./permissionValidation";
|
||||
|
||||
type Props = {
|
||||
t: string => string,
|
||||
createPermission: (permission: PermissionCreateEntry) => void,
|
||||
loading: boolean,
|
||||
currentPermissions: PermissionCollection,
|
||||
groupAutoCompleteLink: string,
|
||||
userAutoCompleteLink: string
|
||||
};
|
||||
|
||||
type State = {
|
||||
name: string,
|
||||
type: string,
|
||||
groupPermission: boolean,
|
||||
valid: boolean,
|
||||
value?: SelectValue
|
||||
};
|
||||
|
||||
class CreatePermissionForm extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: "",
|
||||
type: "READ",
|
||||
groupPermission: false,
|
||||
valid: true,
|
||||
value: undefined
|
||||
};
|
||||
}
|
||||
|
||||
permissionScopeChanged = event => {
|
||||
const groupPermission = event.target.value === "GROUP_PERMISSION";
|
||||
this.setState({
|
||||
groupPermission: groupPermission,
|
||||
valid: validator.isPermissionValid(
|
||||
this.state.name,
|
||||
groupPermission,
|
||||
this.props.currentPermissions
|
||||
)
|
||||
});
|
||||
this.setState({ ...this.state, groupPermission });
|
||||
};
|
||||
|
||||
loadUserAutocompletion = (inputValue: string) => {
|
||||
return this.loadAutocompletion(this.props.userAutoCompleteLink, inputValue);
|
||||
};
|
||||
|
||||
loadGroupAutocompletion = (inputValue: string) => {
|
||||
return this.loadAutocompletion(
|
||||
this.props.groupAutoCompleteLink,
|
||||
inputValue
|
||||
);
|
||||
};
|
||||
|
||||
loadAutocompletion(url: string, inputValue: string) {
|
||||
const link = url + "?q=";
|
||||
return fetch(link + inputValue)
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
return json.map(element => {
|
||||
const label = element.displayName
|
||||
? `${element.displayName} (${element.id})`
|
||||
: element.id;
|
||||
return {
|
||||
value: element,
|
||||
label
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
renderAutocompletionField = () => {
|
||||
const { t } = this.props;
|
||||
if (this.state.groupPermission) {
|
||||
return (
|
||||
<Autocomplete
|
||||
loadSuggestions={this.loadGroupAutocompletion}
|
||||
valueSelected={this.groupOrUserSelected}
|
||||
value={this.state.value}
|
||||
label={t("permission.group")}
|
||||
noOptionsMessage={t("permission.autocomplete.no-group-options")}
|
||||
loadingMessage={t("permission.autocomplete.loading")}
|
||||
placeholder={t("permission.autocomplete.group-placeholder")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Autocomplete
|
||||
loadSuggestions={this.loadUserAutocompletion}
|
||||
valueSelected={this.groupOrUserSelected}
|
||||
value={this.state.value}
|
||||
label={t("permission.user")}
|
||||
noOptionsMessage={t("permission.autocomplete.no-user-options")}
|
||||
loadingMessage={t("permission.autocomplete.loading")}
|
||||
placeholder={t("permission.autocomplete.user-placeholder")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
groupOrUserSelected = (value: SelectValue) => {
|
||||
this.setState({
|
||||
value,
|
||||
name: value.value.id,
|
||||
valid: validator.isPermissionValid(
|
||||
value.value.id,
|
||||
this.state.groupPermission,
|
||||
this.props.currentPermissions
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, loading } = this.props;
|
||||
|
||||
const { type } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<hr />
|
||||
<h2 className="subtitle">
|
||||
{t("permission.add-permission.add-permission-heading")}
|
||||
</h2>
|
||||
<form onSubmit={this.submit}>
|
||||
<div className="control">
|
||||
<label className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="permission_scope"
|
||||
checked={!this.state.groupPermission}
|
||||
value="USER_PERMISSION"
|
||||
onChange={this.permissionScopeChanged}
|
||||
/>
|
||||
{t("permission.user-permission")}
|
||||
</label>
|
||||
<label className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="permission_scope"
|
||||
value="GROUP_PERMISSION"
|
||||
checked={this.state.groupPermission}
|
||||
onChange={this.permissionScopeChanged}
|
||||
/>
|
||||
{t("permission.group-permission")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
{this.renderAutocompletionField()}
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<TypeSelector
|
||||
label={t("permission.type")}
|
||||
helpText={t("permission.help.typeHelpText")}
|
||||
handleTypeChange={this.handleTypeChange}
|
||||
type={type ? type : "READ"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<SubmitButton
|
||||
label={t("permission.add-permission.submit-button")}
|
||||
loading={loading}
|
||||
disabled={!this.state.valid || this.state.name === ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
submit = e => {
|
||||
this.props.createPermission({
|
||||
name: this.state.name,
|
||||
type: this.state.type,
|
||||
groupPermission: this.state.groupPermission
|
||||
});
|
||||
this.removeState();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
removeState = () => {
|
||||
this.setState({
|
||||
name: "",
|
||||
type: "READ",
|
||||
groupPermission: false,
|
||||
valid: true
|
||||
});
|
||||
};
|
||||
|
||||
handleTypeChange = (type: string) => {
|
||||
this.setState({
|
||||
type: type
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default translate("repos")(CreatePermissionForm);
|
||||
// @flow
|
||||
import React from "react";
|
||||
import { translate } from "react-i18next";
|
||||
import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
|
||||
import TypeSelector from "./TypeSelector";
|
||||
import type {
|
||||
PermissionCollection,
|
||||
PermissionCreateEntry,
|
||||
SelectValue
|
||||
} from "@scm-manager/ui-types";
|
||||
import * as validator from "./permissionValidation";
|
||||
|
||||
type Props = {
|
||||
t: string => string,
|
||||
createPermission: (permission: PermissionCreateEntry) => void,
|
||||
loading: boolean,
|
||||
currentPermissions: PermissionCollection,
|
||||
groupAutoCompleteLink: string,
|
||||
userAutoCompleteLink: string
|
||||
};
|
||||
|
||||
type State = {
|
||||
name: string,
|
||||
type: string,
|
||||
groupPermission: boolean,
|
||||
valid: boolean,
|
||||
value?: SelectValue
|
||||
};
|
||||
|
||||
class CreatePermissionForm extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
name: "",
|
||||
type: "READ",
|
||||
groupPermission: false,
|
||||
valid: true,
|
||||
value: undefined
|
||||
};
|
||||
}
|
||||
|
||||
permissionScopeChanged = event => {
|
||||
const groupPermission = event.target.value === "GROUP_PERMISSION";
|
||||
this.setState({
|
||||
groupPermission: groupPermission,
|
||||
valid: validator.isPermissionValid(
|
||||
this.state.name,
|
||||
groupPermission,
|
||||
this.props.currentPermissions
|
||||
)
|
||||
});
|
||||
this.setState({ ...this.state, groupPermission });
|
||||
};
|
||||
|
||||
loadUserAutocompletion = (inputValue: string) => {
|
||||
return this.loadAutocompletion(this.props.userAutoCompleteLink, inputValue);
|
||||
};
|
||||
|
||||
loadGroupAutocompletion = (inputValue: string) => {
|
||||
return this.loadAutocompletion(
|
||||
this.props.groupAutoCompleteLink,
|
||||
inputValue
|
||||
);
|
||||
};
|
||||
|
||||
loadAutocompletion(url: string, inputValue: string) {
|
||||
const link = url + "?q=";
|
||||
return fetch(link + inputValue)
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
return json.map(element => {
|
||||
const label = element.displayName
|
||||
? `${element.displayName} (${element.id})`
|
||||
: element.id;
|
||||
return {
|
||||
value: element,
|
||||
label
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
renderAutocompletionField = () => {
|
||||
const { t } = this.props;
|
||||
if (this.state.groupPermission) {
|
||||
return (
|
||||
<Autocomplete
|
||||
loadSuggestions={this.loadGroupAutocompletion}
|
||||
valueSelected={this.groupOrUserSelected}
|
||||
value={this.state.value}
|
||||
label={t("permission.group")}
|
||||
noOptionsMessage={t("permission.autocomplete.no-group-options")}
|
||||
loadingMessage={t("permission.autocomplete.loading")}
|
||||
placeholder={t("permission.autocomplete.group-placeholder")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Autocomplete
|
||||
loadSuggestions={this.loadUserAutocompletion}
|
||||
valueSelected={this.groupOrUserSelected}
|
||||
value={this.state.value}
|
||||
label={t("permission.user")}
|
||||
noOptionsMessage={t("permission.autocomplete.no-user-options")}
|
||||
loadingMessage={t("permission.autocomplete.loading")}
|
||||
placeholder={t("permission.autocomplete.user-placeholder")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
groupOrUserSelected = (value: SelectValue) => {
|
||||
this.setState({
|
||||
value,
|
||||
name: value.value.id,
|
||||
valid: validator.isPermissionValid(
|
||||
value.value.id,
|
||||
this.state.groupPermission,
|
||||
this.props.currentPermissions
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, loading } = this.props;
|
||||
|
||||
const { type } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<hr />
|
||||
<h2 className="subtitle">
|
||||
{t("permission.add-permission.add-permission-heading")}
|
||||
</h2>
|
||||
<form onSubmit={this.submit}>
|
||||
<div className="control">
|
||||
<label className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="permission_scope"
|
||||
checked={!this.state.groupPermission}
|
||||
value="USER_PERMISSION"
|
||||
onChange={this.permissionScopeChanged}
|
||||
/>
|
||||
{t("permission.user-permission")}
|
||||
</label>
|
||||
<label className="radio">
|
||||
<input
|
||||
type="radio"
|
||||
name="permission_scope"
|
||||
value="GROUP_PERMISSION"
|
||||
checked={this.state.groupPermission}
|
||||
onChange={this.permissionScopeChanged}
|
||||
/>
|
||||
{t("permission.group-permission")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="columns">
|
||||
<div className="column is-three-quarters">
|
||||
{this.renderAutocompletionField()}
|
||||
</div>
|
||||
<div className="column is-one-quarter">
|
||||
<TypeSelector
|
||||
label={t("permission.type")}
|
||||
helpText={t("permission.help.typeHelpText")}
|
||||
handleTypeChange={this.handleTypeChange}
|
||||
type={type ? type : "READ"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<SubmitButton
|
||||
label={t("permission.add-permission.submit-button")}
|
||||
loading={loading}
|
||||
disabled={!this.state.valid || this.state.name === ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
submit = e => {
|
||||
this.props.createPermission({
|
||||
name: this.state.name,
|
||||
type: this.state.type,
|
||||
groupPermission: this.state.groupPermission
|
||||
});
|
||||
this.removeState();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
removeState = () => {
|
||||
this.setState({
|
||||
name: "",
|
||||
type: "READ",
|
||||
groupPermission: false,
|
||||
valid: true
|
||||
});
|
||||
};
|
||||
|
||||
handleTypeChange = (type: string) => {
|
||||
this.setState({
|
||||
type: type
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default translate("repos")(CreatePermissionForm);
|
||||
|
||||
Reference in New Issue
Block a user