diff --git a/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.html b/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.html
new file mode 100644
index 0000000000000000000000000000000000000000..734e863526acd20c6636ae5c81626c6faa62f392
--- /dev/null
+++ b/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.html
@@ -0,0 +1,45 @@
+<div class="grid">
+ <div class="image-wrapper">
+ <div class="image-container"
+ [matBadge]="archive.files"
+ >
+ <img [src]="defaultImageArchive"
+ alt="image"
+ class="image"
+ >
+ </div>
+ </div>
+
+ <dlcm-shared-organizational-unit-name-container class="orgunit"
+ [id]="archive.organizationalUnitId"
+ ></dlcm-shared-organizational-unit-name-container>
+ <span class="title">{{archive.title}}</span>
+ <div class="detailed-infos">
+ <span class="year">
+ <dlcm-shared-icon [iconName]="iconNameEnum.creationDate"></dlcm-shared-icon>
+ {{archive.yearPublicationDate}}
+ </span>
+ <span class="access-level"
+ [class]="colorAccessLevel"
+ >
+ <dlcm-shared-icon [iconName]="accessLevelIconName"></dlcm-shared-icon>
+ {{enumUtil.getLabel(accessEnumTranslate, archive.accessLevel) | translate}}
+ </span>
+ <span class="size">
+ <dlcm-shared-icon [iconName]="iconNameEnum.foldersView"></dlcm-shared-icon>
+ {{archive.size}}
+ </span>
+ </div>
+
+
+ <div class="button-wrapper">
+ <button mat-flat-button
+ color="primary"
+ solidifyShortCuts
+ (click)="download($event)"
+ >
+ <dlcm-shared-icon [iconName]="iconNameEnum.download"></dlcm-shared-icon>
+ {{labelTranslateEnum.download | translate}}
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.scss b/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6b193e9441aed8a9214b6aa2fa29e7e42ce89826
--- /dev/null
+++ b/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.scss
@@ -0,0 +1,88 @@
+@import "../sass/abstracts/variables";
+@import "../sass/abstracts/mixins";
+
+:host {
+ display: block;
+ border: 1px solid $extra-light-grey;
+ padding: 10px 20px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .grid {
+ display: grid;
+ text-align: center;
+ justify-content: center;
+
+ .image-wrapper {
+ display: grid;
+ justify-content: center;
+ padding: 20px 0;
+
+ .image-container {
+ height: 36px;
+ width: 100px;
+
+ .image {
+ height: 100%;
+ }
+ }
+ }
+
+ .orgunit {
+ color: $light-grey;
+ font-weight: bold;
+ overflow: hidden;
+ margin-bottom: 5px;
+
+ ::ng-deep > * {
+ @include truncate-with-ellipsis;
+ }
+ }
+
+ .title {
+ font-weight: bold;
+ margin-bottom: 10px;
+ @include truncate-with-ellipsis;
+ }
+
+ .detailed-infos {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 10px;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 10px;
+
+ .access-level {
+ &.red {
+ color: $red;
+ }
+
+ &.orange {
+ color: $warning;
+ }
+
+ &.green {
+ color: $green-sweet;
+ }
+ }
+
+ .year,
+ .access-level,
+ .size {
+ display: grid;
+ grid-template-columns: min-content max-content;
+ grid-gap: 10px;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .button-wrapper {
+ margin-top: 10px;
+ text-align: center;
+ }
+ }
+}
diff --git a/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.ts b/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b61550ff0bed7ee175899d05d826507204c0931
--- /dev/null
+++ b/src/app/features/home/components/presentationals/home-archive-tile/home-archive-tile.presentational.ts
@@ -0,0 +1,93 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ HostListener,
+ Input,
+ OnInit,
+ Output,
+} from "@angular/core";
+import {SharedAbstractPresentational} from "@app/shared/components/presentationals/shared-abstract/shared-abstract.presentational";
+import {Enums} from "@enums";
+import {environment} from "@environments/environment";
+import {Archive} from "@home/models/archive.model";
+import {IconNameEnum} from "@shared/enums/icon-name.enum";
+import {MetadataUtil} from "@shared/utils/metadata.util";
+import {
+ BehaviorSubject,
+ Observable,
+} from "rxjs";
+import {
+ EnumUtil,
+ KeyValue,
+ ObservableUtil,
+} from "solidify-frontend";
+
+@Component({
+ selector: "dlcm-home-archive-tile",
+ templateUrl: "./home-archive-tile.presentational.html",
+ styleUrls: ["./home-archive-tile.presentational.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomeArchiveTilePresentational extends SharedAbstractPresentational implements OnInit {
+ @Input()
+ archive: Archive;
+
+ private readonly _downloadBS: BehaviorSubject<Archive | undefined> = new BehaviorSubject<Archive | undefined>(undefined);
+ @Output("downloadChange")
+ readonly downloadObs: Observable<Archive | undefined> = ObservableUtil.asObservable(this._downloadBS);
+
+ private readonly _selectBS: BehaviorSubject<Archive | undefined> = new BehaviorSubject<Archive | undefined>(undefined);
+ @Output("selectChange")
+ readonly selectObs: Observable<Archive | undefined> = ObservableUtil.asObservable(this._selectBS);
+
+ @HostListener("click", ["$event"]) click(mouseEvent: MouseEvent): void {
+ this._selectBS.next(this.archive);
+ }
+
+ defaultImageArchive: string = `assets/themes/${environment.theme}/toolbar-header-image.svg`;
+
+ accessLevelIconName: IconNameEnum;
+ colorAccessLevel: "red" | "orange" | "green";
+
+ accessEnumTranslate: KeyValue[] = Enums.Deposit.AccessEnumTranslate;
+
+ get metadataUtil(): typeof MetadataUtil {
+ return MetadataUtil;
+ }
+
+ get enumUtil(): typeof EnumUtil {
+ return EnumUtil;
+ }
+
+ constructor() {
+ super();
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ this._computeAccessLevelIcon();
+ }
+
+ private _computeAccessLevelIcon(): void {
+ switch (this.archive.accessLevel) {
+ case Enums.Deposit.AccessEnum.RESTRICTED:
+ this.accessLevelIconName = IconNameEnum.accessLevelRestricted;
+ this.colorAccessLevel = "orange";
+ break;
+ case Enums.Deposit.AccessEnum.CLOSED:
+ this.accessLevelIconName = IconNameEnum.accessLevelClosed;
+ this.colorAccessLevel = "red";
+ break;
+ case Enums.Deposit.AccessEnum.PUBLIC:
+ default:
+ this.accessLevelIconName = IconNameEnum.accessLevelPublic;
+ this.colorAccessLevel = "green";
+ break;
+ }
+ }
+
+ download(mouseEvent: MouseEvent): void {
+ mouseEvent.stopPropagation();
+ this._downloadBS.next(this.archive);
+ }
+}
diff --git a/src/app/features/home/components/routables/home-detail/home-detail.routable.html b/src/app/features/home/components/routables/home-detail/home-detail.routable.html
index d07c741f97e2a4526e4a264e6705a4af3b4ead43..471e34dcb0158bea08f7a4a25763e8908825ad69 100644
--- a/src/app/features/home/components/routables/home-detail/home-detail.routable.html
+++ b/src/app/features/home/components/routables/home-detail/home-detail.routable.html
@@ -19,7 +19,6 @@
>
<dlcm-home-archive-detail *ngIf="(currentObs| async) != null"
[archiveMetadata]="currentObs| async"
- [searchScope]="searchScopeObs | async"
[isLoadingPrepareDownload]="isLoadingPrepareDownloadObs | async"
[isLoggedIn]="isLoggedInObs | async"
(downloadChange)="download($event)"
diff --git a/src/app/features/home/components/routables/home-detail/home-detail.routable.ts b/src/app/features/home/components/routables/home-detail/home-detail.routable.ts
index 875f406a493f5f9abb06aaea29243ae0c4637a97..a95691d24912abb6ad1e28469dd0688bc587ea59 100644
--- a/src/app/features/home/components/routables/home-detail/home-detail.routable.ts
+++ b/src/app/features/home/components/routables/home-detail/home-detail.routable.ts
@@ -17,8 +17,10 @@ import {HomeHelper} from "@home/helpers/home.helper";
import {HomeService} from "@home/services/home.service";
import {Store} from "@ngxs/store";
import {GetShortDoiWrapper} from "@shared/components/presentationals/shared-doi-menu/shared-doi-menu.presentational";
-import {AppRoutesEnum} from "@shared/enums/routes.enum";
-import {RouteUtil} from "@shared/utils/route.util";
+import {
+ AppRoutesEnum,
+ RoutesEnum,
+} from "@shared/enums/routes.enum";
import {Observable} from "rxjs";
import {
MARK_AS_TRANSLATABLE,
@@ -83,7 +85,7 @@ export class HomeDetailRoutable extends SharedAbstractPresentational implements
back(): void {
const search = this._store.selectSnapshot(HomeState.search);
- HomeHelper.navigateToSearch(this._store, search, RouteUtil.generateFullUrlFromActivatedRouteNormal(this.route.parent));
+ HomeHelper.navigateToSearch(this._store, search, RoutesEnum.homeSearch);
}
getMessageBackButtonToTranslate(): string {
diff --git a/src/app/features/home/components/routables/home-search/home-search.routable.html b/src/app/features/home/components/routables/home-search/home-search.routable.html
index 2adcc855509204a26da8741084d76cd24d25405b..18de8eddf89210fb7b3cd2353562fab2ad6bbcb8 100644
--- a/src/app/features/home/components/routables/home-search/home-search.routable.html
+++ b/src/app/features/home/components/routables/home-search/home-search.routable.html
@@ -9,23 +9,51 @@
[value]="searchValueInUrl"
></dlcm-shared-search>
<span class="result-matching"><span class="number-result">{{totalObs | async}}</span> {{labelTranslateEnum.resultsFound | translate}}</span>
+ <div class="display-mode">
+ <dlcm-shared-icon class="icon"
+ [matTooltip]="labelTranslateEnum.listView | translate"
+ [iconName]="iconNameEnum.listView"
+ [class.is-active]="viewModeEnum.list === viewMode"
+ (click)="switchViewMode(viewModeEnum.list)"
+ ></dlcm-shared-icon>
+ <dlcm-shared-icon class="icon"
+ [matTooltip]="labelTranslateEnum.tilesView | translate"
+ [iconName]="iconNameEnum.tilesView"
+ [class.is-active]="viewModeEnum.tiles === viewMode"
+ (click)="switchViewMode(viewModeEnum.tiles)"
+ ></dlcm-shared-icon>
+ </div>
</div>
<div [dlcmSpinner]="(isLoadingObs | async)"
class="wrapper"
>
- <dlcm-shared-data-table *ngIf="(listAdaptedObs | async).length > 0;"
- [isLoading]="isLoadingObs | async"
- [columns]="columns"
- [actions]="actions"
- [datas]="listAdaptedObs | async"
- [skipInitialQuery]="true"
- [stickyTopPosition]="0"
- [queryParameters]="queryParametersObs | async"
- (queryParametersChange)="onQueryParametersEvent($event)"
- (selectChange)="showDetail($event)"
- [dlcmDataTest]="dataTestEnum.homeDataTableSearch"
- ></dlcm-shared-data-table>
+ <ng-template [ngIf]="viewMode === viewModeEnum.list">
+ <dlcm-shared-data-table *ngIf="(listAdaptedObs | async).length > 0;"
+ [isLoading]="isLoadingObs | async"
+ [columns]="columns"
+ [actions]="actions"
+ [datas]="listAdaptedObs | async"
+ [skipInitialQuery]="true"
+ [stickyTopPosition]="0"
+ [queryParameters]="queryParametersObs | async"
+ (queryParametersChange)="onQueryParametersEvent($event)"
+ (selectChange)="showDetail($event)"
+ [dlcmDataTest]="dataTestEnum.homeDataTableSearch"
+ ></dlcm-shared-data-table>
+ </ng-template>
+
+ <div *ngIf="viewMode === viewModeEnum.tiles"
+ class="tiles-container"
+ >
+ <!-- <dlcm-shared-paginator></dlcm-shared-paginator>-->
+
+ <dlcm-home-archive-tile *ngFor="let archive of (listAdaptedObs | async)"
+ [archive]="archive"
+ (downloadChange)="download($event.archiveMetadata)"
+ (selectChange)="showDetail($event)"
+ ></dlcm-home-archive-tile>
+ </div>
<div *ngIf="!(isLoadingObs | async) && (listAdaptedObs | async).length === 0 && !(searchObs | async | isNullOrUndefined) && (searchObs | async |
isNonEmptyString)"
>
diff --git a/src/app/features/home/components/routables/home-search/home-search.routable.scss b/src/app/features/home/components/routables/home-search/home-search.routable.scss
index 2f7fd4885ffb44a9a2eaf884b55a35ffbee6be06..551eee325572671d10ff56aeb6b0913ae2a648c3 100644
--- a/src/app/features/home/components/routables/home-search/home-search.routable.scss
+++ b/src/app/features/home/components/routables/home-search/home-search.routable.scss
@@ -24,7 +24,7 @@
.right-part {
.toolbar-content {
display: grid;
- grid-template-columns: max(400px) 1fr;
+ grid-template-columns: max(400px) max-content max-content;
grid-gap: 30px;
align-items: center;
@@ -36,7 +36,30 @@
color: $primary-color;
}
}
+
+ .display-mode {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 10px;
+
+ .icon {
+ cursor: pointer;
+
+ &.is-active {
+ cursor: initial;
+ color: $primary-color;
+ }
+ }
+ }
}
+ .wrapper {
+
+ .tiles-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 300px);
+ grid-gap: 20px;
+ }
+ }
}
}
diff --git a/src/app/features/home/components/routables/home-search/home-search.routable.ts b/src/app/features/home/components/routables/home-search/home-search.routable.ts
index 191d6f99920c4112cb5d5e67f2de11771f01f170..0900342b2058b6a05a7999c4dada70c9e885cb72 100644
--- a/src/app/features/home/components/routables/home-search/home-search.routable.ts
+++ b/src/app/features/home/components/routables/home-search/home-search.routable.ts
@@ -69,6 +69,12 @@ export class HomeSearchRoutable extends SharedAbstractPresentational implements
listAdaptedBS: BehaviorSubject<Archive[]> = new BehaviorSubject([]);
listAdaptedObs: Observable<Archive[]> = this.listAdaptedBS.asObservable();
+ viewMode: ViewModeEnum = ViewModeEnum.list;
+
+ get viewModeEnum(): typeof ViewModeEnum {
+ return ViewModeEnum;
+ }
+
columns: DataTableColumns[] = [
{
field: "organizationalUnitId",
@@ -149,7 +155,7 @@ export class HomeSearchRoutable extends SharedAbstractPresentational implements
];
searchValueInUrl: string = StringUtil.stringEmpty;
- fileSizePipe: FileSizePipe;
+ fileSizePipe: FileSizePipe = new FileSizePipe();
constructor(private store: Store,
private translate: TranslateService,
@@ -164,7 +170,6 @@ export class HomeSearchRoutable extends SharedAbstractPresentational implements
super.ngOnInit();
this.subscribe(this.observeSearchQueryParam());
this.subscribe(this.transformListArchive());
- this.fileSizePipe = new FileSizePipe();
}
private transformListArchive(): Observable<ArchiveMetadata[]> {
@@ -179,14 +184,14 @@ export class HomeSearchRoutable extends SharedAbstractPresentational implements
const newList: Archive[] = [];
listArchives.forEach((archive: ArchiveMetadata) => {
- console.error("SIZE : ", MetadataUtil.getSize(archive.metadata));
+ const size = MetadataUtil.getSize(archive.metadata);
newList.push({
resId: archive.resId,
organizationalUnitId: MetadataUtil.getOrganizationalUnitResId(archive.metadata),
title: MetadataUtil.getTitle(archive.metadata),
yearPublicationDate: MetadataUtil.getPublicationYear(archive.metadata),
accessLevel: MetadataUtil.getAccessLevel(archive.metadata) as Enums.Deposit.AccessEnum,
- size: this.fileSizePipe.transform(MetadataUtil.getSize(archive.metadata)),
+ size: isNullOrUndefined(size) ? undefined : this.fileSizePipe.transform(size),
files: MetadataUtil.getFileNumber(archive.metadata),
archiveMetadata: archive,
});
@@ -244,4 +249,13 @@ export class HomeSearchRoutable extends SharedAbstractPresentational implements
this._oauthService.initAuthorizationCodeFlow(AppRoutesEnum.deposit);
}
}
+
+ switchViewMode(viewMode: ViewModeEnum): void {
+ this.viewMode = viewMode;
+ }
}
+
+enum ViewModeEnum {
+ list,
+ tiles
+}
\ No newline at end of file
diff --git a/src/app/features/home/home.module.ts b/src/app/features/home/home.module.ts
index 445bd38ca9ecf3fc04ce038b03c27b47a3f8ed7b..155c1c2e845dc2d06e2541bf1d0a7a9721580580 100644
--- a/src/app/features/home/home.module.ts
+++ b/src/app/features/home/home.module.ts
@@ -12,6 +12,7 @@ import {HomeOrganizationalUnitState} from "@app/features/home/stores/organizatio
import {SharedModule} from "@app/shared/shared.module";
import {ArchiveRestrictedRequestAccessDialog} from "@home/components/dialogs/archive-restricted-request-access/archive-restricted-request-access.dialog";
import {HomeArchiveDetailPresentational} from "@home/components/presentationals/home-archive-form/home-archive-detail.presentational";
+import {HomeArchiveTilePresentational} from "@home/components/presentationals/home-archive-tile/home-archive-tile.presentational";
import {HomeCarouselPresentational} from "@home/components/presentationals/home-carousel/home-carousel.presentational";
import {HomeMainButtonPresentational} from "@home/components/presentationals/home-main-button/home-main-button.presentational";
import {HomeMainPageContentPresentational} from "@home/components/presentationals/home-main-page-content/home-main-page-content.presentational";
@@ -47,6 +48,7 @@ const presentationals = [
HomeCarouselPresentational,
HomeMainButtonPresentational,
HomeSearchFacetPresentational,
+ HomeArchiveTilePresentational,
];
const services = [
HomeService,
diff --git a/src/app/shared/enums/icon-name.enum.ts b/src/app/shared/enums/icon-name.enum.ts
index c7f4a1415570dfd8fe433a6782ab1cb17b09b8ea..b24511c8cc954a7fec9d4d513d7f91ae9900e5c0 100644
--- a/src/app/shared/enums/icon-name.enum.ts
+++ b/src/app/shared/enums/icon-name.enum.ts
@@ -133,4 +133,9 @@ export enum IconNameEnum {
approveDisposal,
approveDisposalByOrgUnit,
extendRetention,
+ listView,
+ tilesView,
+ accessLevelRestricted,
+ accessLevelClosed,
+ accessLevelPublic,
}
diff --git a/src/app/shared/enums/label-translate.enum.ts b/src/app/shared/enums/label-translate.enum.ts
index 3366b611b382f6ba2b0f207801e58ae8438dfd56..6a8721caf23e534d4e00e20acda37df29d1e095d 100644
--- a/src/app/shared/enums/label-translate.enum.ts
+++ b/src/app/shared/enums/label-translate.enum.ts
@@ -300,6 +300,8 @@ export class LabelTranslateEnum {
static resultsFound: string = MARK_AS_TRANSLATABLE("general.label.resultsFound");
static refineResearch: string = MARK_AS_TRANSLATABLE("general.label.refineResearch");
static clearFilters: string = MARK_AS_TRANSLATABLE("general.label.clearFilters");
+ static listView: string = MARK_AS_TRANSLATABLE("general.label.listView");
+ static tilesView: string = MARK_AS_TRANSLATABLE("general.label.tilesView");
static hide: string = MARK_AS_TRANSLATABLE("general.link.hide");
static show: string = MARK_AS_TRANSLATABLE("general.link.show");
diff --git a/src/app/shared/helpers/icon.helper.ts b/src/app/shared/helpers/icon.helper.ts
index f1e714e42ddc7e8a95b471eed2e77484246337ad..e36f4e13f256ed5de7dae691d0ad6f0bd6e3ceeb 100644
--- a/src/app/shared/helpers/icon.helper.ts
+++ b/src/app/shared/helpers/icon.helper.ts
@@ -678,5 +678,30 @@ export class IconHelper {
lib: IconLibEnum.materialIcon,
icon: "schedule",
},
+ {
+ name: IconNameEnum.listView,
+ lib: IconLibEnum.materialIcon,
+ icon: "view_list",
+ },
+ {
+ name: IconNameEnum.tilesView,
+ lib: IconLibEnum.materialIcon,
+ icon: "view_module",
+ },
+ {
+ name: IconNameEnum.accessLevelRestricted,
+ lib: IconLibEnum.image,
+ icon: "restricted.svg",
+ },
+ {
+ name: IconNameEnum.accessLevelClosed,
+ lib: IconLibEnum.image,
+ icon: "closed.svg",
+ },
+ {
+ name: IconNameEnum.accessLevelPublic,
+ lib: IconLibEnum.image,
+ icon: "public.svg",
+ },
];
}
diff --git a/src/app/shared/utils/route.util.ts b/src/app/shared/utils/route.util.ts
index a054c64db3704027533c95a2e4a4eb20a338ad0e..66a51197b75a07a75da89b56e6bf188e070f0b09 100644
--- a/src/app/shared/utils/route.util.ts
+++ b/src/app/shared/utils/route.util.ts
@@ -7,6 +7,7 @@ import {AppRoutesEnum} from "@shared/enums/routes.enum";
export class RouteUtil {
static generateFullUrlFromActivatedRouteNormal(route: ActivatedRoute): string[] {
+ debugger;
return this.generateFullUrlFromActivatedRouteSnapshot(route.snapshot);
}
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 47c3e4229be3b5e2169acefddebe0857fdd33e1a..9392d1fbd960b6efb3c52f0b4ab8d78399a65845 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -1111,6 +1111,7 @@
"licenses": "Lizenzen",
"list": "Liste",
"listInvalidCharacter": "Die folgenden Sonderzeichen sind in Dateinamen nicht erlaubt: ~ ! @ # $ % ^ & * ( ) ` ; < > ? , [ ] { } \\\\",
+ "listView": "Listenansicht",
"maintainer": "Pfleger",
"mandatory": "Obligatorisch",
"matchingPeople": "Passende Personen",
@@ -1193,6 +1194,7 @@
"submittedDate": "Eingereichtes Datum",
"theDepositHasAnEmbargo": "Die Einlage unterliegt einem Embargo",
"themes": "Themen",
+ "tilesView": "Kacheln-Ansicht",
"timeToKeep": "Zeit zu halten",
"title": "Titel",
"token": "Zeichen",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 3e5d5b11510c4536ed99b6f8082e23b5af882697..1ebd8629ccea9846110a9718fc1d8dd60d947bfe 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1111,6 +1111,7 @@
"licenses": "Licenses",
"list": "List",
"listInvalidCharacter": "The following special characters are not allowed in file names: ~ ! @ # $ % ^ & * ( ) ` ; < > ? , [ ] { } \\\\",
+ "listView": "List view",
"maintainer": "Maintainer",
"mandatory": "Mandatory",
"matchingPeople": "Matching people",
@@ -1193,6 +1194,7 @@
"submittedDate": "Submitted date",
"theDepositHasAnEmbargo": "The deposit has an embargo",
"themes": "Themes",
+ "tilesView": "Tiles view",
"timeToKeep": "Time to keep",
"title": "Title",
"token": "Token",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 9ca28ca40b333a0729b65c90649530938b42760c..2da552280ea51dd8e21752b878559a1fdc5fb58f 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -1111,6 +1111,7 @@
"licenses": "Licences",
"list": "Liste",
"listInvalidCharacter": "Les caractères spéciaux suivants ne sont pas autorisés dans les noms de fichiers: ~ ! @ # $ % ^ & * ( ) ` ; < > ? , [ ] { } \\\\",
+ "listView": "Vue liste",
"maintainer": "Mainteneur",
"mandatory": "Obligatoire",
"matchingPeople": "Personnes pouvant correspondre",
@@ -1193,6 +1194,7 @@
"submittedDate": "Date de soumission",
"theDepositHasAnEmbargo": "Le dépôt est soumis à un embargo",
"themes": "Thèmes",
+ "tilesView": "Vue tuiles",
"timeToKeep": "Temps de préservation",
"title": "Titre",
"token": "Jeton",
diff --git a/src/assets/images/closed.svg b/src/assets/images/closed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..771dfc185ba15e989869261baaf424884934159d
--- /dev/null
+++ b/src/assets/images/closed.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1"
+ id="Layer_1"
+ xmlns="http://www.w3.org/2000/svg"
+ x="0px"
+ y="0px"
+ viewBox="0 0 24 24"
+ fill="#f44336"
+ style="enable-background:new 0 0 24 24;"
+ xml:space="preserve"
+>
+<style type="text/css">
+ .st0 {
+ fill: none;
+ }
+
+ .st1 {
+ fill: #FFFFFF;
+ }
+</style>
+ <path class="st0"
+ d="M0,0h24v24H0V0z"
+ />
+ <path d="M12,1L3,5v6c0,5.5,3.8,10.7,9,12c5.2-1.3,9-6.5,9-12V5L12,1z"/>
+ <path class="st1"
+ d="M17,8l-1-1l-4,4L8,7L7,8l4,4l-4,4l1,1l4-4l4,4l1-1l-4-4L17,8z"
+ />
+</svg>
diff --git a/src/assets/images/public.svg b/src/assets/images/public.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8e12f313a858ac0a68187f9462c8a6e3fadc0c18
--- /dev/null
+++ b/src/assets/images/public.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ height="24"
+ viewBox="0 0 24 24"
+ width="24"
+ fill="#58cb4c"
+>
+ <path d="M0 0h24v24H0z"
+ fill="none"
+ />
+ <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/restricted.svg b/src/assets/images/restricted.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fb109979ea48be8f606c472fcf197db1896fbe28
--- /dev/null
+++ b/src/assets/images/restricted.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1"
+ id="Layer_1"
+ xmlns="http://www.w3.org/2000/svg"
+ x="0px"
+ y="0px"
+ viewBox="0 0 24 24"
+ style="enable-background:new 0 0 24 24;"
+ fill="#ffa500"
+ xml:space="preserve"
+>
+<style type="text/css">
+ .st0 {
+ fill: none;
+ }
+
+ .st1 {
+ fill: #FFFFFF;
+ }
+</style>
+ <path class="st0"
+ d="M0,0h24v24H0V0z"
+ />
+ <path d="M12,1L3,5v6c0,5.5,3.8,10.7,9,12c5.2-1.3,9-6.5,9-12V5L12,1z"/>
+ <g>
+ <path class="st1"
+ d="M10.7,16.3c0-0.4,0.1-0.7,0.3-1c0.2-0.2,0.6-0.3,1-0.3c0.4,0,0.7,0.1,1,0.3c0.2,0.2,0.3,0.5,0.3,1
+ c0,0.4-0.1,0.7-0.3,0.9s-0.6,0.3-1,0.3c-0.4,0-0.7-0.1-1-0.3S10.7,16.7,10.7,16.3z M12.9,13.8h-1.8l-0.4-7.4h2.6L12.9,13.8z"
+ />
+</g>
+</svg>