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

src/api/audio_content_series.js

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

src/router/index.js

@@ -80,6 +80,11 @@ const routes = [
                 name: 'ContentCuration',
                 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',
                 name: 'EventView',

src/views/Content/ContentSeriesGenre.vue

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