Diff mode: Supports now download of both versions...

Kai Reinhard

09.58.2019 5edaa48bde3c0f7455a44bbd5d5cb539a7fd1a7f

Diff mode: Supports now download of both versions...

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

@@ -99,7 +99,7 @@
                    <TabPane tabId={'1'}>
                        <FileListPanel
                            repoId={this.state.repoId}
                            archiveId={archive.id}
                            archive={archive}
                            archiveShortInfoList={archive.archiveShortInfoList}
                        />
                    </TabPane>

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

@@ -2,19 +2,24 @@
import PropTypes from 'prop-types';
import Highlight from 'react-highlighter';
import {Button, UncontrolledTooltip} from 'reactstrap';
import {IconCheck, IconDownload} from '../../general/IconComponents';
import {IconBan, IconCheck, IconDownload} from '../../general/IconComponents';
import {getResponseHeaderFilename, getRestServiceUrl, humanFileSize} from '../../../utilities/global';
import fileDownload from 'js-file-download';

class FileListEntry extends React.Component {

    state = {
        downloaded: false
        thisDownloaded: false,
        otherDownloaded: false
    };

    download(archiveId, fileNumber) {
    download(archiveId, fileNumber, thisDownload) {
        let filename;
        this.setState({downloaded: true});
        if (thisDownload) {
            this.setState({thisDownloaded: true});
        } else {
            this.setState({otherDownloaded: true});
        }
        fetch(getRestServiceUrl('archives/restore', {
            archiveId: archiveId,
            fileNumber: fileNumber
@@ -42,7 +47,6 @@

    render = () => {
        const entry = this.props.entry;
        let downloadArchiveId = this.props.archiveId;
        let displayPath = entry.displayPath;
        let pathCss = 'tt';

@@ -61,14 +65,46 @@
        let mtimeCss = 'tt';
        let mtimeTooltip = undefined;
        let mtimeId = undefined;
        let iconBan = <div className={'btn'}><IconBan/></div>;
        let iconCheck = <div className={'btn'}><IconCheck/></div>;

        let icon1 = iconCheck;
        let icon1Tooltip = '';
        if (!this.state.thisDownloaded) {
            const icon1Id = `icon1-${entry.fileNumber}`;
            icon1 = <div id={icon1Id} className={'btn'}
                         onClick={() => this.download(this.props.archive.id, entry.fileNumber, true)}>
                <IconDownload/></div>;
            icon1Tooltip = <UncontrolledTooltip target={icon1Id}>
                {this.props.archive.time}
            </UncontrolledTooltip>;
        }
        let icon2 = '';
        let icon2Tooltip = '';
        if (this.props.diffArchiveId) {
            icon2 = iconCheck;
            if (!this.state.otherDownloaded) {
                const icon2Id = `icon2-${entry.fileNumber}`;
                icon2 =
                    <div id={icon2Id} className={'btn'}
                         onClick={() => this.download(this.props.diffArchiveId, entry.fileNumber, false)}>
                        <IconDownload/></div>;
                icon2Tooltip = <UncontrolledTooltip target={icon2Id}>
                    other
                </UncontrolledTooltip>;
            }
        }
        if (entry.diffStatus === 'NEW') {
            pathCss = 'tt file-new';
            pathtooltipText = 'NEW';
            icon2 = iconBan;
            icon2Tooltip = '';
        } else if (entry.diffStatus === 'REMOVED') {
            pathCss = 'tt file-removed';
            // Download removed files from other archive.
            downloadArchiveId = this.props.diffArchiveId;
            pathtooltipText = 'REMOVED';
            icon1 = iconBan;
            icon1Tooltip = '';
        } else if (entry.diffStatus === 'MODIFIED') {
            if (entry.differences) {
                pathCss = 'tt file-modified';
@@ -113,16 +149,13 @@
        } else {
            path = <Highlight search={this.props.search} id={pathId}>{displayPath}</Highlight>;
        }
        let icon = entry.fileNumber >= 0 ? (this.state.downloaded ? <IconCheck/> :
            <div className={'btn'} onClick={() => this.download(downloadArchiveId, entry.fileNumber)}>
                <IconDownload/></div>) : '';
        return (
            <tr>
                <td className={pathCss}>
                    {path}{pathTooltip}
                </td>
                <td className={'tt'} style={{textAlign: 'center'}}>
                    {icon}
                    {icon1}{icon1Tooltip} {icon2}{icon2Tooltip}
                </td>
                <td className={sizeCss} style={{textAlign: 'center'}}>
                    <span id={sizeId}>{humanFileSize(entry.size, true, true)}</span>{sizeTooltip}
@@ -149,6 +182,7 @@
    entry: PropTypes.shape({}).isRequired,
    search: PropTypes.string,
    mode: PropTypes.string,
    diffArchiveId: PropTypes.string,
    changeCurrentDirectory: PropTypes.func.isRequired
};


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

@@ -51,7 +51,7 @@
            failed: false
        });
        fetch(getRestServiceUrl('archives/filelist', {
            archiveId: this.props.archiveId,
            archiveId: this.props.archive.id,
            diffArchiveId: this.state.filter.diffArchiveId,
            force: force,
            searchString: this.state.filter.search,
@@ -128,12 +128,12 @@
                            event.preventDefault();
                            this.fetchArchiveFileList();
                        }}
                        currentArchiveId={this.props.archiveId}
                        currentArchiveId={this.props.archive.id}
                        archiveShortInfoList={this.props.archiveShortInfoList}
                    />
                    {breadcrumb}
                    <FileListTable
                        archiveId={this.props.archiveId}
                        archive={this.props.archive}
                        diffArchiveId={this.state.filter.diffArchiveId}
                        entries={this.state.fileList}
                        search={this.state.filter.search}

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

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

function FileListTable({archiveId, diffArchiveId, entries, search, mode, changeCurrentDirectory}) {
function FileListTable({archive, diffArchiveId, entries, search, mode, changeCurrentDirectory}) {
    const lowercaseSearch = search.split(' ')[0].toLowerCase();
    return (
        <Table striped bordered hover size={'sm'} responsive>
@@ -19,7 +19,7 @@
            <tbody>
            {entries
                .map((entry, index) => <FileListEntry
                    archiveId={archiveId}
                    archive={archive}
                    diffArchiveId={diffArchiveId}
                    entry={entry}
                    search={lowercaseSearch}
@@ -33,7 +33,6 @@
}

FileListTable.propTypes = {
    archiveId: PropTypes.string,
    diffArchiveId: PropTypes.string,
    entries: PropTypes.array,
    search: PropTypes.string,