adding directory of FileListPanel in url

Fin Reinhard

22.18.2019 75830b3530482a26eb8e807453d07855e0aec60b

adding directory of FileListPanel in url

 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>

 borgbutler-webapp/src/components/views/archives/BreadcrumbPath.jsx

New file
@@ -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;

 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;

 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 += '/';
                    breadcrumb = (
                        <Breadcrumb>
                            <BreadcrumbPath match={this.props.match} />
                        </Breadcrumb>
                    );
                            }
                        }
                        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 = '';
                }

                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);

 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 = {

 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>

 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}/>