Skip to content

Commit

Permalink
Move files between folders
Browse files Browse the repository at this point in the history
  • Loading branch information
@Krato
Krato committed Apr 30, 2019
1 parent 2b05b0c commit cd38844
Show file tree
Hide file tree
Showing 19 changed files with 387 additions and 80 deletions.
18 changes: 11 additions & 7 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@

All notable changes to `nova-filemanager` will be documented in this file

## 2.1 - 2019-04-02
## v2.1.2 - 2019-04-30

New way to move files between folders with drag and drop

## v2.1 - 2019-04-02

Updated documentation with vuepress.

## 2.1 - 2019-03-19
## v2.1 - 2019-03-19

#### Improvements

Expand All @@ -19,7 +23,7 @@ Updated documentation with vuepress.
* Upload progress fix when name is very long


## 2.0 - 2019-03-11
## v2.0 - 2019-03-11

New config file and new options for tool and field to search and filter

Expand All @@ -42,7 +46,7 @@ New config file and new options for tool and field to search and filter
* Json localization strings updated


## 1.1.1 - 2018-10-09
## v1.1.1 - 2018-10-09

Field new option folder | Remove value from field

Expand All @@ -62,7 +66,7 @@ Field new option folder | Remove value from field

-----

## 1.1.0 - 2018-09-21
## v1.1.0 - 2018-09-21

Major update v1

Expand All @@ -89,13 +93,13 @@ Major update v1

-----

## 0.0.1 - 2018-08-29
## v1.0.1 - 2018-08-29

Beta release for some tests

-----

## 1.0.0 - 2018-08-30
## v1.0.0 - 2018-08-30

Filemanager ready for Production with version 1.0.0

7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,16 @@ A Filemanager Tool and Field for Laravel Nova
### Testing

``` bash
composer test
yarn lint
yarn check-format
```

### Last Changelog

> **v2.1.2 - 2019-04-30**
New way to move files between folders with drag and drop


### Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
Expand Down
2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/tool.js
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@
"v-copy": "^0.1.0",
"vue": "^2.5.0",
"vue-codemirror": "^4.0.5",
"vue-computed-helpers": "^1.3.0",
"vue-drag-and-drop": "^3.0.0",
"vue-plyr": "^4.0.0",
"vue2-dropzone": "^3.2.2"
}
Expand Down
9 changes: 9 additions & 0 deletions resources/js/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@ export default {
.then(response => response.data);
},

moveFile(oldPath, newPath) {
return window.axios
.post('/nova-vendor/infinety-es/nova-filemanager/actions/move', {
old: oldPath,
path: newPath,
})
.then(response => response.data);
},

