From 8db429109c372874bef0457520907efabcb52557 Mon Sep 17 00:00:00 2001
From: Florent Poittevin <florent.poittevin@unige.ch>
Date: Mon, 20 Jan 2020 17:31:52 +0100
Subject: [PATCH] fix: file tree path preserved and expanded when change tab
and avoid double check error
---
.../deposit-folder-tree.presentational.ts | 31 ++++-
.../deposit-file/deposit-file.routable.html | 122 ++++++++----------
.../deposit-file/deposit-file.routable.scss | 116 ++++++++---------
.../deposit-file/deposit-file.routable.ts | 19 ++-
.../deposit-upload.routable.html | 54 ++++----
.../deposit-upload.routable.scss | 12 +-
6 files changed, 181 insertions(+), 173 deletions(-)
diff --git a/src/app/features/deposit/components/presentationals/deposit-folder-tree/deposit-folder-tree.presentational.ts b/src/app/features/deposit/components/presentationals/deposit-folder-tree/deposit-folder-tree.presentational.ts
index bd63d7a96..f0be308fa 100644
--- a/src/app/features/deposit/components/presentationals/deposit-folder-tree/deposit-folder-tree.presentational.ts
+++ b/src/app/features/deposit/components/presentationals/deposit-folder-tree/deposit-folder-tree.presentational.ts
@@ -20,6 +20,7 @@ import {
ArrayUtil,
isNullOrUndefined,
ObservableUtil,
+ StringUtil,
} from "solidify-frontend";
export class FlatNode {
@@ -67,6 +68,7 @@ export class DepositFolderTreePresentational extends SharedAbstractPresentationa
const listFolders = [...this._listFolders];
this.createIntermediateFolders(listFolders);
this.dataSource.data = listFolders;
+ this.expandFirstLevelTree();
}
private _transformer = (fullFolderName: string): FlatNode => ({
@@ -90,8 +92,33 @@ export class DepositFolderTreePresentational extends SharedAbstractPresentationa
if (isNullOrUndefined(this.treeControl.dataNodes) || this.treeControl.dataNodes.length === 0) {
return;
}
- const firstNode = this.treeControl.dataNodes[0];
- this.treeControl.expand(firstNode);
+ this.expandFirstLevelTree();
+ }
+
+ private expandFirstLevelTree(): void {
+ if (this.currentFolder !== this._ROOT) {
+ const node = this.treeControl.dataNodes.find(d => d.fullFolderName === this.currentFolder);
+ this.expandRecursivelyParent(node);
+ this.treeControl.expand(node);
+ return;
+ }
+ if (this.expandFirstLevelTree) {
+ const firstNode = this.treeControl.dataNodes[0];
+ this.treeControl.expand(firstNode);
+ }
+ }
+
+ private expandRecursivelyParent(node: FlatNode): void {
+ if (node.fullFolderName === this._ROOT) {
+ return;
+ }
+ let parentPath = node.fullFolderName.substring(0, node.fullFolderName.lastIndexOf(this._SEPARATOR));
+ if (parentPath === StringUtil.stringEmpty) {
+ parentPath = this._ROOT;
+ }
+ const parentNode = this.treeControl.dataNodes.find(d => d.fullFolderName === parentPath);
+ this.treeControl.expand(parentNode);
+ this.expandRecursivelyParent(parentNode);
}
expandAll(): void {
diff --git a/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.html b/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.html
index a8c5a5b91..599326a8b 100644
--- a/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.html
+++ b/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.html
@@ -1,71 +1,63 @@
-<div>
- <div class="tab-content">
- <div class="file-uploaded">
- <h1>{{'deposit.file.title.filesOfDeposit' | translate}}</h1>
+<h1>{{'deposit.file.title.filesOfDeposit' | translate}}</h1>
+<div class="file-uploaded-header">
+ <div *ngIf="!(listFoldersObs | async | isNullOrUndefined) && (listFoldersObs | async | isNonEmptyArray)"
+ class="selector-file-view-mode"
+ >
+ <a *ngIf="currentFileViewMode === fileViewModeEnum.FolderView"
+ (click)="selectFolder(undefined)"
+ >
+ <mat-icon class="icon">list</mat-icon>
+ {{'deposit.file.button.flatView' | translate}}
+ </a>
+ <a *ngIf="currentFileViewMode === fileViewModeEnum.FlatView"
+ (click)="selectFolder('/')"
+ >
+ <mat-icon class="icon">folder_open</mat-icon>
+ {{'deposit.file.button.showTree' | translate}}</a>
+ </div>
- <div class="file-uploaded-header">
- <div *ngIf="!(listFoldersObs | async | isNullOrUndefined) && (listFoldersObs | async | isNonEmptyArray)"
- class="selector-file-view-mode"
- >
- <a *ngIf="currentFileViewMode === fileViewModeEnum.FolderView"
- (click)="selectFolder(undefined)"
- >
- <mat-icon class="icon">list</mat-icon>
- {{'deposit.file.button.flatView' | translate}}
- </a>
- <a *ngIf="currentFileViewMode === fileViewModeEnum.FlatView"
- (click)="selectFolder('/')"
- >
- <mat-icon class="icon">folder_open</mat-icon>
- {{'deposit.file.button.showTree' | translate}}</a>
- </div>
-
- <button mat-icon-button
- mat-button
- (click)="refresh()"
- [matTooltip]="'deposit.file.tree.refresh' | translate"
- [matTooltipPosition]="'left'"
- [class.spinning]="isLoadingDataFileObs | async"
- [disabled]="isLoadingDataFileObs | async"
- >
- <mat-icon>refresh</mat-icon>
- </button>
- </div>
-
- <div class="file-viewer">
- <div class="tree-folder"
- *ngIf="currentFileViewMode === fileViewModeEnum.FolderView && (listFoldersObs | async) | isNonEmptyArray"
- >
- <dlcm-deposit-folder-tree [listFolders]="listFoldersObs | async"
- [isLoading]="isLoadingDataFileObs | async"
- [expandFirstLevel]="true"
- [currentFolder]="getCurrentFolder(queryParametersObs | async)"
- (selectChange)="selectFolder($event)"
- ></dlcm-deposit-folder-tree>
- </div>
-
- <div class="file-list-wrapper"
- [dlcmSpinner]="isLoadingDataFileObs | async"
- >
- <dlcm-shared-data-table *ngIf="columns"
- [columns]="columns"
- [isLoading]="isLoadingDataFileObs | async"
- [datas]="listDataFileObs | async"
- [queryParameters]="queryParametersObs | async"
- (queryParametersChange)="onQueryParametersEvent($event)"
- (selectChange)="showDetail($event)"
- [columnsSkippedToClear]="columnsToSkippedFilter"
- [actions]="actions"
- >
- </dlcm-shared-data-table>
- </div>
+ <button mat-icon-button
+ mat-button
+ (click)="refresh()"
+ [matTooltip]="'deposit.file.tree.refresh' | translate"
+ [matTooltipPosition]="'left'"
+ [class.spinning]="isLoadingDataFileObs | async"
+ [disabled]="isLoadingDataFileObs | async"
+ >
+ <mat-icon>refresh</mat-icon>
+ </button>
+</div>
- <ng-template #noFile>
- <label>{{'deposit.file.tree.noFile' | translate}}</label>
- </ng-template>
- </div>
- </div>
+<div class="file-viewer">
+ <div class="tree-folder"
+ *ngIf="currentFileViewMode === fileViewModeEnum.FolderView && (listFoldersObs | async) | isNonEmptyArray"
+ >
+ <dlcm-deposit-folder-tree [listFolders]="listFoldersObs | async"
+ [isLoading]="isLoadingDataFileObs | async"
+ [expandFirstLevel]="true"
+ [currentFolder]="currentFolder"
+ (selectChange)="selectFolder($event)"
+ ></dlcm-deposit-folder-tree>
+ </div>
+ <div class="file-list-wrapper"
+ [dlcmSpinner]="isLoadingDataFileObs | async"
+ >
+ <dlcm-shared-data-table *ngIf="columns"
+ [columns]="columns"
+ [isLoading]="isLoadingDataFileObs | async"
+ [datas]="listDataFileObs | async"
+ [queryParameters]="queryParametersObs | async"
+ (queryParametersChange)="onQueryParametersEvent($event)"
+ (selectChange)="showDetail($event)"
+ [columnsSkippedToClear]="columnsToSkippedFilter"
+ [actions]="actions"
+ >
+ </dlcm-shared-data-table>
</div>
+
+ <ng-template #noFile>
+ <label>{{'deposit.file.tree.noFile' | translate}}</label>
+ </ng-template>
</div>
diff --git a/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.scss b/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.scss
index 01f5cecbd..8811e69c1 100644
--- a/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.scss
+++ b/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.scss
@@ -5,81 +5,75 @@
:host {
padding: 0;
- .tab-content {
- .file-uploaded {
- .file-uploaded-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- position: relative;
-
- fa-icon {
- font-size: 20px;
- }
+ .file-uploaded-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+
+ fa-icon {
+ font-size: 20px;
+ }
- button {
- transition-property: transform;
- transition-duration: 1s;
+ button {
+ transition-property: transform;
+ transition-duration: 1s;
- position: absolute;
- top: -50px;
- right: 10px;
+ position: absolute;
+ top: -50px;
+ right: 10px;
- &.spinning {
- animation-name: rotate;
- animation-duration: 2s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- }
+ &.spinning {
+ animation-name: rotate;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ }
- @keyframes rotate {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
+ @keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
}
}
+ }
+ }
- .selector-file-view-mode {
- display: flex;
- padding-bottom: 20px;
-
- a {
- .icon {
- padding-right: 5px;
- }
+ .selector-file-view-mode {
+ display: flex;
+ padding-bottom: 20px;
- display: flex;
- align-items: center;
- }
+ a {
+ .icon {
+ padding-right: 5px;
}
- .file-viewer {
- display: flex;
-
- @include respond-to-smaller-than-breakpoint('md') {
- flex-wrap: wrap;
- .tree-folder {
- width: 100%;
- padding-bottom: 20px;
- }
- }
+ display: flex;
+ align-items: center;
+ }
+ }
- .tree-folder {
- padding-right: 20px;
- }
+ .file-viewer {
+ display: flex;
- .file-list-wrapper {
- ::ng-deep .data-table .clear-filter-wrapper {
- height: 0;
- }
- }
+ @include respond-to-smaller-than-breakpoint('md') {
+ flex-wrap: wrap;
+ .tree-folder {
+ width: 100%;
+ padding-bottom: 20px;
}
}
- }
+ .tree-folder {
+ padding-right: 20px;
+ }
+ .file-list-wrapper {
+ ::ng-deep .data-table .clear-filter-wrapper {
+ height: 0;
+ }
+ }
+ }
}
diff --git a/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.ts b/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.ts
index 198b8a500..ece1dbbde 100644
--- a/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.ts
+++ b/src/app/features/deposit/components/routables/deposit-file/deposit-file.routable.ts
@@ -98,7 +98,11 @@ export class DepositFileRoutable extends SharedAbstractDetailEditRoutable<Deposi
canDoAlterationActions: boolean = false;
+ private readonly _ROOT_LOCATION: string = "/";
private readonly _RELATIVE_LOCATION: string = "relativeLocation";
+
+ currentFolder: string = this._ROOT_LOCATION;
+
columns: DataTableColumns<DepositDataFile>[];
actions: DataTableActions<DepositDataFile>[] = [
{
@@ -151,6 +155,7 @@ export class DepositFileRoutable extends SharedAbstractDetailEditRoutable<Deposi
ngOnInit(): void {
super.ngOnInit();
+ this._computeCurrentFolder(CompositionState.queryParametersSnapshot(this._store, DepositDataFileState));
this.getCurrentModelOnParent();
this._computeCurrentUserRight();
@@ -233,7 +238,7 @@ export class DepositFileRoutable extends SharedAbstractDetailEditRoutable<Deposi
getSubResourceWithParentId(id: string): void {
const queryParameter = new QueryParameters();
- MappingObjectUtil.set(queryParameter.search.searchItems, this._RELATIVE_LOCATION, "/");
+ MappingObjectUtil.set(queryParameter.search.searchItems, this._RELATIVE_LOCATION, this.currentFolder);
this._store.dispatch(new DepositDataFileAction.GetAll(id, queryParameter, true));
this._store.dispatch(new DepositDataFileAction.GetListFolder(id));
}
@@ -275,11 +280,15 @@ export class DepositFileRoutable extends SharedAbstractDetailEditRoutable<Deposi
));
}
- getCurrentFolder(queryParameters: QueryParameters): string | undefined {
- if (isNullOrUndefined(queryParameters) || isNullOrUndefined(queryParameters.search) || isNullOrUndefined(queryParameters.search.searchItems)) {
- return undefined;
+ private _computeCurrentFolder(queryParameters: QueryParameters): void {
+ if (isNullOrUndefined(queryParameters)
+ || isNullOrUndefined(queryParameters.search)
+ || isNullOrUndefined(queryParameters.search.searchItems)
+ || queryParameters.search.searchItems.size === 0) {
+ this.currentFolder = this._ROOT_LOCATION;
+ return;
}
- return MappingObjectUtil.get(queryParameters.search.searchItems, this._RELATIVE_LOCATION);
+ this.currentFolder = MappingObjectUtil.get(queryParameters.search.searchItems, this._RELATIVE_LOCATION);
}
showDetail(depositDataFile: DepositDataFile): void {
diff --git a/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.html b/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.html
index 07eaf5e91..d0309ac1a 100644
--- a/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.html
+++ b/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.html
@@ -1,32 +1,26 @@
-<div>
- <div class="tab-content">
- <div class="file-upload">
- <div class="upload-button-wrapper">
- <button mat-button
- color="accent"
- type="button"
- (click)="openModalUpload()"
- >
- <mat-icon>publish</mat-icon>
- {{'deposit.file.button.upload' | translate}}
- </button>
+<div class="upload-button-wrapper">
+ <button mat-button
+ color="accent"
+ type="button"
+ (click)="openModalUpload()"
+ >
+ <mat-icon>publish</mat-icon>
+ {{'deposit.file.button.upload' | translate}}
+ </button>
- <button mat-button
- color="accent"
- type="button"
- (click)="openModalUploadArchive()"
- >
- <mat-icon>unarchive</mat-icon>
- {{'deposit.file.button.uploadArchive' | translate}}
- </button>
- </div>
-
- <dlcm-deposit-files-upload-in-progress [listFilesUploading]="uploadStatusObs | async"
- (cancelChange)="cancel($event)"
- (retryChange)="retry($event)"
- (uploadChange)="upload($event)"
- (uploadArchiveChange)="uploadArchive($event)"
- ></dlcm-deposit-files-upload-in-progress>
- </div>
- </div>
+ <button mat-button
+ color="accent"
+ type="button"
+ (click)="openModalUploadArchive()"
+ >
+ <mat-icon>unarchive</mat-icon>
+ {{'deposit.file.button.uploadArchive' | translate}}
+ </button>
</div>
+
+<dlcm-deposit-files-upload-in-progress [listFilesUploading]="uploadStatusObs | async"
+ (cancelChange)="cancel($event)"
+ (retryChange)="retry($event)"
+ (uploadChange)="upload($event)"
+ (uploadArchiveChange)="uploadArchive($event)"
+></dlcm-deposit-files-upload-in-progress>
diff --git a/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.scss b/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.scss
index 19e6c9dad..32cad4310 100644
--- a/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.scss
+++ b/src/app/features/deposit/components/routables/deposit-upload/deposit-upload.routable.scss
@@ -5,15 +5,7 @@
:host {
padding: 0;
- .tab-content {
- .file-upload {
- .upload-button-wrapper {
- padding-bottom: 25px;
- }
-
- padding-bottom: 25px;
- }
+ .upload-button-wrapper {
+ padding-bottom: 25px;
}
-
-
}
--
GitLab