Verified Commit 6b5d4d45 authored by Alex ORLUC's avatar Alex ORLUC

FEAT #11641 TIME 0:20 move add root folder

parent 51466ffe
<mat-nav-list> <div class="folderTools">
<div class="filter">
<plugin-autocomplete [size]="'small'" [labelPlaceholder]="lang.searchFolder" [routeDatas]="['/rest/autocomplete/folders']" [targetSearchKey]="'idToDisplay'" (triggerEvent)="goTo($event)"></plugin-autocomplete>
</div>
<div>
<button mat-icon-button color="accent" title="{{lang.addRootFolder}}" (click)="toggleInput()">
<mat-icon class="fa fa-plus"></mat-icon>
</button>
</div>
</div>
<mat-list *ngIf="createRootNode">
<mat-list-item role="listitem" class="rootFolder">
<form>
<mat-form-field floatLabel="never" style="width: 100%;">
<input matInput id="itemValue" #itemValue placeholder="{{lang.addRootFolder}}">
<button type="submit" matSuffix mat-icon-button (click)="createRoot(itemValue.value);createRootNode = !createRootNode" [disabled]="itemValue.value === ''">
<mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon>
</button>
</mat-form-field>
</form>
</mat-list-item>
</mat-list>
<mat-nav-list>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes --> <!-- This is the tree node template for leaf nodes -->
<mat-tree-node cdkDropList [id]="'folder-list-'+node.id" cdkDropListConnectedTo="['document-list','folder-list']" (cdkDropListDropped)="drop($event, node)" <mat-tree-node cdkDropList [id]="'folder-list-'+node.id" cdkDropListConnectedTo="['document-list','folder-list']" (cdkDropListDropped)="drop($event, node)" (cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] *matTreeNodeDef="let node"
(cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] *matTreeNodeDef="let node"
matTreeNodePadding matTreeNodePaddingIndent="20px"> matTreeNodePadding matTreeNodePaddingIndent="20px">
<!-- use a disabled button to provide padding for tree leaf --> <!-- use a disabled button to provide padding for tree leaf -->
<button class="expandButton" mat-icon-button disabled></button> <button class="expandButton" mat-icon-button disabled></button>
<a mat-list-item disableRipple class="folderTreeItem" [class.selectedFolder]="node.selected" (mouseenter)="showAction(node)" <a mat-list-item disableRipple class="folderTreeItem" [class.selectedFolder]="node.selected" (mouseenter)="showAction(node)" (mouseleave)="hideAction(node)" (click)="selectFolder(node)">
(mouseleave)="hideAction(node)" (click)="selectFolder(node)">
<span style="width: 90%;overflow: hidden;text-overflow: ellipsis;"> <span style="width: 90%;overflow: hidden;text-overflow: ellipsis;">
<span class="treeLabel" [title]="node.label" [class.drag]="node.drag"> <span class="treeLabel" [title]="node.label" [class.drag]="node.drag">
<i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> {{node.label}} <i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> {{node.label}}
</span> </span>
</span> </span>
<button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();showAction(node);checkRights(node);" <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation();showAction(node);checkRights(node);" [disabled]="!node.showAction" style="position: absolute;right:0px;">
[disabled]="!node.showAction" style="position: absolute;right:0px;">
<mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon> <mat-icon *ngIf="node.showAction" class="folderAction fa fa-ellipsis-v"></mat-icon>
<span *ngIf="!node.showAction" class="countResources" [class.empty]="node.countResources === 0"> <span *ngIf="!node.showAction" class="countResources" [class.empty]="node.countResources === 0">
{{node.countResources}} {{node.countResources}}
...@@ -31,23 +50,20 @@ ...@@ -31,23 +50,20 @@
<form> <form>
<mat-form-field floatLabel="never" style="width: 100%;padding-left: 10px;padding-right: 10px;"> <mat-form-field floatLabel="never" style="width: 100%;padding-left: 10px;padding-right: 10px;">
<input matInput id="itemValue" #itemValue placeholder="{{lang.addFolder}}..."> <input matInput id="itemValue" #itemValue placeholder="{{lang.addFolder}}...">
<button type="submit" matSuffix mat-icon-button (click)="saveNode(node, itemValue.value)" <button type="submit" matSuffix mat-icon-button (click)="saveNode(node, itemValue.value)" [disabled]="itemValue.value === ''">
[disabled]="itemValue.value === ''">
<mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon> <mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
</form> </form>
</mat-tree-node> </mat-tree-node>
<!-- This is the tree node template for expandable nodes --> <!-- This is the tree node template for expandable nodes -->
<mat-tree-node cdkDropList [id]="'folder-list-'+node.id" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event, node)" <mat-tree-node cdkDropList [id]="'folder-list-'+node.id" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event, node)" (cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] *matTreeNodeDef="let node;when: hasChild"
(cdkDropListEntered)="dragEnter(node)" (cdkDropListExited)="node.drag=false" [@hideShow] *matTreeNodeDef="let node;when: hasChild"
matTreeNodePadding matTreeNodePaddingIndent="20px"> matTreeNodePadding matTreeNodePaddingIndent="20px">
<button class="expandButton" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> <button class="expandButton" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror fa {{treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'}}"> <mat-icon class="mat-icon-rtl-mirror fa {{treeControl.isExpanded(node) ? 'fa-chevron-down' : 'fa-chevron-right'}}">
</mat-icon> </mat-icon>
</button> </button>
<a mat-list-item disableRipple class="folderTreeItem" [class.selectedFolder]="node.selected" (mouseleave)="hideAction(node)" <a mat-list-item disableRipple class="folderTreeItem" [class.selectedFolder]="node.selected" (mouseleave)="hideAction(node)" (mouseenter)="showAction(node)" (click)="selectFolder(node)">
(mouseenter)="showAction(node)" (click)="selectFolder(node)">
<span style="width: 90%;overflow: hidden;text-overflow: ellipsis;"> <span style="width: 90%;overflow: hidden;text-overflow: ellipsis;">
<span class="treeLabel" [title]="node.label" [class.drag]="node.drag"> <span class="treeLabel" [title]="node.label" [class.drag]="node.drag">
<i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> {{node.label}} <i class="fa fa-users private" *ngIf="node.public" title="{{lang.sharedFolder}}"></i> {{node.label}}
...@@ -67,22 +83,9 @@ ...@@ -67,22 +83,9 @@
</a> </a>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
</mat-nav-list> </mat-nav-list>
<mat-nav-list> <!--<mat-nav-list>
<mat-list-item role="listitem" disableRipple (click)="toggleInput()" class="more"> <mat-list-item role="listitem" disableRipple (click)="toggleInput()" class="more">
<mat-icon class="fa {{createRootNode ? 'fa-chevron-up' : 'fa-chevron-down'}}"></mat-icon>&nbsp;{{createRootNode ? lang.less : lang.more}} <mat-icon class="fa {{createRootNode ? 'fa-chevron-up' : 'fa-chevron-down'}}"></mat-icon>&nbsp;{{createRootNode ? lang.less : lang.more}}
</mat-list-item> </mat-list-item>
</mat-nav-list> </mat-nav-list>-->
<mat-list *ngIf="createRootNode">
<mat-list-item role="listitem" class="rootFolder">
<form>
<mat-form-field floatLabel="never" style="width: 100%;">
<input matInput id="itemValue" #itemValue placeholder="{{lang.addRootFolder}}">
<button type="submit" matSuffix mat-icon-button (click)="createRoot(itemValue.value);createRootNode = !createRootNode"
[disabled]="itemValue.value === ''">
<mat-icon class="fa fa-check" color="accent" [title]="lang.add"></mat-icon>
</button>
</mat-form-field>
</form>
</mat-list-item>
</mat-list>
\ No newline at end of file
...@@ -116,3 +116,12 @@ button:disabled { ...@@ -116,3 +116,12 @@ button:disabled {
font-size: 12px; font-size: 12px;
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
} }
.folderTools {
display: flex;
justify-content: center;
align-items: baseline;
.filter {
flex: 1;
}
}
\ No newline at end of file
...@@ -445,4 +445,8 @@ export class FolderTreeComponent implements OnInit { ...@@ -445,4 +445,8 @@ export class FolderTreeComponent implements OnInit {
}), }),
).subscribe(); ).subscribe();
} }
goTo(folder: any) {
this.router.navigate(["/folders/" + folder.id]);
}
} }
...@@ -4,6 +4,5 @@ ...@@ -4,6 +4,5 @@
<i class="fa fa-folder"></i>&nbsp;{{lang.folders}} <i class="fa fa-folder"></i>&nbsp;{{lang.folders}}
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<plugin-autocomplete [size]="'small'" [labelPlaceholder]="lang.searchFolder" [routeDatas]="['/rest/autocomplete/folders']" [targetSearchKey]="'idToDisplay'" (triggerEvent)="goTo($event)"></plugin-autocomplete>
<folder-tree #folderTree [selectedId]="id" (refreshDocList)="refreshDocList()"></folder-tree> <folder-tree #folderTree [selectedId]="id" (refreshDocList)="refreshDocList()"></folder-tree>
</mat-expansion-panel> </mat-expansion-panel>
import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { LANG } from '../../translate.component'; import { LANG } from '../../translate.component';
import { FolderTreeComponent } from '../folder-tree.component'; import { FolderTreeComponent } from '../folder-tree.component';
import { Router } from '@angular/router';
declare function $j(selector: any): any; declare function $j(selector: any): any;
...@@ -19,7 +18,7 @@ export class PanelFolderComponent implements OnInit { ...@@ -19,7 +18,7 @@ export class PanelFolderComponent implements OnInit {
@Output('refreshEvent') refreshEvent = new EventEmitter<string>(); @Output('refreshEvent') refreshEvent = new EventEmitter<string>();
constructor(private router: Router) { } constructor() { }
ngOnInit(): void { } ngOnInit(): void { }
...@@ -42,8 +41,4 @@ export class PanelFolderComponent implements OnInit { ...@@ -42,8 +41,4 @@ export class PanelFolderComponent implements OnInit {
refreshFoldersTree() { refreshFoldersTree() {
this.folderTree.getFolders(); this.folderTree.getFolders();
} }
goTo(folder: any) {
this.router.navigate(["/folders/" + folder.id]);
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment