v2.1 // Rename method

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to `nova-filemanager` will be documented in this file
 
+
+## 2.1 - 2019-03-19
+
+#### Improvements
+
+* Change view button. Grid or List
+* Rename option. You can now rename your files
+* Detail and new folder modals close on click outside
+
+#### Fixes
+
+* Upload progress fix when name is very long
+
+
 ## 2.0 - 2019-03-11
 
 New config file and new options for tool and field to search and filter

resources/js/api.js

@@ -52,4 +52,13 @@ export default {
             .post('/nova-vendor/infinety-es/nova-filemanager/actions/remove-file', { file: file })
             .then(response => response.data);
     },
+
+    renameFile(file, name) {
+        return window.axios
+            .post('/nova-vendor/infinety-es/nova-filemanager/actions/rename-file', {
+                file: file,
+                name: name,
+            })
+            .then(response => response.data);
+    },
 };

resources/js/components/CreateFolderModal.vue

@@ -86,7 +86,7 @@ export default {
 
         handleClose() {
             this.cancelCreate();
-        }
+        },
     },
 };
 </script>

resources/js/components/DetailPopup.vue

@@ -9,6 +9,7 @@
                         <div class="w-3/4 px-4 py-3 ">
                             {{ __('Preview of') }} <span class="text-primary-70%">{{ info.name }}</span>
 
+
                         </div>
 
                         <div class="w-1/4 flex flex-wrap justify-end">
@@ -73,9 +74,25 @@
                         <div class="w-2/5 bg-30 box-info flex flex-wrap">
 
                             <div class="info-data w-full">
-                                <div class="info mx-4 my-3 flex flex-wrap">
+                                <div class="info mx-4 my-3 flex flex-wrap items-center">
                                     <span class="title bg-50 px-1 py-1 rounded-l">{{ __('Name') }}:</span>
-                                    <span class="value bg-white px-1 py-1 rounded-r">{{ info.name }}</span>
+                                    <span class="value bg-white px-1 py-1 rounded-r" v-if="!editingName">{{ info.name }}
+                                    </span>
+
+                                    <svg v-if="!editingName" @click="editName" class="ml-1 cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="12" height="12"><path d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/></svg>
+
+                                    <template v-if="editingName">
+
+                                        <input type="text"  v-bind:ref="'inputName'" :style="{ 'width': nameWidth + 'px' }" v-model="nameNoExtension" class=" value px-1 py-1 rounded-r">
+
+                                        <svg @click="rename" xmlns="http://www.w3.org/2000/svg" class="ml-1 cursor-pointer text-success fill-current" viewBox="0 0 20 20" width="12" height="12"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>
+
+                                        <svg @click="editingName = !editingName" xmlns="http://www.w3.org/2000/svg" class="ml-1 cursor-pointer" viewBox="0 0 20 20" width="12" height="12"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"/></svg>
+
+                                    </template>
+
+
+
                                 </div>
 
                                 <div class="info mx-4 my-3 flex flex-wrap" v-if="info.mime">
@@ -204,6 +221,8 @@ export default {
     },
 
     data: () => ({
+        loaded: false,
+        currentInfo: {},
         messagesRemove: ['Remove File', 'Are you sure', 'Removing...'],
         cssType: ' py-custom',
         codeLoaded: false,
@@ -214,10 +233,17 @@ export default {
             lineNumbers: true,
             line: true,
         },
+        editingName: false,
+        nameNoExtension: null,
+        nameWidth: null,
+        inputElement: null,
+        correctName: null,
     }),
 
     methods: {
         closePreview() {
+            this.correctName = null;
+            this.editingName = false;
             this.$emit('closePreview', true);
         },
 
@@ -241,17 +267,40 @@ export default {
             });
         },
 
+        rename() {
+            this.correctName = this.nameNoExtension + '.' + this.info.ext;
+
+            return api.renameFile(this.info.path, this.correctName).then(result => {
+                if (result.success == true) {
+                    this.editingName = false;
+                    this.$toasted.show(this.__('File renamed successfully'), { type: 'success' });
+                    this.$emit('rename', result.data);
+                    this.$emit('refresh');
+                } else {
+                    this.$toasted.show(
+                        this.__('Error renaming the file. Please check permissions'),
+                        { type: 'error' }
+                    );
+                }
+            });
+        },
+
+        editName() {
+            this.editingName = true;
+        },
+
         selectFile() {
             this.closePreview();
             this.$emit('selectFile', this.info);
         },
 
         handleClose() {
             this.closePreview();
-        }
+        },
     },
 
     mounted() {
+        this.loaded = false;
         this.$nextTick(function() {
             this.messagesRemove = [
                 this.__('Remove File'),
@@ -281,8 +330,6 @@ export default {
         },
     },
 
-    updated() {},
-
     watch: {
         'info.type': function(type) {
             if (type == 'audio') {
@@ -328,11 +375,30 @@ export default {
             this.codeLoaded = false;
             this.zipLoaded = false;
         },
+
+        'info.name': function(name) {
+            if (name) {
+                this.nameNoExtension = name
+                    .split('.')
+                    .slice(0, -1)
+                    .join('.');
+            }
+        },
+
+        nameNoExtension: function(name) {
+            if (name) {
+                this.nameWidth = (name.length + 1) * 7;
+            }
+        },
     },
 };
 </script>
 
 <style scoped lang="scss">
+input {
+    box-sizing: border-box !important;
+}
+
 .buttons-actions {
     padding-left: 1rem;
     padding-right: 1rem;

resources/js/components/Manager.vue

@@ -46,7 +46,7 @@
 
                         <template v-if="view == 'grid'">
                             <template v-if="!files.error" v-for="file in fileteredFiles">
-                                <div :class="filemanagerClass" v-bind:key="file.id" >
+                                <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>
@@ -56,7 +56,6 @@
                                 </div>
                             </template>
                             <template  v-if="!loading">
-                                <!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> -->
                             </template>
                         </template>
 
@@ -82,12 +81,11 @@
                                 <tbody>
                                     <template  v-for="file in fileteredFiles">
                                         <template v-if="file.type == 'dir'">
-                                            <Folder :file="file" :view="view" class="" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
+                                            <Folder :key="file.id" :file="file" :view="view" class="" :class="{'loading': loadingInfo}" v-on:goToFolderEvent="goToFolder" />
                                         </template>
                                         <template v-if="file.type == 'file'">
-                                            <ImageLoader :file="file" :view="view" class="" :class="{'loading': loadingInfo}" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
+                                            <ImageLoader :key="file.id" :file="file" :view="view" class="" :class="{'loading': loadingInfo}" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
                                         </template>
-                                        <!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> -->
                                     </template>
                                 </tbody>
                             </table>
@@ -185,7 +183,7 @@ export default {
         cssDragAndDrop: null,
         filesToUpload: [],
         loadingInfo: false,
-        busy: false
+        busy: false,
     }),
 
     methods: {
@@ -304,17 +302,6 @@ export default {
         isImage(file) {
             return file.type.includes('image'); //returns true or false
         },
-
-
-        infiniteHandler($state) {
-            console.log($state)
-            this.$emit('loadMoreItems');
-        },
-
-        loadMore: function() {
-            console.log("dada");
-            this.$emit('loadMoreItems');
-        }
     },
 
     updated: function() {
@@ -407,7 +394,7 @@ export default {
 }
 
 .h-16 {
-   height: 6rem;
+    height: 6rem;
 }
 
 .obfit-cover {
@@ -419,12 +406,11 @@ export default {
 }
 
 .custom-table {
-    
-    th{
+    th {
         position: sticky;
         top: 0;
         z-index: 10;
-    }    
+    }
 
     td {
         height: 3rem;
@@ -438,5 +424,4 @@ export default {
         }
     }
 }
-
 </style>

resources/js/components/Tool.vue

@@ -106,6 +106,7 @@
                 :active="activeInfo"
                 v-on:closePreview="closePreview" 
                 v-on:refresh="refreshCurrent"
+                v-on:rename="fileRenamed"
             >
             </DetailPopup>
 
@@ -166,11 +167,10 @@ export default {
         if (localStorage.getItem('nova-filemanager-view')) {
             let viewS = localStorage.getItem('nova-filemanager-view');
             if (['grid', 'list'].includes(viewS)) {
-                this.view = viewS;    
+                this.view = viewS;
             } else {
                 localStorage.setItem('nova-filemanager-view', 'grid');
             }
-            
         }
 
         await this.getData(this.currentPath);
@@ -259,6 +259,10 @@ export default {
             this.popupDetailsLoaded = false;
         },
 
+        fileRenamed(item) {
+            this.info = item;
+        },
+
         viewAs(type) {
             this.view = type;
             localStorage.setItem('nova-filemanager-view', type);

resources/js/components/UploadProgress.vue

@@ -123,7 +123,7 @@ export default {
                 });
         },
     },
-    
+
     filters: {
         truncate: function(text, stop, clamp) {
             return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '');

resources/js/field/FormField.vue

@@ -40,6 +40,7 @@
                 v-on:closePreview="closePreview" 
                 v-on:refresh="refreshCurrent"
                 v-on:selectFile="setValue"
+                v-on:rename="fileRenamed"
             >
             </DetailPopup>
 
@@ -182,6 +183,10 @@ export default {
             this.removeModalOpen = false;
         },
 
+        fileRenamed(item) {
+            this.info = item;
+        },
+
         openRemoveModal() {
             this.removeModalOpen = true;
         },

resources/js/modules/Folder.vue

@@ -77,12 +77,12 @@ export default {
             default: function() {
                 return { name: '' };
             },
-            required: true
+            required: true,
         },
         view: {
             type: String,
             default: 'grid',
-            required: false
+            required: false,
         },
     },
 

resources/js/modules/ImageLoader.vue

@@ -92,14 +92,14 @@ export default {
             default: function() {
                 return { name: '' };
             },
-            required: true
+            required: true,
         },
 
         view: {
             type: String,
             default: 'grid',
-            required: false
-        }
+            required: false,
+        },
     },
 
     data: () => ({
@@ -108,7 +108,6 @@ export default {
     }),
 
     mounted() {
-
         if (this.file.mime == 'image') {
             Minimum(
                 window.axios.get(this.file.thumb, {

routes/api.php

@@ -18,6 +18,7 @@
 Route::post('actions/delete-folder', \Infinety\Filemanager\Http\Controllers\FilemanagerToolController::class.'@deleteFolder');
 Route::post('actions/get-info', \Infinety\Filemanager\Http\Controllers\FilemanagerToolController::class.'@getInfo');
 Route::post('actions/remove-file', \Infinety\Filemanager\Http\Controllers\FilemanagerToolController::class.'@removeFile');
+Route::any('actions/rename-file', \Infinety\Filemanager\Http\Controllers\FilemanagerToolController::class.'@renameFile');
 
 Route::post('uploads/add', \Infinety\Filemanager\Http\Controllers\FilemanagerToolController::class.'@upload');
 Route::get('uploads/update', \Infinety\Filemanager\Http\Controllers\FilemanagerToolController::class.'@updateFile');