Merge pull request 'test' (#11) from test into main

Reviewed-on: #11
This commit is contained in:
klaus 2024-02-07 09:53:49 +00:00
commit 0efb3ea86d
4 changed files with 728 additions and 0 deletions

28
src/api/category.js Normal file
View File

@ -0,0 +1,28 @@
import Vue from 'vue';
async function saveCategory(title) {
return Vue.axios.post('/category', {title: title, contentIdList: []});
}
async function modifyCategory(categoryId, title = null, addContentIdList = [], removeContentIdList = []) {
return Vue.axios.put('/category', {
categoryId: categoryId,
title: title,
addContentIdList: addContentIdList,
removeContentIdList: removeContentIdList
});
}
async function deleteCategory(categoryId) {
return Vue.axios.delete('/category/' + categoryId)
}
async function getCategoryList(creatorId) {
return Vue.axios.get('/category?creatorId=' + creatorId)
}
async function updateCategoryOrders(ids) {
return Vue.axios.put('/category/orders', {ids: ids})
}
export {saveCategory, modifyCategory, deleteCategory, getCategoryList, updateCategoryOrders}

View File

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

View File

@ -20,6 +20,11 @@ const routes = [
name: 'ContentList', name: 'ContentList',
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue') component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
}, },
{
path: '/content/category/list',
name: 'ContentCategoryList',
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCategoryList.vue')
},
{ {
path: '/calculate/live', path: '/calculate/live',
name: 'CalculateLive', name: 'CalculateLive',

View File

@ -0,0 +1,677 @@
<template>
<div>
<v-container>
<v-row>
<v-col cols="3">
<v-btn
block
color="#3bb9f1"
dark
depressed
@click="showCreateCategoryDialog"
>
카테고리 추가
</v-btn>
<br><br>
<draggable
:list="category_list"
class="list-group"
@end="onDropCategoryCallback()"
>
<v-list
v-for="category in category_list"
:key="category.category"
class="py-0"
rounded
>
<v-list-item :class="{ 'category-selected-item': category === selected_category }">
<v-list-item-title @click="clickCategory(category)">
{{ category.category }}
</v-list-item-title>
<v-list-item-icon @click="clickModifyCategory(category)">
<v-icon>mdi-pencil</v-icon>
</v-list-item-icon>
</v-list-item>
</v-list>
</draggable>
</v-col>
<v-col cols="1" />
<v-col cols="8">
<v-row>
<v-col cols="9" />
<v-col cols="3">
<v-btn
block
color="#3bb9f1"
dark
depressed
@click="showAddContent"
>
콘텐츠 추가
</v-btn>
</v-col>
</v-row>
<br><br>
<p v-if="selected_category !== null && selected_category !== undefined">
선택된 카테고리 : {{ selected_category.category }}
</p>
<p v-else>
카테고리를 선택해 주세요
</p>
<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="content in content_list"
:key="content.contentId"
class="category-content-table-tr"
>
<td align="center">
<v-img
max-width="100"
max-height="100"
:src="content.image"
/>
</td>
<td align="center">
{{ content.title }}
</td>
<td align="center">
<div v-if="content.isAdult">
O
</div>
<div v-else>
X
</div>
</td>
<td align="center">
<v-btn
color="#3bb9f1"
@click="removeContentInCategory(content)"
>
삭제
</v-btn>
</td>
</tr>
</tbody>
</template>
</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>
<v-container>
<v-row>
<v-dialog
v-model="show_create_category_dialog"
max-width="1000px"
persistent
>
<v-card>
<v-card-title v-if="modify_category">
카테고리 수정
</v-card-title>
<v-card-title v-else>
카테고리 추가
</v-card-title>
<v-card-text>
<v-text-field
v-model="title"
label="카테고리 제목"
required
/>
</v-card-text>
<v-card-actions v-show="!is_loading">
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="cancelCreateCategory"
>
취소
</v-btn>
<v-btn
v-if="modify_category"
color="blue darken-1"
text
@click="deleteCategory"
>
삭제
</v-btn>
<v-btn
v-if="modify_category"
color="blue darken-1"
text
@click="modifyCategory"
>
수정
</v-btn>
<v-btn
v-else
color="blue darken-1"
text
@click="saveCategory"
>
등록
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</v-container>
<v-container>
<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 v-slot:default>
<thead>
<tr>
<th class="text-center">
제목
</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 class="text-center">
제목
</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>
<script>
import Draggable from 'vuedraggable';
import * as api from "@/api/category";
import * as contentCategoryApi from "@/api/content_category";
export default {
name: "ContentCategoryList",
components: {Draggable},
data() {
return {
is_loading: false,
show_add_content_dialog: false,
show_create_category_dialog: false,
modify_category: false,
title: '',
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: '커버이미지',
align: 'center',
sortable: false,
value: 'image',
},
{
text: '제목',
align: 'center',
sortable: false,
value: 'title',
},
{
text: '19금',
align: 'center',
sortable: false,
value: 'isAdult',
},
{
text: '관리',
align: 'center',
sortable: false,
value: 'management'
},
]
}
},
async created() {
await this.getCategoryList()
},
methods: {
notifyError(message) {
this.$dialog.notify.error(message)
},
notifySuccess(message) {
this.$dialog.notify.success(message)
},
showCreateCategoryDialog() {
if (this.category_list.length >= 10) {
this.notifyError('카테고리는 최대 10개 까지 등록 가능합니다.')
return
}
this.show_create_category_dialog = true
},
showAddContent() {
if (this.selected_category === null || this.selected_category === undefined) {
this.notifyError('카테고리를 선택하세요')
return
}
this.show_add_content_dialog = true
},
cancelCreateCategory() {
this.title = ''
this.modify_category = false
this.modify_selected_category = null
this.show_create_category_dialog = false
},
clickModifyCategory(category) {
this.modify_category = true
this.modify_selected_category = category
this.title = category.category
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
try {
let res = await api.getCategoryList(this.$store.state.accountStore.userId)
if (res.data.success === true) {
this.category_list = res.data.data
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async saveCategory() {
if (this.title.trim().length <= 0) {
this.notifyError("제목을 입력하세요")
return
}
if (this.is_loading) return;
try {
this.is_loading = true
let res = await api.saveCategory(this.title)
if (res.data.success === true) {
this.title = ''
this.category_list = []
this.selected_category = null
this.cancelCreateCategory()
await this.getCategoryList()
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async deleteCategory() {
try {
this.is_loading = true
let res = await api.deleteCategory(this.modify_selected_category.categoryId)
if (res.data.success === true) {
this.title = ''
this.category_list = []
this.selected_category = null
this.cancelCreateCategory()
await this.getCategoryList()
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async modifyCategory() {
if (this.title.trim().length <= 0) {
this.notifyError("제목을 입력하세요")
return
}
if (this.is_loading) return;
try {
this.is_loading = true
let res = await api.modifyCategory(this.modify_selected_category.categoryId, this.title)
if (res.data.success === true) {
this.title = ''
this.category_list = []
this.selected_category = null
this.cancelCreateCategory()
await this.getCategoryList()
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async onDropCategoryCallback() {
const ids = this.category_list.map((category) => {
return category.categoryId
})
const res = await api.updateCategoryOrders(ids)
if (res.status === 200 && res.data.success === true) {
this.notifySuccess('수정되었습니다.')
} else {
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>
<style scoped>
.category-selected-item {
background-color: #3bb9f1;
color: white !important;
}
.v-data-table__wrapper > table > tbody > .category-content-table-tr > td {
padding-top: 10px;
padding-bottom: 10px;
}
</style>