From 0f3c47ceb492b208343d7e15a296b77ffd3808f3 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Thu, 4 Jul 2019 17:31:15 +0200 Subject: [PATCH] implemented pluginsList --- .../admin/plugins/components/PluginEntry.js | 111 +++++------------- .../plugins/components/PluginGroupEntry.js | 96 +++++++++++++++ .../admin/plugins/components/PluginsList.js | 14 ++- .../plugins/components/groupByCategory.js | 39 ++++++ .../src/admin/roles/containers/PluginsList.js | 0 scm-ui/styles/scm.scss | 14 ++- 6 files changed, 185 insertions(+), 89 deletions(-) create mode 100644 scm-ui/src/admin/plugins/components/PluginGroupEntry.js create mode 100644 scm-ui/src/admin/plugins/components/groupByCategory.js delete mode 100644 scm-ui/src/admin/roles/containers/PluginsList.js diff --git a/scm-ui/src/admin/plugins/components/PluginEntry.js b/scm-ui/src/admin/plugins/components/PluginEntry.js index 77ae84b937..b12c8dd1e1 100644 --- a/scm-ui/src/admin/plugins/components/PluginEntry.js +++ b/scm-ui/src/admin/plugins/components/PluginEntry.js @@ -2,11 +2,9 @@ import React from "react"; import { Link } from "react-router-dom"; import injectSheet from "react-jss"; -import type { Repository } from "@scm-manager/ui-types"; -import { DateFromNow } from "@scm-manager/ui-components"; -import RepositoryEntryLink from "./RepositoryEntryLink"; import classNames from "classnames"; -import RepositoryAvatar from "./RepositoryAvatar"; +import type { Plugin } from "@scm-manager/ui-types"; +import PluginAvatar from "./PluginAvatar"; const styles = { inner: { @@ -14,82 +12,31 @@ const styles = { pointerEvents: "none", zIndex: 1 }, - innerLink: { - pointerEvents: "all" - }, centerImage: { marginTop: "0.8em", marginLeft: "1em !important" + }, + marginBottom: { + marginBottom: "0.75rem !important" } }; type Props = { - repository: Repository, + plugin: Plugin, fullColumnWidth?: boolean, + // context props classes: any }; class PluginEntry extends React.Component { - createLink = (repository: Repository) => { - return `/repo/${repository.namespace}/${repository.name}`; - }; - - renderBranchesLink = (repository: Repository, repositoryLink: string) => { - if (repository._links["branches"]) { - return ( - - ); - } - return null; - }; - - renderChangesetsLink = (repository: Repository, repositoryLink: string) => { - if (repository._links["changesets"]) { - return ( - - ); - } - return null; - }; - - renderSourcesLink = (repository: Repository, repositoryLink: string) => { - if (repository._links["sources"]) { - return ( - - ); - } - return null; - }; - - renderModifyLink = (repository: Repository, repositoryLink: string) => { - if (repository._links["update"]) { - return ( - - ); - } - return null; - }; - render() { - const { repository, classes, fullColumnWidth } = this.props; - const repositoryLink = this.createLink(repository); + const { plugin, classes, fullColumnWidth } = this.props; const halfColumn = fullColumnWidth ? "is-full" : "is-half"; const overlayLinkClass = fullColumnWidth ? "overlay-full-column" : "overlay-half-column"; + // TODO: Add link to plugin page below return (
{ halfColumn )} > - +
- +
-

- {repository.name} +

+

{plugin.description}

+

+ {plugin.author}

-

{repository.description}

-
diff --git a/scm-ui/src/admin/plugins/components/PluginGroupEntry.js b/scm-ui/src/admin/plugins/components/PluginGroupEntry.js new file mode 100644 index 0000000000..87076f6eaf --- /dev/null +++ b/scm-ui/src/admin/plugins/components/PluginGroupEntry.js @@ -0,0 +1,96 @@ +//@flow +import React from "react"; +import injectSheet from "react-jss"; +import classNames from "classnames"; +import type { PluginGroup, Plugin } from "@scm-manager/ui-types"; +import PluginEntry from "./PluginEntry"; + +const styles = { + pointer: { + cursor: "pointer", + fontSize: "1.5rem" + }, + pluginGroup: { + marginBottom: "1em" + }, + wrapper: { + padding: "0 0.75rem" + }, + clearfix: { + clear: "both" + } +}; + +type Props = { + group: PluginGroup, + + // context props + classes: any +}; + +type State = { + collapsed: boolean +}; + +class PluginGroupEntry extends React.Component { + constructor(props: Props) { + super(props); + this.state = { + collapsed: false + }; + } + + toggleCollapse = () => { + this.setState(prevState => ({ + collapsed: !prevState.collapsed + })); + }; + + isLastEntry = (array: Plugin[], index: number) => { + return index === array.length - 1; + }; + + isLengthOdd = (array: Plugin[]) => { + return array.length % 2 !== 0; + }; + + isFullSize = (array: Plugin[], index: number) => { + return this.isLastEntry(array, index) && this.isLengthOdd(array); + }; + + render() { + const { group, classes } = this.props; + const { collapsed } = this.state; + + const icon = collapsed ? "fa-angle-right" : "fa-angle-down"; + let content = null; + if (!collapsed) { + content = group.plugins.map((plugin, index) => { + const fullColumnWidth = this.isFullSize(group.plugins, index); + return ( + + ); + }); + } + return ( +
+

+ + {group.name} + +

+
+
+ {content} +
+
+
+ ); + } +} + +export default injectSheet(styles)(PluginGroupEntry); diff --git a/scm-ui/src/admin/plugins/components/PluginsList.js b/scm-ui/src/admin/plugins/components/PluginsList.js index d4c99be888..01f64afe78 100644 --- a/scm-ui/src/admin/plugins/components/PluginsList.js +++ b/scm-ui/src/admin/plugins/components/PluginsList.js @@ -1,24 +1,26 @@ //@flow import React from "react"; -import type { Plugins } from "@scm-manager/ui-types"; +import type { Plugin } from "@scm-manager/ui-types"; +import PluginGroupEntry from "../components/PluginGroupEntry"; +import groupByCategory from "./groupByCategory"; type Props = { - plugins: Plugins[] + plugins: Plugin[] }; -class RepositoryList extends React.Component { +class PluginList extends React.Component { render() { const { plugins } = this.props; - const groups = groupByNamespace(plugins); + const groups = groupByCategory(plugins); return (
{groups.map(group => { - return ; + return ; })}
); } } -export default RepositoryList; +export default PluginList; diff --git a/scm-ui/src/admin/plugins/components/groupByCategory.js b/scm-ui/src/admin/plugins/components/groupByCategory.js new file mode 100644 index 0000000000..1c542d45e3 --- /dev/null +++ b/scm-ui/src/admin/plugins/components/groupByCategory.js @@ -0,0 +1,39 @@ +// @flow +import type { Plugin, PluginGroup } from "@scm-manager/ui-types"; + +export default function groupByCategory( + plugins: Plugin[] +): PluginGroup[] { + let groups = {}; + for (let plugin of plugins) { + const groupName = plugin.type; + + let group = groups[groupName]; + if (!group) { + group = { + name: groupName, + plugins: [] + }; + groups[groupName] = group; + } + group.plugins.push(plugin); + } + + let groupArray = []; + for (let groupName in groups) { + const group = groups[groupName]; + group.plugins.sort(sortByName); + groupArray.push(groups[groupName]); + } + groupArray.sort(sortByName); + return groupArray; +} + +function sortByName(a, b) { + if (a.name < b.name) { + return -1; + } else if (a.name > b.name) { + return 1; + } + return 0; +} diff --git a/scm-ui/src/admin/roles/containers/PluginsList.js b/scm-ui/src/admin/roles/containers/PluginsList.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss index 44c3aaae62..c9d423a9e7 100644 --- a/scm-ui/styles/scm.scss +++ b/scm-ui/styles/scm.scss @@ -172,6 +172,9 @@ ul.is-separated { height: calc(120px - 1.5rem); width: calc(50% - 3rem); } + .overlay-half-column.is-plugin-page { + width: calc(37.5% - 1.5rem); + } } .column.is-full { .overlay-full-column { @@ -179,6 +182,9 @@ ul.is-separated { height: calc(120px - 0.5rem); width: calc(100% - 1.5rem); } + .overlay-full-column.is-plugin-page { + width: calc(75% - 1.5rem); + } } @media screen and (max-width: 768px) { .column.is-half { @@ -188,12 +194,14 @@ ul.is-separated { margin-right: 0; } - .overlay-half-column { - position: absolute; - height: calc(120px - 0.5rem); + .overlay-half-column, + .overlay-half-column.is-plugin-page { width: calc(100% - 1.5rem); } } + .column.is-full .overlay-full-column.is-plugin-page { + width: calc(100% - 1.5rem); + } } }