From cf8bb5f192c183dec952aa11a0f8bfcbcb048fb8 Mon Sep 17 00:00:00 2001
From: yanghao05 <yanghao05@qianxin.com>
Date: Tue, 8 Apr 2025 15:35:58 +0800
Subject: [PATCH] feat: update page list show

---
 backend/app/models/medias.go           |  49 +++++---
 backend/app/models/medias_test.go      |  79 ++++++++++++
 backend/app/models/posts.go            |   4 +-
 backend/app/requests/pagination.go     |   9 +-
 backend/app/service/http/http.go       |   4 +-
 backend/test.http                      |   4 +
 frontend/admin/index.html              |   2 +-
 frontend/admin/src/App.vue             |   2 +-
 frontend/admin/src/api/get_medias.json |  52 ++++++++
 frontend/admin/src/api/httpClient.js   |   2 +-
 frontend/admin/src/api/mediaService.js |   9 ++
 frontend/admin/src/pages/MediaPage.vue | 161 +++++++++++++------------
 frontend/admin/vite.config.js          |   5 +-
 13 files changed, 280 insertions(+), 102 deletions(-)
 create mode 100644 frontend/admin/src/api/get_medias.json
 create mode 100644 frontend/admin/src/api/mediaService.js

diff --git a/backend/app/models/medias.go b/backend/app/models/medias.go
index d577188..1e09014 100644
--- a/backend/app/models/medias.go
+++ b/backend/app/models/medias.go
@@ -64,8 +64,8 @@ func (m *mediasModel) countByCondition(ctx context.Context, expr BoolExpression)
 }
 
 func (m *mediasModel) List(ctx context.Context, pagination *requests.Pagination) (*requests.Pager, error) {
-	limit := pagination.Limit
-	offset := pagination.Offset()
+	limit := pagination.GetLimit()
+	offset := pagination.GetOffset()
 
 	tbl := table.Medias
 	stmt := tbl.
@@ -89,8 +89,8 @@ func (m *mediasModel) List(ctx context.Context, pagination *requests.Pagination)
 	}
 
 	// Convert model.Medias to MediaItem
