Merge pull request #205 from traPtitech/feat/event_detail_page

admin/events/:eventId

src/App.vue

@@ -9,5 +9,6 @@
  color: $text-primary;
  background-color: $background-primary;
  min-height: 100vh;
+ padding-bottom: 2rem;
 }
 </style>

src/components/EventDetail/EventTokenNew.vue

@@ -4,25 +4,26 @@ import BaseInput from '@/components/UI/BaseInput.vue'
 import BaseDateInput from '@/components/UI/BaseDateInput.vue'
 import AIcon from '@/components/UI/AIcon.vue'
 import { ref } from 'vue'
-import apis from '@/lib/apis'
+import apis, { Token } from '@/lib/apis'
 import { useRoute } from 'vue-router'
 import { getMeetingId } from '@/lib/parsePathParams'
 import EmoineIcon from '@/components/UI/EmoineIcon.vue'
 
 const emit = defineEmits<{
  (e: 'close'): void
+ (e: 'addNewToken', token: Token): void
 }>()
 
 const route = useRoute()
-const meetingId = getMeetingId(route.params.id)
+const meetingId = getMeetingId(route.params.eventId)
 
 const userName = ref('')
 const description = ref('')
 const expireDate = ref('')
 
 const handleAddToken = async () => {
  // todo: error handling
- await apis.createToken({
+ const res = await apis.createToken({
  username: userName.value,
  meetingId: meetingId,
  expireAt: expireDate.value + ':00Z', // fixme: https:/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
@@ -31,6 +32,7 @@ const handleAddToken = async () => {
  userName.value = ''
  description.value = ''
  expireDate.value = ''
+ emit('addNewToken', res.data)
 }
 </script>
 

src/components/EventDetail/EventTokens.vue

@@ -8,6 +8,9 @@ import EventTokenNew from './EventTokenNew.vue'
 defineProps<{
  tokens: Token[]
 }>()
+const emit = defineEmits<{
+ (e: 'addNewToken', token: Token): void
+}>()
 
 const isNewTokenOpen = ref(false)
 const toggleNewToken = () => {
@@ -17,10 +20,6 @@ const toggleNewToken = () => {
 
 <template>
  <div>
- <h2 :class="$style.heading">
- <a-icon name="tabler:certificate" :size="56" color="#ff007f" />
- <p>Tokens</p>
- </h2>
  <ul :class="$style.tokenList">
  <li
  v-for="token in tokens"
@@ -38,7 +37,11 @@ const toggleNewToken = () => {
  <a-icon name="mdi:plus-circle-outline" />
  新しいトークンを追加
  </button>
- <event-token-new v-else @close="toggleNewToken" />
+ <event-token-new
+ v-else
+ @close="toggleNewToken"
+ @add-new-token="emit('addNewToken', $event)"
+ />
  </li>
  </ul>
  </div>
@@ -49,11 +52,6 @@ const toggleNewToken = () => {
  list-style: none;
  background-color: white;
 }
-.heading {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
 .tokenListItem {
  padding: 0.25rem 0;
  margin-top: 1rem;

src/components/Meetings/MeetingItem.vue

@@ -10,7 +10,10 @@ defineProps<{
 </script>
 
 <template>
- <router-link :to="`/admin/meetings/${meeting.id}`" :class="$style.link">
+ <router-link
+ :to="{ name: 'AdminEventDetail', params: { eventId: meeting.id } }"
+ :class="$style.link"
+ >
  <div :class="$style.container">
  <img
  :height="44"

src/pages/admin/EventDetailPage.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import apis, { CreateMeetingRequest, Meeting, Token } from '@/lib/apis'
+import EventTokens from '@/components/EventDetail/EventTokens.vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getMeetingId } from '@/lib/parsePathParams'
+import AIcon from '@/components/UI/AIcon.vue'
+import EmoineHeader from '@/components/EmoineHeader.vue'
+import EventInformation from '@/components/EventDetail/EventInformation.vue'
+
+const route = useRoute()
+const router = useRouter()
+const eventId = getMeetingId(route.params.eventId)
+
+const eventDetail = ref<Meeting>()
+const tokens = ref<Token[]>([])
+
+const fetchEventInformation = async () => {
+ const res = (await apis.getMeeting(eventId)).data
+ eventDetail.value = res
+}
+const fetchTokens = async () => {
+ const res = (await apis.getMeetingTokens(eventId)).data
+ tokens.value = res
+}
+const updateDescription = async (description: string) => {
+ if (!eventDetail.value) return
+ const updateMeetingRequest: CreateMeetingRequest = {
+ videoId: eventDetail.value.videoId,
+ description: description
+ }
+ await apis.updateMeeting(eventId, updateMeetingRequest)
+}
+const deleteEvent = async () => {
+ const result = confirm('本当にこのイベントを削除しますか？')
+ if (!result) return
+ await apis.deleteMeeting(eventId)
+ router.push({ name: 'AdminMeetings' })
+}
+
+onMounted(async () => {
+ await fetchEventInformation()
+ await fetchTokens()
+})
+</script>
+
+<template>
+ <div :class="$style.container">
+ <emoine-header />
+ <section>
+ <h2 :class="$style.heading">
+ <a-icon name="akar-icons:youtube-fill" :size="56" color="#ff007f" />
+ <p>Event Information</p>
+ </h2>
+ <event-information
+ v-if="eventDetail"
+ :meeting="eventDetail"
+ @update-description="updateDescription($event)"
+ @delete="deleteEvent"
+ />
+ </section>
+ <section :class="$style.tokensSection">
+ <h2 :class="$style.heading">
+ <a-icon name="tabler:certificate" :size="56" color="#ff007f" />
+ <p>Tokens</p>
+ </h2>
+ <event-tokens :tokens="tokens" @add-new-token="tokens.unshift($event)" />
+ </section>
+ </div>
+</template>
+
+<style lang="scss" module>
+.container {
+ padding: 0 15%;
+}
+.heading {
+ display: flex;
+ align-items: center;
+ font-size: 2rem;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+.tokensSection {
+ margin-top: 1rem;
+}
+</style>

src/router/index.ts

@@ -20,8 +20,7 @@ const routes: RouteRecordRaw[] = [
  {
  path: '/admin/events/:eventId',
  name: 'AdminEventDetail',
- // eslint-disable-next-line @typescript-eslint/no-empty-function
- component: () => {} // TODO: ページ作成したらここに書く
+ component: () => import('@/pages/admin/EventDetailPage.vue')
  },
  {
  path: '/admin/meetings/new',