dynamic config, fix small bugs, add serbian translation

Author: alexusmai

README.md

@@ -6,12 +6,9 @@
 
 ![Laravel File Manager](https://raw.github.com/alexusmai/vue-laravel-file-manager/master/src/assets/laravel-file-manager.gif?raw=true)
 
-# v 2.0.0
+# v 2.4.0
 
-* Audio player (mp3, ogg, wav, aac), Video player (webm, mp4) - ([Plyr](https://github.com/sampotts/plyr))
-* Code editor - ([Code Mirror](https://github.com/codemirror/codemirror))
-* Image cropper - ([Cropper.js](https://github.com/fengyuanchen/cropperjs))
-* Zip / Unzip - only for local disks
+Now you can overwrite default settings using props
 
 
 ## Installation
@@ -52,6 +49,32 @@ Vue.use(FileManager, {store});
 You can overwrite some default settings
 
 ```
+// In the new version 2.4.0 and higher
+<file-manager v-bind:settings="settings"></file-manager>
+
+...
+// settings object structure
+settings: {
+    // axios headers
+    headers: {
+      'X-Requested-With': 'XMLHttpRequest',
+      Authorization: `Bearer ${window.localStorage.getItem('user-token')}`,
+    },
+    baseUrl: 'http://test.loc/file-manager/',   // overwrite base url Axios
+    windowsConfig: 2,                           // overwrite config
+    lang: 'de',                                 // set language
+    translation: {                              // add new translation
+        name: de,
+        content: {
+            about: 'Über',
+            back: 'Zurück',
+            ... see lang file structure
+        },
+    },
+},
+...
+
+// Old versions
 Vue.use(FileManager, {
     store, // required
     
@@ -67,10 +90,10 @@ Vue.use(FileManager, {
         'X-CSRF-TOKEN': 'set laravel csrf token here...'
     },
     
-    baseUrl: 'http://my_url/file-manager/', // overwrite base url Axios
+    baseUrl: 'http://my_url/file-manager/',  // overwrite base url Axios
     windowsConfig: 2,
-    lang: 'de',     // set language
-    translation: {  // add new translation
+    lang: 'de',                                 // set language
+    translation: {                              // add new translation
         name: de,
         content: {
             about: 'Über',
@@ -86,6 +109,20 @@ Now vue component is registered and you can use it in your app
 <file-manager></file-manager>
 ```
 
+## Available Props
+
+### settings - Object
+
+|  Attribute  |  Type  |  Example  |  Required  |  Description  |
+|  ---------  |  ----  |  -------  |  --------  |  -----------  |
+|  headers    |     Object     |  {'X-Requested-With': 'XMLHttpRequest'}  |  No  | Axios Headers |
+|  baseUrl    |     String     |  'http://my_url:80/file-manager/'  |  No  | Axios base URL |
+|  windowsConfig    |     Int     |  2  |  No  | 1 - only one manager, 2 - manager with folder tree, 3 - two managers |
+|  lang    |     String     |  'de'  |  No  | Set language |
+|  translation    |     Object     |  { ... see lang file structure },  |  No  | Add new translation |
+
+## CSRF, Bootstrap, FontAwesome
+
 Don't forget add a csrf token to head block in your Laravel view and add bootstrap 4 and fontawesome 5 styles
 ```
 <!-- CSRF Token -->

package.json

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

src/FileManager.vue

@@ -58,22 +58,24 @@ export default {
     ContextMenu,
     Notification,
   },
-  computed: {
-    ...mapState('fm', {
-      windowsConfig: state => state.settings.windowsConfig,
-      activeManager: state => state.settings.activeManager,
-      showModal: state => state.modal.showModal,
-      fullScreen: state => state.settings.fullScreen,
-    }),
+  props: {
+    /**
+     * LFM manual settings
+     */
+    settings: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   created() {
-    // initiate Axios settings - baseUrl and headers
-    this.$store.commit('fm/settings/initAxiosSettings');
+    // manual settings
+    this.$store.commit('fm/settings/manualSettings', this.settings);
 
-    // add axios request interceptor
+    // initiate Axios
+    this.$store.commit('fm/settings/initAxiosSettings');
     this.requestInterceptor();
-
-    // add axios response interceptor
     this.responseInterceptor();
 
     // initialize app settings
@@ -91,16 +93,29 @@ export default {
     });
     */
   },
+  destroyed() {
+    // reset state
+    this.$store.dispatch('fm/resetState');
+
+    // delete events
+    EventBus.$off(['contextMenu', 'addNotification']);
+  },
+  computed: {
+    ...mapState('fm', {
+      windowsConfig: state => state.settings.windowsConfig,
+      activeManager: state => state.settings.activeManager,
+      showModal: state => state.modal.showModal,
+      fullScreen: state => state.settings.fullScreen,
+    }),
+  },
   methods: {
     /**
      * Add axios request interceptor
      */
     requestInterceptor() {
       HTTP.interceptors.request.use((config) => {
-        // overwrite base url
+        // overwrite base url and headers
         config.baseURL = this.$store.getters['fm/settings/baseUrl'];
-
-        // overwrite headers
         config.headers = this.$store.getters['fm/settings/headers'];
 
         // loading spinner +
@@ -110,7 +125,6 @@ export default {
       }, (error) => {
         // loading spinner -
         this.$store.commit('fm/messages/subtractLoading');
-        // Do something with request error
         return Promise.reject(error);
       });
     },

src/components/blocks/mixins/contextMenu.js

@@ -101,13 +101,5 @@ export default {
 
       return extension.toLowerCase() === 'zip';
     },
-
-    /**
-     * Generate link for downloading selected file
-     * @returns {string}
-     */
-    downloadLink() {
-      return `${this.$store.getters['fm/settings/baseUrl']}download?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItems[0].path)}`;
-    },
   },
 };

src/components/blocks/mixins/contextMenuActions.js

@@ -1,3 +1,5 @@
+import HTTP from '../../../http/get';
+
 /**
  * Context menu actions
  * {name}Action
@@ -74,17 +76,24 @@ export default {
      * Download file
      */
     downloadAction() {
-      // download file
       const tempLink = document.createElement('a');
       tempLink.style.display = 'none';
-      tempLink.href = this.downloadLink();
       tempLink.setAttribute('download', this.selectedItems[0].basename);
-      tempLink.setAttribute('target', '_blank');
-      document.body.appendChild(tempLink);
-      // click link
-      tempLink.click();
-      // remove link
-      document.body.removeChild(tempLink);
+
+      // download file with authorization
+      if (this.$store.getters['fm/settings/authHeader']) {
+        HTTP.download(this.selectedDisk, this.selectedItems[0].path).then((response) => {
+          tempLink.href = window.URL.createObjectURL(new Blob([response.data]));
+          document.body.appendChild(tempLink);
+          tempLink.click();
+          document.body.removeChild(tempLink);
+        });
+      } else {
+        tempLink.href = `${this.$store.getters['fm/settings/baseUrl']}download?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItems[0].path)}`;
+        document.body.appendChild(tempLink);
+        tempLink.click();
+        document.body.removeChild(tempLink);
+      }
     },
 
     /**

src/components/manager/TableView.vue

@@ -30,7 +30,7 @@
                                v-show="sortSettings.direction === 'up'"></i>
                         </template>
                     </th>
-                    <th v-on:click="sortBy('date')">
+                    <th class="w-auto" v-on:click="sortBy('date')">
                         {{ lang.manager.table.date }}
                         <template v-if="sortSettings.field === 'date'">
                             <i class="fas fa-sort-amount-down"
@@ -71,8 +71,7 @@
                     v-on:contextmenu.prevent="contextMenu(file, $event)">
                     <td class="fm-content-item unselectable"
                         v-bind:class="(acl && file.acl === 0) ? 'text-hidden' : ''">
-                        <i class="far"
-                           v-bind:class="extensionToIcon(file.extension)"></i>
+                        <i class="far" v-bind:class="extensionToIcon(file.extension)"></i>
                         {{ file.filename ? file.filename : file.basename }}
                     </td>
                     <td>{{ bytesToHuman(file.size) }}</td>
@@ -143,6 +142,7 @@ export default {
         td {
             white-space: nowrap;
             overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         tr:hover {
@@ -159,6 +159,7 @@ export default {
 
         .fm-content-item {
             cursor: pointer;
+            max-width: 1px;
         }
 
         .text-hidden {

src/http/get.js

@@ -93,4 +93,17 @@ export default {
       params: { disk, path },
     });
   },
+
+  /**
+   * Download file
+   * @param disk
+   * @param path
+   * @return {*}
+   */
+  download(disk, path) {
+    return HTTP.get('download', {
+      responseType: 'arraybuffer',
+      params: { disk, path },
+    });
+  },
 };

src/init.js

@@ -4,26 +4,6 @@ import FileManager from './FileManager.vue';
 /**
  * Install
  *
- * options = {
- *   store, // required
- *
- *   // not required params
- *   headers: {'Authorization': 'Bearer ...'}, // add header
- * OR
- *   headers: {'X-CSRF-TOKEN': 'token'}, // overwrite default header Axios
- *   baseUrl: 'http://my_url:80/file-manager/', // overwrite base url Axios
- *   windowsConfig: 2, // overwrite config
- *   lang: 'de',
- *   translation: {
- *     name: de,
- *     content: {
- *       about: 'Über',
- *       back: 'Zurück',
- *       ... see lang file structure
- *     },
- *   },
- * }
- *
  * @param Vue
  * @param options
  */
@@ -33,6 +13,4 @@ export default function install(Vue, options = {}) {
   Vue.component('file-manager', FileManager);
 
   options.store.registerModule('fm', store);
-
-  options.store.commit('fm/settings/manualSettings', options);
 }