From 2c694be434136df0aca1db9d33043a71050bb472 Mon Sep 17 00:00:00 2001
From: anouk <anouk.liberge@u-bordeaux.fr>
Date: Mon, 20 Jan 2025 17:05:58 +0100
Subject: [PATCH] Send metadata as JS object to avoid messy html

---
 .../assets/js/volumes/components/metadataModal.vue |  2 --
 resources/assets/js/volumes/main.js                |  4 ++--
 .../{volumeMetadata.vue => videoMetadata.vue}      | 13 ++++++++++---
 .../views/volumes/videos/index/meta.blade.php      | 14 +++++++++++---
 4 files changed, 23 insertions(+), 10 deletions(-)
 rename resources/assets/js/volumes/{volumeMetadata.vue => videoMetadata.vue} (79%)

diff --git a/resources/assets/js/volumes/components/metadataModal.vue b/resources/assets/js/volumes/components/metadataModal.vue
index 5ff767da8..e2bc54545 100644
--- a/resources/assets/js/volumes/components/metadataModal.vue
+++ b/resources/assets/js/volumes/components/metadataModal.vue
@@ -1,6 +1,5 @@
 <template>
     <modal
-        id="modal-show-metadata"
         ref="modal"
         v-model="show"
         size="sm"
@@ -77,7 +76,6 @@ export default {
     },
     created() {
         this.show = false;
-        this.$emit('load-modal');
     }
 }
 </script>
diff --git a/resources/assets/js/volumes/main.js b/resources/assets/js/volumes/main.js
index fc70ee5f9..2982cdba7 100644
--- a/resources/assets/js/volumes/main.js
+++ b/resources/assets/js/volumes/main.js
@@ -14,7 +14,7 @@ import MetadataUpload from './metadataUpload';
 import ProjectsBreadcrumb from './projectsBreadcrumb';
 import SearchResults from './searchResults';
 import VolumeContainer from './volumeContainer';
-import VolumeMetadata from './volumeMetadata.vue';
+import VideoMetadata from './videoMetadata.vue';
 
 biigle.$mount('annotation-session-panel', AnnotationSessionPanel);
 biigle.$mount('create-volume-form-step-1', CreateFormStep1);
@@ -31,4 +31,4 @@ biigle.$mount('search-results', SearchResults);
 biigle.$mount('volume-container', VolumeContainer);
 biigle.$mount('volume-file-count', FileCount);
 biigle.$mount('volume-metadata-upload', MetadataUpload);
-biigle.$mount('volume-metadata-modal', VolumeMetadata);
+biigle.$mount('video-metadata-modal', VideoMetadata);
diff --git a/resources/assets/js/volumes/volumeMetadata.vue b/resources/assets/js/volumes/videoMetadata.vue
similarity index 79%
rename from resources/assets/js/volumes/volumeMetadata.vue
rename to resources/assets/js/volumes/videoMetadata.vue
index b64191e2c..e1e93ee86 100644
--- a/resources/assets/js/volumes/volumeMetadata.vue
+++ b/resources/assets/js/volumes/videoMetadata.vue
@@ -16,6 +16,8 @@ export default {
     data() {
         return {
             showModal: false,
+            metadata: null,
+            metadataMap: {},
             times: [],
             items: [],
             name: "",
@@ -39,9 +41,9 @@ export default {
             this.name = "Times";
             this.showModal = true;
         },
-        getMetadata(key, data) {
-            this.name = key;
-            this.items = data;
+        showMetadata(field) {
+            this.name = this.metadataMap[field];
+            this.items = this.metadata[field];
             this.showModal = true;
         },
         hideMetadataModal() {
@@ -53,5 +55,10 @@ export default {
             Messages.danger(message);
         },
     },
+    created() {
+        this.getTimes(biigle.$require('videos.times'));
+        this.metadata = biigle.$require('videos.metadata');
+        this.metadataMap = biigle.$require('videos.metadataMap');
+    }
 };
 </script>
diff --git a/resources/views/volumes/videos/index/meta.blade.php b/resources/views/volumes/videos/index/meta.blade.php
index 70405aa55..69f004585 100644
--- a/resources/views/volumes/videos/index/meta.blade.php
+++ b/resources/views/volumes/videos/index/meta.blade.php
@@ -1,4 +1,12 @@
-<div id="volume-metadata-modal" class="panel panel-default">
+@push('scripts')
+   <script type="text/javascript">
+        biigle.$declare('videos.times', {!! collect($video->taken_at) !!});
+        biigle.$declare('videos.metadata', {!! collect($video->metadata) !!});
+        biigle.$declare('videos.metadataMap', {!! collect($metadataMap) !!});
+   </script>
+@endpush
+
+<div id="video-metadata-modal" class="panel panel-default">
     <div class="panel-heading">
         <h3 class="panel-title">Video information</h3>
     </div>
@@ -23,7 +31,7 @@
         @endif
         @if ($video->taken_at)
             @if (is_array($video->taken_at))
-                <metadata-modal v-bind:show-modal="showModal" v-bind:times="times" v-bind:items="items" v-bind:name="name" v-on:load-modal="getTimes({{ collect($video->taken_at) }})" v-on:close-modal="hideMetadataModal"></metadata-modal>
+                <metadata-modal v-bind:show-modal="showModal" v-bind:times="times" v-bind:items="items" v-bind:name="name" v-on:close-modal="hideMetadataModal"></metadata-modal>
                 <tr>
                     <th>Created</th>
                     <td>
@@ -35,7 +43,7 @@
                         <th>{{ $metadataMap[$field] }}</th>
                         @if (is_array($value))
                             <td>
-                                <button class="btn btn-default" type="button" title="Show full metadata array" v-on:click.prevent="getMetadata({{ json_encode($metadataMap[$field]) }}, {{ collect($value) }})">Show values</button>
+                                <button class="btn btn-default" type="button" title="Show full metadata array" v-on:click.prevent="showMetadata({{ json_encode($field) }})">Show values</button>
                             </td>
                         @else
                             <td>{{ $value }}</td>