Merged in bugfix/show_groups_in_me (pull request #194)

Show own groups in me page
This commit is contained in:
Philipp Czora
2019-02-20 09:40:29 +00:00
2 changed files with 143 additions and 89 deletions

View File

@@ -1,19 +1,30 @@
// @flow // @flow
import React from "react"; import React from "react";
import type { Me } from "@scm-manager/ui-types"; 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 { compose } from "redux";
import { translate } from "react-i18next"; import { translate } from "react-i18next";
import injectSheet from "react-jss";
type Props = { type Props = {
me: Me, me: Me,
// Context props // Context props
classes: any,
t: string => string 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() { render() {
const { me, t } = this.props; const { me, t } = this.props;
return ( return (
@@ -21,33 +32,64 @@ class ProfileInfo extends React.Component<Props, State> {
<AvatarWrapper> <AvatarWrapper>
<figure className="media-left"> <figure className="media-left">
<p className="image is-64x64"> <p className="image is-64x64">
<AvatarImage person={ me }/> <AvatarImage person={me} />
</p> </p>
</figure> </figure>
</AvatarWrapper> </AvatarWrapper>
<div className="media-content"> <div className="media-content">
<table className="table"> <table className="table content">
<tbody> <tbody>
<tr> <tr>
<td className="has-text-weight-semibold">{t("profile.username")}</td> <th>
<td>{me.name}</td> {t("profile.username")}
</tr> </th>
<tr> <td>{me.name}</td>
<td className="has-text-weight-semibold">{t("profile.displayName")}</td> </tr>
<td>{me.displayName}</td> <tr>
</tr> <th>
<tr> {t("profile.displayName")}
<td className="has-text-weight-semibold">{t("profile.mail")}</td> </th>
<td> <td>{me.displayName}</td>
<MailLink address={me.mail} /> </tr>
</td> <tr>
</tr> <th>
{t("profile.mail")}
</th>
<td>
<MailLink address={me.mail} />
</td>
</tr>
{this.renderGroups()}
</tbody> </tbody>
</table> </table>
</div> </div>
</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);

View File

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