adorsys/datasafe

<div>
    <button mat-icon-button (click)="addUiFolder()">
        <mat-icon>create_new_folder</mat-icon>
    </button>
    <button mat-icon-button (click)="uploader.click()">
        <mat-icon>cloud_upload</mat-icon>
    </button>
    <button mat-icon-button (click)="refresh()">
        <mat-icon>refresh</mat-icon>
    </button>
    <input hidden type="file" #uploader (change)="uploadFile($event)"/>
</div>
<div>
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding #activeNode
                       (mouseenter)="activeNode.setAttribute('over', 'true')"
                       (mouseleave)="activeNode.setAttribute('over', 'false')">
            <button mat-icon-button disabled>
                <mat-icon>cloud</mat-icon>
            </button>
            {{node.name}}
            <div *ngIf="activeNode.getAttribute('over') === 'true'">
                <button mat-icon-button (click)="downloadFile(node.path)">
                    <mat-icon class="mat-icon-rtl-mirror">cloud_download</mat-icon>
                </button>
                <button mat-icon-button (click)="deleteFile(node.path)">
                    <mat-icon class="mat-icon-rtl-mirror">delete_forever</mat-icon>
                </button>
            </div>
        </mat-tree-node>
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding #activeDirNode
                       (mouseenter)="activeDirNode.setAttribute('over', 'true')"
                       (mouseleave)="activeDirNode.setAttribute('over', 'false')">
            <button mat-icon-button [attr.aria-label]="'toggle ' + node.name" matTreeNodeToggle>
                <mat-icon class="mat-icon-rtl-mirror">
                    {{treeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
                </mat-icon>
            </button>

            {{node.name}}

            <input hidden type="file" #uploaderWithPath name="{{node.path}}"
                   (change)="uploadFileWithPathFromName($event)"/>
            <div *ngIf="activeDirNode.getAttribute('over') === 'true'">
                <button mat-icon-button (click)="uploaderWithPath.click()">
                    <mat-icon>cloud_upload</mat-icon>
                </button>
                <button mat-icon-button name="{{node.path}}" (click)="addUiFolderWithpathFromName($event)">
                    <mat-icon>create_new_folder</mat-icon>
                </button>
                <button mat-icon-button (click)="deleteFile(node.path)">
                    <mat-icon class="mat-icon-rtl-mirror">delete_forever</mat-icon>
                </button>
            </div>
            <mat-progress-bar *ngIf="node.isLoading"
                              mode="indeterminate"
                              class="example-tree-progress-bar"></mat-progress-bar>
        </mat-tree-node>
    </mat-tree>
    <mat-error *ngIf="null != error">
        {{error}}
    </mat-error>
</div>