tree view...

Kai Reinhard

18.31.2018 3b642d7514aac1b0b2d70f9d6af1d645dc254b01

tree view...

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

@@ -32,7 +32,13 @@
        });
}

function FileListEntry({archiveId, entry, search}) {
function FileListEntry({archiveId, entry, search, mode, changeCurrentDirectory}) {
    let path;
    if (mode === 'tree') {
        path = <a href={'#'} onClick={() => changeCurrentDirectory(entry.path)}><Highlight search={search}>{entry.path}</Highlight></a>;
    } else {
        path = <Highlight search={search}>{entry.path} tree</Highlight>;
    }
    return (
        <tr>
            <td className={'tt'}>{entry.mode}</td>
@@ -42,7 +48,7 @@
                <div className={'btn'} onClick={() => download(archiveId, entry.fileNumber)}>
                    <IconDownload/></div>
            </td>
            <td className={'tt'}><Highlight search={search}>{entry.path}</Highlight></td>
            <td className={'tt'}>{path}</td>
        </tr>
    );
}
@@ -50,6 +56,8 @@
FileListEntry.propTypes = {
    entry: PropTypes.shape({}).isRequired,
    search: PropTypes.string,
    mode: PropTypes.string,
    changeCurrentDirectory: PropTypes.func.isRequired
};

export default FileListEntry;

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

@@ -1,5 +1,5 @@
import React from 'react'
import {Button} from 'reactstrap';
import {Button, Breadcrumb, BreadcrumbItem} from 'reactstrap';
import {getRestServiceUrl} from '../../../utilities/global';
import ErrorAlert from '../../general/ErrorAlert';
import FileListTable from "./FileListTable";
@@ -24,9 +24,21 @@

    handleInputChange = (event) => {
        event.preventDefault();
        this.setState({filter: {...this.state.filter, [event.target.name]: event.target.value}});
        let target = event.target.name;
        this.setState({filter: {...this.state.filter, [event.target.name]: event.target.value}},
            () => {
                if (target === 'mode') {
                    this.fetchArchiveFileList();
                }
            });
    };

    changeCurrentDirectory = (currentDirectory) => {
        this.setState({filter: {...this.state.filter, currentDirectory: currentDirectory}},
            () => {
                this.fetchArchiveFileList();
            });
    };

    fetchArchiveFileList = (force) => {
        let forceReload = false;
@@ -62,6 +74,7 @@

    render = () => {
        let content = undefined;
        let breadcrumb = undefined;

        if (this.state.isFetching) {
            content = <i>Loading...</i>;
@@ -81,6 +94,15 @@
                        borg backup server</Button>
                </React.Fragment>;
            } else {
                if (this.state.filter.mode === 'tree') {
                    breadcrumb = <Breadcrumb>
                        <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
                        <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
                        <BreadcrumbItem active>Data</BreadcrumbItem>
                    </Breadcrumb>;
                } else {
                    breadcrumb = '';
                }
                content = <React.Fragment>
                    <FileListFilter
                        filter={this.state.filter}
@@ -90,10 +112,13 @@
                            this.fetchArchiveFileList();
                        }}
                    />
                    {breadcrumb}
                    <FileListTable
                        archiveId={this.props.archiveId}
                        entries={this.state.fileList}
                        search={this.state.filter.search}/>
                        search={this.state.filter.search}
                        mode={this.state.filter.mode}
                        changeCurrentDirectory={this.changeCurrentDirectory}/>
                </React.Fragment>;
            }
        }

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

@@ -3,7 +3,7 @@
import {Table} from 'reactstrap';
import FileListEntry from './FileListEntry';

function FileListTable({archiveId, entries, search}) {
function FileListTable({archiveId, entries, search, mode, changeCurrentDirectory}) {
    const lowercaseSearch = search.split(' ')[0].toLowerCase();
    return (
        <Table striped bordered hover size={'sm'} responsive>
@@ -22,6 +22,8 @@
                    archiveId={archiveId}
                    entry={entry}
                    search={lowercaseSearch}
                    mode={mode}
                    changeCurrentDirectory={changeCurrentDirectory}
                    key={index}
                />)}
            </tbody>
@@ -32,12 +34,15 @@
FileListTable.propTypes = {
    archiveId: PropTypes.string,
    entries: PropTypes.array,
    search: PropTypes.string
    search: PropTypes.string,
    mode: PropTypes.string,
    changeCurrentDirectory: PropTypes.func.isRequired
};

FileListTable.defaultProps = {
    entries: [],
    search: ''
    search: '',
    mode: 'flat'
};

export default FileListTable;