createFolder(folderName, currentFolder) {
return window.axios
.post('/nova-vendor/infinety-es/nova-filemanager/actions/create-folder', {
Expand Down
173 changes: 143 additions & 30 deletions resources/js/components/Manager.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div ref="fileManagerContainer" id="filemanager-manager-container" class="p-3" :class="cssFilemenagerContainer">
<div ref="fileManagerContainer" id="filemanager-manager-container" class="p-3" :class="cssFilemenagerContainer" v-cloak>
<nav class="bg-grey-light rounded font-sans w-full m-4">
<ol class="list-reset flex text-grey-dark" >
<li><span class="text-blue font-bold cursor-pointer" @click="goToFolderNav(home)">{{ __('Home') }}</span></li>
Expand All @@ -18,9 +18,22 @@
</ol>
</nav>
<transition name="fade">
<div class="px-2 overflow-y-auto files">

<template v-if="uploadingFiles">
<div class="px-2 overflow-y-auto files">
<div class="drop-files flex flex-wrap items-center border-2 border-primary border-dashed -mx-2">
<div class="w-full text-lg text-center my-4">
{{ __('Drop your files here!') }}
</div>
</div>
</div>
</template>

<div v-else class="px-2 overflow-y-auto files">
<div class="flex flex-wrap -mx-2">



<template v-if="files.error">
<div class="w-full text-lg text-center my-4">
{{ __('You don\'t have permissions to view this folder') }}
Expand All @@ -45,16 +58,31 @@
<template v-if="!files.error">

<template v-if="view == 'grid'">
<template v-if="!files.error" v-for="file in fileteredFiles">
<div :class="filemanagerClass" :key="file.id" >
<template v-if="file.type == 'file'">
<ImageLoader :file="file" class="h-40" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
</template>
<template v-if="file.type == 'dir'">
<Folder :file="file" class="h-40" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
</template>
</div>

<template v-if="!files.error">

<template v-if="parent.id">
<div :class="filemanagerClass" :key="parent.id" >
<Folder v-drag-and-drop:folder :ref="'folder_' + parent.id" :file="parent" :data-key="parent.id" class="h-40 folder-item" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
</div>
</template>

<template v-for="file in filteredFiles">
<div :class="filemanagerClass" :key="file.id" >
<template v-if="file.type == 'file'">
<ImageLoader v-drag-and-drop:file :ref="'file_' + file.id" :file="file" :data-key="file.id" class="h-40 file-item" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
</template>
<template v-if="file.type == 'dir'">
<Folder v-drag-and-drop:folder :ref="'folder_' + file.id" :file="file" :data-key="file.id" class="h-40 folder-item" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
</template>
</div>
</template>

</template>




<template v-if="!loading">
</template>
</template>
Expand All @@ -79,12 +107,12 @@
</tr>
</thead>
<tbody>
<template v-for="file in fileteredFiles">
<template v-for="file in filteredFiles">
<template v-if="file.type == 'dir'">
<Folder :key="file.id" :file="file" :view="view" class="" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
<Folder :key="file.id" :data-key="file.id" :file="file" :view="view" class="folder-item" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
</template>
<template v-if="file.type == 'file'">
<ImageLoader :key="file.id" :file="file" :view="view" class="" :class="{'loading': loadingInfo}" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
<ImageLoader :key="file.id" :data-key="file.id" :file="file" :view="view" class="file-item" :class="{'loading': loadingInfo}" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
</template>
</template>
</tbody>
Expand Down Expand Up @@ -112,9 +140,13 @@ import api from '../api';
import ImageLoader from '../modules/ImageLoader';
import Folder from '../modules/Folder';
import Loading from './Loading';
import { DragAndDrop } from '../tools/DragAndDrop';
let arrayFiles = [];
export default {
name: 'Manager',
components: {
ImageLoader: ImageLoader,
Folder: Folder,
Expand All @@ -139,6 +171,10 @@ export default {
default: '/',
required: true,
},
parent: {
type: Object,
required: true,
},
noFiles: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -184,8 +220,14 @@ export default {
filesToUpload: [],
loadingInfo: false,
busy: false,
currentDraggedFile: null,
uploadingFiles: false,
}),
directives: {
'drag-and-drop': DragAndDrop,
},
methods: {
goToFolder(path) {
this.$emit('goToFolderManager', path);
Expand All @@ -203,7 +245,7 @@ export default {
return api.removeDirectory(this.current).then(result => {
if (result == true) {
this.$toasted.show(this.__('Folder removed successfully'), { type: 'success' });
this.$emit('goToFolderManager', '/');
this.$emit('goToFolderManager', this.getParentFolder());
} else {
this.$toasted.show(
this.__('Error removing the folder. Please check permissions'),
Expand Down Expand Up @@ -243,32 +285,50 @@ export default {
},
setDragAndDropEvents() {
let self = this;
let filemanagerContainer = document.querySelector('#filemanager-manager-container');
filemanagerContainer.addEventListener('dragenter', function(e) {
filemanagerContainer.addEventListener('dragenter', e => {
e.preventDefault();
self.cssDragAndDrop = 'inside';
if (this.currentDraggedFile === null) {
this.uploadingFiles = true;
this.cssDragAndDrop = 'inside';
let dropperContainer = document.querySelector('.drop-files');
this.droppedListener(dropperContainer);
}
});
filemanagerContainer.addEventListener('dragleave', function(e) {
filemanagerContainer.addEventListener('dragleave', e => {
e.preventDefault();
self.cssDragAndDrop = 'outside';
this.uploadingFiles = false;
this.cssDragAndDrop = 'outside';
});
filemanagerContainer.addEventListener('dragover', function(e) {
filemanagerContainer.addEventListener('dragover', e => {
e.preventDefault();
self.cssDragAndDrop = 'inside';
if (this.currentDraggedFile === null) {
this.uploadingFiles = true;
this.cssDragAndDrop = 'inside';
let dropperContainer = document.querySelector('.drop-files');
this.droppedListener(dropperContainer);
}
});
},
filemanagerContainer.addEventListener('drop', function(e) {
e.preventDefault();
self.cssDragAndDrop = 'drop';
droppedListener(element) {
if (element) {
element.removeEventListener('drop', this.droppedListener);
element.addEventListener('drop', this.dropNewFiles, false);
}
},
let files = e.dataTransfer.files;
self.uploadFiles(files);
});
dropNewFiles(e) {
e.preventDefault();
this.cssDragAndDrop = 'drop';
this.uploadingFiles = false;
let files = e.dataTransfer.files;
this.uploadFiles(files);
},
uploadFiles(files) {
Expand Down Expand Up @@ -302,6 +362,53 @@ export default {
isImage(file) {
return file.type.includes('image'); //returns true or false
},
moveFile(oldPath, newPath) {
return api
.moveFile(oldPath, newPath)
.then(result => {
if (result.success == true) {
this.refresh();
this.$toasted.show(this.__('File moved successfully'), {
type: 'success',
duration: 2000,
});
} else {
this.$toasted.show(
this.__('Error opening the file. Check your permissions'),
{
type: 'error',
duration: 3000,
}
);
}
})
.catch(error => {
this.$toasted.show(error.response.data.message, {
type: 'error',
duration: 3000,
});
});
},
getFileById(type, id) {
if (id == 'folder_back') {
return this.$refs[type + '_' + id];
}
let found = this.files.find(file => file.id == id);
if (found) {
return this.$refs[type + '_' + id][0];
}
},
getParentFolder() {
let pathData = this.current.split('/');
pathData.pop();
return pathData.join('/');
},
},
updated: function() {
Expand All @@ -313,6 +420,7 @@ export default {
this.$nextTick(function() {
setTimeout(() => {
this.setDragAndDropEvents();
// this.dragFilesEvents();
this.eventsLoaded = true;
}, 500);
});
Expand Down Expand Up @@ -343,6 +451,7 @@ export default {
return '';
}
},
cssFilemenagerContainer() {
if (this.cssDragAndDrop == 'inside') {
return 'bg-20';
Expand All @@ -354,7 +463,7 @@ export default {
return '';
},
fileteredFiles() {
filteredFiles() {
let filtered = this.files;
if (this.search) {
filtered = this.files.filter(m => m.name.toLowerCase().indexOf(this.search) > -1);
Expand Down Expand Up @@ -405,6 +514,10 @@ export default {
max-height: 60vh;
}
.drop-files {
min-height: 40vh;
}
.custom-table {
th {
position: sticky;
Expand Down
Loading

0 comments on commit cd38844

Please sign in to comment.