Merge branch 'release/v2.2.3'

Author: alexusmai

.env

@@ -1 +1,2 @@
-VUE_APP_AXIOS_BASE_URL=
+VUE_APP_LFM_AXIOS_BASE_URL=
+VUE_APP_LFM_CSRF_TOKEN=

README.md

@@ -56,9 +56,17 @@ Vue.use(FileManager, {
     store, // required
     
     // not required params
-    headers: {'Authorization': 'Bearer ...'}, // add header
-    // OR
-    headers: {'X-CSRF-TOKEN': 'token'}, // overwrite default header Axios
+    
+    headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Authorization': 'Bearer ...'
+    },
+    // default headers example
+    headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-TOKEN': 'set laravel csrf token here...'
+    },
+    
     baseUrl: 'http://my_url:80/file-manager/', // overwrite base url Axios
     windowsConfig: 2,
     lang: 'de',     // set language
@@ -73,12 +81,6 @@ Vue.use(FileManager, {
 }
 ```
 
-In development mode you can change base url for application -  add this param in your laravel .env file
-
-```
-MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
-```
-
 Now vue component is registered and you can use it in your app
 ```
 <file-manager></file-manager>
@@ -93,4 +95,14 @@ Don't forget add a csrf token to head block in your Laravel view and add bootstr
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 ```
 
+You can use [environment variables](https://laravel.com/docs/mix#environment-variables)
+
+```
+// set baseUrl
+MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
+
+// if you don't want to use csrf-token - you can off it
+MIX_LFM_CSRF_TOKEN=OFF
+```
+
 Warning! Package use axios (Promise) - use babel-polyfill for ie11

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laravel-file-manager",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "File manager for Laravel",
   "keywords": [
     "laravel",

src/FileManager.vue

@@ -34,7 +34,7 @@
 /* eslint-disable import/no-duplicates, no-param-reassign */
 import { mapState } from 'vuex';
 // Axios
-import HTTP from './http/init-axios';
+import HTTP from './http/axios';
 import EventBus from './eventBus';
 // Components
 import Navbar from './components/blocks/Navbar.vue';
@@ -67,8 +67,8 @@ export default {
     }),
   },
   created() {
-    // init base url
-    this.$store.commit('fm/settings/initBaseUrl');
+    // initiate Axios settings - baseUrl and headers
+    this.$store.commit('fm/settings/initAxiosSettings');
 
     // add axios request interceptor
     this.requestInterceptor();
@@ -98,17 +98,10 @@ export default {
     requestInterceptor() {
       HTTP.interceptors.request.use((config) => {
         // overwrite base url
-        if (this.$store.getters['fm/settings/baseUrl'] !== config.baseURL) {
-          config.baseURL = this.$store.getters['fm/settings/baseUrl'];
-        }
+        config.baseURL = this.$store.getters['fm/settings/baseUrl'];
 
         // overwrite headers
-        const newHeaders = this.$store.state.fm.settings.headers;
-
-        if (newHeaders) {
-          Object.keys(newHeaders)
-            .forEach((key) => { config.headers[key] = newHeaders[key]; });
-        }
+        config.headers = this.$store.getters['fm/settings/headers'];
 
         // loading spinner +
         this.$store.commit('fm/messages/addLoading');

src/components/blocks/Navbar.vue

@@ -36,27 +36,30 @@
                             disabled
                             v-if="uploading"
                             v-bind:title="lang.btn.upload">
-                        <i class="fas fa-download"></i>
+                        <i class="fas fa-upload"></i>
                     </button>
                     <button type="button" class="btn btn-secondary"
                             v-else
                             v-on:click="showModal('Upload')"
                             v-bind:title="lang.btn.upload">
-                        <i class="fas fa-download"></i>
+                        <i class="fas fa-upload"></i>
                     </button>
                     <button type="button" class="btn btn-secondary"
+                            v-bind:disabled="!isAnyItemSelected"
                             v-on:click="showModal('Delete')"
                             v-bind:title="lang.btn.delete">
                         <i class="fas fa-trash-alt"></i>
                     </button>
                 </div>
                 <div class="btn-group" role="group">
                     <button type="button" class="btn btn-secondary"
+                            v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.copy"
                             v-on:click="toClipboard('copy')">
                         <i class="fas fa-copy"></i>
                     </button>
                     <button type="button" class="btn btn-secondary"
+                            v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.cut"
                             v-on:click="toClipboard('cut')">
                         <i class="fas fa-cut"></i>
@@ -106,6 +109,7 @@
 
 <script>
 import translate from './../../mixins/translate';
+import EventBus from './../../eventBus';
 
 export default {
   mixins: [translate],
@@ -135,6 +139,15 @@ export default {
           this.$store.state.fm[this.activeManager].history.length - 1;
     },
 
+    /**
+     * Is any files or directories selected?
+     * @returns {boolean}
+     */
+    isAnyItemSelected() {
+      return this.$store.state.fm[this.activeManager].selected.files.length > 0 ||
+          this.$store.state.fm[this.activeManager].selected.directories.length > 0;
+    },
+
     /**
      * Manager view type - grid or table
      * @returns {default.computed.viewType|(function())|string}
@@ -195,6 +208,19 @@ export default {
      */
     toClipboard(type) {
       this.$store.dispatch('fm/toClipboard', type);
+
+      // show notification
+      if (type === 'cut') {
+        EventBus.$emit('addNotification', {
+          status: 'success',
+          message: this.lang.notifications.cutToClipboard,
+        });
+      } else if (type === 'copy') {
+        EventBus.$emit('addNotification', {
+          status: 'success',
+          message: this.lang.notifications.copyToClipboard,
+        });
+      }
     },
 
     /**

src/components/manager/GridView.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="fm-grid">
         <div class="d-flex align-content-start flex-wrap">
-            <div class="fm-grid-item text-center" v-on:click="levelUp">
+            <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
                 <div class="fm-item-icon">
                     <i class="fas fa-level-up-alt fa-5x pb-2"></i>
                 </div>
@@ -38,7 +38,7 @@
                     <template v-else-if="thisImage(file.extension)">
                         <img class="img-thumbnail"
                              v-bind:alt="file.filename"
-                             v-bind:src="createImgUrl(file.path)">
+                             v-bind:src="createImgUrl(file.path, file.timestamp)">
                     </template>
                     <template v-else>
                         <i class="far fa-5x pb-2"
@@ -105,10 +105,11 @@ export default {
     /**
      * Create url for image
      * @param path
+     * @param timestamp
      * @returns {string}
      */
-    createImgUrl(path) {
-      return `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${this.disk}&path=${path}`;
+    createImgUrl(path, timestamp) {
+      return `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${this.disk}&path=${path}&v=${timestamp}`;
     },
   },
 };

src/components/manager/TableView.vue

@@ -42,7 +42,7 @@
                 </tr>
             </thead>
             <tbody>
-                <tr>
+                <tr v-if="!isRootPath">
                     <td colspan="4" class="fm-content-item" v-on:click="levelUp">
                         <i class="fas fa-level-up-alt"></i>
                     </td>

src/components/manager/mixins/manager.js

@@ -49,6 +49,14 @@ export default {
     acl() {
       return this.$store.state.fm.settings.acl;
     },
+
+    /**
+     * Check if current path is at root level
+     * @return {boolean}
+     */
+    isRootPath() {
+      return this.$store.state.fm[this.manager].selectedDirectory === null;
+    },
   },
   methods: {
     /**
@@ -142,6 +150,10 @@ export default {
         this.$store.dispatch('fm/url', {
           disk: this.selectedDisk,
           path,
+        }).then((response) => {
+          if (response.data.result.status === 'success') {
+            this.$store.state.fm.fileCallback(response.data.url);
+          }
         });
 
         return;

src/components/modals/views/Preview.vue

@@ -13,7 +13,7 @@
             <template v-if="showCropperModule">
                 <cropper-module v-bind:imgUrl="imgUrl"
                                 v-bind:maxHeight="maxHeight"
-                                v-on:closeCropper="showCropperModule = false"></cropper-module>
+                                v-on:closeCropper="closeCropper"></cropper-module>
             </template>
             <template v-else>
                 <img v-bind:src="imgUrl"
@@ -53,7 +53,7 @@ export default {
   },
   created() {
     // Create image URL
-    this.imgUrl = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItem.path)}`;
+    this.setImgUrl();
   },
   computed: {
     /**
@@ -72,6 +72,10 @@ export default {
       return this.$store.getters['fm/selectedItems'][0];
     },
 
+    /**
+     * Show modal footer
+     * @return boolean
+     */
     showFooter() {
       return this.canCrop(this.selectedItem.extension) && !this.showCropperModule;
     },
@@ -97,6 +101,21 @@ export default {
     canCrop(extension) {
       return this.$store.state.fm.settings.cropExtensions.includes(extension.toLowerCase());
     },
+
+    /**
+     * Set image URL
+     */
+    setImgUrl() {
+      this.imgUrl = `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItem.path)}&v=${this.selectedItem.timestamp}`;
+    },
+
+    /**
+     * Close cropper
+     */
+    closeCropper() {
+      this.showCropperModule = false;
+      this.setImgUrl();
+    },
   },
 };
 </script>