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://github.com/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',