Simplified tables and changed upload loading state to be handled in p…

…arent container.
biigle · Sep 23, 2024 · 9d23357 · 9d23357
1 parent 8aa75e4
commit 9d23357
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 54 deletions.
diff --git a/src/public/assets/scripts/volumes.js b/src/public/assets/scripts/volumes.js
diff --git a/src/public/mix-manifest.json b/src/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
     "/assets/scripts/main.js": "/assets/scripts/main.js?id=9a67a444163bcb8363e301b63380b8e4",
-    "/assets/scripts/volumes.js": "/assets/scripts/volumes.js?id=93cd916017ea7f6ace67d086ca1c0321",
+    "/assets/scripts/volumes.js": "/assets/scripts/volumes.js?id=90295ad08a4ab0f86cf1a6557d99a582",
     "/assets/styles/main.css": "/assets/styles/main.css?id=bf09d95dc04208c3ee738dafbf8e123c"
 }
diff --git a/src/resources/assets/js/volumes/components/geotiffOverlayForm.vue b/src/resources/assets/js/volumes/components/geotiffOverlayForm.vue
@@ -53,13 +53,13 @@ export default {
             return Api.saveGeoTiff({id: this.volumeId}, data);
         },
         uploadGeoTiff(event) {
-            this.startLoading();
+            this.$emit('upload', true);
             let data = new FormData();
             data.append('geotiff', event.target.files[0]);
             data.append('volumeId', this.volumeId);
             this.upload(data)
                 .then(this.handleSuccess, this.handleError)
-                .finally(this.finishLoading);
+                .finally(this.$emit('upload', false));
         },
     }
 }

diff --git a/src/resources/assets/js/volumes/components/webmapOverlayForm.vue b/src/resources/assets/js/volumes/components/webmapOverlayForm.vue
@@ -11,13 +11,13 @@ export default {
   },
   mixins: [
         LoaderMixin,
-    ],
-    props: {
-        volumeId: {
-            type: Number,
-            required: true,
-        },
-    },
+  ],
+  props: {
+      volumeId: {
+          type: Number,
+          required: true,
+      },
+  },
   methods: {
     handleSuccess(response) {
         this.error = false;
@@ -40,13 +40,13 @@ export default {
         }
     },
     submitWebMap(event) {
-        this.startLoading();
+        this.$emit('upload', true);
         let data = new FormData();
         data.append('url', event.target[0].value); 
         data.append('volumeId', this.volumeId);
         geoApi.saveWebMap({id: this.volumeId}, data)
           .then(this.handleSuccess, this.handleError)
-          .finally(this.finishLoading)
+          .finally(this.$emit('upload', false))
       },
     },
 };

diff --git a/src/resources/assets/js/volumes/geoOverlayUpload.vue b/src/resources/assets/js/volumes/geoOverlayUpload.vue
@@ -3,9 +3,7 @@ import Api from './api/geoOverlays';
 import GeotiffOverlayForm from './components/geotiffOverlayForm';
 import WebmapOverlayForm from './components/webmapOverlayForm';
 import OverlayTable from './components/overlayTable';
-import {EditorMixin} from './import';
-import {handleErrorResponse} from './import';
-import {LoaderMixin} from './import';
+import {handleErrorResponse, LoaderMixin, EditorMixin} from './import';
 import Tabs from 'uiv/dist/Tabs';
 import Tab from 'uiv/dist/Tab';
 
@@ -58,6 +56,13 @@ export default {
         hasOverlays(dataKey) {
             return this[dataKey].length > 0;
         },
+        handleUpload(uploadInProgress) {
+            if(uploadInProgress) {
+                this.startLoading();
+            } else {
+                this.finishLoading();
+            }
+        }
     },
     created() {
         this.geoOverlays = biigle.$require('volumes.geoOverlays');

diff --git a/src/resources/views/volumesEditRight.blade.php b/src/resources/views/volumesEditRight.blade.php
@@ -10,55 +10,33 @@
     <div class="panel-body" v-if="editing" v-cloak>
         <tabs>
             <tab title="geoTIFF" :disabled="loading">
-                <geotiff-overlay-form inline-template :volume-id="{{$volume->id}}" v-on:success="addOverlay">
+                <geotiff-overlay-form inline-template :volume-id="{{$volume->id}}" v-on:success="addOverlay" v-on:upload="handleUpload">
                     @include('geo::volumes.edit.geotiffOverlayForm')
                 </geotiff-overlay-form>
-                <overlay-table :overlays="geoOverlays" overlay-type="webmap" v-on:remove="handleRemove" :volume-id="{{ $volume->id }}" :project-id="{{ $volume->projects->pluck('id')->first() }}" >
-                    <template v-slot:title>GeoTIFF Overlays</template>
-                    <template v-slot:header>
-                        <th></th>
-                        <th>#</th>
-                        <th>Filename</th>
-                        <th>Browsing</th>
-                        <th>Context</th>
-                        <th>Delete</th>
-                    </template>
-                </overlay-table>
             </tab>
             <tab title="WMS" :disabled="loading">
-                <webmap-overlay-form inline-template :volume-id="{{$volume->id}}"  v-on:success="addOverlay">
+                <webmap-overlay-form inline-template :volume-id="{{$volume->id}}"  v-on:success="addOverlay" v-on:upload="handleUpload">
                 @include('geo::volumes.edit.webmapOverlayForm')
                 </webmap-overlay-form>
-                <overlay-table :overlays="geoOverlays" overlay-type="webmap" v-on:remove="handleRemove" :volume-id="{{ $volume->id }}" :project-id="{{ $volume->projects->pluck('id')->first() }}" >
-                    <template v-slot:title>WebMap Overlays</template>
-                    <template v-slot:header>
-                        <th></th>
-                        <th>#</th>
-                        <th>Filename</th>
-                        <th>Browsing</th>
-                        <th>Context</th>
-                        <th>Delete</th>
-                    </template>
-                </overlay-table>
             </tab>
         </tabs>
     </div>
+    <div v-if="hasOverlays('geoOverlays')">
+        <overlay-table :overlays="geoOverlays" v-on:remove="handleRemove" :volume-id="{{ $volume->id }}" :project-id="{{ $volume->projects->pluck('id')->first() }}" >
+        <template v-slot:title>Geo Overlays</template>
+        <template v-slot:header>
+            <th></th>
+            <th>#</th>
+            <th>Filename</th>
+            <th>Browsing</th>
+            <th>Context</th>
+            <th>Delete</th>
+        </template>
+        </overlay-table>
+    </div>
     <div v-else>
-        <div v-if="hasOverlays('geoOverlays')">
-            <overlay-table :overlays="geoOverlays" v-on:remove="handleRemove" :volume-id="{{ $volume->id }}" :project-id="{{ $volume->projects->pluck('id')->first() }}" >
-            <template v-slot:title>Geo Overlays</template>
-            <template v-slot:header>
-                <th></th>
-                <th>#</th>
-                <th>Filename</th>
-                <th>Browsing</th>
-                <th>Context</th>
-                <th>Delete</th>
-            </template>
-            </overlay-table>
-        </div>
         <ul class="list-group" v-cloak>
-            <li class="list-group-item text-muted" v-if="!hasOverlays('geoOverlays')">This volume has no geo overlays. <a v-if="!editing" href="#" v-on:click.prevent="toggleEditing">Add some.</a></li>
+            <li class="list-group-item text-muted">This volume has no geo overlays. <a v-if="!editing" href="#" v-on:click.prevent="toggleEditing">Add some.</a></li>
         </ul>
     </div>
 </div>