From 463d71b579fefc082d35f02f6df1057bf433cc43 Mon Sep 17 00:00:00 2001 From: Yu Sung Date: Wed, 7 Feb 2024 07:30:08 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BD=98=ED=85=90=EC=B8=A0=20=EC=B9=B4?= =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20API=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/category.js | 6 +- src/api/content_category.js | 18 ++ src/views/Content/ContentCategoryList.vue | 361 +++++++++++++++++++--- 3 files changed, 343 insertions(+), 42 deletions(-) create mode 100644 src/api/content_category.js diff --git a/src/api/category.js b/src/api/category.js index ea46bc9..4dea43e 100644 --- a/src/api/category.js +++ b/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 }); } diff --git a/src/api/content_category.js b/src/api/content_category.js new file mode 100644 index 0000000..bca957f --- /dev/null +++ b/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} diff --git a/src/views/Content/ContentCategoryList.vue b/src/views/Content/ContentCategoryList.vue index 828cc86..64804b1 100644 --- a/src/views/Content/ContentCategoryList.vue +++ b/src/views/Content/ContentCategoryList.vue @@ -58,52 +58,74 @@

카테고리를 선택해 주세요

- - @@ -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 + } + } } } @@ -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; +}