Add AudioList.vue

frontend/components/example/AudioList.vue

@@ -0,0 +1,162 @@
+<template>
+  <v-data-table
+    :value="value"
+    :headers="headers"
+    :items="items"
+    :options.sync="options"
+    :server-items-length="total"
+    :search="search"
+    :loading="isLoading"
+    :loading-text="$t('generic.loading')"
+    :no-data-text="$t('vuetify.noDataAvailable')"
+    :footer-props="{
+      'showFirstLastPage': true,
+      'items-per-page-options': [10, 50, 100],
+      'items-per-page-text': $t('vuetify.itemsPerPageText'),
+      'page-text': $t('dataset.pageText')
+    }"
+    item-key="id"
+    show-select
+    @input="$emit('input', $event)"
+  >
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        prepend-inner-icon="search"
+        :label="$t('generic.search')"
+        single-line
+        hide-details
+        filled
+      />
+    </template>
+    <template v-slot:[`item.url`]="{ item }">
+      <audio
+        controls
+        :src="item.url"
+        class="mt-2"
+      >
+        Your browser does not support the
+        <code>audio</code> element.
+      </audio>
+    </template>
+    <template v-slot:[`item.meta`]="{ item }">
+      {{ JSON.stringify(item.meta, null, 4) }}
+    </template>
+    <template v-slot:[`item.commentCount`]="{ item }">
+      <span> {{ item.commentCount }} </span>
+    </template>
+    <template v-slot:[`item.action`]="{ item }">
+      <v-btn
+        small
+        color="primary text-capitalize"
+        @click="toLabeling(item)"
+      >
+        {{ $t('dataset.annotate') }}
+      </v-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { DataOptions } from 'vuetify/types'
+import { ExampleDTO } from '~/services/application/example/exampleData'
+
+export default Vue.extend({
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    items: {
+      type: Array as PropType<ExampleDTO[]>,
+      default: () => [],
+      required: true
+    },
+    value: {
+      type: Array as PropType<ExampleDTO[]>,
+      default: () => [],
+      required: true
+    },
+    total: {
+      type: Number,
+      default: 0,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      search: this.$route.query.q,
+      options: {} as DataOptions,
+    }
+  },
+
+  computed: {
+    headers() {
+      return [
+        {
+          text: 'Audio',
+          value: 'url',
+          sortable: false
+        },
+        {
+          text: 'Filename',
+          value: 'filename',
+          sortable: false
+        },
+        {
+          text: this.$t('dataset.metadata'),
+          value: 'meta',
+          sortable: false
+        },
+        {
+          text: this.$t('comments.comments'),
+          value: 'commentCount',
+          sortable: false
+        },
+        {
+          text: this.$t('dataset.action'),
+          value: 'action',
+          sortable: false
+        }
+      ]
+    }
+  },
+
+  watch: {
+    options: {
+      handler() {
+        this.$emit('update:query', {
+          query: {
+            limit: this.options.itemsPerPage.toString(),
+            offset: ((this.options.page - 1) * this.options.itemsPerPage).toString(),
+            q: this.search
+          }
+        })
+      },
+      deep: true
+    },
+    search() {
+      this.$emit('update:query', {
+        query: {
+          limit: this.options.itemsPerPage.toString(),
+          offset: '0',
+          q: this.search
+        }
+      })
+      this.options.page = 1
+    }
+  },
+
+  methods: {
+    toLabeling(item: ExampleDTO) {
+      const index = this.items.indexOf(item)
+      const offset = (this.options.page - 1) * this.options.itemsPerPage
+      const page = (offset + index + 1).toString()
+      this.$emit('click:labeling', { page, q: this.search })
+    }
+  }
+})
+</script>

frontend/pages/projects/_id/dataset/index.vue

@@ -51,6 +51,15 @@
       @update:query="updateQuery"
       @click:labeling="movePage"
     />
+    <audio-list
+      v-else-if="isAudioTask"
+      v-model="selected"
+      :items="item.items"
+      :is-loading="isLoading"
+      :total="item.count"
+      @update:query="updateQuery"
+      @click:labeling="movePage"
+    />
     <document-list
       v-else
       v-model="selected"
@@ -71,6 +80,7 @@ import FormDelete from '@/components/example/FormDelete.vue'
 import FormDeleteBulk from '@/components/example/FormDeleteBulk.vue'
 import FormDownload from '@/components/example/FormDownload.vue'
 import ImageList from '~/components/example/ImageList.vue'
+import AudioList from '~/components/example/AudioList.vue'
 import { ExampleListDTO, ExampleDTO } from '~/services/application/example/exampleData'
 import ActionMenu from '~/components/example/ActionMenu.vue'
 import { ProjectDTO } from '~/services/application/project/projectData'
@@ -80,6 +90,7 @@ export default Vue.extend({
 
   components: {
     ActionMenu,
+    AudioList,
     DocumentList,
     ImageList,
     FormDelete,
@@ -115,6 +126,9 @@ export default Vue.extend({
     isImageTask(): boolean {
       return this.project.projectType === 'ImageClassification'
     },
+    isAudioTask(): boolean {
+      return this.project.projectType === 'Speech2text'
+    },
     itemKey(): string {
       if (this.isImageTask) {
         return 'filename'