From 2d0120d4c7263b4207180530db8782496e24ecc6 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 7 Aug 2023 17:47:39 +0900
Subject: [PATCH 1/3] =?UTF-8?q?event=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Event/EventHostItem.vue |  33 ++++++
 src/pages/Event.vue                    | 155 +++++++++++++++++++++++--
 2 files changed, 177 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Event/EventHostItem.vue

diff --git a/src/components/Event/EventHostItem.vue b/src/components/Event/EventHostItem.vue
new file mode 100644
index 00000000..d951d953
--- /dev/null
+++ b/src/components/Event/EventHostItem.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { User } from '/@/lib/apis'
+import UserIcon from '/@/components/UI/UserIcon.vue'
+
+interface Props {
+  host: User
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <user-icon :user-id="host.name" :size="48" />
+    <p :class="$style.name">{{ host.name }}</p>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  border: 1px solid $color-primary-text;
+  border-radius: 8px;
+}
+
+.name {
+  font-size: 1.125rem;
+}
+</style>
diff --git a/src/pages/Event.vue b/src/pages/Event.vue
index 9f8cf792..43122a1a 100644
--- a/src/pages/Event.vue
+++ b/src/pages/Event.vue
@@ -1,15 +1,148 @@
-<template>
-  <div>EventDetail</div>
-</template>
+<script lang="ts" setup>
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+import EventHostItem from '/@/components/Event/EventHostItem.vue'
+
+import apis, { EditEventRequest, EventDetail } from '/@/lib/apis'
+import { RouterLink, useRouter } from 'vue-router'
+import { getDisplayDuration } from '/@/lib/date'
+import useParam from '/@/use/param'
+import { useDataFetcher } from '/@/use/fetcher'
+import { ref } from 'vue'
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+const router = useRouter()
 
