From fc48e1bbd799fcb0b87c0eb1c304ebcd83c518a3 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 17 Apr 2019 12:37:48 +0200 Subject: [PATCH] improved filter/search function and used new pagination --- scm-ui/src/repos/containers/Overview.js | 106 +++++++++++------- scm-ui/src/repos/containers/RepositoryRoot.js | 32 +++--- scm-ui/src/repos/modules/repos.js | 2 +- 3 files changed, 84 insertions(+), 56 deletions(-) diff --git a/scm-ui/src/repos/containers/Overview.js b/scm-ui/src/repos/containers/Overview.js index aa42e1846c..aa0114e10c 100644 --- a/scm-ui/src/repos/containers/Overview.js +++ b/scm-ui/src/repos/containers/Overview.js @@ -19,12 +19,14 @@ import { PageActions, Button, CreateButton, - Paginator + LinkPaginator, + getPageFromMatch } from "@scm-manager/ui-components"; import RepositoryList from "../components/list"; import { withRouter } from "react-router-dom"; import type { History } from "history"; import { getRepositoriesLink } from "../../modules/indexResource"; +import queryString from "query-string"; type Props = { page: number, @@ -34,37 +36,57 @@ type Props = { showCreateButton: boolean, reposLink: string, - // dispatched functions - fetchRepos: string => void, - fetchReposByPage: (link: string, page: number, filter?: string) => void, - fetchReposByLink: string => void, - // context props t: string => string, - history: History + history: History, + location: any, + + // dispatched functions + fetchRepos: string => void, + fetchReposByPage: (link: string, page: number, filter?: any) => void, + fetchReposByLink: string => void }; -class Overview extends React.Component { - componentDidMount() { - this.props.fetchReposByPage(this.props.reposLink, this.props.page); +type State = { + page: number +}; + +class Overview extends React.Component { + constructor(props: Props) { + super(props); + + this.state = { + page: -1 + }; } - /** - * reflect page transitions in the uri - */ - componentDidUpdate() { - const { page, collection } = this.props; - if (collection) { - // backend starts paging by 0 - const statePage: number = collection.page + 1; - if (page !== statePage) { - this.props.history.push(`/repos/${statePage}`); + componentDidMount() { + const { fetchReposByPage, reposLink, page } = this.props; + fetchReposByPage(reposLink, page, this.getQueryString()); + this.setState({ page: page }); + } + + componentDidUpdate = (prevProps: Props) => { + const { + collection, + page, + location, + fetchReposByPage, + reposLink + } = this.props; + if (collection && page) { + if ( + page !== this.state.page || + prevProps.location.search !== location.search + ) { + fetchReposByPage(reposLink, page, this.getQueryString()); + this.setState({ page: page }); } } - } + }; render() { - const { error, loading, t } = this.props; + const { error, loading, history, t } = this.props; return ( { loading={loading} error={error} filter={filter => { - this.props.fetchReposByPage(this.props.reposLink, this.props.page, filter); + history.push("/repos/?q=" + filter); }} > {this.renderList()} @@ -82,14 +104,18 @@ class Overview extends React.Component { } renderList() { - const { collection, fetchReposByLink } = this.props; + const { collection, page } = this.props; if (collection) { return ( -
+ <> - + {this.renderCreateButton()} -
+ ); } return null; @@ -120,32 +146,28 @@ class Overview extends React.Component { } return null; } + + getQueryString = () => { + const { location } = this.props; + return location.search ? queryString.parse(location.search).q : null; + }; } -const getPageFromProps = props => { - let page = props.match.params.page; - if (page) { - page = parseInt(page, 10); - } else { - page = 1; - } - return page; -}; - const mapStateToProps = (state, ownProps) => { - const page = getPageFromProps(ownProps); + const { match } = ownProps; const collection = getRepositoryCollection(state); const loading = isFetchReposPending(state); const error = getFetchReposFailure(state); + const page = getPageFromMatch(match); const showCreateButton = isAbleToCreateRepos(state); const reposLink = getRepositoriesLink(state); return { - reposLink, - page, collection, loading, error, - showCreateButton + page, + showCreateButton, + reposLink }; }; @@ -154,7 +176,7 @@ const mapDispatchToProps = dispatch => { fetchRepos: (link: string) => { dispatch(fetchRepos(link)); }, - fetchReposByPage: (link: string, page: number, filter?: string) => { + fetchReposByPage: (link: string, page: number, filter?: any) => { dispatch(fetchReposByPage(link, page, filter)); }, fetchReposByLink: (link: string) => { diff --git a/scm-ui/src/repos/containers/RepositoryRoot.js b/scm-ui/src/repos/containers/RepositoryRoot.js index 62c1800100..ed107a3ef1 100644 --- a/scm-ui/src/repos/containers/RepositoryRoot.js +++ b/scm-ui/src/repos/containers/RepositoryRoot.js @@ -8,7 +8,7 @@ import { } from "../modules/repos"; import { connect } from "react-redux"; -import {Redirect, Route, Switch} from "react-router-dom"; +import { Redirect, Route, Switch } from "react-router-dom"; import type { Repository } from "@scm-manager/ui-types"; import { @@ -18,7 +18,8 @@ import { SubNavigation, NavLink, Page, - Section, ErrorPage + Section, + ErrorPage } from "@scm-manager/ui-components"; import { translate } from "react-i18next"; import RepositoryDetails from "../components/RepositoryDetails"; @@ -33,8 +34,8 @@ import ChangesetView from "./ChangesetView"; import PermissionsNavLink from "../components/PermissionsNavLink"; import Sources from "../sources/containers/Sources"; import RepositoryNavLink from "../components/RepositoryNavLink"; -import {getLinks, getRepositoriesLink} from "../../modules/indexResource"; -import {binder, ExtensionPoint} from "@scm-manager/ui-extensions"; +import { getLinks, getRepositoriesLink } from "../../modules/indexResource"; +import { binder, ExtensionPoint } from "@scm-manager/ui-extensions"; type Props = { namespace: string, @@ -82,11 +83,13 @@ class RepositoryRoot extends React.Component { const { loading, error, indexLinks, repository, t } = this.props; if (error) { - return + return ( + + ); } if (!repository || loading) { @@ -101,11 +104,14 @@ class RepositoryRoot extends React.Component { indexLinks }; - const redirectUrlFactory = binder.getExtension("repository.redirect", this.props); + const redirectUrlFactory = binder.getExtension( + "repository.redirect", + this.props + ); let redirectedUrl; - if (redirectUrlFactory){ + if (redirectUrlFactory) { redirectedUrl = url + redirectUrlFactory(this.props); - }else{ + } else { redirectedUrl = url + "/info"; } @@ -114,7 +120,7 @@ class RepositoryRoot extends React.Component {
- +