|
|
|
@ -1,17 +1,40 @@
|
|
|
|
|
<div class="md-form">
|
|
|
|
|
<i class="fa fa-user prefix grey-text"></i>
|
|
|
|
|
<input
|
|
|
|
|
#query
|
|
|
|
|
(keyup)="filter(query.value)"
|
|
|
|
|
type="text" class="form-control" placeholder="Cherchez...">
|
|
|
|
|
<div *ngFor="let folder of filterAllUserFolder">
|
|
|
|
|
<a (click)="openFolder(folder.path)">{{folder.name}}</a>
|
|
|
|
|
<p>
|
|
|
|
|
{{folder?.path}}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
|
|
|
|
|
<dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
<div *ngIf="mainFolder">
|
|
|
|
|
<p> Espace utilisé : {{sizeFile.toString() === '0' ? '0' : (sizeFile/ ( 1024 * 1024 ) | number : '1.2-2')}} / 30 Mo</p>
|
|
|
|
|
<div *ngIf="mainFolder" class="card d-print-inline-flex text-center topcard">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-4 card-text">
|
|
|
|
|
<p> Current Folder : {{mainFolder.name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 card-text">
|
|
|
|
|
<p> Used space : {{sizeFile.toString() === '0' ? '0' : (sizeFile/ ( 1024 * 1024 ) | number : '1.2-2')}} / 30 Mo</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-4 card-text">
|
|
|
|
|
<p> Path : {{mainFolder.path}}</p>
|
|
|
|
|
<p> Vous êtes dans le dossier : {{mainFolder.name}}</p>
|
|
|
|
|
<button type="button" class="btn btn-sm btn-warning" mdbTooltip="Retour à : {{mainFolder.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder.parent}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="topButtons">
|
|
|
|
|
<button type="button" class="btn btn-primary btn-sm" mdbTooltip="Back To : {{mainFolder.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder.parent}}</button>
|
|
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-sm btn-warning" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
|
|
|
|
|
<button type="button" class="btn btn-primary btn-sm" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
|
|
|
|
|
<i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
@ -25,12 +48,13 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<label class="btn btn-danger btn-sm" mdbTooltip="Choisir fichier" placement="top" >
|
|
|
|
|
<label class="btn btn-secondary btn-sm" mdbTooltip="Choose a file" placement="top" >
|
|
|
|
|
<i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
|
|
|
|
|
<input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
|
|
|
|
|
</label>
|
|
|
|
|
<button type="button" class="btn btn-sm btn-warning" mdbTooltip="Ajouter le fichier : {{fileChooseName}}" placement="top" (click)="upload()" >Ajouter le fichier {{fileChooseName}}</button>
|
|
|
|
|
<button type="button" class="btn btn-default btn-sm" mdbTooltip="Add File : {{fileChooseName}}" placement="top" (click)="upload()" >Ajouter le fichier {{fileChooseName}}</button>
|
|
|
|
|
<label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
@ -46,40 +70,66 @@
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr *ngFor="let folder of allUserFolder; let i = index;">
|
|
|
|
|
<td>
|
|
|
|
|
<button type="button" class="btn btn-sm btn-warning" mdbTooltip="Supprimer : {{folder.name}}" placement="top" (click)="deleteFolder(folder)"><i class="fa fa-close" aria-hidden="true"></i></button>
|
|
|
|
|
<button type="button" class="btn btn-sm btn-warning" mdbTooltip="Ouvrir : {{folder.name}}" placement="top" (click)="openFolder(folder.path)"><i class="fa fa-folder-open-o" aria-hidden="true"></i></button>
|
|
|
|
|
<!--<button type="button" class="btn btn-warning" (click)="renameFolder(folder)">Rename</button>-->
|
|
|
|
|
<td class="row">
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
<i class="fa fa-folder fa-2x" aria-hidden="true"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn-group d-print-inline-flex text-center">
|
|
|
|
|
|
|
|
|
|
<!--Dropdown primary-->
|
|
|
|
|
<div class="dropdown" dropdown>
|
|
|
|
|
|
|
|
|
|
<!--Trigger-->
|
|
|
|
|
<button dropdownToggle class="btn btn-primary y btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
|
|
|
|
|
<i class="fa fa fa-folder-open" aria-hidden="true"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!--Menu-->
|
|
|
|
|
<div class="dropdown-menu dropdown-primary">
|
|
|
|
|
<a class="dropdown-item" mdbTooltip="Ouvrir : {{folder.name}}" placement="top" (click)="openFolder(folder.path)">Open Folder</a>
|
|
|
|
|
<a class="dropdown-item" mdbTooltip="Supprimer : {{folder.name}}" placement="top" (click)="deleteFolder(folder)">Delete Folder</a>
|
|
|
|
|
<h6 class="dropdown-header">Rename</h6>
|
|
|
|
|
<div class="d-print-inline-flex text-center">
|
|
|
|
|
<input type="search" class="form-control col-xs-2" placeholder= "{{folder.name}}" [(ngModel)]="folder.name">
|
|
|
|
|
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{folder.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFolder(folder)">
|
|
|
|
|
<i class="fa fa-pencil prefix"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--/Dropdown primary-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="btn-group" dropdown>
|
|
|
|
|
<button type="button" dropdownToggle class="btn btn-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Déplacer : {{folder.name}}" placement="top" mdbWavesEffect>
|
|
|
|
|
<button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{folder.name}}" placement="top" mdbWavesEffect>
|
|
|
|
|
<i class="fa fa-arrows" aria-hidden="true"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="dropdown-menu">
|
|
|
|
|
<div class="dropdown-menu dropdown-primary">
|
|
|
|
|
<a class="dropdown-item" *ngFor="let folderDest of allUserAppFolder; let i = index;" (click)="moveFolder(folder, folderDest)">{{folderDest.name}}</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{folder.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFolder(folder)">
|
|
|
|
|
<i class="fa fa-pencil prefix"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<input type="search" class="form-control col-xs-2" placeholder= "{{folder.name}}" [(ngModel)]="folder.name">
|
|
|
|
|
<label>{{folder.name}}</label>
|
|
|
|
|
</td>
|
|
|
|
|
<!--<td>{{ folder.name }}</td>-->
|
|
|
|
|
<td>{{ folder.taille}} Mo</td>
|
|
|
|
|
<td>Folder</td>
|
|
|
|
|
<td>{{ folder.owner }}</td>
|
|
|
|
|
<i class="fa fa-folder-open-o" aria-hidden="true"></i>
|
|
|
|
|
<td><label>{{ folder.taille}} Mo</label></td>
|
|
|
|
|
<td><label>Folder</label></td>
|
|
|
|
|
<td><label>{{ folder.owner }}</label></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr *ngFor="let file of allUserFile; let i = index;">
|
|
|
|
|
<td>
|
|
|
|
|
<div class="d-print-inline-flex">
|
|
|
|
|
<td class="row">
|
|
|
|
|
<div class="col-md-4">
|
|
|
|
|
<i class="fa fa-file fa-2x" aria-hidden="true"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn-group d-print-inline-flex text-center">
|
|
|
|
|
<!--Dropdown primary-->
|
|
|
|
|
<div class="dropdown" dropdown>
|
|
|
|
|
|
|
|
|
|
<!--Trigger-->
|
|
|
|
|
<button dropdownToggle class="btn btn-sm btn-primary dropdown-toggle waves-light" type="button" mdbWavesEffect>
|
|
|
|
|
<button dropdownToggle class="btn btn-primary btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
|
|
|
|
|
<i class="fa fa-edit" aria-hidden="true"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
@ -87,10 +137,10 @@
|
|
|
|
|
<div class="dropdown-menu dropdown-primary">
|
|
|
|
|
<a class="dropdown-item" href="{{file.data}}" download="{{ file.name.toString()}}">Download</a>
|
|
|
|
|
<a class="dropdown-item" mdbTooltip="Supprimer : {{file.name}}" placement="top" (click)="deleteFile(file)">Delete</a>
|
|
|
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
|
|
|
<a class="dropdown-item" (click)="basicModal.show()" mdbWavesEffect>Preview</a>
|
|
|
|
|
<div class="divider dropdown-divider"></div>
|
|
|
|
|
<h6 class="dropdown-header">Rename</h6>
|
|
|
|
|
<div class="list-inline-item">
|
|
|
|
|
<div class="d-print-inline-flex text-center">
|
|
|
|
|
<input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">
|
|
|
|
|
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
|
|
|
|
|
<i class="fa fa-pencil prefix"></i>
|
|
|
|
@ -98,43 +148,22 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--/Dropdown primary-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="btn-group" dropdown>
|
|
|
|
|
<!--Trigger-->
|
|
|
|
|
<button type="button" dropdownToggle class="btn btn-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Déplacer : {{file.name}}" placement="top" mdbWavesEffect>
|
|
|
|
|
<i class="fa fa-arrows" aria-hidden="true"></i>
|
|
|
|
|
<!--/Modal-->
|
|
|
|
|
<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
|
|
|
|
|
<div class="modal-dialog modal-notify info" role="document">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
|
|
|
|
|
<span aria-hidden="true">×</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!--Menu-->
|
|
|
|
|
<div class="dropdown-menu dropdown-primary">
|
|
|
|
|
<a class="dropdown-item" *ngFor="let folder of allUserAppFolder; let i = index;" (click)="moveFile(file, folder)">{{folder.name}}</a>
|
|
|
|
|
</div>
|
|
|
|
|
<h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<!--<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
|
|
|
|
|
<i class="fa fa-pencil prefix"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">-->
|
|
|
|
|
<label>{{file.name}}</label>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--<td>{{ file.name }}</td>-->
|
|
|
|
|
<td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
|
|
|
|
|
<td>{{ file.type }}</td>
|
|
|
|
|
<td>{{ file.lastDate }}</td>
|
|
|
|
|
<div class="modal-body img-fluid">
|
|
|
|
|
<div *ngIf="file.type === ('image/jpeg')">
|
|
|
|
|
<img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
|
|
|
|
|
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="file.type === ('image/png')">
|
|
|
|
|
<img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
|
|
|
|
|
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="file.type === ('application/pdf')">
|
|
|
|
|
<!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
|
|
|
|
@ -193,6 +222,44 @@
|
|
|
|
|
</audio>
|
|
|
|
|
</vg-player>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
|
|
|
|
|
<!--<button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--/Modal-->
|
|
|
|
|
<!--/Dropdown primary-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="btn-group" dropdown>
|
|
|
|
|
<!--Trigger-->
|
|
|
|
|
<button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{file.name}}" placement="top" mdbWavesEffect>
|
|
|
|
|
<i class="fa fa-arrows" aria-hidden="true"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!--Menu-->
|
|
|
|
|
<div class="dropdown-menu dropdown-primary">
|
|
|
|
|
<a class="dropdown-item" *ngFor="let folder of allUserAppFolder; let i = index;" (click)="moveFile(file, folder)">{{folder.name}}</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
<!--<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
|
|
|
|
|
<i class="fa fa-pencil prefix"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">-->
|
|
|
|
|
<label>{{file.name}}</label>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<!--<td>{{ file.name }}</td>-->
|
|
|
|
|
<td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
|
|
|
|
|
<td>{{ file.type }}</td>
|
|
|
|
|
<td>{{ file.lastDate }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
|