콘텐츠 카테고리 API 추가

src/api/category.js

@@ -4,12 +4,12 @@ async function saveCategory(title) {
     return Vue.axios.post('/category', {title: title, contentIdList: []});
 }
 
-async function modifyCategory(title, categoryId) {
+async function modifyCategory(categoryId, title = null, addContentIdList = [], removeContentIdList = []) {
     return Vue.axios.put('/category', {
         categoryId: categoryId,
         title: title,
-        addContentIdList: [],
-        removeContentIdList: []
+        addContentIdList: addContentIdList,
+        removeContentIdList: removeContentIdList
     });
 }
 

src/api/content_category.js

@@ -0,0 +1,18 @@
+import Vue from "vue";
+
+async function getContentInCategory(categoryId, page) {
+    return Vue.axios.get(
+        "/creator-admin/content-category?category_id=" + categoryId +
+        "&page=" + (page - 1) +
+        "&size=10"
+    )
+}
+
+async function searchContentNotInCategory(categoryId, searchWord) {
+    return Vue.axios.get(
+        "/creator-admin/content-category/search?category_id=" + categoryId +
+        "&search_word=" + searchWord
+    )
+}
+
+export {getContentInCategory, searchContentNotInCategory}

src/views/Content/ContentCategoryList.vue

@@ -58,52 +58,74 @@
           <p v-else>
             카테고리를 선택해 주세요
           </p>
-          <v-data-table
-            :headers="headers"
-            :items="content_list"
-            :loading="is_loading"
-            :items-per-page="-1"
-            item-key="id"
-            class="elevation-1"
-            hide-default-footer
-          >
-            <template v-slot:body="props">
-              <draggable
-                v-model="props.items"
-                tag="tbody"
-              >
+          <v-simple-table>
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    썸네일
+                  </th>
+                  <th class="text-center">
+                    제목
+                  </th>
+                  <th class="text-center">
+                    19금
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="category-content-table-tbody">
                 <tr
-                  v-for="(item, index) in props.items"
-                  :key="index"
+                  v-for="content in content_list"
+                  :key="content.contentId"
+                  class="category-content-table-tr"
                 >
-                  <td>
-                    <img
-                      :src="item.image"
-                      alt=""
-                      height="100"
-                      width="100"
-                    >
+                  <td align="center">
+                    <v-img
+                      max-width="100"
+                      max-height="100"
+                      :src="content.image"
+                    />
                   </td>
-                  <td><h3>{{ item.title }}</h3></td>
-                  <td>
-                    <h3 v-if="item.isAdult">
+                  <td align="center">
+                    {{ content.title }}
+                  </td>
+                  <td align="center">
+                    <div v-if="content.isAdult">
                       O
-                    </h3>
-                    <h3 v-else>
+                    </div>
+                    <div v-else>
                       X
-                    </h3>
+                    </div>
                   </td>
-                  <td>
+                  <td align="center">
                     <v-btn
-                      :disabled="is_loading"
+                      color="#3bb9f1"
+                      @click="removeContentInCategory(content)"
                     >
                       삭제
                     </v-btn>
                   </td>
                 </tr>
-              </draggable>
+              </tbody>
             </template>
-          </v-data-table>
+          </v-simple-table>
+          <br><br>
+          <v-row
+            v-if="total_page > 0"
+            class="text-center"
+          >
+            <v-col>
+              <v-pagination
+                v-model="page"
+                :length="total_page"
+                circle
+                @input="next"
+              />
+            </v-col>
+          </v-row>
         </v-col>
       </v-row>
     </v-container>
@@ -169,7 +191,117 @@
     </v-container>
 
     <v-container>
-      <v-row />
+      <v-row>
+        <v-dialog
+          v-model="show_add_content_dialog"
+          max-width="1000px"
+          persistent
+        >
+          <v-card>
+            <v-card-title>
+              콘텐츠 추가&nbsp;-&nbsp;
+              <span v-if="selected_category !== null">
+                선택된 카테고리 : {{ selected_category.category }}
+              </span>
+            </v-card-title>
+            <v-card-text>
+              <v-text-field
+                v-model="search_word"
+                label="콘텐츠 제목"
+                @keyup.enter="searchContentNotInCategory"
+              >
+                <v-btn
+                  slot="append"
+                  color="#3bb9f1"
+                  dark
+                  @click="searchContentNotInCategory"
+                >
+                  검색
+                </v-btn>
+              </v-text-field>
+            </v-card-text>
+            <v-card-text v-if="search_content_list.length > 0 || add_content_list.length > 0">
+              <v-row>
+                <v-col>
+                  검색결과
+                  <v-simple-table>
+                    <template>
+                      <thead>
+                        <tr>
+                          <th>제목</th>
+                          <th />
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          v-for="content in search_content_list"
+                          :key="content.contentId"
+                        >
+                          <td>{{ content.title }}</td>
+                          <td>
+                            <v-btn
+                              color="#3bb9f1"
+                              @click="addContent(content)"
+                            >
+                              추가
+                            </v-btn>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </template>
+                  </v-simple-table>
+                </v-col>
+                <v-col v-if="add_content_list.length > 0">
+                  추가할 콘텐츠
+                  <v-simple-table>
+                    <template>
+                      <thead>
+                        <tr>
+                          <th>제목</th>
+                          <th />
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          v-for="content in add_content_list"
+                          :key="content.contentId"
+                        >
+                          <td>{{ content.title }}</td>
+                          <td>
+                            <v-btn
+                              color="#3bb9f1"
+                              @click="removeContent(content)"
+                            >
+                              제거
+                            </v-btn>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </template>
+                  </v-simple-table>
+                </v-col>
+              </v-row>
+            </v-card-text>
+            <v-card-actions v-show="!is_loading">
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="cancelAddContent"
+              >
+                취소
+              </v-btn>
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="addContentInCategory"
+              >
+                추가
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -178,6 +310,7 @@
 import Draggable from 'vuedraggable';
 
 import * as api from "@/api/category";
+import * as contentCategoryApi from "@/api/content_category";
 
 export default {
   name: "ContentCategoryList",
@@ -193,9 +326,16 @@ export default {
       selected_category: null,
       modify_selected_category: null,
 
+      search_word: '',
+      search_content_list: [],
+      add_content_list: [],
+
       category_list: [],
       content_list: [],
 
+      page: 1,
+      total_page: 0,
+
       headers: [
         {
           text: '커버이미지',
@@ -263,10 +403,6 @@ export default {
       this.show_create_category_dialog = false
     },
 
-    clickCategory(category) {
-      this.selected_category = category
-    },
-
     clickModifyCategory(category) {
       this.modify_category = true
       this.modify_selected_category = category
@@ -275,6 +411,82 @@ export default {
       this.show_create_category_dialog = true
     },
 
+    addContent(content) {
+      this.search_content_list = this.search_content_list.filter((item) => {
+        return item.contentId !== content.contentId
+      });
+      this.add_content_list.push(content)
+    },
+
+    removeContent(content) {
+      this.add_content_list = this.add_content_list.filter((item) => {
+        return item.contentId !== content.contentId
+      });
+      this.search_content_list.push(content)
+    },
+
+    cancelAddContent() {
+      this.search_word = ''
+      this.search_content_list = []
+      this.add_content_list = []
+      this.show_add_content_dialog = false
+    },
+
+    async removeContentInCategory(content) {
+      this.is_loading = true
+      const contentIdList = [content.contentId]
+
+      try {
+        const res = await api.modifyCategory(
+          this.selected_category.categoryId,
+          null,
+          [],
+          contentIdList,
+        )
+
+        if (res.status === 200 && res.data.success === true) {
+          this.cancelCreateCategory()
+          this.cancelAddContent()
+          this.page = 1
+          this.total_page = 0
+          this.notifySuccess('삭제되었습니다.')
+          await this.getContentInCategory()
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async addContentInCategory() {
+      this.is_loading = true
+      const contentIdList = this.add_content_list.map((item) => {
+        return item.contentId
+      })
+
+      try {
+        const res = await api.modifyCategory(
+          this.selected_category.categoryId,
+          null,
+          contentIdList,
+          []
+        )
+
+        if (res.status === 200 && res.data.success === true) {
+          this.cancelCreateCategory()
+          this.cancelAddContent()
+          this.page = 1
+          this.total_page = 0
+          await this.getContentInCategory()
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
     async getCategoryList() {
       this.is_loading = true
 
@@ -349,7 +561,7 @@ export default {
 
       try {
         this.is_loading = true
-        let res = await api.modifyCategory(this.title, this.modify_selected_category.categoryId)
+        let res = await api.modifyCategory(this.modify_selected_category.categoryId, this.title)
         if (res.data.success === true) {
           this.title = ''
           this.category_list = []
@@ -378,6 +590,72 @@ export default {
         this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
       }
     },
+
+    async clickCategory(category) {
+      this.selected_category = category
+      this.page = 1
+      this.total_page = 0
+      this.content_list = []
+
+      await this.getContentInCategory()
+    },
+
+    async getContentInCategory() {
+      try {
+        this.is_loading = true
+        const res = await contentCategoryApi.getContentInCategory(this.selected_category.categoryId, this.page)
+        if (res.data.success === true) {
+          const data = res.data.data
+
+          const total_page = Math.ceil(data.totalCount / 10)
+          this.content_list = data.items
+
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async next() {
+      await this.getContentInCategory()
+    },
+
+    async searchContentNotInCategory() {
+      if (this.search_word.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.')
+        return
+      }
+
+      this.is_loading = true
+      try {
+        this.is_loading = true
+        const res = await contentCategoryApi.searchContentNotInCategory(
+          this.selected_category.categoryId,
+          this.search_word
+        )
+
+        if (res.data.success === true) {
+          this.search_content_list = res.data.data
+          if (res.data.data.length <= 0) {
+            this.notifyError('검색결과가 없습니다.')
+          }
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
   }
 }
 </script>
@@ -387,4 +665,9 @@ export default {
   background-color: #3bb9f1;
   color: white !important;
 }
+
+.v-data-table__wrapper > table > tbody > .category-content-table-tr > td {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
 </style>