Adding fileObj onto each clip instance, during loadClips action, adding click…

Adding fileObj onto each clip instance, during loadClips action, adding click and selected classes for clips.

src/components/Clips.vue

@@ -5,7 +5,7 @@
 
       <div class="row gy-2 gx-2 mb-2" v-for="clip in clips" :key="clip.id">
         <div class="col-7 text-center img-parent">
-          <img class="img-fluid img-thumbnail clip-thumbnail" :title="clip.name" :src="clip.thumbnail"/>
+          <img @click="toggleSelection(clip)" :class="getSelectedClass(clip)" class="img-fluid img-thumbnail clip-thumbnail" :title="clip.name" :src="clip.thumbnail"/>
         </div>
         <div class="col-5">
 
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import {mapActions, mapState} from "vuex"
+import {mapActions, mapState, mapMutations} from "vuex"
 
 export default {
   name: "Clips.vue",
@@ -42,10 +42,25 @@ export default {
     deleteClipBtn(clip_id) {
       this.deleteClip(clip_id)
     },
-    ...mapActions(['loadClips', 'createClip', 'deleteClip'])
+    toggleSelection(clipObj) {
+      if (clipObj.fileObj != this.previewFile) {
+        this.setPreviewFile(clipObj.fileObj)
+      } else {
+        this.setPreviewFile(null)
+      }
+    },
+    getSelectedClass(clipObj) {
+      if (this.previewFile && clipObj.fileObj.id == this.previewFile.id) {
+        return 'selected'
+      } else {
+        return ''
+      }
+    },
+    ...mapActions(['loadClips', 'createClip', 'deleteClip']),
+    ...mapMutations((['setPreviewFile']))
   },
   computed: {
-    ...mapState(['clips'])
+    ...mapState(['clips', 'previewFile'])
   },
   watch: {
     clips(newVal, oldVal) {
@@ -78,4 +93,7 @@ export default {
   .clip-btn {
     float: right;
   }
+  .selected {
+    border: #0d6efd 4px solid;
+  }
 </style>
\ No newline at end of file

src/store/index.js

@@ -152,6 +152,9 @@ export default createStore({
         let clips = response.data.results
 
         for (let clipObj of clips) {
+          // Get related file object
+          const file_response = await instance.get(clipObj.file)
+          clipObj.fileObj = file_response.data
 
           let fps = clipObj.json.reader.fps.num / clipObj.json.reader.fps.den
           let data = {