Pass urls to vue. Should fix subdirectory issues. (#4054)

build/css/AdminLTE.css.map

@@ -1 +1 @@
-{"version":3,"file":"css/AdminLTE.css","sources":[],"mappings":";;;;;;","sourceRoot":""}
+{"version":3,"file":"css/AdminLTE.css","sources":[],"mappings":";;;;;;A","sourceRoot":""}

build/css/app.css.map

@@ -1 +1 @@
-{"version":3,"file":"css/app.css","sources":[],"mappings":";;;;;;;;","sourceRoot":""}
+{"version":3,"file":"css/app.css","sources":[],"mappings":";;;;;;;;A","sourceRoot":""}

build/mix-manifest.json

@@ -1,23 +1,12 @@
 {
-  "/build/vue.js": "/build/vue.js",
-  "/mix.js": "/mix.js",
-  "/build/app.css": "/build/app.535d8af1016a2377e449920c617f0197.css",
-  "/build/AdminLTE.css": "/build/AdminLTE.3d8a2b2e33baa060b1b324363ad5e1c2.css",
-  "/build/overrides.css": "/build/overrides.617623c6a96be3e0cbd11c5d4039ec10.css",
-  "/css/all.css": "/css/all.css",
-  "/js/all.js": "/js/all.js",
-  "/css/app.css": "/css/app.css",
-  "/css/dist/all.css": "/css/dist/all.css",
-  "/js/dist/all.js": "/js/dist/all.js",
-  "/css/AdminLTE.css": "/css/AdminLTE.css",
-  "/css/overrides.css": "/css/overrides.css",
-  "/css/skin-blue.css": "/css/skin-blue.css",
     "/vue.js": "/vue.js",
+    "/css/AdminLTE.css": "/css/AdminLTE.css",
+    "/css/app.css": "/css/app.css",
+    "/css/overrides.css": "/css/overrides.css",
     "/vue.js.map": "/vue.js.map",
-  "/mix.js.map": "/mix.js.map",
     "/css/AdminLTE.css.map": "/css/AdminLTE.css.map",
     "/css/app.css.map": "/css/app.css.map",
     "/css/overrides.css.map": "/css/overrides.css.map",
-  "public/css/dist/all.css": "public/css/dist/all.css",
-  "public/js/dist/all.js": "public/js/dist/all.js"
+    "/public/css/dist/all.css": "/public/css/dist/all.css",
+    "/public/js/dist/all.js": "/public/js/dist/all.js"
 }

resources/assets/js/components/importer/importer-file.vue

@@ -67,7 +67,7 @@ tr {
 
 <script>
     export default {
-        props: ['file'],
+        props: ['file', 'customFieldUrl', 'importProcessUrl'],
         data() {
             return {
                 activeFile: this.file,
@@ -142,6 +142,12 @@ tr {
             this.populateSelect2ActiveItems();
         },
         computed: {
+            processUrl() {
+                // Because we need to pass a parameter to the laravel route function
+                // We get a url 'http://localhost/api/v1/imports/process/DUMMYTEXT'
+                // But we want to customize that to /api/v1/imports/process/this_file
+                return this.importProcessUrl.replace('DUMMYTEXT', this.file.id)
+            },
             columns() {
                 switch(this.options.importType) {
                     case 'asset':
@@ -156,7 +162,7 @@ tr {
         },
         methods: {
             fetchCustomFields() {
-                this.$http.get('/api/v1/fields')
+                this.$http.get(this.customFieldUrl)
                 .then( ({data}) => {
                     data = data.rows;
                     data.forEach((item) => {
@@ -169,22 +175,22 @@ tr {
             },
             postSave() {
                 this.statusText = "Processing...";
-                this.$http.post('/api/v1/imports/process/'+this.file.id, {
+                this.$http.post(this.processUrl, {
                     'import-update': this.options.update,
                     'import-type': this.options.importType,
                     'column-mappings': this.columnMappings
-                }).then( (response) => {
+                }).then( ({body}) => {
                     // Success
                     this.statusText = "Success... Redirecting.";
-                    window.location.href = response.body.messages.redirect_url;
-                }, (response) => {
+                    window.location.href = body.messages.redirect_url;
+                }, ({body}) => {
                     // Failure
-                    if(response.body.status == 'import-errors') {
-                        window.eventHub.$emit('importErrors', response.body.messages);
+                    if(body.status == 'import-errors') {
+                        window.eventHub.$emit('importErrors', body.messages);
                         this.statusText = "Error";
                     } else {
                         this.$emit('alert', {
-                            message: response.body.messages,
+                            message: body.messages,
                             type: "danger",
                             visible: true,
                         })

resources/assets/js/components/importer/importer.vue

@@ -11,6 +11,8 @@ th {
 <script>
     require('blueimp-file-upload');
     export default {
+
+        props: ['importUrl'],
         /*
          * The component's data.
          */
@@ -72,7 +74,7 @@ th {
 
         methods: {
             fetchFiles() {
-                this.$http.get('/api/v1/imports')
+                this.$http.get(this.importUrl)
                 .then( ({data}) => this.files = data, // Success
                     //Fail
                 (response) => {
@@ -82,7 +84,7 @@ th {
                 });
             },
             deleteFile(file, key) {
-                this.$http.delete("/api/v1/imports/"+file.id)
+                this.$http.delete(this.importUrl+"/"+file.id)
                 .then((response) => this.files.splice(key, 1), // Success, remove file from array.
                     (response) => {// Fail
                         this.alert.type="danger";

resources/views/importer/import.blade.php

@@ -16,7 +16,7 @@
 {{-- Page content --}}
 @section('content')
 <div id="app">
-    <importer inline-template v-cloak>
+    <importer inline-template import-url="{{route('api.imports.index')}}" v-cloak>
         <div class="row">
         <alert v-show="alert.visible" :alert-type="alert.type" v-on:hide="alert.visible = false">@{{ alert.message }}</alert>
             <errors :errors="importErrors"></errors>
@@ -62,7 +62,12 @@
                                     				<button class="btn btn-danger" @click="deleteFile(currentFile)"><i class="fa fa-trash icon-white"></i></button>
                                     			</td>
                                     		</tr>
-                                    			<import-file :key="currentFile.id" :file="currentFile" @alert="updateAlert(alert)">
+                                    			<import-file
+                                                    :key="currentFile.id"
+                                                    :file="currentFile"
+                                                    customFieldUrl="{{route('api.customfields.index')}}"
+                                                    importProcessUrl="{{route('api.imports.importFile','DUMMYTEXT')}}"
+                                                    @alert="updateAlert(alert)">
                                     			</import-file>
                                     	</template>
                                     </tbody>