Events page

src/components/Events/EventItem.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+import apis, { Event, EditEventRequest, EventLevel } from '/@/lib/apis'
+import Icon from '/@/components/UI/Icon.vue'
+import { getFullDayString } from '/@/lib/date'
+import EventLevelMenu from '/@/components/Events/EventLevelMenu.vue'
+import {
+  eventLevelValueMap,
+  getEventLevelFromValue,
+  eventLevels,
+  type EventLevelValue
+} from '/@/consts/eventLevel'
+import { useEventStore } from '/@/store/event'
+
+interface Props {
+  event: Event
+}
+
+const props = defineProps<Props>()
+
+const displayMenu = ref(false)
+
+const eventLevelValue = ref<EventLevelValue>(
+  eventLevelValueMap[props.event.level]
+)
+
+const updateEventLevel = async (v: EventLevelValue) => {
+  eventLevelValue.value = v
+  const currentEventLevel: EventLevel = getEventLevelFromValue(v)
+  const editReq: EditEventRequest = { level: currentEventLevel }
+  await apis.editEvent(props.event.id, editReq)
+  useEventStore().mutate()
+}
+
+const element = ref<HTMLDivElement | null>(null)
+
+const clickOutside = (e: MouseEvent) => {
+  // [対象の要素]が[クリックされた要素]を含まない場合
+  if (e.target instanceof Node && !element.value?.contains(e.target)) {
+    displayMenu.value = false
+  }
+}
+
+// windowにセットしたイベントはremoveするのを忘れずに
+onMounted(() => {
+  addEventListener('click', clickOutside)
+})
+onUnmounted(() => {
+  removeEventListener('click', clickOutside)
+})
+</script>
+
+<template>
+  <div :class="$style.container">
+    <router-link :to="`events/${event.id}`" :class="$style.link">
+      <p :class="$style.name">{{ event.name }}</p>
+      <p :class="$style.duration">
+        <icon name="mdi:calendar" />
+        {{ getFullDayString(new Date(event.duration.since)) }}
+      </p>
+    </router-link>
+    <div :class="$style.displayMenu">
+      <button
+        ref="element"
+        :class="$style.opener"
+        @click="displayMenu = !displayMenu"
+      >
+        <span>
+          {{ eventLevels[eventLevelValue].label }}
+        </span>
+        <span ref="element" :class="$style.icon" :is-menu-open="displayMenu">
+          <icon name="mdi:chevron-down" />
+        </span>
+      </button>
+      <event-level-menu
+        v-if="displayMenu"
+        :event-level="eventLevelValue"
+        :class="$style.menu"
+        @update-event-level="updateEventLevel"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.link {
+  flex-grow: 1;
+  color: inherit;
+  text-decoration: none;
+}
+.container {
+  padding: 0.5rem;
+  border: 1px solid $color-primary-text;
+  border-radius: 8px;
+  display: flex;
+  &:hover {
+    background-color: $color-background-dim;
+  }
+}
+
+.name {
+  color: $color-primary;
+  font-size: 1.125rem;
+}
+
+.duration {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.opener {
+  display: flex;
+}
+
+.displayMenu {
+  position: relative;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.icon {
+  margin-left: 8px;
+  &[is-menu-open='true'] {
+    transform: rotate(-0.5turn);
+  }
+  transition: 0.5s;
+}
+</style>

src/components/Events/EventLevelMenu.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import {
-  EventLevelValue,
-  eventLevels
-} from '/@/consts/eventLevel'
+import { EventLevelValue, eventLevels } from '/@/consts/eventLevel'
 
 interface Props {
   eventLevel: EventLevelValue
@@ -35,13 +32,19 @@ const emit = defineEmits<{
 <style lang="scss" module>
 .eventLevelMenu {
   width: max-content;
+  position: absolute;
   display: flex;
   flex-direction: column;
   padding: 1rem;
   gap: 1rem;
   border: 1px solid $color-secondary;
   border-radius: 0.375rem;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  top: 1.75rem;
+  right: 0px;
+  opacity: 1;
+  background-color: $color-background;
+  z-index: 1;
 }
 .eventLevelMenuButton {
   text-align: left;

src/components/UI/EventTypeAccordion.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BaseSelect from '/@/components/UI/BaseSelect.vue'
+import type { EventLevelValueWithAll } from '/@/consts/eventLevel'
+
+interface Props {
+  modelValue: EventLevelValueWithAll
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: EventLevelValueWithAll): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set(v: EventLevelValueWithAll) {
+    emit('update:modelValue', v)
+  }
+})
+
+const options = [
+  {
+    label: 'すべて',
+    value: 'all'
+  },
+  {
+    label: '公開',
+    value: 'public'
+  },
+  {
+    label: '匿名公開',
+    value: 'anonymous'
+  },
+  {
+    label: '非公開',
+    value: 'private'
+  }
+]
+</script>
+
+<template>
+  <base-select v-model="value" :options="options" searchable />
+</template>

src/consts/eventLevel.ts

@@ -11,6 +11,8 @@ type EventLevelValueMap = typeof eventLevelValueMap
 
 export type EventLevelValue = EventLevelValueMap[keyof EventLevelValueMap]
 
+export type EventLevelValueWithAll = EventLevelValue | 'all'
+
 interface EventLevelDetail<Level extends EventLevel = EventLevel> {
   label: string
   value: Level

src/pages/Event.vue

@@ -25,14 +25,14 @@ const { mutate } = useEventStore()
 const eventId = useParam('id')
 const event: EventDetail = (await apis.getEvent(eventId.value)).data
 
-const eventLevel = ref<EventLevelValue>(eventLevelValueMap[event.eventLevel])
+const eventLevel = ref<EventLevelValue>(eventLevelValueMap[event.level])
 
 const isSending = ref(false)
 const updateEvent = async () => {
   isSending.value = true
   try {
     const requestData: EditEventRequest = {
-      eventLevel: getEventLevelFromValue(eventLevel.value)
+      level: getEventLevelFromValue(eventLevel.value)
     }
     await apis.editEvent(eventId.value, requestData)
     mutate()

src/pages/Events.vue

@@ -1,15 +1,93 @@
-<template>
-  <div>Events</div>
-</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import EventTypeAccordion from '/@/components/UI/EventTypeAccordion.vue'
+import EventItem from '/@/components/Events/EventItem.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
+import { useEventStore } from '/@/store/event'
+import {
+  type EventLevelValueWithAll,
+  eventLevelValueMap
+} from '/@/consts/eventLevel'
+
+const eventStore = useEventStore()
+const events = await eventStore.fetchEvents()
+const eventType = ref<EventLevelValueWithAll>('all')
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+const searchQuery = ref('')
 
-export default defineComponent({
-  name: 'Events',
-  components: {},
-  setup() {
-    return {}
+const filteredEvents = computed(() => {
+  if (eventType.value === 'all') {
+    return events
+  } else {
+    return events.filter(
+      event => eventLevelValueMap[event.level] === eventType.value
+    )
   }
 })
 </script>
+
+<template>
+  <page-container>
+    <content-header
+      icon-name="mdi:calendar"
+      :header-texts="[{ title: 'Events', url: '/events' }]"
+      detail="イベントの公開設定を変更します"
+      :class="$style.header"
+    />
+    <div :class="$style.searchFormContainer">
+      <div :class="$style.searchForm">
+        <p :class="$style.body2">検索</p>
+        <form-input
+          v-model="searchQuery"
+          placeholder="イベント名"
+          icon="magnify"
+        />
+      </div>
+      <div>
+        <p :class="$style.body2">公開設定で絞り込み</p>
+        <event-type-accordion v-model="eventType" />
+      </div>
+    </div>
+    <ul :class="$style.eventList">
+      <li v-for="event in filteredEvents" :key="event.id">
+        <event-item :event="event" />
+      </li>
+    </ul>
+  </page-container>
+</template>
+
+<style lang="scss" module>
+.header {
+  margin: 4rem 0 2rem;
+}
+
+.searchFormContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 0.5rem;
+}
+
+.searchForm {
+  flex-grow: 1;
+}
+
+.body2 {
+  font-size: 0.875rem;
+  color: $color-secondary;
+}
+
+.eventList {
+  list-style: none;
+  li {
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>