-	mediaItems := lo.Map(medias, func(media model.Medias, _ int) MediaItem {
-		return MediaItem{
+	mediaItems := lo.Map(medias, func(media model.Medias, _ int) *MediaItem {
+		return &MediaItem{
 			ID:           media.ID,
 			Name:         media.Name,
 			UploadTime:   media.CreatedAt.Format("2006-01-02 15:04:05"),
@@ -108,6 +108,19 @@ func (m *mediasModel) List(ctx context.Context, pagination *requests.Pagination)
 	}, nil
 }
 
+func (m *mediasModel) BatchCreate(ctx context.Context, models []*model.Medias) error {
+	stmt := table.Medias.INSERT(table.Medias.MutableColumns).MODELS(models)
+	m.log.Infof("sql: %s", stmt.DebugSql())
+
+	if _, err := stmt.ExecContext(ctx, db); err != nil {
+		m.log.Errorf("error creating media item: %v", err)
+		return err
+	}
+
+	m.log.Infof("media item created successfully")
+	return nil
+}
+
 func (m *mediasModel) Create(ctx context.Context, model *model.Medias) error {
 	stmt := table.Medias.INSERT(table.Medias.MutableColumns).MODEL(model)
 	m.log.Infof("sql: %s", stmt.DebugSql())
@@ -123,9 +136,7 @@ func (m *mediasModel) Create(ctx context.Context, model *model.Medias) error {
 
 func (m *mediasModel) ConvertFileTypeByMimeType(mimeType string) MediaType {
 	switch mimeType {
-	case "image/jpeg":
-	case "image/jpg":
-	case "image/png":
+	case "image/jpeg", "image/jpg", "image/png":
 		return MediaTypeImage
 	case "video/mp4":
 		return MediaTypeVideo
@@ -133,19 +144,19 @@ func (m *mediasModel) ConvertFileTypeByMimeType(mimeType string) MediaType {
 		return MediaTypeAudio
 	case "application/pdf":
 		return MediaTypePDF
-	case "application/msword":
-	case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-	case "application/vnd.ms-excel":
-	case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-	case "application/vnd.ms-powerpoint":
-	case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+	case "application/msword",
+		"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+		"application/vnd.ms-excel",
+		"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+		"application/vnd.ms-powerpoint",
+		"application/vnd.openxmlformats-officedocument.presentationml.presentation":
 		return MediaTypeDocument
-	case "application/rar":
-	case "application/x-rar-compressed":
-	case "application/x-zip-compressed":
-	case "application/x-zip":
-	case "application/zip":
-	case "application/x-7z-compressed":
+	case "application/rar",
+		"application/x-rar-compressed",
+		"application/x-zip-compressed",
+		"application/x-zip",
+		"application/zip",
+		"application/x-7z-compressed":
 		return MediaTypeArchive
 	}
 	return MediaTypeUnknown
diff --git a/backend/app/models/medias_test.go b/backend/app/models/medias_test.go
index 7302dd3..27acacd 100644
--- a/backend/app/models/medias_test.go
+++ b/backend/app/models/medias_test.go
@@ -3,6 +3,8 @@ package models
 import (
 	"context"
 	"fmt"
+	"math"
+	"math/rand"
 	"testing"
 	"time"
 
@@ -54,6 +56,60 @@ func (s *MediasTestSuite) Test_countByCondition() {
 	})
 }
 
+func (s *MediasTestSuite) Test_BatchCreate() {
+	Convey("Create", s.T(), func() {
+		Convey("valid media", func() {
+			database.Truncate(context.Background(), db, table.Medias.TableName())
+
+			models := []*model.Medias{
+				{
+					Name:      "test 01",
+					CreatedAt: time.Now(),
+					MimeType:  "video/mp4",
+					Size:      rand.Int63n(math.MaxInt64), // Random size
+					Path:      "path/to/media.mp4",
+				},
+				{
+					Name:      "test 02",
+					CreatedAt: time.Now(),
+					MimeType:  "audio/mp3",
+					Size:      rand.Int63n(math.MaxInt64), // Random size
+					Path:      "path/to/media.mp3",
+				},
+				{
+					Name:      "test 03",
+					CreatedAt: time.Now(),
+					MimeType:  "application/pdf",
+					Size:      rand.Int63n(math.MaxInt64), // Random size
+					Path:      "path/to/media.pdf",
+				},
+				{
+					Name:      "test 04",
+					CreatedAt: time.Now(),
+					MimeType:  "image/jpeg",
+					Size:      rand.Int63n(math.MaxInt64), // Random size
+					Path:      "path/to/media.jpeg",
+				},
+				{
+					Name:      "test 05",
+					CreatedAt: time.Now(),
+					MimeType:  "application/zip",
+					Size:      rand.Int63n(math.MaxInt64), // Random size
+					Path:      "path/to/media.zip",
+				},
+			}
+
+			count := 10
+			for i := 0; i < count; i++ {
+				err := Medias.BatchCreate(context.Background(), models)
+				Convey("Create should not return an error: "+fmt.Sprintf("%d", i), func() {
+					So(err, ShouldBeNil)
+				})
+			}
+		})
+	})
+}
+
 func (s *MediasTestSuite) Test_Create() {
 	Convey("Create", s.T(), func() {
 		Convey("valid media", func() {
@@ -132,3 +188,26 @@ func (s *MediasTestSuite) Test_Page() {
 		})
 	})
 }
+
+// Test ConvertFileTypeByMimeType
+func (s *MediasTestSuite) Test_ConvertFileTypeByMimeType() {
+	Convey("ConvertFileTypeByMimeType", s.T(), func() {
+		Convey("image", func() {
+			mimeType := "image/jpeg"
+			fileType := Medias.ConvertFileTypeByMimeType(mimeType)
+			So(fileType, ShouldEqual, MediaTypeImage)
+		})
+
+		Convey("video", func() {
+			mimeType := "video/mp4"
+			fileType := Medias.ConvertFileTypeByMimeType(mimeType)
+			So(fileType, ShouldEqual, MediaTypeVideo)
+		})
+
+		Convey("invalid mime type", func() {
+			mimeType := "invalid/type"
+			fileType := Medias.ConvertFileTypeByMimeType(mimeType)
+			So(fileType, ShouldEqual, MediaTypeUnknown)
+		})
+	})
+}
diff --git a/backend/app/models/posts.go b/backend/app/models/posts.go
index bce1d7d..5d31feb 100644
--- a/backend/app/models/posts.go
+++ b/backend/app/models/posts.go
@@ -118,8 +118,8 @@ func (m *postsModel) countByCondition(ctx context.Context, expr BoolExpression)
 }
 
 func (m *postsModel) List(ctx context.Context, pagination *requests.Pagination, cond BoolExpression) (*requests.Pager, error) {
-	limit := pagination.Limit
-	offset := pagination.Offset()
+	limit := pagination.GetLimit()
+	offset := pagination.GetOffset()
 
 	tbl := table.Posts
 	stmt := tbl.
diff --git a/backend/app/requests/pagination.go b/backend/app/requests/pagination.go
index e98528d..c626318 100644
--- a/backend/app/requests/pagination.go
+++ b/backend/app/requests/pagination.go
@@ -13,10 +13,17 @@ type Pagination struct {
 	Limit int64 `json:"limit" form:"limit" query:"limit"`
 }
 
-func (filter *Pagination) Offset() int64 {
+func (filter *Pagination) GetOffset() int64 {
 	return (filter.Page - 1) * filter.Limit
 }
 
+func (filter *Pagination) GetLimit() int64 {
+	if filter.Limit <= 0 {
+		return 10
+	}
+	return filter.Limit
+}
+
 func (filter *Pagination) Format() *Pagination {
 	if filter.Page <= 0 {
 		filter.Page = 1
diff --git a/backend/app/service/http/http.go b/backend/app/service/http/http.go
index 6233cc6..80b402f 100644
--- a/backend/app/service/http/http.go
+++ b/backend/app/service/http/http.go
@@ -6,6 +6,7 @@ import (
 	"quyun/app/errorx"
 	appHttp "quyun/app/http"
 	"quyun/app/jobs"
+	"quyun/app/models"
 	"quyun/app/service"
 	_ "quyun/docs"
 	"quyun/providers/ali"
@@ -47,6 +48,7 @@ func Command() atom.Option {
 			defaultProviders().
 				With(
 					jobs.Provide,
+					models.Provide,
 				).
 				WithProviders(
 					appHttp.Providers(),
@@ -68,7 +70,7 @@ type Service struct {
 
 func Serve(cmd *cobra.Command, args []string) error {
 	return container.Container.Invoke(func(ctx context.Context, svc Service) error {
-		log.SetFormatter(&log.JSONFormatter{})
+		log.SetFormatter(&log.TextFormatter{})
 
 		if svc.App.Mode == app.AppModeDevelopment {
 			log.SetLevel(log.DebugLevel)
diff --git a/backend/test.http b/backend/test.http
index c3c3e92..a5a3f4a 100644
--- a/backend/test.http
+++ b/backend/test.http
@@ -31,4 +31,8 @@ Content-Type: application/json
 
 ### get oss token
 GET {{host}}/v1/admin/uploads/token HTTP/1.1
+Content-Type: application/json
+
+### get medias
+GET {{host}}/v1/admin/medias HTTP/1.1
 Content-Type: application/json
\ No newline at end of file
diff --git a/frontend/admin/index.html b/frontend/admin/index.html
index 3afa212..c203166 100644
--- a/frontend/admin/index.html
+++ b/frontend/admin/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>趣云管理后台</title>
+    <title>Hello</title>
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <meta name="description" content="趣云内容管理系统后台">
 </head>
diff --git a/frontend/admin/src/App.vue b/frontend/admin/src/App.vue
index 14e7ded..38ee0db 100644
--- a/frontend/admin/src/App.vue
+++ b/frontend/admin/src/App.vue
@@ -37,7 +37,7 @@ const navItems = ref([
             <Menubar :model="navItems" class="!rounded-none">
                 <template #start>
                     <div class="flex items-center pr-4">
-                        <h2 class="m-0 text-2xl text-primary font-semibold">Admin Panel</h2>
+                        <h2 class="m-0 text-2xl text-primary font-semibold">Panel</h2>
                     </div>
                 </template>
                 <template #end>
diff --git a/frontend/admin/src/api/get_medias.json b/frontend/admin/src/api/get_medias.json
new file mode 100644
index 0000000..dd20bf1
--- /dev/null
+++ b/frontend/admin/src/api/get_medias.json
@@ -0,0 +1,52 @@
+{
+    "page": 0,
+    "limit": 0,
+    "total": 5,
+    "items": [
+        {
+            "id": 5,
+            "name": "test 05",
+            "upload_time": "2025-04-07 16:44:26",
+            "file_size": 100,
+            "media_type": "application/zip",
+            "file_type": "archive",
+            "thumbnail_url": ""
+        },
+        {
+            "id": 4,
+            "name": "test 04",
+            "upload_time": "2025-04-07 16:44:26",
+            "file_size": 100,
+            "media_type": "image/jpeg",
+            "file_type": "image",
+            "thumbnail_url": ""
+        },
+        {
+            "id": 3,
+            "name": "test 03",
+            "upload_time": "2025-04-07 16:44:26",
+            "file_size": 100,
+            "media_type": "application/pdf",
+            "file_type": "pdf",
+            "thumbnail_url": ""
+        },
+        {
+            "id": 2,
+            "name": "test 02",
+            "upload_time": "2025-04-07 16:44:26",
+            "file_size": 100,
+            "media_type": "audio/mp3",
+            "file_type": "unknown",
+            "thumbnail_url": ""
+        },
+        {
+            "id": 1,
+            "name": "test 01",
+            "upload_time": "2025-04-07 16:44:26",
+            "file_size": 100,
+            "media_type": "video/mp4",
+            "file_type": "video",
+            "thumbnail_url": ""
+        }
+    ]
+}
\ No newline at end of file
diff --git a/frontend/admin/src/api/httpClient.js b/frontend/admin/src/api/httpClient.js
index 5051bf1..2942dbe 100644
--- a/frontend/admin/src/api/httpClient.js
+++ b/frontend/admin/src/api/httpClient.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 
 // Create axios instance with default config
 const httpClient = axios.create({
-    baseURL: '/api',
+    baseURL: '/v1',
     timeout: 10000,
     headers: {
         'Content-Type': 'application/json',
diff --git a/frontend/admin/src/api/mediaService.js b/frontend/admin/src/api/mediaService.js
new file mode 100644
index 0000000..282fcc3
--- /dev/null
+++ b/frontend/admin/src/api/mediaService.js
@@ -0,0 +1,9 @@
+import httpClient from './httpClient';
+
+export const mediaService = {
+    getMedias({ page = 1, limit = 10 } = {}) {
+        return httpClient.get('/admin/medias', {
+            params: { page, limit }
+        });
+    },
+};
\ No newline at end of file
diff --git a/frontend/admin/src/pages/MediaPage.vue b/frontend/admin/src/pages/MediaPage.vue
index 4baaca8..ef3d086 100644
--- a/frontend/admin/src/pages/MediaPage.vue
+++ b/frontend/admin/src/pages/MediaPage.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { mediaService } from '@/api/mediaService';
 import { InputText } from 'primevue';
 import Badge from 'primevue/badge';
 import Button from 'primevue/button';
@@ -12,7 +13,7 @@ import ProgressSpinner from 'primevue/progressspinner';
 import Toast from 'primevue/toast';
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 // Import useConfirm dynamically to avoid the error when the service is not provided
 const confirm = useConfirm();
@@ -44,55 +45,23 @@ const mediaTypes = ref([
 const selectedMediaType = ref(mediaTypes.value[0]);
 const globalFilterValue = ref('');
 const loading = ref(false);
+const filters = ref({
+    global: { value: null, matchMode: 'contains' }
+});
+
+// Add pagination state
+const first = ref(0);
+const rows = ref(10);
+const totalRecords = ref(0);
+const currentPage = ref(1);
+
+// Add computed for total pages
+const totalPages = computed(() => {
+    return Math.ceil(totalRecords.value / rows.value);
+});
 
 // Sample data - in a real app, this would come from an API
-const mediaFiles = ref([
-    {
-        id: 1,
-        fileName: 'sunset-beach.jpg',
-        uploadTime: 'Today, 10:30 AM',
-        fileSize: '2.4 MB',
-        fileType: 'Image',
-        thumbnailUrl: 'https://via.placeholder.com/300x225',
-        iconClass: 'pi-image'
-    },
-    {
-        id: 2,
-        fileName: 'presentation.pdf',
-        uploadTime: 'Yesterday, 3:45 PM',
-        fileSize: '4.8 MB',
-        fileType: 'PDF',
-        thumbnailUrl: null,
-        iconClass: 'pi-file-pdf'
-    },
-    {
-        id: 3,
-        fileName: 'promo_video.mp4',
-        uploadTime: 'Aug 28, 2023',
-        fileSize: '24.8 MB',
-        fileType: 'Video',
-        thumbnailUrl: null,
-        iconClass: 'pi-video'
-    },
-    {
-        id: 4,
-        fileName: 'report_q3.docx',
-        uploadTime: 'Aug 25, 2023',
-        fileSize: '1.2 MB',
-        fileType: 'Document',
-        thumbnailUrl: null,
-        iconClass: 'pi-file'
-    },
-    {
-        id: 5,
-        fileName: 'podcast_interview.mp3',
-        uploadTime: 'Aug 20, 2023',
-        fileSize: '18.5 MB',
-        fileType: 'Audio',
-        thumbnailUrl: null,
-        iconClass: 'pi-volume-up'
-    }
-]);
+const mediaFiles = ref([]);
 
 // File upload handling
 const onUpload = (event) => {
@@ -109,20 +78,18 @@ const onUpload = (event) => {
 
 // Preview file
 const previewFile = (file) => {
-    // In a real app, this would open a modal with a preview or navigate to a preview page
-    toast.add({ severity: 'info', summary: 'Preview', detail: `Previewing ${file.fileName}`, life: 3000 });
+    toast.add({ severity: 'info', summary: 'Preview', detail: `Previewing ${file.name}`, life: 3000 });
 };
 
 // Download file
 const downloadFile = (file) => {
-    // In a real app, this would trigger a download
-    toast.add({ severity: 'info', summary: 'Download', detail: `Downloading ${file.fileName}`, life: 3000 });
+    toast.add({ severity: 'info', summary: 'Download', detail: `Downloading ${file.name}`, life: 3000 });
 };
 
 // Delete file
 const confirmDelete = (file) => {
     confirm.require({
-        message: `Are you sure you want to delete ${file.fileName}?`,
+        message: `Are you sure you want to delete ${file.name}?`,
         header: 'Confirmation',
         icon: 'pi pi-exclamation-triangle',
         acceptClass: 'p-button-danger',
@@ -138,13 +105,13 @@ const confirmDelete = (file) => {
 const fetchMediaFiles = async () => {
     loading.value = true;
     try {
-        // In a real app, this would be an API call
-        // const response = await mediaApi.getMediaFiles();
-        // mediaFiles.value = response.data;
-
-        // Simulate API delay
-        await new Promise(resolve => setTimeout(resolve, 500));
-        // Using sample data already defined above
+        const response = await mediaService.getMedias({
+            page: currentPage.value,
+            limit: rows.value
+        });
+        mediaFiles.value = response.items;
+        totalRecords.value = response.total;
+        console.log(totalRecords.value);
     } catch (error) {
         toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load media files', life: 3000 });
     } finally {
@@ -152,6 +119,16 @@ const fetchMediaFiles = async () => {
     }
 };
 
+// Add page change handler
+const onPage = (event) => {
+    first.value = event.first;
+    rows.value = event.rows;
+    currentPage.value = Math.floor(event.first / event.rows) + 1;
+
+    console.log(event)
+    fetchMediaFiles();
+};
+
 onMounted(() => {
     fetchMediaFiles();
 });
@@ -173,6 +150,27 @@ const getFileIcon = (file) => {
     if (file.thumbnailUrl) return null;
     return `pi ${file.iconClass}`;
 };
+
+// Add helper function to format file size
+const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 B';
+    const k = BigInt(1024);
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+
+    // Convert input to BigInt
+    const bytesValue = BigInt(bytes);
+
+    // Calculate the appropriate unit
+    let i = 0;
+    let size = bytesValue;
+    while (size >= k && i < sizes.length - 1) {
+        size = size / k;
+        i++;
+    }
+
+    // Convert back to number and format with commas
+    return `${Number(size).toLocaleString('en-US')} ${sizes[i]}`;
+};
 </script>
 
 <template>
@@ -193,13 +191,22 @@ const getFileIcon = (file) => {
                 <InputText v-model="globalFilterValue" placeholder="Search media..." class="flex-1" />
             </div>
 
-            <DataTable v-model:filters="filters" :value="mediaFiles" :paginator="true" :rows="5"
+            <DataTable v-model:filters="filters" :value="mediaFiles" :paginator="true" v-model:first="first"
+                v-model:rows="rows" :totalRecords="totalRecords" @page="onPage"
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                :rowsPerPageOptions="[5, 10, 25]"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" :loading="loading"
-                dataKey="id" :globalFilterFields="['fileName', 'fileType']"
-                :filters="{ global: { value: globalFilterValue, matchMode: 'contains' } }" stripedRows removableSort
-                class="p-datatable-sm" responsiveLayout="scroll">
+                :rows-per-page-options="[10, 25, 50]"
+                current-page-report-template="Showing {first} to {last} of {totalRecords} entries" :lazy="true"
+                :show-current-page-report="true">
+                <template #paginatorLeft>
+                    <div class="flex items-center">
+                        Per Page: {{ rows }}
+                    </div>
+                </template>
+                <template #paginatorRight>
+                    <div class="flex items-center">
+                        Page {{ currentPage }} of {{ totalPages }}
+                    </div>
+                </template>
                 <template #empty>
                     <div class="text-center p-4">No media files found.</div>
                 </template>
@@ -210,28 +217,32 @@ const getFileIcon = (file) => {
                     </div>
                 </template>
 
-                <Column field="fileName" header="File Name" sortable>
+                <Column field="name" header="File Name" sortable>
                     <template #body="{ data }">
                         <div class="flex items-center">
-                            <div v-if="data.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
-                                <img class="h-10 w-10 object-cover rounded" :src="data.thumbnailUrl"
-                                    :alt="data.fileName">
+                            <div v-if="data.thumbnail_url" class="flex-shrink-0 h-10 w-10 mr-3">
+                                <img class="h-10 w-10 object-cover rounded" :src="data.thumbnail_url" :alt="data.name">
                             </div>
                             <div v-else
                                 class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
                                 <i :class="getFileIcon(data)" class="text-2xl"></i>
                             </div>
-                            <div class="text-sm font-medium text-gray-900">{{ data.fileName }}</div>
+                            <div class="text-sm font-medium text-gray-900">{{ data.name }}</div>
                         </div>
                     </template>
                 </Column>
 
-                <Column field="uploadTime" header="Upload Time" sortable></Column>
-                <Column field="fileSize" header="File Size" sortable></Column>
+                <Column field="upload_time" header="Upload Time" sortable></Column>
 
-                <Column field="fileType" header="File Type" sortable>
+                <Column field="file_size" header="File Size" sortable>
                     <template #body="{ data }">
-                        <Badge :value="data.fileType" :severity="getBadgeSeverity(data.fileType)" />
+                        {{ formatFileSize(data.file_size) }}
+                    </template>
+                </Column>
+
+                <Column field="media_type" header="File Type" sortable>
+                    <template #body="{ data }">
+                        <Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
                         <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="mediaTypes"
diff --git a/frontend/admin/vite.config.js b/frontend/admin/vite.config.js
index c708ed1..b247f30 100644
--- a/frontend/admin/vite.config.js
+++ b/frontend/admin/vite.config.js
@@ -15,6 +15,9 @@ export default defineConfig({
     },
     server: {
         port: 3000,
-        open: true
+        open: true,
+        proxy: {
+            '/v1': 'http://localhost:8088',
+        }
     }
 });