sodalive-vuejs-admin/src/views/Audition/AuditionRoleDetailView.vue

<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>{{ audition_title }} - {{ audition_role_name }}</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row>
        <v-col cols="4">
          <v-card>
            <v-img
              :src="audition_role_detail.imageUrl"
              class="audition-image"
            />

            <v-card-text
              v-if="
                audition_role_detail.auditionScriptUrl !== undefined &&
                  audition_role_detail.auditionScriptUrl.length > 0
              "
            >
              <a
                :href="audition_role_detail.auditionScriptUrl"
                class="audition-script-link"
              >
                오디션 대본 링크
              </a>
            </v-card-text>

            <v-card-text>
              <b>오디션 배역 정보</b>
              <vue-show-more-text
                :text="audition_role_detail.information"
                :lines="3"
              />
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="8">
          <v-row>
            <v-col>
              <v-simple-table class="elevation-10">
                <template>
                  <thead>
                    <tr>
                      <th class="text-center">
                        지원 번호
                      </th>
                      <th class="text-center">
                        프로필
                      </th>
                      <th class="text-center">
                        닉네임
                      </th>
                      <th class="text-center">
                        듣기
                      </th>
                      <th class="text-center">
                        추천수
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="item in audition_role_applicant_list"
                      :key="item.applicantId"
                    >
                      <td>{{ item.applicantId }}</td>
                      <td align="center">
                        <v-img
                          max-width="70"
                          max-height="70"
                          :src="item.profileImageUrl"
                          class="rounded-circle"
                        />
                        <br>
                        <a
                          :href="item.profileImageUrl"
                          class="v-btn v-btn--outlined"
                        >
                          다운로드
                        </a>
                      </td>
                      <td>{{ item.nickname }}</td>
                      <td>
                        <vuetify-audio
                          :file="item.voiceUrl"
                          :downloadable="true"
                          :auto-play="false"
                        />
                      </td>
                      <td>{{ item.voteCount }}</td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
            </v-col>
          </v-row>
          <v-row 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>
  </div>
</template>

<script>
import * as api from '@/api/audition'

import VueShowMoreText from 'vue-show-more-text'
import VuetifyAudio from "vuetify-audio";

export default {
  name: "AuditionDetailView",

  components: {VuetifyAudio, VueShowMoreText},

  data() {
    return {
      is_loading: false,
      audition_role_id: 0,
      audition_title: '',
      audition_role_name: '',

      audition_role_detail: {},
      audition_role_applicant_list: [],

      page: 1,
      total_page: 0,
    }
  },

  async created() {
    this.audition_role_id = this.$route.params.audition_role_id
    this.audition_title = this.$route.params.audition_title

    if (this.audition_role_id !== undefined && this.audition_role_id > 0) {
      await this.getAuditionRoleDetail()
      await this.getAuditionRoleApplicant()
    } else {
      this.$router.go(-1)
    }
  },

  methods: {
    notifyError(message) {
      this.$dialog.notify.error(message)
    },

    notifySuccess(message) {
      this.$dialog.notify.success(message)
    },

    isValidUrl(string) {
      try {
        new URL(string); // URL 생성 시 예외가 발생하면 유효하지 않은 URL
        return true;
      } catch (_) {
        return false;
      }
    },

    async getAuditionRoleDetail() {
      try {
        const res = await api.getAuditionRoleDetail(this.audition_role_id)
        if (res.status === 200 && res.data.success === true) {
          const data = res.data.data

          this.audition_role_name = data.name
          this.audition_role_detail.imageUrl = data.imageUrl
          this.audition_role_detail.information = data.information

          if (this.isValidUrl(data.auditionScriptUrl)) {
            this.audition_role_detail.auditionScriptUrl = data.auditionScriptUrl
          }
        } else {
          this.is_loading = false
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async getAuditionRoleApplicant() {
      this.is_loading = true

      try {
        const res = await api.getAuditionApplicantList(this.audition_role_id, this.page)
        if (res.status === 200 && res.data.success === true) {
          const data = res.data.data
          const total_page = Math.ceil(data.totalCount / 20)
          this.audition_role_applicant_list = data.items

          if (total_page <= 0) {
            this.total_page = 1
          } else {
            this.total_page = total_page
          }
        } else {
          this.is_loading = false
          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
        }
      } catch (e) {
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      } finally {
        this.is_loading = false
      }
    },

    async next() {
      await this.getAuditionRoleApplicant()
    },
  }
}
</script>

<style scoped>
</style>