-export default defineComponent({
-  name: 'Event',
-  components: {},
-  setup() {
-    return {}
+const eventId = useParam('id')
+const { data: event } = useDataFetcher<EventDetail>(() =>
+  apis.getEvent(eventId.value)
+)
+
+const eventLevel = ref(event.value?.eventLevel ?? 0)
+
+const isSending = ref(false)
+const updateEvent = async () => {
+  isSending.value = true
+  try {
+    const requestData: EditEventRequest = {
+      eventLevel: eventLevel.value
+    }
+    await apis.editEvent(eventId.value, requestData)
+    //eslint-disable-next-line no-console
+    console.log('更新しました') // todo:トーストとかに変えたい
+    router.push(`/events/${eventId.value}`)
+  } catch {
+    //eslint-disable-next-line no-console
+    console.log('更新に失敗しました')
   }
-})
+  isSending.value = false
+}
 </script>
+
+<template>
+  <page-container>
+    <div :class="$style.headerContainer">
+      <content-header
+        icon-name="mdi:calendar"
+        :header-texts="[
+          { title: 'Events', url: '/events' },
+          { title: event?.name ?? '', url: `/events/${eventId}` }
+        ]"
+        detail="イベントの詳細を確認します。"
+        :class="$style.header"
+      />
+    </div>
+    <div v-if="event !== undefined">
+      <section :class="$style.section">
+        <h2 :class="$style.h2">イベント名</h2>
+        <p :class="$style.content">{{ event.name }}</p>
+      </section>
+      <section :class="$style.section">
+        <h2 :class="$style.h2">日時</h2>
+        <p :class="$style.content">
+          {{ getDisplayDuration(event.duration) }}
+        </p>
+      </section>
+      <section :class="$style.section">
+        <h2 :class="$style.h2">場所</h2>
+        <p :class="$style.content">
+          {{ event.place }}
+        </p>
+      </section>
+      <section :class="$style.section">
+        <h2 :class="$style.h2">説明</h2>
+        <p :class="$style.content">{{ event.description }}</p>
+      </section>
+      <section :class="$style.section">
+        <h2 :class="$style.h2">主催者</h2>
+        <event-host-item
+          v-for="host in event.hostname"
+          :key="host.id"
+          :class="$style.content"
+          :host="host"
+        />
+      </section>
+
+      <!--todo: 公開設定のフォームを入れる-->
+    </div>
+
+    <div :class="$style.buttonContainer">
+      <router-link to="/events" :class="$style.link">
+        <base-button
+          :class="$style.backButton"
+          type="secondary"
+          icon="mdi:arrow-left"
+        >
+          Back
+        </base-button>
+      </router-link>
+      <base-button
+        :is-disabled="isSending"
+        type="primary"
+        icon="mdi:update"
+        @click="updateEvent"
+      >
+        Update
+      </base-button>
+    </div>
+  </page-container>
+</template>
+
+<style lang="scss" module>
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header {
+  margin: 4rem 0 2rem;
+}
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+.section {
+  margin-bottom: 2rem;
+}
+.h2 {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+.content {
+  margin-top: 0.5rem;
+  padding-left: 0.5rem;
+}
+.contestLinkContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.contestLink {
+  color: $color-text;
+}
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+</style>

From de9ea1aefe7b28a5964be7925c2c32f9cfca650c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 17 Aug 2023 21:04:46 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E3=83=88=EF=BC=8D=E3=82=B9=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E4=BD=BF=E3=81=86=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Event.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Event.vue b/src/pages/Event.vue
index 43122a1a..3e2022ec 100644
--- a/src/pages/Event.vue
+++ b/src/pages/Event.vue
@@ -10,8 +10,10 @@ import { getDisplayDuration } from '/@/lib/date'
 import useParam from '/@/use/param'
 import { useDataFetcher } from '/@/use/fetcher'
 import { ref } from 'vue'
+import { useToast } from 'vue-toastification'
 
 const router = useRouter()
+const toast = useToast()
 
 const eventId = useParam('id')
 const { data: event } = useDataFetcher<EventDetail>(() =>
@@ -28,12 +30,10 @@ const updateEvent = async () => {
       eventLevel: eventLevel.value
     }
     await apis.editEvent(eventId.value, requestData)
-    //eslint-disable-next-line no-console
-    console.log('更新しました') // todo:トーストとかに変えたい
+    toast.success('イベント情報を更新しました')
     router.push(`/events/${eventId.value}`)
   } catch {
-    //eslint-disable-next-line no-console
-    console.log('更新に失敗しました')
+    toast.error('イベント情報の更新に失敗しました')
   }
   isSending.value = false
 }

From aca84bc95d7a24b740f93c05849ddb94847894be Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 15 Sep 2023 23:42:18 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=E3=83=A9=E3=82=B8=E3=82=AA=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/RadioButton.vue | 89 +++++++++++++++++++++++++++++++
 src/consts/eventLevel.ts          | 45 ++++++++++++++++
 src/pages/Event.vue               | 39 ++++++++++++--
 3 files changed, 170 insertions(+), 3 deletions(-)
 create mode 100644 src/components/UI/RadioButton.vue
 create mode 100644 src/consts/eventLevel.ts

