edit title and description

src/components/FileLoader.vue

@@ -95,7 +95,6 @@
 
     const snapshot = async (source) => {
         let canvas = document.createElement('canvas')
-        console.log(source)
         let width = source.tagName =='IMG' ? source.naturalWidth : source.videoWidth
         let height = source.tagName == 'IMG' ? source.naturalHeight : source.videoHeight
         canvas.width = 640

src/components/SceneEntry.vue

@@ -27,11 +27,13 @@
 
           <template #item="{element, index}">
             <ShotEntry
+                :key="element.title, index"
                 :title="element.title"
                 :description="element.description"
                 :img="element.img"
                 :order="index + 1"
                 @remove="remove(index)"
+                @update="update"
           />
            </template>
     </draggable>
@@ -87,6 +89,12 @@ const remove = (index) => {
     shots.value.splice(index, 1)
 }
 
+const update = (e) => {
+    let index = e.order - 1
+    shots.value[index].title = e.title
+    shots.value[index].description = e.description
+}
+
 const removeScene = () => {
     emit('remove')
 }

src/components/ShotEntry.vue

@@ -2,19 +2,39 @@
     <div class="shot">
         <button class="remove" @click="emit('remove')">x</button>
         <img :src="img">
-        <div class="meta">
+        <div class="meta" v-if="!edit" @dblclick="edit=true">
             <span class="order">{{order}}</span>
             <h3 class="title" >{{title}}</h3>
             <p class="description">{{description}}</p>
         </div>
+        <form class="meta" v-else>
+            <input class="title" v-model="shotTitle">
+            <textarea class="description" v-model="shotDescription"></textarea>
+            <button @click.prevent="update">Confirm</button>
+        </form>
     </div>
 
 
 </template>
 <script setup>
 
+    import {ref } from 'vue'
+
     const props = defineProps(['title', 'description', 'img', 'order'])
-    const emit = defineEmits(['remove'])
+
+
+    const shotTitle = ref(props.title)
+    const shotDescription = ref(props.description)
+
+    const emit = defineEmits(['remove', 'update']) 
+
+    const edit = ref(false)
+
+    const update = () => {
+        emit('update', {title: shotTitle.value, description: shotDescription.value, order: props.order})
+        edit.value = false
+    }
+
 
 </script>
 <style>