Save it

Author: wenfengand

.env

@@ -1,2 +1,2 @@
-VUE_APP_LFM_AXIOS_BASE_URL=
-VUE_APP_LFM_CSRF_TOKEN=
+VUE_APP_LFM_AXIOS_BASE_URL=http://10.134.119.125:5000/
+VUE_APP_LFM_CSRF_TOKEN='OFF'

package-lock.json

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

package.json

@@ -18,7 +18,7 @@
 </noscript>
 <div class="container">
     <div style="height: 800px;">
-        <div id="fm"></div>
+        <div id="app"></div>
     </div>
 </div>
 <!-- built files will be auto injected -->

public/index.html

@@ -0,0 +1,32 @@
+<template>
+  <div id="app">
+    Hello, this is laravel file manager.
+    <file-manager
+    
+    ></file-manager>
+  </div>
+</template>
+
+<script>
+import FileManager from './FileManager';
+export default { 
+  name: 'App',
+  components: {
+    FileManager
+  },
+  data() {
+    return {
+      initData:{
+        disk: "hb36p",
+        editable: false,
+        sessionToken: "token"
+      }
+    }
+  },
+  created() {
+        // set initialize data
+    this.$store.commit('fm/setInitData', this.initData);
+  }
+} 
+</script>
+  

src/App.vue

@@ -4,7 +4,7 @@
     <navbar></navbar>
     <div class="fm-body">
       <notification></notification>
-      <context-menu></context-menu>
+      <context-menu></context-menu> 
       <modal v-if="showModal"></modal>
       <template v-if="windowsConfig === 1">
         <left-manager class="col" manager="left"></left-manager>
@@ -48,6 +48,9 @@ import Notification from './components/blocks/Notification.vue';
 
 export default {
   name: 'FileManager',
+  props:[
+   
+  ],
   components: {
     Navbar,
     FolderTree,
@@ -58,6 +61,12 @@ export default {
     ContextMenu,
     Notification,
   },
+  data() {
+    return {
+    
+    }
+    
+  },
   computed: {
     ...mapState('fm', {
       windowsConfig: state => state.settings.windowsConfig,
@@ -66,19 +75,19 @@ export default {
       fullScreen: state => state.settings.fullScreen,
     }),
   },
-  created() {
+  mounted() {
+
     // initiate Axios settings - baseUrl and headers
     this.$store.commit('fm/settings/initAxiosSettings');
 
     // add axios request interceptor
     this.requestInterceptor();
 
-    // add axios response interceptor
+    // add axios response interceptor 
     this.responseInterceptor();
 
-    // initialize app settings
-    this.$store.dispatch('fm/initializeApp');
 
+    this.$store.dispatch('fm/initializeApp');
     /**
      * todo Keyboard event
      */

src/FileManager.vue

@@ -107,7 +107,7 @@ export default {
      * @returns {string}
      */
     downloadLink() {
-      return `${this.$store.getters['fm/settings/baseUrl']}download?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItems[0].path)}`;
+      return `${this.$store.getters['fm/settings/baseUrl']}preview?disk=${this.selectedDisk}&path=${encodeURIComponent(this.selectedItems[0].path)}`;
     },
   },
 };

src/components/blocks/mixins/contextMenu.js

@@ -1,10 +1,19 @@
 import HTTP from './axios';
 
 export default {
+  /**
+   * initialize 
+   * @param initData
+   * @returns {AxiosPromise<any>}
+   */
+  initialize(initData) {
+    console.log('initialize got', initData)
+    return HTTP.post('initialize', initData);
+  },
   /**
    * Create new file
    * @param disk
-   * @param path
+   * @param path 
    * @param name
    * @returns {AxiosPromise<any>}
    */

src/http/post.js

@@ -5,7 +5,10 @@ import Vuex from 'vuex';
 // store
 import fm from './store';
 // App
-import App from './FileManager.vue';
+import FileManager from './FileManager';
+import App from './App';
+
+
 
 Vue.use(Vuex);
 
@@ -15,9 +18,22 @@ const store = new Vuex.Store({
   modules: { fm },
 });
 
-Vue.config.productionTip = process.env.NODE_ENV === 'production';
+Vue.use(FileManager, {
+    store, // required
+    
+   
+    // default headers example
+    headers: {
+    },
+    
+    baseUrl: 'http://10.134.119.125:5000/', // overwrite base url Axios
+    windowsConfig: 1,
+    lang: 'en',     // set language
+})
 
-window.fm = new Vue({
+Vue.config.productionTip = process.env.NODE_ENV === 'production';
+new Vue({
+  el: '#app',
   store,
-  render: h => h(App),
-}).$mount('#fm');
+  render: h => h(App)
+}) 

src/main.js

@@ -10,8 +10,9 @@ export default {
    * @param getters
    * @param dispatch
    */
+  
   initializeApp({ state, commit, getters, dispatch }) {
-    GET.initialize().then((response) => {
+    POST.initialize(state.initData).then((response) => {
       if (response.data.result.status === 'success') {
         // set app settings
         commit('settings/initSettings', response.data.config);

src/store/actions.js

@@ -1,11 +1,16 @@
 /* eslint-disable object-curly-newline */
 export default {
+  setInitData(state, initData ){
+    console.log('setInitData got', initData)
+    state.initData = initData;
+  },
   /**
-   * Set disks
+   * Set disks 
    * @param state
    * @param disks
    */
   setDisks(state, disks) {
+    console.log('Got disks', disks)
     state.disks = disks;
   },
 

src/store/mutations.js

@@ -29,7 +29,7 @@ export default {
     }
     // extra configurations
     if (Object.prototype.hasOwnProperty.call(data, 'extConfig')) {
-      state.ext_config = data.ext_config;
+      state.extConfig = data.extConfig;
     }
   },
 
@@ -108,7 +108,7 @@ export default {
     }
     // extra configurations
     if (Object.prototype.hasOwnProperty.call(data, 'extConfig')) {
-      state.ext_config = data.ext_config;
+      state.extConfig = data.extConfig;
     }
     state.acl = data.acl;
   },

src/store/settings/mutations.js

@@ -4,6 +4,7 @@ export default {
    * left or right
    * default: left
    */
+  initData:'',
   activeManager: 'left',
 
   /**