From be7f06468d7c68f55327e74673cc69ce80b6b4f2 Mon Sep 17 00:00:00 2001
From: Florent Poittevin <florent.poittevin@unige.ch>
Date: Mon, 1 Jul 2019 14:23:54 +0200
Subject: [PATCH] Fix upload file Style upload bar

---
 .../file-tree/file-tree.component.html        |   3 +-
 .../file-tree/file-tree.component.ts          |   6 +-
 .../file-upload/file-upload.component.html    |  19 +-
 .../file-upload/file-upload.component.scss    |  23 ++
 .../containers/file/file.container.html       |  10 +-
 .../containers/file/file.container.scss       |   3 +
 .../deposit/containers/file/file.container.ts |   2 +-
 src/app/deposit/deposit.action.ts             |   2 +-
 src/app/deposit/deposit.state.ts              |  14 +-
 .../models/upload-file-status.model.ts        |   4 +-
 src/app/deposit/views/detail/detail.view.html |  28 +-
 src/app/deposit/views/edit/edit.view.html     |  26 +-
 src/app/shared/services/api.service.ts        |   9 +-
 .../abstract-detail/abstract-detail.view.scss |   4 +
 .../abstract-edit/abstract-edit.view.scss     |   3 +
 src/assets/i18n/de.json                       | 293 +++++++++---------
 src/assets/i18n/en.json                       | 293 +++++++++---------
 src/assets/i18n/fr.json                       | 293 +++++++++---------
 src/sass/main.scss                            |   4 +
 19 files changed, 556 insertions(+), 483 deletions(-)

diff --git a/src/app/deposit/components/file-tree/file-tree.component.html b/src/app/deposit/components/file-tree/file-tree.component.html
index b1c91ec7e..c6b424136 100644
--- a/src/app/deposit/components/file-tree/file-tree.component.html
+++ b/src/app/deposit/components/file-tree/file-tree.component.html
@@ -1,3 +1,4 @@
+<label>{{'deposit.file.tree.label' | translate}}</label>
 <mat-tree *ngIf="dataSource"
           [dataSource]="dataSource"
           [treeControl]="treeControl"
@@ -6,7 +7,7 @@
     <li class="mat-tree-node">
       <!-- use a disabled button to provide padding for tree leaf -->
       <button mat-icon-button disabled></button>
-      {{node.name}} - {{getStatus(node)}}
+      <a href="{{getSourceData(node)}}" target="_blank">{{node.name}}</a> - {{getStatus(node)}}
     </li>
   </mat-tree-node>
 
