diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts index 00125d46a6e2cdd50b99c768fe4c1516a3abc6c1..0ab8026e5c30fc572fe1336c0c8a1d13f2b508c0 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 0000000000000000000000000000000000000000..595f12c5f306092a6d79882b92cbf3880dafdac4 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..d5ee7d222475fe7260d2651b6adee6d9b5eabf14 --- /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 9685e06e2e8bce9c851912a76e52435acd24385b..19f4fb0407669f39a97a645a53766f9a2fb78683 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 fa3cca7c56e53b00b87b166f1687ec310e083350..946d284f6eede1b68bf92d16f6791cad055c3641 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 315f8f3f33e5202996e0618e18c4cb43cfc7098d..d20c7a085a69957d3a96fb57c0b153271cc19674 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 ecaa8edb18fcabad29fe1ddea7004a354060ce1a..7cfa6109d04be24944a79ca19546d1388bc2b4b9 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 0dd2e47d79aad2a48abf285f97fc4483e0a6db72..defdb4025b17d03fa1bd3b9c1601461c9fee2197 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>();