sodalive-vuejs-admin/src/views/Content/ContentSeriesGenre.vue

331 lines
8.3 KiB
Vue

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