From 75830b3530482a26eb8e807453d07855e0aec60b Mon Sep 17 00:00:00 2001
From: Fin Reinhard <fin.reinhard@icloud.com>
Date: Tue, 22 Jan 2019 16:18:45 +0000
Subject: [PATCH] adding directory of FileListPanel in url
---
borgbutler-webapp/src/components/views/archives/FileListEntry.jsx | 18 +++--
borgbutler-webapp/src/components/views/archives/FileListPanel.jsx | 62 ++++++++++----------
borgbutler-webapp/src/components/views/archives/FileListTable.jsx | 4 -
borgbutler-webapp/src/components/general/Menu.jsx | 10 +--
borgbutler-webapp/src/components/views/archives/BreadcrumbPath.jsx | 26 ++++++++
borgbutler-webapp/src/containers/WebApp.jsx | 2
borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx | 2
7 files changed, 74 insertions(+), 50 deletions(-)
diff --git a/borgbutler-webapp/src/components/general/Menu.jsx b/borgbutler-webapp/src/components/general/Menu.jsx
index 6eed8f9..06fa849 100644
--- a/borgbutler-webapp/src/components/general/Menu.jsx
+++ b/borgbutler-webapp/src/components/general/Menu.jsx
@@ -54,16 +54,14 @@
render() {
return (
<Navbar className={'fixed-top'} color="light" light expand="lg">
- <NavbarBrand to="/" tag={ReactRouterNavLink}><img alt={'BorgButler logo'}
- src={'../../../images/merlin-icon.png'}
- width={'50px'}/>BorgButler</NavbarBrand>
+ <NavbarBrand to="/" tag={ReactRouterNavLink}>
+ <img alt={'BorgButler logo'} src={'/images/merlin-icon.png'} width={'50px'} />BorgButler
+ </NavbarBrand>
<NavbarToggler onClick={this.toggle}/>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
{
- this.props.routes.map((route, index) => (
- this.getNavElement(route, index)
- ))
+ this.props.routes.map(this.getNavElement)
}
</Nav>
</Collapse>
diff --git a/borgbutler-webapp/src/components/views/archives/BreadcrumbPath.jsx b/borgbutler-webapp/src/components/views/archives/BreadcrumbPath.jsx
new file mode 100644
index 0000000..46872ac
--- /dev/null
+++ b/borgbutler-webapp/src/components/views/archives/BreadcrumbPath.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {Link, Route} from 'react-router-dom';
+import {BreadcrumbItem} from 'reactstrap';
+
+function BreadcrumbPath({match}) {
+ return (
+ <React.Fragment>
+ <BreadcrumbItem>
+ <Link to={`${match.url}/`}>
+ {match.params.path || 'Top'}
+ </Link>
+ </BreadcrumbItem>
+ <Route
+ path={`${match.url}/:path`}
+ component={BreadcrumbPath}
+ /*
+ render={props =>
+ <BreadcrumbPath {...props} match={match} changeCurrentDirectory={changeCurrentDirectory} />
+ }
+ */
+ />
+ </React.Fragment>
+ )
+}
+
+export default BreadcrumbPath;
diff --git a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
index 38dab55..f1a330b 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListEntry.jsx
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import Highlight from 'react-highlighter';
-import {Button, UncontrolledTooltip} from 'reactstrap';
+import {Link} from 'react-router-dom';
+import {UncontrolledTooltip} from 'reactstrap';
import {IconBan, IconCheck, IconDownload} from '../../general/IconComponents';
import {getResponseHeaderFilename, getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import fileDownload from 'js-file-download';
@@ -144,8 +145,11 @@
}
let path;
if (this.props.mode === 'tree' && entry.type === 'd') {
- path = <Button color={'link'} onClick={() => this.props.changeCurrentDirectory(entry.path)}><Highlight
- search={this.props.search} id={pathId}>{displayPath}</Highlight></Button>;
+ path = (
+ <Link to={`${displayPath}/`}>
+ <Highlight search={this.props.search} id={pathId}>{displayPath}</Highlight>
+ </Link>
+ );
} else {
path = <Highlight search={this.props.search} id={pathId}>{displayPath}</Highlight>;
}
@@ -177,13 +181,11 @@
}
}
-FileListEntry
- .propTypes = {
+FileListEntry.propTypes = {
entry: PropTypes.shape({}).isRequired,
search: PropTypes.string,
mode: PropTypes.string,
- diffArchiveId: PropTypes.string,
- changeCurrentDirectory: PropTypes.func.isRequired
+ diffArchiveId: PropTypes.string
};
-export default FileListEntry;
\ No newline at end of file
+export default FileListEntry;
diff --git a/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx b/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx
index 3f8b3b7..9be8a45 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListPanel.jsx
@@ -1,10 +1,12 @@
import React from 'react'
-import {Button, Breadcrumb, BreadcrumbItem} from 'reactstrap';
+import {withRouter} from 'react-router-dom';
+import {Breadcrumb, Button} from 'reactstrap';
import {getRestServiceUrl} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import FileListTable from './FileListTable';
import FileListFilter from './FileListFilter';
import JobMonitorPanel from '../jobs/JobMonitorPanel';
+import BreadcrumbPath from './BreadcrumbPath';
class FileListPanel extends React.Component {
@@ -20,8 +22,25 @@
}
};
+ constructor(props) {
+ super(props);
+
+ this.fetchArchiveFileList = this.fetchArchiveFileList.bind(this);
+ this.handleURLChange = this.handleURLChange.bind(this);
+
+ this.unregisterHistoryListener = props.history.listen(this.handleURLChange);
+ }
+
componentDidMount = () => {
- this.fetchArchiveFileList(false);
+ this.handleURLChange(this.props.location);
+ };
+
+ componentWillUnmount() {
+ this.unregisterHistoryListener();
+ }
+
+ handleURLChange = location => {
+ this.changeCurrentDirectory(location.pathname.replace(this.props.match.url, '').replace(/^\/|\/$/g, ''));
};
handleInputChange = (event, callback) => {
@@ -77,7 +96,6 @@
render = () => {
let content = undefined;
- let breadcrumb = undefined;
if (this.state.isFetching) {
content = <JobMonitorPanel repo={this.props.repoId} />;
@@ -97,29 +115,17 @@
borg backup server</Button>
</React.Fragment>;
} else {
+ let breadcrumb;
+
if (this.state.filter.mode === 'tree' && this.state.filter.currentDirectory.length > 0) {
- let dirs = this.state.filter.currentDirectory.split('/');
- let breadcrumbs = [];
- for (let i = 0; i < dirs.length - 1; i++) {
let path = '';
- for (let j = 0; j <= i; j++) {
- path += dirs[j];
- if (j < i) {
- path += '/';
- }
- }
- breadcrumbs.push(<BreadcrumbItem key={i}><Button color={'link'} onClick={() => this.changeCurrentDirectory(path)}
- >{dirs[i]}</Button></BreadcrumbItem>);
- }
- breadcrumb = <Breadcrumb>
- <BreadcrumbItem><Button color={'link'} onClick={() => this.changeCurrentDirectory('')}
- >Top</Button></BreadcrumbItem>
- {breadcrumbs}
- <BreadcrumbItem active>{dirs[dirs.length - 1]}</BreadcrumbItem>
- </Breadcrumb>;
- } else {
- breadcrumb = '';
+ breadcrumb = (
+ <Breadcrumb>
+ <BreadcrumbPath match={this.props.match} />
+ </Breadcrumb>
+ );
}
+
content = <React.Fragment>
<FileListFilter
filter={this.state.filter}
@@ -138,7 +144,7 @@
entries={this.state.fileList}
search={this.state.filter.search}
mode={this.state.filter.mode}
- changeCurrentDirectory={this.changeCurrentDirectory}/>
+ />
</React.Fragment>;
}
}
@@ -146,12 +152,6 @@
{content}
</React.Fragment>;
};
-
- constructor(props) {
- super(props);
-
- this.fetchArchiveFileList = this.fetchArchiveFileList.bind(this);
- }
}
-export default FileListPanel;
+export default withRouter(FileListPanel);
diff --git a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
index 710ffa6..06df88f 100644
--- a/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
+++ b/borgbutler-webapp/src/components/views/archives/FileListTable.jsx
@@ -24,7 +24,6 @@
entry={entry}
search={lowercaseSearch}
mode={mode}
- changeCurrentDirectory={changeCurrentDirectory}
key={index}
/>)}
</tbody>
@@ -36,8 +35,7 @@
diffArchiveId: PropTypes.string,
entries: PropTypes.array,
search: PropTypes.string,
- mode: PropTypes.string,
- changeCurrentDirectory: PropTypes.func.isRequired
+ mode: PropTypes.string
};
FileListTable.defaultProps = {
diff --git a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
index 32b1b91..4fe43bc 100644
--- a/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
+++ b/borgbutler-webapp/src/components/views/repos/RepoArchiveListView.jsx
@@ -160,7 +160,7 @@
}
return (
<tr key={archive.id}>
- <td><Link to={`/archives/${repo.id}/${archive.id}`}>{archive.name}</Link></td>
+ <td><Link to={`/archives/${repo.id}/${archive.id}/`}>{archive.name}</Link></td>
<td>{archive.time}</td>
<td>{loaded}</td>
<td>{archive.id}</td>
diff --git a/borgbutler-webapp/src/containers/WebApp.jsx b/borgbutler-webapp/src/containers/WebApp.jsx
index 639ee35..73d1b82 100644
--- a/borgbutler-webapp/src/containers/WebApp.jsx
+++ b/borgbutler-webapp/src/containers/WebApp.jsx
@@ -77,7 +77,7 @@
))
}
<Route path={'/repoArchives/:id'} component={RepoArchiveListView}/>
- <Route path={'/archives/:repoId/:archiveId'} component={ArchiveView}/>
+ <Route path={'/archives/:repoId/:archiveId/'} component={ArchiveView} />
</Switch>
</div>
<Footer versionInfo={this.props.version}/>
--
Gitblit v1.10.0