prepare GlobalPermissionRoleForm / fetch AvailableVerbs from State

scm-ui/src/config/containers/GlobalPermissionRoleForm.js

@@ -1,14 +1,156 @@
 // @flow
 import React from "react";
+import { InputField, SubmitButton } from "@scm-manager/ui-components";
+import { translate } from "react-i18next";
+import PermissionCheckbox from "../../repos/permissions/components/PermissionCheckbox";
+import {
+  fetchAvailableVerbs,
+  getFetchVerbsFailure,
+  getVerbsFromState,
+  isFetchVerbsPending
+} from "../modules/roles";
+import { getRepositoryVerbsLink } from "../../modules/indexResource";
+import { connect } from "react-redux";
 
 type Props = {
-  thing?: any,
+  submitForm: CustomRoleRequest => void,
+  transmittedName?: string,
+  loading?: boolean,
+  availableVerbs: string[],
+  selectedVerbs: string[],
+  verbsLink: string,
+  t: string => string,
+
+  // dispatch functions
+  fetchAvailableVerbs: (link: string) => void
 };
 
-class GlobalPermissionRoleForm extends React.Component<Props> {
+type State = {
+  name?: string,
+  verbs: string[]
+};
+
+class GlobalPermissionRoleForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      name: props.transmittedName ? props.transmittedName : "",
+      verbs: props.availableVerbs
+    };
+  }
+
+  componentWillMount() {
+    const { fetchAvailableVerbs, verbsLink } = this.props;
+    fetchAvailableVerbs(verbsLink);
+  }
+
+  componentDidMount() {
+    const {
+      fetchAvailableVerbs,
+      verbsLink,
+    } = this.props;
+    fetchAvailableVerbs(verbsLink);
+
+  }
+
+  isValid = () => {
+    const { name, verbs } = this.state;
+    return !(this.isFalsy(name) || this.isFalsy(verbs) || verbs.isEmpty());
+  };
+
+  isFalsy(value) {
+    return !value;
+  }
+
+  handleNameChange = (name: string) => {
+    this.setState({
+      ...this.state,
+      name
+    });
+  };
+
+  handleVerbChange = (value: boolean, name: string) => {
+    const { selectedVerbs } = this.state;
+    const newVerbs = { ...selectedVerbs, [name]: value };
+    this.setState({ selectedVerbs: newVerbs });
+  };
+
   render() {
-    return <p>Placeholder</p>;
+    const {
+      t,
+      transmittedName,
+      loading,
+      disabled,
+      availableVerbs
+    } = this.props;
+    const { verbs } = this.state;
+
+    const verbSelectBoxes =
+      !!availableVerbs &&
+      Object.entries(availableVerbs).map(e => (
+        <PermissionCheckbox
+          key={e[0]}
+          // disabled={readOnly}
+          name={e[0]}
+          checked={e[1]}
+          onChange={this.handleVerbChange}
+        />
+      ));
+
+    return (
+      <div>
+        <form onSubmit={this.submit}>
+          <div className="columns">
+            <div className="column">
+              <InputField
+                name="name"
+                label={t("roles.create.name")}
+                onChange={this.handleNameChange}
+                value={name ? name : ""}
+                disabled={!!transmittedName || disabled}
+              />
+            </div>
+          </div>
+          <>{verbSelectBoxes}</>
+          <div className="columns">
+            <div className="column">
+              <SubmitButton
+                disabled={disabled || !this.isValid()}
+                loading={loading}
+                label={t("roles.create.submit")}
+              />
+            </div>
+          </div>
+        </form>
+      </div>
+    );
   }
 }
 
-export default GlobalPermissionRoleForm;
+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("roles")(GlobalPermissionRoleForm));

scm-ui/src/config/modules/roles.js

@@ -16,6 +16,11 @@ export const FETCH_ROLE_PENDING = `${FETCH_ROLE}_${types.PENDING_SUFFIX}`;
 export const FETCH_ROLE_SUCCESS = `${FETCH_ROLE}_${types.SUCCESS_SUFFIX}`;
 export const FETCH_ROLE_FAILURE = `${FETCH_ROLE}_${types.FAILURE_SUFFIX}`;
 
+export const FETCH_VERBS = "scm/roles/FETCH_VERBS";
+export const FETCH_VERBS_PENDING = `${FETCH_VERBS}_${types.PENDING_SUFFIX}`;
+export const FETCH_VERBS_SUCCESS = `${FETCH_VERBS}_${types.SUCCESS_SUFFIX}`;
+export const FETCH_VERBS_FAILURE = `${FETCH_VERBS}_${types.FAILURE_SUFFIX}`;
+
 export const CREATE_ROLE = "scm/roles/CREATE_ROLE";
 export const CREATE_ROLE_PENDING = `${CREATE_ROLE}_${types.PENDING_SUFFIX}`;
 export const CREATE_ROLE_SUCCESS = `${CREATE_ROLE}_${types.SUCCESS_SUFFIX}`;
@@ -173,6 +178,59 @@ export function createRole(link: string, role: Role, callback?: () => void) {
   };
 }
 
+//fetch verbs
+export function fetchVerbsPending(): Action {
+  return {
+    type: FETCH_VERBS_PENDING
+  };
+}
+
+export function fetchVerbsSuccess(verbs: any): Action {
+  return {
+    type: FETCH_VERBS_SUCCESS,
+    payload: verbs
+  };
+}
+
+export function fetchVerbsFailure(error: Error): Action {
+  return {
+    type: FETCH_VERBS_FAILURE,
+    payload: error
+  };
+}
+
+export function fetchAvailableVerbs(link: string) {
+  return function(dispatch: any) {
+    dispatch(fetchVerbsPending());
+    return apiClient
+      .get(link)
+      .then(response => {
+        return response.json();
+      })
+      .then(data => {
+        dispatch(fetchVerbsSuccess(data));
+      })
+      .catch(error => {
+        dispatch(fetchVerbsFailure(error));
+      });
+  };
+}
+
+function verbReducer(state: any = {}, action: any = {}) {
+  switch (action.type) {
+    case FETCH_VERBS_SUCCESS:
+      const verbs = action.payload.verbs;
+      const verbMap = {};
+      verbs.forEach(p => (verbMap[p] = false));
+      return {
+        ...state,
+        verbMap
+        };
+    default:
+      return state;
+  }
+}
+
 function listReducer(state: any = {}, action: any = {}) {
   switch (action.type) {
     case FETCH_ROLES_SUCCESS:
@@ -237,7 +295,8 @@ function byNamesReducer(state: any = {}, action: any = {}) {
 
 export default combineReducers({
   list: listReducer,
-  byNames: byNamesReducer
+  byNames: byNamesReducer,
+  verbs: verbReducer
 });
 
 // selectors
@@ -278,6 +337,10 @@ export function getRolesFromState(state: Object) {
   return roleEntries;
 }
 
+export function getVerbsFromState(state: Object) {
+  return state.roles.verbs.verbs
+}
+
 export function isFetchRolesPending(state: Object) {
   return isPending(state, FETCH_ROLES);
 }
@@ -294,6 +357,14 @@ export function getCreateRoleFailure(state: Object) {
   return getFailure(state, CREATE_ROLE);
 }
 
+export function isFetchVerbsPending(state: Object) {
+  return isPending(state, FETCH_VERBS);
+}
+
+export function getFetchVerbsFailure(state: Object) {
+  return getFailure(state, FETCH_VERBS);
+}
+
 export function getRoleByName(state: Object, name: string) {
   if (state.roles && state.roles.byNames) {
     return state.roles.byNames[name];