Add a demo page for image caption

frontend/pages/demo/image-caption/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <v-main>
+    <v-container fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <v-card>
+            <v-img contain :src="currentDoc.filename" max-height="300" class="grey lighten-2" />
+          </v-card>
+          <v-card>
+            <v-data-table
+              :headers="headers"
+              :items="currentDoc.annotations"
+              item-key="id"
+              hide-default-header
+              hide-default-footer
+              disable-pagination
+              class="elevation-1"
+              @input="update"
+            >
+              <template #top>
+                <v-text-field
+                  v-model="newText"
+                  :prepend-inner-icon="mdiPencil"
+                  :label="$t('annotation.newText')"
+                  autofocus
+                  single-line
+                  hide-details
+                  filled
+                  @keyup.enter="create"
+                  @compositionstart="compositionStart"
+                  @compositionend="compositionEnd"
+                />
+              </template>
+              <template #[`item.text`]="{ item }">
+                <v-edit-dialog>
+                  <span class="title" style="font-weight: 400">
+                    {{ item.text }}
+                  </span>
+                  <template #input>
+                    <v-textarea
+                      :value="item.text"
+                      :label="$t('generic.edit')"
+                      autofocus
+                      @change="update(item.id, $event)"
+                    />
+                  </template>
+                </v-edit-dialog>
+              </template>
+              <template #[`item.action`]="{ item }">
+                <v-icon small @click="remove(item.id)">
+                  {{ mdiDeleteOutline }}
+                </v-icon>
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="3">
+          <list-metadata :metadata="currentDoc.meta" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-main>
+</template>
+
+<script>
+import ListMetadata from '@/components/tasks/metadata/ListMetadata'
+import { mdiPencil, mdiDeleteOutline } from '@mdi/js'
+
+export default {
+  components: {
+    ListMetadata
+  },
+  layout: 'demo',
+
+  data() {
+    return {
+      newText: '',
+      headers: [
+        {
+          text: 'Text',
+          align: 'left',
+          value: 'text'
+        },
+        {
+          text: 'Actions',
+          align: 'right',
+          value: 'action'
+        }
+      ],
+      isComposing: false,
+      hasCompositionJustEnded: false,
+      mdiPencil,
+      mdiDeleteOutline,
+      currentDoc: {
+        id: 8,
+        filename: require('~/assets/6737785.png'),
+        annotations: [
+          {
+            id: 17,
+            text: "S'il ne m'avait pas aidé, j'aurais échoué.",
+            user: 1,
+            document: 8
+          },
+          {
+            id: 18,
+            text: "S'il ne m'avait pas aidée, j'aurais échoué.",
+            user: 1,
+            document: 8
+          }
+        ],
+        meta: {
+          url: 'https://github.com/Hironsan'
+        },
+        annotation_approver: null
+      }
+    }
+  },
+
+  methods: {
+    update(annotationId, text) {
+      if (text.length > 0) {
+        const index = this.currentDoc.annotations.findIndex((item) => item.id === annotationId)
+        this.currentDoc.annotations[index].text = text
+      } else {
+        this.remove(annotationId)
+      }
+    },
+    create() {
+      if (this.isComposing || this.hasCompositionJustEnded) {
+        this.hasCompositionJustEnded = false
+        return
+      }
+      if (this.newText.length > 0) {
+        const payload = {
+          id: Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER)),
+          text: this.newText
+        }
+        this.currentDoc.annotations.push(payload)
+        this.newText = ''
+      }
+    },
+    remove(annotationId) {
+      this.currentDoc.annotations = this.currentDoc.annotations.filter(
+        (item) => item.id !== annotationId
+      )
+    },
+    compositionStart() {
+      this.isComposing = true
+    },
+    compositionEnd() {
+      this.isComposing = false
+      this.hasCompositionJustEnded = true
+    }
+  }
+}
+</script>