시리즈 장르 - 등록/삭제 페이지 추가

This commit is contained in:
Yu Sung 2024-04-18 14:26:49 +09:00
parent 00e5c5e7f9
commit 8642b95ec7
3 changed files with 359 additions and 0 deletions

View File

@ -0,0 +1,24 @@
import Vue from 'vue';
async function getAudioContentSeriesGenreList() {
return Vue.axios.get('/admin/audio-content/series/genre');
}
async function createAudioContentSeriesGenre(genre, is_adult) {
return Vue.axios.post('/admin/audio-content/series/genre', {genre: genre, isAdult: is_adult})
}
async function updateAudioContentSeriesGenre(request) {
return Vue.axios.put('/admin/audio-content/series/genre', request)
}
async function updateAudioContentSeriesGenreOrders(ids) {
return Vue.axios.put('/admin/audio-content/series/genre/orders', {ids: ids})
}
export {
getAudioContentSeriesGenreList,
createAudioContentSeriesGenre,
updateAudioContentSeriesGenre,
updateAudioContentSeriesGenreOrders
}

View File

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

View File

@ -0,0 +1,330 @@
<template>
<div>
<v-toolbar dark>
<v-spacer />
<v-toolbar-title>시리즈 장르 관리</v-toolbar-title>
<v-spacer />
</v-toolbar>
<br>
<v-container>
<v-row>
<v-col cols="10" />
<v-col>
<v-btn
block
color="#9970ff"
dark
depressed
@click="showWriteDialog"
>
시리즈 장르 등록
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<v-data-table
:headers="headers"
:items="series_genre_list"
:loading="is_loading"
item-key="id"
class="elevation-1"
hide-default-footer
disable-pagination
>
<template v-slot:body="props">
<draggable
v-model="props.items"
tag="tbody"
@end="onDropCallback(props.items)"
>
<tr
v-for="(item, index) in props.items"
:key="index"
>
<td>
{{ item.genre }}
</td>
<td>
<h3 v-if="item.isAdult">
O
</h3>
<h3 v-else>
X
</h3>
</td>
<td>
<v-row>
<v-col />
<v-col>
<v-btn
:disabled="is_loading"
@click="deleteConfirm(item)"
>
삭제
</v-btn>
</v-col>
<v-col />
</v-row>
</td>
</tr>
</draggable>
</template>
</v-data-table>
</v-col>
</v-row>
</v-container>
<v-dialog
v-model="show_write_dialog"
max-width="1000px"
persistent
>
<v-card>
<v-card-title>
시리즈 장르 등록
</v-card-title>
<v-card-text>
<v-row align="center">
<v-col cols="4">
장르
</v-col>
<v-col cols="8">
<v-text-field
v-model="series_genre.genre"
label="장르"
required
/>
</v-col>
</v-row>
</v-card-text>
<v-card-text>
<v-row>
<v-col cols="4">
19
</v-col>
<v-col cols="8">
<input
v-model="series_genre.is_adult"
type="checkbox"
>
</v-col>
</v-row>
</v-card-text>
<v-card-actions v-show="!is_loading">
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="cancel"
>
취소
</v-btn>
<v-btn
color="blue darken-1"
text
@click="submit"
>
등록
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-model="show_delete_confirm_dialog"
max-width="400px"
persistent
>
<v-card>
<v-card-text />
<v-card-text>
"{{ selected_series_genre.genre }}" 삭제하시겠습니까?
</v-card-text>
<v-card-actions v-show="!is_loading">
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="deleteCancel"
>
취소
</v-btn>
<v-btn
color="blue darken-1"
text
@click="deleteSeriesGenre"
>
확인
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import Draggable from 'vuedraggable';
import * as api from '@/api/audio_content_series';
export default {
name: "ContentSeriesGenre",
components: {Draggable},
data() {
return {
is_loading: false,
show_delete_confirm_dialog: false,
show_write_dialog: false,
selected_series_genre: {},
series_genre: {is_adult: false},
series_genre_list: [],
headers: [
{
text: '장르',
align: 'center',
sortable: false,
value: 'genre',
},
{
text: '19금',
align: 'center',
sortable: false,
value: 'isAdult',
},
{
text: '관리',
align: 'center',
sortable: false,
value: 'management'
},
],
}
},
async created() {
await this.getSeriesGenreList();
},
methods: {
notifyError(message) {
this.$dialog.notify.error(message)
},
notifySuccess(message) {
this.$dialog.notify.success(message)
},
showWriteDialog() {
this.show_write_dialog = true
},
cancel() {
this.series_genre = {is_adult: false}
this.selected_series_genre = {}
this.show_write_dialog = false
},
deleteConfirm(series_genre) {
this.selected_series_genre = series_genre
this.show_delete_confirm_dialog = true
},
deleteCancel() {
this.selected_series_genre = {}
this.show_delete_confirm_dialog = false
},
async submit() {
if (this.is_loading) return;
this.isLoading = true
try {
const res = await api.createAudioContentSeriesGenre(this.series_genre.genre, this.series_genre.is_adult)
if (res.status === 200 && res.data.success === true) {
this.cancel()
this.notifySuccess('등록되었습니다.')
this.series_genre_list = []
await this.getSeriesGenreList()
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async getSeriesGenreList() {
this.is_loading = true
try {
const res = await api.getAudioContentSeriesGenreList()
if (res.status === 200 && res.data.success === true) {
this.series_genre_list = res.data.data
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async onDropCallback(items) {
this.series_genre_list = items
const ids = items.map((item) => {
return item.id
})
try {
this.is_loading = true
const res = await api.updateAudioContentSeriesGenreOrders(ids)
if (res.status === 200 && res.data.success === true) {
this.notifySuccess(res.data.message)
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
async deleteSeriesGenre() {
if (this.is_loading) return;
this.is_loading = true
try {
let request = {id: this.selected_series_genre.id, isActive: false}
const res = await api.updateAudioContentSeriesGenre(request)
if (res.status === 200 && res.data.success === true) {
this.show_delete_confirm_dialog = false
this.cancel()
this.notifySuccess('삭제되었습니다.')
this.series_genre_list = []
await this.getSeriesGenreList()
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
} finally {
this.is_loading = false
}
},
}
}
</script>
<style scoped>
</style>