From 24290ffc408e9fa7db3483f99532213fd43403c4 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 12 Apr 2022 09:12:36 +0900
Subject: [PATCH] Use upload_name in dataset page

---
 backend/examples/serializers.py              | 13 +++++++++++--
 frontend/components/example/AudioList.vue    |  9 +++------
 frontend/components/example/DocumentList.vue |  3 ---
 frontend/components/example/ImageList.vue    |  9 +++------
 frontend/domain/models/example/example.ts    |  8 +++-----
 5 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/backend/examples/serializers.py b/backend/examples/serializers.py
index 22c51bf6..fad6690e 100644
--- a/backend/examples/serializers.py
+++ b/backend/examples/serializers.py
@@ -36,8 +36,17 @@ class ExampleSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Example
-        fields = ["id", "filename", "meta", "annotation_approver", "comment_count", "text", "is_confirmed"]
-        read_only_fields = ["filename", "is_confirmed"]
+        fields = [
+            "id",
+            "filename",
+            "meta",
+            "annotation_approver",
+            "comment_count",
+            "text",
+            "is_confirmed",
+            "upload_name",
+        ]
+        read_only_fields = ["filename", "is_confirmed", "upload_name"]
 
 
 class ExampleStateSerializer(serializers.ModelSerializer):
diff --git a/frontend/components/example/AudioList.vue b/frontend/components/example/AudioList.vue
index b3d93521..e81df83f 100644
--- a/frontend/components/example/AudioList.vue
+++ b/frontend/components/example/AudioList.vue
@@ -29,19 +29,16 @@
         filled
       />
     </template>
-    <template #[`item.url`]="{ item }">
+    <template #[`item.fileUrl`]="{ item }">
       <audio
         controls
-        :src="item.url"
+        :src="item.fileUrl"
         class="mt-2"
       >
         Your browser does not support the
         <code>audio</code> element.
       </audio>
     </template>
-    <template #[`item.filename`]="{ item }">
-      {{ item.filename.split('?')[0] }}
-    </template>
     <template #[`item.meta`]="{ item }">
       {{ JSON.stringify(item.meta, null, 4) }}
     </template>
@@ -108,7 +105,7 @@ export default Vue.extend({
         },
         {
           text: 'Audio',
-          value: 'url',
+          value: 'fileUrl',
           sortable: false
         },
         {
diff --git a/frontend/components/example/DocumentList.vue b/frontend/components/example/DocumentList.vue
index 7895d19b..fd7c3aff 100644
--- a/frontend/components/example/DocumentList.vue
+++ b/frontend/components/example/DocumentList.vue
@@ -33,9 +33,6 @@
       <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
       <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
     </template>
-    <template #[`item.filename`]="{ item }">
-      {{ item.filename.split('?')[0] }}
-    </template>
     <template #[`item.meta`]="{ item }">
       {{ JSON.stringify(item.meta, null, 4) }}
     </template>
diff --git a/frontend/components/example/ImageList.vue b/frontend/components/example/ImageList.vue
index d6b2fd48..39afa3cc 100644
--- a/frontend/components/example/ImageList.vue
+++ b/frontend/components/example/ImageList.vue
@@ -29,9 +29,9 @@
         filled
       />
     </template>
-    <template #[`item.url`]="{ item }">
+    <template #[`item.fileUrl`]="{ item }">
       <v-img
-        :src="item.url"
+        :src="item.fileUrl"
         aspect-ratio="1"
         height="150"
         max-height="150"
@@ -39,9 +39,6 @@
         class="grey lighten-2"
       />
     </template>
-    <template #[`item.filename`]="{ item }">
-      {{ item.filename.split('?')[0] }}
-    </template>
     <template #[`item.meta`]="{ item }">
       {{ JSON.stringify(item.meta, null, 4) }}
     </template>
@@ -108,7 +105,7 @@ export default Vue.extend({
         },
         {
           text: 'Image',
-          value: 'url',
+          value: 'fileUrl',
           sortable: false
         },
         {
diff --git a/frontend/domain/models/example/example.ts b/frontend/domain/models/example/example.ts
index a4f4287e..ae01de1b 100644
--- a/frontend/domain/models/example/example.ts
+++ b/frontend/domain/models/example/example.ts
@@ -18,17 +18,15 @@ export class ExampleItem {
   @Expose({ name: 'is_confirmed' })
   isConfirmed: boolean;
 
+  @Expose({ name: 'upload_name' })
+  filename: string;
+
   get url() {
     const l = this.fileUrl.indexOf('media/')
     const r = this.fileUrl.indexOf('media/', l + 1)
     return this.fileUrl.slice(0, l) + this.fileUrl.slice(r)
   }
 
-  get filename() {
-    const items = this.fileUrl.split('/')
-    return items[items.length - 1]
-  }
-
   toObject(): Object {
     return {
       id: this.id,