From 3501cd635f9e2ffcb8982e807bf6a3a3acb38c14 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 11 Mar 2020 17:43:01 +0100
Subject: [PATCH] FEAT #13526 TIME 1:30 front refactoring create folder
---
src/frontend/app/app.module.ts | 5 ++-
.../folder-create-modal.component.html | 14 ++++++
.../folder-create-modal.component.scss | 0
.../folder-create-modal.component.ts | 44 +++++++++++++++++++
.../folder-pinned/folder-pinned.component.ts | 7 ---
.../app/folder/folder-tree.component.html | 38 ++++++++++++----
.../app/folder/folder-tree.component.ts | 10 +++--
.../folder/panel/panel-folder.component.html | 21 +++++----
.../folder/panel/panel-folder.component.ts | 1 -
9 files changed, 110 insertions(+), 30 deletions(-)
create mode 100644 src/frontend/app/folder/folder-create-modal/folder-create-modal.component.html
create mode 100644 src/frontend/app/folder/folder-create-modal/folder-create-modal.component.scss
create mode 100644 src/frontend/app/folder/folder-create-modal/folder-create-modal.component.ts
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
index 00125d46a6e..0ab8026e5c3 100755
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@@ -108,6 +108,7 @@ import { DocumentViewerModalComponent } from './viewer/modal/document-viewer-mod
import { SentResourceListComponent } from './sentResource/sent-resource-list.component';
import { SentResourcePageComponent } from './sentResource/sent-resource-page/sent-resource-page.component';
import { SentNumericPackagePageComponent } from './sentResource/sent-numeric-package-page/sent-numeric-package-page.component';
+import { FolderCreateModalComponent } from './folder/folder-create-modal/folder-create-modal.component';
@@ -205,6 +206,7 @@ import { SentNumericPackagePageComponent } from './sentResource/sent-numeric-pac
SentResourcePageComponent,
PrintedFolderModalComponent,
SentNumericPackagePageComponent,
+ FolderCreateModalComponent
],
entryComponents: [
InfoChangePasswordModalComponent,
@@ -249,7 +251,8 @@ import { SentNumericPackagePageComponent } from './sentResource/sent-numeric-pac
DocumentViewerModalComponent,
SentResourcePageComponent,
PrintedFolderModalComponent,
- SentNumericPackagePageComponent
+ SentNumericPackagePageComponent,
+ FolderCreateModalComponent
],
providers: [ FiltersListService, FoldersService, ActionsService, PrivilegeService ],
bootstrap: [ AppComponent ]
diff --git a/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.html b/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.html
new file mode 100644
index 00000000000..595f12c5f30
--- /dev/null
+++ b/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.html
@@ -0,0 +1,14 @@
+<div class="mat-dialog-content-container">
+ <h1 mat-dialog-title>{{lang.addFolder}}</h1>
+ <div mat-dialog-content>
+ <mat-form-field appearance="outline">
+ <input type="text" matInput [(ngModel)]="folderName" placeholder="Nom du dossier">
+ </mat-form-field>
+ </div>
+ <span class="divider-modal"></span>
+ <div mat-dialog-actions class="actions">
+ <button mat-raised-button mat-button color="primary" [disabled]="loading || folderName === ''"
+ (click)="onSubmit()">{{lang.validate}}</button>
+ <button mat-raised-button mat-button [disabled]="loading" [mat-dialog-close]="">{{lang.cancel}}</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.scss b/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.ts b/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.ts
new file mode 100644
index 00000000000..d5ee7d22247
--- /dev/null
+++ b/src/frontend/app/folder/folder-create-modal/folder-create-modal.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { LANG } from '../../translate.component';
+import { NotificationService } from '../../notification.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { HttpClient } from '@angular/common/http';
+import { tap, finalize, catchError } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+@Component({
+ templateUrl: "folder-create-modal.component.html",
+ styleUrls: ['folder-create-modal.component.scss'],
+})
+export class FolderCreateModalComponent implements OnInit {
+
+ lang: any = LANG;
+ loading: boolean = false;
+ folderName: string = '';
+
+ constructor(
+ public http: HttpClient,
+ private notify: NotificationService,
+ public dialogRef: MatDialogRef<FolderCreateModalComponent>
+ ) { }
+
+ ngOnInit(): void {
+
+ }
+
+ onSubmit() {
+ this.loading = true;
+ this.http.post("../../rest/folders", { label: this.folderName }).pipe(
+ tap(() => {
+ this.notify.success(this.lang.folderAdded);
+ this.dialogRef.close('success');
+ }),
+ finalize(() => this.loading = false),
+ catchError((err) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ }
+
+}
diff --git a/src/frontend/app/folder/folder-pinned/folder-pinned.component.ts b/src/frontend/app/folder/folder-pinned/folder-pinned.component.ts
index 9685e06e2e8..19f4fb04076 100644
--- a/src/frontend/app/folder/folder-pinned/folder-pinned.component.ts
+++ b/src/frontend/app/folder/folder-pinned/folder-pinned.component.ts
@@ -2,17 +2,13 @@ import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LANG } from '../../translate.component';
-import { NotificationService } from '../../notification.service';
-import { MatDialog } from '@angular/material';
import { Subscription } from 'rxjs';
-import { Router } from '@angular/router';
import { FoldersService } from '../folders.service';
@Component({
selector: 'folder-pinned',
templateUrl: "folder-pinned.component.html",
styleUrls: ['folder-pinned.component.scss'],
- providers: [NotificationService],
})
export class FolderPinnedComponent implements OnInit {
@@ -22,9 +18,6 @@ export class FolderPinnedComponent implements OnInit {
constructor(
public http: HttpClient,
- private notify: NotificationService,
- private dialog: MatDialog,
- private router: Router,
public foldersService: FoldersService
) {
// Event after process action
diff --git a/src/frontend/app/folder/folder-tree.component.html b/src/frontend/app/folder/folder-tree.component.html
index fa3cca7c56e..946d284f6ee 100644
--- a/src/frontend/app/folder/folder-tree.component.html
+++ b/src/frontend/app/folder/folder-tree.component.html
@@ -6,8 +6,8 @@
(triggerEvent)="goTo($event)" appearance="outline"></plugin-autocomplete>
</div>
<div>
- <button mat-icon-button color="primary" title="{{lang.addRootFolder}}" (click)="createFolderRoot()" [disabled]="autocomplete.getValue() === '' || autocomplete.getValue() === null">
- <mat-icon class="fa fa-plus"></mat-icon>
+ <button mat-icon-button color="primary" title="{{lang.addRootFolder}}" (click)="openCreateFolderModal()">
+ <mat-icon class="fas fa-folder-plus"></mat-icon>
</button>
</div>
</div>
@@ -25,7 +25,8 @@
<button class="expandButton" mat-icon-button disabled></button>
<a mat-list-item disableRipple class="folderTreeItem"
[class.selectedFolder]="foldersService.getCurrentFolder().id == node.id"
- (mouseenter)="showAction(node)" (mouseleave)="hideAction(node)" (click)="foldersService.goToFolder(node)">
+ (mouseenter)="showAction(node)" (mouseleave)="hideAction(node)"
+ (click)="foldersService.goToFolder(node)">
<span style="width: 90%;overflow: hidden;text-overflow: ellipsis;">
<span class="treeLabel" [title]="node.label" [class.drag]="node.drag">
<i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i>
@@ -85,7 +86,8 @@
</button>
<a mat-list-item disableRipple class="folderTreeItem"
[class.selectedFolder]="foldersService.getCurrentFolder().id == node.id"
- (mouseleave)="hideAction(node)" (mouseenter)="showAction(node)" (click)="foldersService.goToFolder(node)">
+ (mouseleave)="hideAction(node)" (mouseenter)="showAction(node)"
+ (click)="foldersService.goToFolder(node)">
<span style="width: 90%;overflow: hidden;text-overflow: ellipsis;">
<span class="treeLabel" [title]="node.label" [class.drag]="node.drag">
<i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i>
@@ -110,11 +112,29 @@
</button>
<button mat-menu-item [disabled]="createItemNode || !node.canAdd || node.level > 6"
- (click)="addNewItem(node)">{{lang.addSubFolder}}</button>
- <button mat-menu-item (click)="deleteNode(node)"
- [disabled]="!node.canDelete">{{lang.delete}}</button>
+ (click)="addNewItem(node)">
+ <mat-icon style="width: auto;height: auto;">
+ <i class="fas fa-folder-plus"></i>
+ </mat-icon>
+ <span>{{lang.addSubFolder}}</span>
+ </button>
+ <button mat-menu-item (click)="deleteNode(node)" [disabled]="!node.canDelete">
+ <mat-icon style="width: auto;height: auto;">
+ <i class="far fa-trash-alt"></i>
+ </mat-icon>
+ <span>
+ {{lang.delete}}
+ </span>
+ </button>
<button mat-menu-item (click)="openFolderAdmin(node)"
- [disabled]="!node.edition">{{lang.properties}}</button>
+ [disabled]="!node.edition">
+ <mat-icon style="width: auto;height: auto;">
+ <i class="fas fa-sliders-h"></i>
+ </mat-icon>
+ <span>
+ {{lang.properties}}
+ </span>
+ </button>
</mat-menu>
</a>
</mat-tree-node>
@@ -125,4 +145,4 @@
<div class="loading">
<mat-spinner></mat-spinner>
</div>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/frontend/app/folder/folder-tree.component.ts b/src/frontend/app/folder/folder-tree.component.ts
index 315f8f3f33e..d20c7a085a6 100644
--- a/src/frontend/app/folder/folder-tree.component.ts
+++ b/src/frontend/app/folder/folder-tree.component.ts
@@ -16,6 +16,7 @@ import { FoldersService } from './folders.service';
import { FormControl } from '@angular/forms';
import { PluginAutocomplete } from '../../plugins/autocomplete/autocomplete.component';
import { HeaderService } from '../../service/header.service';
+import { FolderCreateModalComponent } from './folder-create-modal/folder-create-modal.component';
declare function $j(selector: any): any;
/**
@@ -297,16 +298,17 @@ export class FolderTreeComponent implements OnInit {
this.createItemNode = false;
}
- createFolderRoot() {
- this.http.post("../../rest/folders", { label: this.autocomplete.getValue() }).pipe(
+ openCreateFolderModal() {
+ this.dialogRef = this.dialog.open(FolderCreateModalComponent, { panelClass: 'maarch-modal' });
+ this.dialogRef.afterClosed().pipe(
+ filter((data: string) => data === 'success'),
tap(() => {
this.autocomplete.resetValue();
this.getFolders();
this.foldersService.getPinnedFolders();
}),
- tap(() => this.notify.success(this.lang.folderAdded)),
catchError((err) => {
- this.notify.handleErrors(err);
+ this.notify.handleSoftErrors(err);
return of(false);
})
).subscribe();
diff --git a/src/frontend/app/folder/panel/panel-folder.component.html b/src/frontend/app/folder/panel/panel-folder.component.html
index ecaa8edb18f..7cfa6109d04 100644
--- a/src/frontend/app/folder/panel/panel-folder.component.html
+++ b/src/frontend/app/folder/panel/panel-folder.component.html
@@ -1,14 +1,19 @@
-<mat-expansion-panel class="folderList" [expanded]="!foldersService.getLoader()">
+<mat-expansion-panel class="folderList" expanded *ngIf="foldersService.getPinnedList().length > 0">
<mat-expansion-panel-header>
<mat-panel-title>
- <i class="fa fa-folder panelIconMenu"></i> {{lang.folders}}
+ <i class="fa fa-thumbtack panelIconMenu"></i> {{lang.myPinnedFolder}}
</mat-panel-title>
</mat-expansion-panel-header>
<folder-pinned></folder-pinned>
- <button mat-button class="showFolderTree" (click)="showTree = !showTree">
- <span>
- <mat-icon class="fa {{showTree ? 'fa-chevron-up' : 'fa-chevron-down'}}"></mat-icon> {{showTree ? lang.hideFoldersTree : lang.showFoldersTree}}
- </span>
- </button>
- <folder-tree #folderTree *ngIf="showTree" [selectedId]="id" (refreshDocList)="refreshDocList()"></folder-tree>
</mat-expansion-panel>
+<mat-divider></mat-divider>
+<mat-expansion-panel class="folderList" [expanded]="false">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <i class="fa fa-folder panelIconMenu"></i> {{lang.folders}}
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <ng-template matExpansionPanelContent>
+ <folder-tree #folderTree [selectedId]="id" (refreshDocList)="refreshDocList()"></folder-tree>
+ </ng-template>
+</mat-expansion-panel>
\ No newline at end of file
diff --git a/src/frontend/app/folder/panel/panel-folder.component.ts b/src/frontend/app/folder/panel/panel-folder.component.ts
index 0dd2e47d79a..defdb4025b1 100644
--- a/src/frontend/app/folder/panel/panel-folder.component.ts
+++ b/src/frontend/app/folder/panel/panel-folder.component.ts
@@ -18,7 +18,6 @@ export class PanelFolderComponent implements OnInit {
lang: any = LANG;
@Input('selectedId') id: number;
- @Input('showTree') showTree: boolean = false;
@ViewChild('folderTree', { static: false }) folderTree: FolderTreeComponent;
@Output('refreshEvent') refreshEvent = new EventEmitter<string>();
--
GitLab