Merged in bugfix/show_groups_in_me (pull request #194)

Show own groups in me page

scm-ui/src/containers/ProfileInfo.js

@@ -1,19 +1,30 @@
 // @flow
 import React from "react";
 import type { Me } from "@scm-manager/ui-types";
-import { MailLink, AvatarWrapper, AvatarImage } from "@scm-manager/ui-components";
+import {
+  MailLink,
+  AvatarWrapper,
+  AvatarImage
+} from "@scm-manager/ui-components";
 import { compose } from "redux";
 import { translate } from "react-i18next";
+import injectSheet from "react-jss";
 
 type Props = {
   me: Me,
 
   // Context props
+  classes: any,
   t: string => string
 };
-type State = {};
 
-class ProfileInfo extends React.Component<Props, State> {
+const styles = {
+  spacing: {
+    padding: "0 !important"
+  }
+};
+
+class ProfileInfo extends React.Component<Props> {
   render() {
     const { me, t } = this.props;
     return (
@@ -21,33 +32,64 @@ class ProfileInfo extends React.Component<Props, State> {
         <AvatarWrapper>
           <figure className="media-left">
             <p className="image is-64x64">
-              <AvatarImage person={ me }/>
+              <AvatarImage person={me} />
             </p>
           </figure>
         </AvatarWrapper>
         <div className="media-content">
-          <table className="table">
+          <table className="table content">
             <tbody>
-            <tr>
-              <td className="has-text-weight-semibold">{t("profile.username")}</td>
-              <td>{me.name}</td>
-            </tr>
-            <tr>
-              <td className="has-text-weight-semibold">{t("profile.displayName")}</td>
-              <td>{me.displayName}</td>
-            </tr>
-            <tr>
-              <td className="has-text-weight-semibold">{t("profile.mail")}</td>
-              <td>
-                <MailLink address={me.mail} />
-              </td>
-            </tr>
+              <tr>
+                <th>
+                  {t("profile.username")}
+                </th>
+                <td>{me.name}</td>
+              </tr>
+              <tr>
+                <th>
+                  {t("profile.displayName")}
+                </th>
+                <td>{me.displayName}</td>
+              </tr>
+              <tr>
+                <th>
+                  {t("profile.mail")}
+                </th>
+                <td>
+                  <MailLink address={me.mail} />
+                </td>
+              </tr>
+              {this.renderGroups()}
             </tbody>
           </table>
         </div>
       </div>
     );
   }
+
+  renderGroups() {
+    const { me, t, classes } = this.props;
+
+    let groups = null;
+    if (me.groups.length > 0) {
+      groups = (
+        <tr>
+          <th>{t("profile.groups")}</th>
+          <td className={classes.spacing}>
+            <ul>
+              {me.groups.map(group => {
+                return <li>{group}</li>;
+              })}
+            </ul>
+          </td>
+        </tr>
+      );
+    }
+    return groups;
+  }
 }
 
-export default compose(translate("commons"))(ProfileInfo);
+export default compose(
+  injectSheet(styles),
+  translate("commons")
+)(ProfileInfo);

scm-ui/src/groups/components/table/Details.js

@@ -1,69 +1,81 @@
-//@flow
-import React from "react";
-import type { Group } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import GroupMember from "./GroupMember";
-import { DateFromNow } from "@scm-manager/ui-components";
-
-type Props = {
-  group: Group,
-  t: string => string
-};
-
-class Details extends React.Component<Props> {
-  render() {
-    const { group, t } = this.props;
-    return (
-      <table className="table content">
-        <tbody>
-          <tr>
-            <td className="has-text-weight-semibold">{t("group.name")}</td>
-            <td>{group.name}</td>
-          </tr>
-          <tr>
-            <td className="has-text-weight-semibold">{t("group.description")}</td>
-            <td>{group.description}</td>
-          </tr>
-          <tr>
-            <td className="has-text-weight-semibold">{t("group.type")}</td>
-            <td>{group.type}</td>
-          </tr>
-          <tr>
-            <td className="has-text-weight-semibold">{t("group.creationDate")}</td>
-            <td>
-              <DateFromNow date={group.creationDate} />
-            </td>
-          </tr>
-          <tr>
-            <td className="has-text-weight-semibold">{t("group.lastModified")}</td>
-            <td>
-              <DateFromNow date={group.lastModified} />
-            </td>
-          </tr>
-          {this.renderMembers()}
-        </tbody>
-      </table>
-    );
-  }
-
-  renderMembers() {
-    if (this.props.group.members.length > 0) {
-      return (
-        <tr>
-          <td>
-            {this.props.t("group.members")}
-            <ul>
-               {this.props.group._embedded.members.map((member, index) => {
-                return <GroupMember key={index} member={member} />;
-              })}
-            </ul>
-          </td>
-        </tr>
-      );
-    } else {
-      return;
-    }
-  }
-}
-
-export default translate("groups")(Details);
+//@flow
+import React from "react";
+import type { Group } from "@scm-manager/ui-types";
+import GroupMember from "./GroupMember";
+import { DateFromNow } from "@scm-manager/ui-components";
+import { translate } from "react-i18next";
+import injectSheet from "react-jss";
+
+type Props = {
+  group: Group,
+
+  // Context props
+  classes: any,
+  t: string => string
+};
+
+const styles = {
+  spacing: {
+    padding: "0 !important"
+  }
+};
+
+class Details extends React.Component<Props> {
+  render() {
+    const { group, t } = this.props;
+    return (
+      <table className="table content">
+        <tbody>
+        <tr>
+          <th>{t("group.name")}</th>
+          <td>{group.name}</td>
+        </tr>
+        <tr>
+          <th>{t("group.description")}</th>
+          <td>{group.description}</td>
+        </tr>
+        <tr>
+          <th>{t("group.type")}</th>
+          <td>{group.type}</td>
+        </tr>
+        <tr>
+          <th>{t("group.creationDate")}</th>
+          <td>
+            <DateFromNow date={group.creationDate} />
+          </td>
+        </tr>
+        <tr>
+          <th>{t("group.lastModified")}</th>
+          <td>
+            <DateFromNow date={group.lastModified} />
+          </td>
+        </tr>
+        {this.renderMembers()}
+        </tbody>
+      </table>
+    );
+  }
+
+  renderMembers() {
+    const { group, t, classes } = this.props;
+
+    let member = null;
+    if (group.members.length > 0) {
+      member = (
+        <tr>
+          <th>{t("group.members")}</th>
+          <td className={classes.spacing}>
+            <ul>
+              {group._embedded.members.map((member, index) => {
+                return <GroupMember key={index} member={member}/>;
+              })}
+            </ul>
+          </td>
+        </tr>
+      );
+    }
+    return member;
+  }
+}
+
+export default injectSheet(styles)(translate("groups")(Details));