Merge pull request '시리즈 리스트 페이지 추가' (#43) from test into main

Reviewed-on: #43

src/api/audio_content_series.js

@@ -1,5 +1,9 @@
 import Vue from 'vue';
 
+async function getAudioContentSeriesList(page) {
+    return Vue.axios.get("/admin/audio-content/series?page=" + (page - 1) + "&size=10");
+}
+
 async function getAudioContentSeriesGenreList() {
     return Vue.axios.get('/admin/audio-content/series/genre');
 }
@@ -17,6 +21,7 @@ async function updateAudioContentSeriesGenreOrders(ids) {
 }
 
 export {
+    getAudioContentSeriesList,
     getAudioContentSeriesGenreList,
     createAudioContentSeriesGenre,
     updateAudioContentSeriesGenre,

src/router/index.js

@@ -80,6 +80,11 @@ const routes = [
                 name: 'ContentCuration',
                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCuration.vue')
             },
+            {
+                path: '/content/series/list',
+                name: 'ContentSeriesList',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentSeriesList.vue')
+            },
             {
                 path: '/content/series/genre',
                 name: 'ContentSeriesGenre',

src/views/Content/ContentSeriesList.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>시리즈 리스트</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    시리즈 번호
+                  </th>
+                  <th class="text-center">
+                    썸네일
+                  </th>
+                  <th class="text-center">
+                    제목
+                  </th>
+                  <th class="text-center">
+                    내용
+                  </th>
+                  <th class="text-center">
+                    크리에이터
+                  </th>
+                  <th class="text-center">
+                    장르
+                  </th>
+                  <th class="text-center">
+                    연재여부
+                  </th>
+                  <th class="text-center">
+                    19금
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in series_list"
+                  :key="item.id"
+                >
+                  <td>{{ item.id }}</td>
+                  <td align="center">
+                    <v-img
+                      max-width="70"
+                      max-height="70"
+                      :src="item.coverImageUrl"
+                      class="rounded-circle"
+                    />
+                    <br>
+                    <a
+                      :href="item.coverImageUrl"
+                      class="v-btn v-btn--outlined"
+                    >
+                      다운로드
+                    </a>
+                  </td>
+                  <td>
+                    <vue-show-more-text
+                      :text="item.title"
+                      :lines="3"
+                    />
+                  </td>
+                  <td style="max-width: 200px !important; word-break:break-all; height: auto;">
+                    <vue-show-more-text
+                      :text="item.introduction"
+                      :lines="3"
+                    />
+                  </td>
+                  <td>{{ item.creatorNickname }}</td>
+                  <td>{{ item.genre }}</td>
+                  <td>{{ item.state }}</td>
+                  <td>
+                    <div v-if="item.isAdult">
+                      O
+                    </div>
+                    <div v-else>
+                      X
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audio_content_series'
+
+import VueShowMoreText from 'vue-show-more-text'
+
+export default {
+  name: "AudioContentSeriesList",
+
+  components: {VueShowMoreText},
+
+  data() {
+    return {
+      is_loading: false,
+      page: 1,
+      total_page: 0,
+      series_list: []
+    }
+  },
+
+  async created() {
+    await this.getAudioContentSeries()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getAudioContentSeries() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getAudioContentSeriesList(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          const total_page = Math.ceil(data.totalCount / 10)
+          this.series_list = data.items
+
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+
+    async next() {
+      await this.getAudioContentSeries()
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>