@ -1,36 +1,45 @@
< 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 >
< 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 * 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 >
< / 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" >
< i class = "fa fa-plus-circle" aria-hidden = "true" > < i class = "fa fa-folder-o" aria-hidden = "true" > < / i > < / i >
< / button >
< 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 >
< div class = "md-form input-group" * ngIf = "isClickCreateFolder === true" >
< div class = "input-group-btn" >
< button class = "btn btn-primary btn-sm waves-light" mdbTooltip = "Créer : {{inputCreateFolder}}" placement = "top" type = "button" mdbWavesEffect ( click ) = " createFolder ( ) " > Créer< / button >
< div class = "md-form input-group" * ngIf = "isClickCreateFolder === true" >
< div class = "input-group-btn" >
< button class = "btn btn-primary btn-sm waves-light" mdbTooltip = "Créer : {{inputCreateFolder}}" placement = "top" type = "button" mdbWavesEffect ( click ) = " createFolder ( ) " > Créer< / button >
< / div >
< input type = "search" class = "form-control" placeholder = "Nom du nouveau dossier..." [ ( ngModel ) ] = " inputCreateFolder " >
< / div >
< input type = "search" class = "form-control" placeholder = "Nom du nouveau dossier..." [ ( ngModel ) ] = " inputCreateFolder " >
< / div >
< label class = "btn btn-danger btn-sm" mdbTooltip = "Choisir fichier" 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 >
< label * ngIf = "fileChooseName !== ''" > Vous avez choisi : {{fileChooseName}}< / label >
< 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-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 +55,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> -->
< 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 >
< i class = "fa fa-arrows" aria-hidden = "true" > < / i >
< / button >
< div class = "dropdown-menu" >
< a class = "dropdown-item" * ngFor = "let folderDest of allUserAppFolder; let i = index;" ( click ) = " moveFolder ( folder , folderDest ) " > {{folderDest.name}}< / a >
< 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-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 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 +122,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,12 +133,95 @@
< / div >
< / div >
< / div >
<!-- /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 >
< h4 class = "modal-title w-100" id = "myModalLabel" > Preview< / h4 >
< / div >
< div class = "modal-body img-fluid" >
< div * ngIf = "file.type === ('image/jpeg')" >
< 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" width = "350" height = "200" >
< / div >
< div * ngIf = "file.type === ('application/pdf')" >
<!-- <i class="fa fa - file - pdf - o" aria - hidden="true"></i> -->
< object [ data ] = file . urlSafe type = "application/pdf"
width="350" height="200" typemustmatch>
< / object >
< / div >
< div * ngIf = "file.type === ('video/mp4')" >
<!-- <i class="fa fa - file - movie - o" aria - hidden="true"></i> -->
< vg-player style = "height: 200px; width: 350px" >
< video [ vgMedia ] = " media " # media id = "singleVideo" preload = "auto" controls >
< source [ src ] = file . urlSafe type = "video/mp4" >
< / video >
< / vg-player >
< / div >
< div * ngIf = "file.type === ('text/plain')" >
<!-- <div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
< div > {{test}}< / div >
< a href = "../../../public/{{file._id + getStringExtention(file)}}" > show me< / a > -->
< object [ data ] = file . urlSafe type = "text/plain"
width="350" height="200" typemustmatch>
< / object >
< / div >
< div * ngIf = "file.type === ''" >
< i class = "fa fa-file-o fa-5x" aria-hidden = "true" width = "350" height = "200" > < / i >
<!-- <object [data]=file.url type="text/plain"
width="350" height="200" typemustmatch>
< / object > -->
<!-- <div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
< div > {{test}}< / div >
< a href = "../../../public/{{file._id + getStringExtention(file)}}" > show me< / a > -->
< / div >
< div * ngIf = "(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))" >
<!-- <i class="fa fa - file - audio - o" aria - hidden="true"></i> -->
< vg-player style = "height: 50px; width: 350px" >
< vg-controls >
< vg-play-pause > < / vg-play-pause >
< vg-time-display vgProperty = "current" vgFormat = "mm:ss" > < / vg-time-display >
< vg-scrub-bar >
< vg-scrub-bar-current-time > < / vg-scrub-bar-current-time >
< vg-scrub-bar-buffering-time > < / vg-scrub-bar-buffering-time >
< / vg-scrub-bar >
< vg-time-display vgProperty = "left" vgFormat = "mm:ss" > < / vg-time-display >
< vg-time-display vgProperty = "total" vgFormat = "mm:ss" > < / vg-time-display >
< vg-mute > < / vg-mute >
< vg-fullscreen > < / vg-fullscreen >
< / vg-controls >
< audio # media [ vgMedia ] = " media " id = "myAudio" preload = "auto" >
< source [ src ] = file . urlSafe type = "audio/mp3" >
< / 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-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip = "Déplacer : {{file.name}}" placement = "top" mdbWavesEffect >
< button type = "button" dropdownToggle class = "btn btn-s econdary 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 >
@ -123,76 +241,10 @@
< 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 * ngIf = "file.type === ('image/jpeg')" >
< img [ src ] = file . urlSafe class = "img-fluid flex-center" width = "350" height = "200" >
< / div >
< div * ngIf = "file.type === ('image/png')" >
< img [ src ] = file . urlSafe class = "img-fluid flex-center" width = "350" height = "200" >
< / div >
< div * ngIf = "file.type === ('application/pdf')" >
<!-- <i class="fa fa - file - pdf - o" aria - hidden="true"></i> -->
< object [ data ] = file . urlSafe type = "application/pdf"
width="350" height="200" typemustmatch>
< / object >
< / div >
< div * ngIf = "file.type === ('video/mp4')" >
<!-- <i class="fa fa - file - movie - o" aria - hidden="true"></i> -->
< vg-player style = "height: 200px; width: 350px" >
< video [ vgMedia ] = " media " # media id = "singleVideo" preload = "auto" controls >
< source [ src ] = file . urlSafe type = "video/mp4" >
< / video >
< / vg-player >
< / div >
< div * ngIf = "file.type === ('text/plain')" >
<!-- <div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
< div > {{test}}< / div >
< a href = "../../../public/{{file._id + getStringExtention(file)}}" > show me< / a > -->
< object [ data ] = file . urlSafe type = "text/plain"
width="350" height="200" typemustmatch>
< / object >
< / div >
< div * ngIf = "file.type === ''" >
< i class = "fa fa-file-o fa-5x" aria-hidden = "true" width = "350" height = "200" > < / i >
<!-- <object [data]=file.url type="text/plain"
width="350" height="200" typemustmatch>
< / object > -->
<!-- <div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
< div > {{test}}< / div >
< a href = "../../../public/{{file._id + getStringExtention(file)}}" > show me< / a > -->
< / div >
< div * ngIf = "(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))" >
<!-- <i class="fa fa - file - audio - o" aria - hidden="true"></i> -->
< vg-player style = "height: 50px; width: 350px" >
< vg-controls >
< vg-play-pause > < / vg-play-pause >
< vg-time-display vgProperty = "current" vgFormat = "mm:ss" > < / vg-time-display >
< vg-scrub-bar >
< vg-scrub-bar-current-time > < / vg-scrub-bar-current-time >
< vg-scrub-bar-buffering-time > < / vg-scrub-bar-buffering-time >
< / vg-scrub-bar >
< vg-time-display vgProperty = "left" vgFormat = "mm:ss" > < / vg-time-display >
< vg-time-display vgProperty = "total" vgFormat = "mm:ss" > < / vg-time-display >
< vg-mute > < / vg-mute >
< vg-fullscreen > < / vg-fullscreen >
< / vg-controls >
< audio # media [ vgMedia ] = " media " id = "myAudio" preload = "auto" >
< source [ src ] = file . urlSafe type = "audio/mp3" >
< / audio >
< / vg-player >
< / div >
< / tr >
< / tbody >