diff --git a/src/components/UI/RadioButton.vue b/src/components/UI/RadioButton.vue
new file mode 100644
index 00000000..4e9ce965
--- /dev/null
+++ b/src/components/UI/RadioButton.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: string
+  label: string
+  value: string
+  description?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const vModelValue = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v)
+})
+</script>
+
+<template>
+  <div :class="$style.container">
+    <input
+      :id="value"
+      v-model="vModelValue"
+      :value="value"
+      type="radio"
+      :class="$style.input"
+    />
+    <label :for="value" :class="$style.label">{{ label }}</label>
+    <p v-if="description" :class="$style.description">{{ description }}</p>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: grid;
+  align-items: center;
+  gap: 12px;
+  grid-template-columns: auto minmax(0, 0.5fr) 1fr;
+}
+.input {
+  appearance: none;
+  position: relative;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  transition: all 0.1s ease-in-out;
+  border: 2px solid $color-secondary;
+
+  &:checked {
+    border: 2px solid $color-primary;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    position: absolute;
+    margin: auto;
+    inset: 0;
+    background-color: $color-primary;
+  }
+
+  &:not(:checked)::after {
+    display: none;
+  }
+}
+.label {
+  color: $color-primary;
+  font-weight: bold;
+
+  .input:not(:checked) ~ & {
+    color: $color-secondary;
+  }
+}
+.description {
+  color: $color-text;
+  font-size: 12px;
+
+  .input:not(:checked) ~ & {
+    color: $color-secondary;
+  }
+}
+</style>
diff --git a/src/consts/eventLevel.ts b/src/consts/eventLevel.ts
new file mode 100644
index 00000000..d9fe92da
--- /dev/null
+++ b/src/consts/eventLevel.ts
@@ -0,0 +1,45 @@
+import { EventLevel } from '/@/lib/apis'
+
+interface EventLevelDetail {
+  label: string
+  value: string
+  description: string
+}
+
+type EventLevelMap = Map<EventLevel, EventLevelDetail>
+
+export const eventLevels: EventLevelMap = new Map([
+  [
+    EventLevel.Public,
+    {
+      label: '公開',
+      value: 'public',
+      description: 'ポートフォリオにて公開します'
+    }
+  ],
+  [
+    EventLevel.Anonymous,
+    {
+      label: '匿名公開',
+      value: 'anonymous',
+      description: '企画者の名前を伏せて、ポートフォリオにて公開します'
+    }
+  ],
+  [
+    EventLevel.Private,
+    {
+      label: '非公開',
+      value: 'private',
+      description: 'ポートフォリオにて公開しません'
+    }
+  ]
+])
+
+export const getEventLevelFromValue = (
+  value: string
+): EventLevel | undefined => {
+  const entry = Array.from(eventLevels).find(
+    ([, service]) => service.value === value
+  )
+  return entry?.[0]
+}
diff --git a/src/pages/Event.vue b/src/pages/Event.vue
index 3e2022ec..4a7b2f75 100644
--- a/src/pages/Event.vue
+++ b/src/pages/Event.vue
@@ -11,6 +11,8 @@ import useParam from '/@/use/param'
 import { useDataFetcher } from '/@/use/fetcher'
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
+import RadioButton from '/@/components/UI/RadioButton.vue'
+import { eventLevels, getEventLevelFromValue } from '/@/consts/eventLevel'
 
 const router = useRouter()
 const toast = useToast()
@@ -20,14 +22,16 @@ const { data: event } = useDataFetcher<EventDetail>(() =>
   apis.getEvent(eventId.value)
 )
 
-const eventLevel = ref(event.value?.eventLevel ?? 0)
+const eventLevel = ref(
+  eventLevels.get(event.value?.eventLevel ?? 0)?.value ?? 'public'
+)
 
 const isSending = ref(false)
 const updateEvent = async () => {
   isSending.value = true
   try {
     const requestData: EditEventRequest = {
-      eventLevel: eventLevel.value
+      eventLevel: getEventLevelFromValue(eventLevel.value)
     }
     await apis.editEvent(eventId.value, requestData)
     toast.success('イベント情報を更新しました')
@@ -83,7 +87,29 @@ const updateEvent = async () => {
         />
       </section>
 
-      <!--todo: 公開設定のフォームを入れる-->
+      <section :class="$style.section">
+        <h2 :class="$style.h2">公開設定</h2>
+        <div :class="[$style.content, $style.radioButtons]">
+          <radio-button
+            v-model="eventLevel"
+            label="公開"
+            value="public"
+            description="ポートフォリオにて公開します"
+          />
+          <radio-button
+            v-model="eventLevel"
+            label="匿名公開"
+            value="anonymous"
+            description="企画者の名前を伏せて、ポートフォリオにて公開します"
+          />
+          <radio-button
+            v-model="eventLevel"
+            label="非公開"
+            value="private"
+            description="ポートフォリオにて公開しません"
+          />
+        </div>
+      </section>
     </div>
 
     <div :class="$style.buttonContainer">
@@ -140,6 +166,13 @@ const updateEvent = async () => {
 .contestLink {
   color: $color-text;
 }
+.radioButtons {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  gap: 1.25rem;
+  width: 60%;
+}
 .buttonContainer {
   display: flex;
   justify-content: flex-end;