reorder directory structure, add PermissionRoleDetail and Root

This commit is contained in:
Florian Scholdei
2019-05-15 12:19:47 +02:00
parent 8b4e6ab72d
commit 661f62204a
13 changed files with 191 additions and 30 deletions

View File

@@ -10,8 +10,9 @@ import type { Links } from "@scm-manager/ui-types";
import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components";
import { getLinks } from "../../modules/indexResource";
import GlobalConfig from "./GlobalConfig";
import GlobalPermissionRoles from "./GlobalPermissionRoles";
import GlobalPermissionRoleForm from "./GlobalPermissionRoleForm";
import PermissionRolesOverview from "../roles/containers/PermissionRolesOverview";
import PermissionRoleRoot from "../roles/containers/PermissionRoleRoot";
import CreatePermissionRole from "../roles/containers/CreatePermissionRole";
type Props = {
links: Links,
@@ -36,7 +37,7 @@ class Config extends React.Component<Props> {
matchesRoles = (route: any) => {
const url = this.matchedUrl();
const regex = new RegExp(`${url}/role/.+/edit`);
const regex = new RegExp(`${url}/role/.+/info`);
return route.location.pathname.match(regex);
};
@@ -54,16 +55,19 @@ class Config extends React.Component<Props> {
<div className="columns">
<div className="column is-three-quarters">
<Route path={url} exact component={GlobalConfig} />
<Route
path={`${url}/role/:role`}
component={() => <PermissionRoleRoot baseUrl={`${url}/roles`} />}
/>
<Route
path={`${url}/roles`}
exact
render={() => (
<GlobalPermissionRoles
baseUrl={`${url}/role`}
/>
)}
render={() => <PermissionRolesOverview baseUrl={`${url}/role`} />}
/>
<Route
path={`${url}/roles/create`}
render={() => <CreatePermissionRole />}
/>
<Route path={`${url}/role`} component={GlobalPermissionRoleForm} />
<ExtensionPoint
name="config.route"
props={extensionProps}
@@ -78,9 +82,10 @@ class Config extends React.Component<Props> {
label={t("config.globalConfigurationNavLink")}
/>
<NavLink
to={`${url}/roles`}
to={`${url}/roles/`}
label={t("roles.navLink")}
activeWhenMatch={this.matchesRoles}
activeOnlyWhenExact={false}
/>
<ExtensionPoint
name="config.navigation"

View File

@@ -1,179 +0,0 @@
// @flow
import React from "react";
import { connect } from "react-redux";
import { translate } from "react-i18next";
import type { Role } from "@scm-manager/ui-types";
import { InputField, SubmitButton } from "@scm-manager/ui-components";
import PermissionCheckbox from "../../repos/permissions/components/PermissionCheckbox";
import {
fetchAvailableVerbs,
getFetchVerbsFailure,
getVerbsFromState,
isFetchVerbsPending
} from "../modules/roles";
import { getRepositoryVerbsLink } from "../../modules/indexResource";
type Props = {
role?: Role,
loading?: boolean,
disabled: boolean,
availableVerbs: string[],
verbsLink: string,
// context objects
t: string => string,
// dispatch functions
fetchAvailableVerbs: (link: string) => void
};
type State = {
role: Role
};
class GlobalPermissionRoleForm extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
role: {
name: "",
verbs: [],
system: false,
_links: {}
}
};
}
componentDidMount() {
const { fetchAvailableVerbs, verbsLink, role } = this.props;
fetchAvailableVerbs(verbsLink);
if (role) {
this.setState({
role: {
...role,
role: { verbs: role.verbs }
}
});
}
}
isFalsy(value) {
return !value;
}
isValid = () => {
const { role } = this.state;
return !(
this.isFalsy(role) ||
this.isFalsy(role.name) ||
this.isFalsy(role.verbs)
);
};
handleNameChange = (name: string) => {
this.setState({
role: {
...this.state.role,
name
}
});
};
handleVerbChange = (value: boolean, name: string) => {
const { role } = this.state;
const newVerbs = value
? [...role.verbs, name]
: role.verbs.filter(v => v !== name);
this.setState({
...this.state,
role: {
...role,
verbs: newVerbs
}
});
};
submit = (event: Event) => {
event.preventDefault();
if (this.isValid()) {
// this.props.submitForm(this.state.role);
//TODO ADD createRole here
}
};
render() {
const { loading, availableVerbs, disabled, t } = this.props;
const { role } = this.state;
const verbSelectBoxes = !availableVerbs
? null
: availableVerbs.map(verb => (
<PermissionCheckbox
key={verb}
// disabled={readOnly}
name={verb}
checked={role.verbs.includes(verb)}
onChange={this.handleVerbChange}
/>
));
return (
<form onSubmit={this.submit}>
<div className="columns">
<div className="column">
<InputField
name="name"
label={t("roles.form.name")}
onChange={this.handleNameChange}
value={role.name ? role.name : ""}
disabled={!!role.name || disabled}
/>
</div>
</div>
{verbSelectBoxes}
<hr />
<div className="columns">
<div className="column">
<SubmitButton
loading={loading}
label={t("roles.form.submit")}
disabled={disabled || !this.isValid()}
/>
</div>
</div>
</form>
);
}
}
const mapStateToProps = (state, ownProps) => {
const loading = isFetchVerbsPending(state);
const error = getFetchVerbsFailure(state);
const verbsLink = getRepositoryVerbsLink(state);
const availableVerbs = getVerbsFromState(state);
return {
loading,
error,
verbsLink,
availableVerbs
};
};
const mapDispatchToProps = dispatch => {
return {
fetchAvailableVerbs: (link: string) => {
dispatch(fetchAvailableVerbs(link));
}
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(translate("config")(GlobalPermissionRoleForm));

View File

@@ -1,122 +0,0 @@
// @flow
import React from "react";
import { connect } from "react-redux";
import {withRouter} from "react-router-dom";
import { translate } from "react-i18next";
import type { History } from "history";
import type { Role, PagedCollection } from "@scm-manager/ui-types";
import {
Title,
Loading,
Notification,
LinkPaginator,
urls,
CreateButton
} from "@scm-manager/ui-components";
import {
fetchRolesByPage,
getRolesFromState,
selectListAsCollection,
isPermittedToCreateRoles,
isFetchRolesPending,
getFetchRolesFailure
} from "../modules/roles";
import PermissionRoleTable from "../components/table/PermissionRoleTable";
import { getRolesLink } from "../../modules/indexResource";
type Props = {
baseUrl: string,
roles: Role[],
loading: boolean,
error: Error,
canAddRoles: boolean,
list: PagedCollection,
page: number,
rolesLink: string,
// context objects
t: string => string,
history: History,
// dispatch functions
fetchRolesByPage: (link: string, page: number) => void
};
class GlobalPermissionRoles extends React.Component<Props> {
componentDidMount() {
const { fetchRolesByPage, rolesLink, page } = this.props;
fetchRolesByPage(rolesLink, page);
}
render() {
const { t, loading } = this.props;
if (loading) {
return <Loading />;
}
return (
<div>
<Title title={t("roles.title")} />
{this.renderPermissionsTable()}
{this.renderCreateButton()}
</div>
);
}
renderPermissionsTable() {
const { baseUrl, roles, list, page, t } = this.props;
if (roles && roles.length > 0) {
return (
<>
<PermissionRoleTable baseUrl={baseUrl} roles={roles} />
<LinkPaginator collection={list} page={page} />
</>
);
}
return (
<Notification type="info">{t("roles.noPermissionRoles")}</Notification>
);
}
renderCreateButton() {
const { canAddRoles, baseUrl, t } = this.props;
if (canAddRoles) {
return <CreateButton label={t("roles.createButton")} link={`${baseUrl}/create`} />;
}
return null;
}
}
const mapStateToProps = (state, ownProps) => {
const { match } = ownProps;
const roles = getRolesFromState(state);
const loading = isFetchRolesPending(state);
const error = getFetchRolesFailure(state);
const page = urls.getPageFromMatch(match);
const canAddRoles = isPermittedToCreateRoles(state);
const list = selectListAsCollection(state);
const rolesLink = getRolesLink(state);
return {
roles,
loading,
error,
canAddRoles,
list,
page,
rolesLink
};
};
const mapDispatchToProps = dispatch => {
return {
fetchRolesByPage: (link: string, page: number) => {
dispatch(fetchRolesByPage(link, page));
}
};
};
export default withRouter(connect(
mapStateToProps,
mapDispatchToProps
)(translate("config")(GlobalPermissionRoles)));