diff --git a/src/app/deposit/components/file-tree/file-tree.component.ts b/src/app/deposit/components/file-tree/file-tree.component.ts
index 231b90233..498d829e8 100644
--- a/src/app/deposit/components/file-tree/file-tree.component.ts
+++ b/src/app/deposit/components/file-tree/file-tree.component.ts
@@ -126,7 +126,11 @@ export class FileTreeComponent {
 
   hasChild = (_: number, node: FileNode) => !!node.children && node.children.length > 0;
 
-  getStatus(node: FileNode) {
+  getStatus(node: FileNode): string {
     return node.file.status;
   }
+
+  getSourceData(node: FileNode): string {
+    return node.file.sourceData;
+  }
 }
diff --git a/src/app/deposit/components/file-upload/file-upload.component.html b/src/app/deposit/components/file-upload/file-upload.component.html
index 4177dac95..88fdef348 100644
--- a/src/app/deposit/components/file-upload/file-upload.component.html
+++ b/src/app/deposit/components/file-upload/file-upload.component.html
@@ -3,16 +3,19 @@
     {{uploadStatus.message}}
   </div>
   <div *ngIf="uploadStatus.status === 'progress'">
-    <div role="progressbar"
-         [style.width.%]="uploadStatus.progress"
-         aria-valuenow="25"
-         aria-valuemin="0"
-         aria-valuemax="100">
-      {{uploadStatus.progress}}%
+    <div class="progressbar-wrapper">
+      <span class="progression-value">{{uploadStatus.progress}}%</span>
+      <div class="progressbar"
+           role="progressbar"
+           [style.width.%]="uploadStatus.progress"
+           aria-valuenow="25"
+           aria-valuemin="0"
+           aria-valuemax="100">
+      </div>
     </div>
   </div>
-  <div>
-    {{uploadStatus.result}}
+  <div *ngIf="uploadStatus.result">
+    {{uploadStatus.result.fileName}} uploaded !
   </div>
 </div>
 
diff --git a/src/app/deposit/components/file-upload/file-upload.component.scss b/src/app/deposit/components/file-upload/file-upload.component.scss
index 5edc659b9..f1b858dfb 100644
--- a/src/app/deposit/components/file-upload/file-upload.component.scss
+++ b/src/app/deposit/components/file-upload/file-upload.component.scss
@@ -1,3 +1,7 @@
+@import "abstracts/variables";
+
+$progress-bar-height: 20px;
+
 .hide {
   display: none;
 }
@@ -5,3 +9,22 @@
 .file-name {
   padding: 0 20px;
 }
+
+.progressbar-wrapper {
+  background-color: $background-grey;
+  border-radius: calc(0.5 * #{$progress-bar-height});
+  height: $progress-bar-height;
+  text-align: center;
+}
+
+.progressbar {
+  background-color: $primary-color;
+  border-radius: calc(0.5 * #{$progress-bar-height});
+  display: list-item;
+  margin-top: calc(-1 * #{$progress-bar-height});
+  min-width: $progress-bar-height;
+}
+
+.progression-value {
+  z-index: 1;
+}
diff --git a/src/app/deposit/containers/file/file.container.html b/src/app/deposit/containers/file/file.container.html
index 7f66c667b..0219280a6 100644
--- a/src/app/deposit/containers/file/file.container.html
+++ b/src/app/deposit/containers/file/file.container.html
@@ -1,7 +1,9 @@
-<dlcm-file-upload *ngIf="readonly === false"
-                  [uploadStatus]="uploadStatus$ | async"
-                  (fileUploadEvent)="uploadFile($event)"
-></dlcm-file-upload>
+<div class="file-upload">
+  <dlcm-file-upload *ngIf="readonly === false"
+                    [uploadStatus]="uploadStatus$ | async"
+                    (fileUploadEvent)="uploadFile($event)"
+  ></dlcm-file-upload>
+</div>
 
 <dlcm-file-tree [listDepositDataFile]="listDataFile$ | async"
                 [readonly]="readonly"
diff --git a/src/app/deposit/containers/file/file.container.scss b/src/app/deposit/containers/file/file.container.scss
index e69de29bb..5b640f317 100644
--- a/src/app/deposit/containers/file/file.container.scss
+++ b/src/app/deposit/containers/file/file.container.scss
@@ -0,0 +1,3 @@
+.file-upload {
+  padding-bottom: 25px;
+}
diff --git a/src/app/deposit/containers/file/file.container.ts b/src/app/deposit/containers/file/file.container.ts
index 599c9eb19..3eb53fa62 100644
--- a/src/app/deposit/containers/file/file.container.ts
+++ b/src/app/deposit/containers/file/file.container.ts
@@ -31,6 +31,6 @@ export class FileContainer extends BaseDirective {
   }
 
   private uploadFile(file: File) {
-    this.store.dispatch(new DepositAction.SendData(this.parentResId, File));
+    this.store.dispatch(new DepositAction.SendData(this.parentResId, file));
   }
 }
diff --git a/src/app/deposit/deposit.action.ts b/src/app/deposit/deposit.action.ts
index b2fc91f30..a836b9a1a 100644
--- a/src/app/deposit/deposit.action.ts
+++ b/src/app/deposit/deposit.action.ts
@@ -169,7 +169,7 @@ export namespace DepositAction {
 
     // StringUtil.format(CrudAction.GetAllSubResource.abstractType, state, ApiResourceNameEnum.DATAFILE);
 
-    constructor(public parentId, public file) {
+    constructor(public parentId, public file: File) {
       // super(parentId, queryParameters);
     }
   }
diff --git a/src/app/deposit/deposit.state.ts b/src/app/deposit/deposit.state.ts
index 38b74c6de..1551ffa5f 100644
--- a/src/app/deposit/deposit.state.ts
+++ b/src/app/deposit/deposit.state.ts
@@ -188,8 +188,10 @@ export class DepositState extends CrudState<DepositsModel> {
   @Action(DepositAction.SendData)
   sendData(ctx: StateContext<DepositStateModel>, action: DepositAction.SendData): Observable<any> {
     const formData = new FormData();
-    formData.append("file", action.file);
-    return this.apiService.upload(`${PreIngestResourceApiEnum.deposits}/${action.parentId}/${ApiActionEnum.UL}`, action.file)
+    formData.append("file", action.file, action.file.name);
+    formData.append("category", "Package");
+    formData.append("type", "Metadata");
+    return this.apiService.upload(`${PreIngestResourceApiEnum.deposits}/${action.parentId}/${ApiActionEnum.UL}`, formData)
       .pipe(
         map((event) => {
           switch (event.type) {
@@ -203,6 +205,14 @@ export class DepositState extends CrudState<DepositsModel> {
               });
               return;
             case HttpEventType.Response:
+              ctx.dispatch(new DepositAction.GetAllSubResourceData(action.parentId));
+              ctx.patchState({
+                uploadStatus: {
+                  progress: null,
+                  status: "completed",
+                  result: event.body,
+                },
+              });
               return event.body;
             default:
               return `Unhandled event: ${event.type}`;
diff --git a/src/app/deposit/models/upload-file-status.model.ts b/src/app/deposit/models/upload-file-status.model.ts
index 11874aecb..83e8f9238 100644
--- a/src/app/deposit/models/upload-file-status.model.ts
+++ b/src/app/deposit/models/upload-file-status.model.ts
@@ -1,6 +1,8 @@
+import {DepositDataFileModel} from "@app/deposit/models/deposit-data-file.model";
+
 export interface UploadFileStatusModel {
   status?: string;
   progress?: number;
   message?: string;
-  result?: any;
+  result?: DepositDataFileModel;
 }
diff --git a/src/app/deposit/views/detail/detail.view.html b/src/app/deposit/views/detail/detail.view.html
index d2ef91722..03936c8d1 100644
--- a/src/app/deposit/views/detail/detail.view.html
+++ b/src/app/deposit/views/detail/detail.view.html
@@ -12,20 +12,24 @@
                  animationDuration="0ms"
   >
     <mat-tab [label]="'deposit.tab.details' | translate">
-      <dlcm-form-deposit *ngIf="(current$| async) != null"
-                         [model]="current$| async"
-                         [languages]="languages$ | async"
-                         [licenses]="licenses$ | async"
-                         [submissionPolicies]="submissionPolicies$ | async"
-                         [preservationPolicies]="preservationPolicies$ | async"
-                         [organizationalUnits]="organizationalUnits$ | async"
-                         [readonly]="true"
-      ></dlcm-form-deposit>
+      <div class="tab-content">
+        <dlcm-form-deposit *ngIf="(current$| async) != null"
+                           [model]="current$| async"
+                           [languages]="languages$ | async"
+                           [licenses]="licenses$ | async"
+                           [submissionPolicies]="submissionPolicies$ | async"
+                           [preservationPolicies]="preservationPolicies$ | async"
+                           [organizationalUnits]="organizationalUnits$ | async"
+                           [readonly]="true"
+        ></dlcm-form-deposit>
+      </div>
     </mat-tab>
     <mat-tab [label]="'deposit.tab.datafiles' | translate">
-      <dlcm-file-deposit [parentResId]="getResId()"
-                         [readonly]="true"
-      ></dlcm-file-deposit>
+      <div class="tab-content">
+        <dlcm-file-deposit [parentResId]="getResId()"
+                           [readonly]="true"
+        ></dlcm-file-deposit>
+      </div>
     </mat-tab>
   </mat-tab-group>
 
diff --git a/src/app/deposit/views/edit/edit.view.html b/src/app/deposit/views/edit/edit.view.html
index f61df1275..a50810fb8 100644
--- a/src/app/deposit/views/edit/edit.view.html
+++ b/src/app/deposit/views/edit/edit.view.html
@@ -4,18 +4,22 @@
                animationDuration="0ms"
 >
   <mat-tab [label]="'deposit.tab.details' | translate">
-    <dlcm-form-deposit *ngIf="(current$ | async)"
-                       [model]="current$ | async"
-                       [languages]="languages$ | async"
-                       [licenses]="licenses$ | async"
-                       [submissionPolicies]="submissionPolicies$ | async"
-                       [preservationPolicies]="preservationPolicies$ | async"
-                       [organizationalUnits]="organizationalUnits$ | async"
-                       (submitEvent)="update($event)"
-    ></dlcm-form-deposit>
+    <div class="tab-content">
+      <dlcm-form-deposit *ngIf="(current$ | async)"
+                         [model]="current$ | async"
+                         [languages]="languages$ | async"
+                         [licenses]="licenses$ | async"
+                         [submissionPolicies]="submissionPolicies$ | async"
+                         [preservationPolicies]="preservationPolicies$ | async"
+                         [organizationalUnits]="organizationalUnits$ | async"
+                         (submitEvent)="update($event)"
+      ></dlcm-form-deposit>
+    </div>
   </mat-tab>
   <mat-tab [label]="'deposit.tab.datafiles' | translate">
-    <dlcm-file-deposit [parentResId]="getResId()"
-    ></dlcm-file-deposit>
+    <div class="tab-content">
+      <dlcm-file-deposit [parentResId]="getResId()"
+      ></dlcm-file-deposit>
+    </div>
   </mat-tab>
 </mat-tab-group>
diff --git a/src/app/shared/services/api.service.ts b/src/app/shared/services/api.service.ts
index 86433ac99..94ce93716 100644
--- a/src/app/shared/services/api.service.ts
+++ b/src/app/shared/services/api.service.ts
@@ -186,12 +186,9 @@ export class ApiService {
     );
   }
 
-  public upload(path: string, data) {
-    let headers = this.defaultHeaders;
-    headers = headers.set("Content-Type", "multipart/form-data; boundary=HereGoes");
-    // headers = headers.set("Accept", "application/json");
-
-    return this.httpClient.post<any>(`${this.configuration.basePath}/${path}`, data, {
+  public upload(path: string, data: FormData) {
+    const headers = this.defaultHeaders;
+    return this.httpClient.post<any>(`${path}`, data, {
       reportProgress: true,
       observe: "events",
       headers,
diff --git a/src/app/shared/views/abstract-detail/abstract-detail.view.scss b/src/app/shared/views/abstract-detail/abstract-detail.view.scss
index 6442dddde..fd9fb1a0a 100644
--- a/src/app/shared/views/abstract-detail/abstract-detail.view.scss
+++ b/src/app/shared/views/abstract-detail/abstract-detail.view.scss
@@ -1,2 +1,6 @@
 @import "abstracts/variables";
 @import "abstracts/crud";
+
+.tab-content {
+  padding-top: 25px;
+}
diff --git a/src/app/shared/views/abstract-edit/abstract-edit.view.scss b/src/app/shared/views/abstract-edit/abstract-edit.view.scss
index e69de29bb..73cf8c3e7 100644
--- a/src/app/shared/views/abstract-edit/abstract-edit.view.scss
+++ b/src/app/shared/views/abstract-edit/abstract-edit.view.scss
@@ -0,0 +1,3 @@
+.tab-content {
+  padding-top: 25px;
+}
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 411371bd8..285536710 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -1,102 +1,105 @@
 {
-  "access": {
-    "organizationalUnitNotFound": "Unable to get data",
-    "table": {
-      "header": {
-        "accessLevel": "Access Level",
-        "organizationalUnit": "Organizational Unit",
-        "title": "Title",
-        "yearPublicationDate": "Publication Year"
-      }
-    }
-  },
-  "app": {
-    "login": {
-      "loginButton": "Log in",
-      "loginMessage": "You are currently not connected, please log in to continue."
-    },
-    "toolbar": {
-      "deposit": "Deposits",
-      "home": "Home",
-      "login": "Log in",
-      "logout": "Log out",
-      "organizationalUnit": "Organizational Units"
-    }
-  },
-  "breadcrumb": {
-    "access": {
-      "root": "Access",
-      "search": "Search"
-    },
-    "deposit": {
-      "create": "Create",
-      "detail": "Detail",
-      "edit": "Edit",
-      "list": "List",
-      "root": "Deposits"
-    },
-    "home": "Home",
-    "organizationalUnit": {
-      "create": "Create",
-      "detail": "Detail",
-      "edit": "Edit",
-      "list": "List",
-      "root": "Organizational Units"
-    }
-  },
-  "deposit": {
-    "accessLevel": "Access Level",
-    "author": "Author",
-    "collectionBegin": "Data Collection Start Date",
-    "collectionEnd": "Data Collection End Date",
-    "delete": "Delete",
-    "description": "Description",
-    "dialog": {
-      "delete": {
-        "cancel": "Cancel",
-        "confirm": "Yes",
-        "message": "Are you sure you want to delete the deposit '{{name}}'?",
-        "title": "Confirm deletion"
-      }
-    },
-    "edit": "Edit",
-    "file": {
-      "search": "Choose file",
-      "uploadButton": "Upload"
-    },
-    "hasEmbargo": "The deposit has an embargo",
-    "hint": {
-      "author": "Author"
-    },
-    "language": "Language",
-    "license": "License",
-    "new": "Create deposit",
-    "organizationUnit": "Organizational Unit",
-    "preservationPolicy": "Preservation Policy",
-    "publicationDate": "Publication Date",
-    "refresh": "Refresh",
-    "submissionPolicy": "Submission Policy",
-    "submit": "Submit",
-    "tab": {
-      "datafiles": "Data Files",
-      "details": "Details"
-    },
-    "table": {
-      "header": {
-        "creation": {
-          "when": "Created"
-        },
-        "lastUpdate": {
-          "when": "Last updated"
-        },
-        "publicationDate": "Publication date",
-        "status": "Status",
-        "title": "Title"
-      }
-    },
-    "title": "Title"
-  },
-  "error": {
+	"access": {
+		"organizationalUnitNotFound": "Unable to get data",
+		"table": {
+			"header": {
+				"accessLevel": "Access Level",
+				"organizationalUnit": "Organizational Unit",
+				"title": "Title",
+				"yearPublicationDate": "Publication Year"
+			}
+		}
+	},
+	"app": {
+		"login": {
+			"loginButton": "Log in",
+			"loginMessage": "You are currently not connected, please log in to continue."
+		},
+		"toolbar": {
+			"deposit": "Deposits",
+			"home": "Home",
+			"login": "Log in",
+			"logout": "Log out",
+			"organizationalUnit": "Organizational Units"
+		}
+	},
+	"breadcrumb": {
+		"access": {
+			"root": "Access",
+			"search": "Search"
+		},
+		"deposit": {
+			"create": "Create",
+			"detail": "Detail",
+			"edit": "Edit",
+			"list": "List",
+			"root": "Deposits"
+		},
+		"home": "Home",
+		"organizationalUnit": {
+			"create": "Create",
+			"detail": "Detail",
+			"edit": "Edit",
+			"list": "List",
+			"root": "Organizational Units"
+		}
+	},
+	"deposit": {
+		"accessLevel": "Access Level",
+		"author": "Author",
+		"collectionBegin": "Data Collection Start Date",
+		"collectionEnd": "Data Collection End Date",
+		"delete": "Delete",
+		"description": "Description",
+		"dialog": {
+			"delete": {
+				"cancel": "Cancel",
+				"confirm": "Yes",
+				"message": "Are you sure you want to delete the deposit '{{name}}'?",
+				"title": "Confirm deletion"
+			}
+		},
+		"edit": "Edit",
+		"file": {
+			"search": "Choose file",
+			"tree": {
+				"label": ""
+			},
+			"uploadButton": "Upload"
+		},
+		"hasEmbargo": "The deposit has an embargo",
+		"hint": {
+			"author": "Author"
+		},
+		"language": "Language",
+		"license": "License",
+		"new": "Create deposit",
+		"organizationUnit": "Organizational Unit",
+		"preservationPolicy": "Preservation Policy",
+		"publicationDate": "Publication Date",
+		"refresh": "Refresh",
+		"submissionPolicy": "Submission Policy",
+		"submit": "Submit",
+		"tab": {
+			"datafiles": "Data Files",
+			"details": "Details"
+		},
+		"table": {
+			"header": {
+				"creation": {
+					"when": "Created"
+				},
+				"lastUpdate": {
+					"when": "Last updated"
+				},
+				"publicationDate": "Publication date",
+				"status": "Status",
+				"title": "Title"
+			}
+		},
+		"title": "Title"
+	},
+	"error": {
 		"http": {
 			"forbidden": "You can't do this action",
 			"notFound": "The resource requested not exist",
@@ -111,51 +114,51 @@
 		}
 	},
 	"organizationalUnit": {
-    "closingDate": "Closing Date",
-    "delete": "Delete",
-    "description": "Description",
-    "dialog": {
-      "delete": {
-        "cancel": "Cancel",
-        "confirm": "Yes",
-        "message": "Are you sure you want to delete the organizational unit '{{name}}'?",
-        "title": "Confirm deletion"
-      }
-    },
-    "edit": "Edit",
-    "isEmpty": "Is Empty",
-    "name": "Name",
-    "new": "Create new organizational unit",
-    "open": "Open",
-    "openingDate": "Opening Date",
-    "refresh": "Refresh",
-    "submissionPolicy": "Submission policy",
-    "submit": "Submit",
-    "table": {
-      "header": {
-        "creation": {
-          "when": "Created"
-        },
-        "description": "Description",
-        "name": "Name"
-      }
-    }
-  },
-  "required": "This field is required",
-  "search": "Search",
-  "table": {
-    "nodata": "No data has been found",
-    "paginator": {
-      "firstPage": "First page",
-      "itemPerPage": "Items per page",
-      "lastPage": "Last page",
-      "nextPage": "Next page",
-      "ofLabel": "of",
-      "previousPage": "Previous page"
-    }
-  },
-  "tooltip": {
-    "other": "other",
-    "others": "others"
-  }
+		"closingDate": "Closing Date",
+		"delete": "Delete",
+		"description": "Description",
+		"dialog": {
+			"delete": {
+				"cancel": "Cancel",
+				"confirm": "Yes",
+				"message": "Are you sure you want to delete the organizational unit '{{name}}'?",
+				"title": "Confirm deletion"
+			}
+		},
+		"edit": "Edit",
+		"isEmpty": "Is Empty",
+		"name": "Name",
+		"new": "Create new organizational unit",
+		"open": "Open",
+		"openingDate": "Opening Date",
+		"refresh": "Refresh",
+		"submissionPolicy": "Submission policy",
+		"submit": "Submit",
+		"table": {
+			"header": {
+				"creation": {
+					"when": "Created"
+				},
+				"description": "Description",
+				"name": "Name"
+			}
+		}
+	},
+	"required": "This field is required",
+	"search": "Search",
+	"table": {
+		"nodata": "No data has been found",
+		"paginator": {
+			"firstPage": "First page",
+			"itemPerPage": "Items per page",
+			"lastPage": "Last page",
+			"nextPage": "Next page",
+			"ofLabel": "of",
+			"previousPage": "Previous page"
+		}
+	},
+	"tooltip": {
+		"other": "other",
+		"others": "others"
+	}
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 0f735f92a..55e7b7875 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1,102 +1,105 @@
 {
-	"access": {
-		"organizationalUnitNotFound": "Unable to get data",
-		"table": {
-			"header": {
-				"accessLevel": "Access Level",
-				"organizationalUnit": "Organizational Unit",
-				"title": "Title",
-				"yearPublicationDate": "Publication Year"
-			}
-		}
-	},
-	"app": {
-		"login": {
-			"loginButton": "Log in",
-			"loginMessage": "You are currently not connected, please log in to continue."
-		},
-		"toolbar": {
-			"deposit": "Deposits",
-			"home": "Home",
-			"login": "Log in",
-			"logout": "Log out",
-			"organizationalUnit": "Organizational Units"
-		}
-	},
-	"breadcrumb": {
-		"access": {
-			"root": "Access",
-			"search": "Search"
-		},
-		"deposit": {
-			"create": "Create",
-			"detail": "Detail",
-			"edit": "Edit",
-			"list": "List",
-			"root": "Deposits"
-		},
-		"home": "Home",
-		"organizationalUnit": {
-			"create": "Create",
-			"detail": "Detail",
-			"edit": "Edit",
-			"list": "List",
-			"root": "Organizational Units"
-		}
-	},
-	"deposit": {
-		"accessLevel": "Access Level",
-		"author": "Author",
-		"collectionBegin": "Data Collection Start Date",
-		"collectionEnd": "Data Collection End Date",
-		"delete": "Delete",
-		"description": "Description",
-		"dialog": {
-			"delete": {
-				"cancel": "Cancel",
-				"confirm": "Yes",
-				"message": "Are you sure you want to delete the deposit '{{name}}'?",
-				"title": "Confirm deletion"
-			}
-		},
-		"edit": "Edit",
-		"file": {
-			"search": "Choose file",
-			"uploadButton": "Upload"
-		},
-		"hasEmbargo": "The deposit has an embargo",
-		"hint": {
-			"author": "Author"
-		},
-		"language": "Language",
-		"license": "License",
-		"new": "Create deposit",
-		"organizationUnit": "Organizational Unit",
-		"preservationPolicy": "Preservation Policy",
-		"publicationDate": "Publication Date",
-		"refresh": "Refresh",
-		"submissionPolicy": "Submission Policy",
-		"submit": "Submit",
-		"tab": {
-			"datafiles": "Data Files",
-			"details": "Details"
-		},
-		"table": {
-			"header": {
-				"creation": {
-					"when": "Created"
-				},
-				"lastUpdate": {
-					"when": "Last updated"
-				},
-				"publicationDate": "Publication date",
-				"status": "Status",
-				"title": "Title"
-			}
-		},
-		"title": "Title"
-	},
-	"error": {
+  "access": {
+    "organizationalUnitNotFound": "Unable to get data",
+    "table": {
+      "header": {
+        "accessLevel": "Access Level",
+        "organizationalUnit": "Organizational Unit",
+        "title": "Title",
+        "yearPublicationDate": "Publication Year"
+      }
+    }
+  },
+  "app": {
+    "login": {
+      "loginButton": "Log in",
+      "loginMessage": "You are currently not connected, please log in to continue."
+    },
+    "toolbar": {
+      "deposit": "Deposits",
+      "home": "Home",
+      "login": "Log in",
+      "logout": "Log out",
+      "organizationalUnit": "Organizational Units"
+    }
+  },
+  "breadcrumb": {
+    "access": {
+      "root": "Access",
+      "search": "Search"
+    },
+    "deposit": {
+      "create": "Create",
+      "detail": "Detail",
+      "edit": "Edit",
+      "list": "List",
+      "root": "Deposits"
+    },
+    "home": "Home",
+    "organizationalUnit": {
+      "create": "Create",
+      "detail": "Detail",
+      "edit": "Edit",
+      "list": "List",
+      "root": "Organizational Units"
+    }
+  },
+  "deposit": {
+    "accessLevel": "Access Level",
+    "author": "Author",
+    "collectionBegin": "Data Collection Start Date",
+    "collectionEnd": "Data Collection End Date",
+    "delete": "Delete",
+    "description": "Description",
+    "dialog": {
+      "delete": {
+        "cancel": "Cancel",
+        "confirm": "Yes",
+        "message": "Are you sure you want to delete the deposit '{{name}}'?",
+        "title": "Confirm deletion"
+      }
+    },
+    "edit": "Edit",
+    "file": {
+      "search": "Choose file",
+      "tree": {
+        "label": "List of files :"
+      },
+      "uploadButton": "Upload"
+    },
+    "hasEmbargo": "The deposit has an embargo",
+    "hint": {
+      "author": "Author"
+    },
+    "language": "Language",
+    "license": "License",
+    "new": "Create deposit",
+    "organizationUnit": "Organizational Unit",
+    "preservationPolicy": "Preservation Policy",
+    "publicationDate": "Publication Date",
+    "refresh": "Refresh",
+    "submissionPolicy": "Submission Policy",
+    "submit": "Submit",
+    "tab": {
+      "datafiles": "Data Files",
+      "details": "Details"
+    },
+    "table": {
+      "header": {
+        "creation": {
+          "when": "Created"
+        },
+        "lastUpdate": {
+          "when": "Last updated"
+        },
+        "publicationDate": "Publication date",
+        "status": "Status",
+        "title": "Title"
+      }
+    },
+    "title": "Title"
+  },
+  "error": {
 		"http": {
 			"forbidden": "You can't do this action",
 			"notFound": "The resource requested not exist",
@@ -111,51 +114,51 @@
 		}
 	},
 	"organizationalUnit": {
-		"closingDate": "Closing Date",
-		"delete": "Delete",
-		"description": "Description",
-		"dialog": {
-			"delete": {
-				"cancel": "Cancel",
-				"confirm": "Yes",
-				"message": "Are you sure you want to delete the organizational unit '{{name}}'?",
-				"title": "Confirm deletion"
-			}
-		},
-		"edit": "Edit",
-		"isEmpty": "Is Empty",
-		"name": "Name",
-		"new": "Create new organizational unit",
-		"open": "Open",
-		"openingDate": "Opening Date",
-		"refresh": "Refresh",
-		"submissionPolicy": "Submission policy",
-		"submit": "Submit",
-		"table": {
-			"header": {
-				"creation": {
-					"when": "Created"
-				},
-				"description": "Description",
-				"name": "Name"
-			}
-		}
-	},
-	"required": "This field is required",
-	"search": "Search",
-	"table": {
-		"nodata": "No data has been found",
-		"paginator": {
-			"firstPage": "First page",
-			"itemPerPage": "Items per page",
-			"lastPage": "Last page",
-			"nextPage": "Next page",
-			"ofLabel": "of",
-			"previousPage": "Previous page"
-		}
-	},
-	"tooltip": {
-		"other": "other",
-		"others": "others"
-	}
+    "closingDate": "Closing Date",
+    "delete": "Delete",
+    "description": "Description",
+    "dialog": {
+      "delete": {
+        "cancel": "Cancel",
+        "confirm": "Yes",
+        "message": "Are you sure you want to delete the organizational unit '{{name}}'?",
+        "title": "Confirm deletion"
+      }
+    },
+    "edit": "Edit",
+    "isEmpty": "Is Empty",
+    "name": "Name",
+    "new": "Create new organizational unit",
+    "open": "Open",
+    "openingDate": "Opening Date",
+    "refresh": "Refresh",
+    "submissionPolicy": "Submission policy",
+    "submit": "Submit",
+    "table": {
+      "header": {
+        "creation": {
+          "when": "Created"
+        },
+        "description": "Description",
+        "name": "Name"
+      }
+    }
+  },
+  "required": "This field is required",
+  "search": "Search",
+  "table": {
+    "nodata": "No data has been found",
+    "paginator": {
+      "firstPage": "First page",
+      "itemPerPage": "Items per page",
+      "lastPage": "Last page",
+      "nextPage": "Next page",
+      "ofLabel": "of",
+      "previousPage": "Previous page"
+    }
+  },
+  "tooltip": {
+    "other": "other",
+    "others": "others"
+  }
 }
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 1d5af9b9e..197a182c1 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -1,102 +1,105 @@
 {
-	"access": {
-		"organizationalUnitNotFound": "Impossible d'obtenir les données",
-		"table": {
-			"header": {
-				"accessLevel": "Niveau d'Accès",
-				"organizationalUnit": "Unité Organisationnelle",
-				"title": "Titre",
-				"yearPublicationDate": "Année de Publication"
-			}
-		}
-	},
-	"app": {
-		"login": {
-			"loginButton": "Se connecter",
-			"loginMessage": "Vous n'êtes actuellement pas connecté, veuillez vous connecter afin de continuer."
-		},
-		"toolbar": {
-			"deposit": "Dépôts",
-			"home": "Accueil",
-			"login": "Connexion",
-			"logout": "Déconnexion",
-			"organizationalUnit": "Unités Organisationnelles"
-		}
-	},
-	"breadcrumb": {
-		"access": {
-			"root": "Accès",
-			"search": "Recherche"
-		},
-		"deposit": {
-			"create": "Création",
-			"detail": "Détail",
-			"edit": "Modifier",
-			"list": "Liste",
-			"root": "Dépôts"
-		},
-		"home": "Accueil",
-		"organizationalUnit": {
-			"create": "Création",
-			"detail": "Détail",
-			"edit": "Modifier",
-			"list": "Liste",
-			"root": "Unité organisationnelle"
-		}
-	},
-	"deposit": {
-		"accessLevel": "Niveau d'accès",
-		"author": "Auteur",
-		"collectionBegin": "Début de la collecte des données",
-		"collectionEnd": "Fin de la collecte des données",
-		"delete": "Supprimer",
-		"description": "Description",
-		"dialog": {
-			"delete": {
-				"cancel": "Annuler",
-				"confirm": "Oui",
-				"message": "Êtes-vous sûr de vouloir supprimer le dépôt '{{name}}'?",
-				"title": "Confirmer suppresion"
-			}
-		},
-		"edit": "Modifier",
-		"file": {
-			"search": "Choisir fichier",
-			"uploadButton": "Téléverser"
-		},
-		"hasEmbargo": "Le dépôt a un embargo",
-		"hint": {
-			"author": "Auteur"
-		},
-		"language": "Langue",
-		"license": "Licence",
-		"new": "Créer dépôt",
-		"organizationUnit": "Unité organisationnelle",
-		"preservationPolicy": "Politique de préservation",
-		"publicationDate": "Date de publication",
-		"refresh": "Rafraichir",
-		"submissionPolicy": "Politique de soumission",
-		"submit": "Envoyer",
-		"tab": {
-			"datafiles": "Fichiers",
-			"details": "Détails"
-		},
-		"table": {
-			"header": {
-				"creation": {
-					"when": "Date de création"
-				},
-				"lastUpdate": {
-					"when": "Dernière mise à jour"
-				},
-				"publicationDate": "Date de publication",
-				"status": "Statut",
-				"title": "Titre"
-			}
-		},
-		"title": "Titre"
-	},
-	"error": {
+  "access": {
+    "organizationalUnitNotFound": "Impossible d'obtenir les données",
+    "table": {
+      "header": {
+        "accessLevel": "Niveau d'Accès",
+        "organizationalUnit": "Unité Organisationnelle",
+        "title": "Titre",
+        "yearPublicationDate": "Année de Publication"
+      }
+    }
+  },
+  "app": {
+    "login": {
+      "loginButton": "Se connecter",
+      "loginMessage": "Vous n'êtes actuellement pas connecté, veuillez vous connecter afin de continuer."
+    },
+    "toolbar": {
+      "deposit": "Dépôts",
+      "home": "Accueil",
+      "login": "Connexion",
+      "logout": "Déconnexion",
+      "organizationalUnit": "Unités Organisationnelles"
+    }
+  },
+  "breadcrumb": {
+    "access": {
+      "root": "Accès",
+      "search": "Recherche"
+    },
+    "deposit": {
+      "create": "Création",
+      "detail": "Détail",
+      "edit": "Modifier",
+      "list": "Liste",
+      "root": "Dépôts"
+    },
+    "home": "Accueil",
+    "organizationalUnit": {
+      "create": "Création",
+      "detail": "Détail",
+      "edit": "Modifier",
+      "list": "Liste",
+      "root": "Unité organisationnelle"
+    }
+  },
+  "deposit": {
+    "accessLevel": "Niveau d'accès",
+    "author": "Auteur",
+    "collectionBegin": "Début de la collecte des données",
+    "collectionEnd": "Fin de la collecte des données",
+    "delete": "Supprimer",
+    "description": "Description",
+    "dialog": {
+      "delete": {
+        "cancel": "Annuler",
+        "confirm": "Oui",
+        "message": "Êtes-vous sûr de vouloir supprimer le dépôt '{{name}}'?",
+        "title": "Confirmer suppresion"
+      }
+    },
+    "edit": "Modifier",
+    "file": {
+      "search": "Choisir fichier",
+      "tree": {
+        "label": "Liste des fichiers :"
+      },
+      "uploadButton": "Téléverser"
+    },
+    "hasEmbargo": "Le dépôt a un embargo",
+    "hint": {
+      "author": "Auteur"
+    },
+    "language": "Langue",
+    "license": "Licence",
+    "new": "Créer dépôt",
+    "organizationUnit": "Unité organisationnelle",
+    "preservationPolicy": "Politique de préservation",
+    "publicationDate": "Date de publication",
+    "refresh": "Rafraichir",
+    "submissionPolicy": "Politique de soumission",
+    "submit": "Envoyer",
+    "tab": {
+      "datafiles": "Fichiers",
+      "details": "Détails"
+    },
+    "table": {
+      "header": {
+        "creation": {
+          "when": "Date de création"
+        },
+        "lastUpdate": {
+          "when": "Dernière mise à jour"
+        },
+        "publicationDate": "Date de publication",
+        "status": "Statut",
+        "title": "Titre"
+      }
+    },
+    "title": "Titre"
+  },
+  "error": {
     "http": {
       "forbidden": "Vous ne pouvez pas faire cette action",
       "notFound": "La ressource demandée n'existe pas",
@@ -111,51 +114,51 @@
     }
   },
   "organizationalUnit": {
-		"closingDate": "Date de fermeture",
-		"delete": "Supprimer",
-		"description": "Description",
-		"dialog": {
-			"delete": {
-				"cancel": "Annuler",
-				"confirm": "Oui",
-				"message": "Êtes-vous sûr de vouloir supprimer l'unité organisationnelle '{{name}}'?",
-				"title": "Confirmer suppression"
-			}
-		},
-		"edit": "Modifier",
-		"isEmpty": "Est vide",
-		"name": "Nom",
-		"new": "Créer nouvelle unité organisationnelle",
-		"open": "Ouvert",
-		"openingDate": "Date d'ouverture",
-		"refresh": "Rafraichir",
-		"submissionPolicy": "Politique de soumission",
-		"submit": "Envoyer",
-		"table": {
-			"header": {
-				"creation": {
-					"when": "Date de création"
-				},
-				"description": "Description",
-				"name": "Nom"
-			}
-		}
-	},
-	"required": "Ce champ est requis",
-	"search": "Recherche",
-	"table": {
-		"nodata": "Aucune donnée n'a été trouvé",
-		"paginator": {
-			"firstPage": "Première page",
-			"itemPerPage": "Eléments par page",
-			"lastPage": "Dernière page",
-			"nextPage": "Page suivante",
-			"ofLabel": "sur",
-			"previousPage": "Page précédente"
-		}
-	},
-	"tooltip": {
-		"other": "autre",
-		"others": "autres"
-	}
+    "closingDate": "Date de fermeture",
+    "delete": "Supprimer",
+    "description": "Description",
+    "dialog": {
+      "delete": {
+        "cancel": "Annuler",
+        "confirm": "Oui",
+        "message": "Êtes-vous sûr de vouloir supprimer l'unité organisationnelle '{{name}}'?",
+        "title": "Confirmer suppression"
+      }
+    },
+    "edit": "Modifier",
+    "isEmpty": "Est vide",
+    "name": "Nom",
+    "new": "Créer nouvelle unité organisationnelle",
+    "open": "Ouvert",
+    "openingDate": "Date d'ouverture",
+    "refresh": "Rafraichir",
+    "submissionPolicy": "Politique de soumission",
+    "submit": "Envoyer",
+    "table": {
+      "header": {
+        "creation": {
+          "when": "Date de création"
+        },
+        "description": "Description",
+        "name": "Nom"
+      }
+    }
+  },
+  "required": "Ce champ est requis",
+  "search": "Recherche",
+  "table": {
+    "nodata": "Aucune donnée n'a été trouvé",
+    "paginator": {
+      "firstPage": "Première page",
+      "itemPerPage": "Eléments par page",
+      "lastPage": "Dernière page",
+      "nextPage": "Page suivante",
+      "ofLabel": "sur",
+      "previousPage": "Page précédente"
+    }
+  },
+  "tooltip": {
+    "other": "autre",
+    "others": "autres"
+  }
 }
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 77de54a2e..54211da19 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -64,3 +64,7 @@ ul, li {
   margin-bottom: 0;
   list-style-type: none
 }
+
+.mat-tab-header-pagination {
+  visibility: hidden;
+}
-- 
GitLab