Events page

src/components/Events/EventItem.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+import apis, {
+  EventDetail,
+  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 router from '/@/router'
+
+interface Props {
+  event: Event
+  eventLevel: EventLevel
+}
+
+const props = defineProps<Props>()
+
+const displayMenu = ref(false)
+
+const eventDetail: EventDetail = (await apis.getEvent(props.event.id)).data
+const eventLevelValue = ref<EventLevelValue>(
+  eventLevelValueMap[eventDetail.eventLevel]
+)
+
+const updateEventLevel = (eventLevel: EventLevelValue) => {
+  eventLevelValue.value = eventLevel
+  const currentEventLevel: EventLevel = getEventLevelFromValue(
+    eventLevelValue.value
+  )
+  const editReq: EditEventRequest = { eventLevel: currentEventLevel }
+  apis.editEvent(props.event.id, editReq)
+}
+
+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
+    v-if="eventDetail.eventLevel === eventLevel"
+    :class="$style.container"
+    @click="router.push({ name: 'Event', params: { id: event.id } })"
+  >
+    <div :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>
+    </div>
+    <div :class="$style.displayMenu">
+      <button
+        ref="element"
+        :class="$style.opener"
+        @click.stop="displayMenu = !displayMenu"
+      >
+        <span :class="$style.eventLevelMenuButton">
+          <p :class="$style.statusName">
+            {{ eventLevels[eventLevelValue].label }}
+          </p>
+        </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 {
+  color: inherit;
+  text-decoration: none;
+  margin-right: auto;
+  padding-right: auto;
+}
+.container {
+  padding: 0.5rem;
+
+  border: 1px solid $color-primary-text;
+  border-radius: 8px;
+
+  display: flex;
+}
+
+.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,42 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BaseSelect from '/@/components/UI/BaseSelect.vue'
+import { EventLevel } from '/@/lib/apis'
+import {
+  eventLevelValueMap,
+  getEventLevelFromValue
+} from '/@/consts/eventLevel'
+
+interface Props {
+  modelValue: EventLevel
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: EventLevel): void
+}>()
+
+const value = computed({
+  get: () => eventLevelValueMap[props.modelValue],
+  set: v => emit('update:modelValue', getEventLevelFromValue(v) ?? '匿名公開')
+})
+
+const options = [
+  {
+    label: '匿名公開',
+    value: "anonymous"
+  },
+  {
+    label: '非公開',
+    value: "private"
+  },
+  {
+    label: '公開',
+    value: "public"
+  }
+]
+</script>
+
+<template>
+  <base-select v-model="value" :options="options" searchable />
+</template>

src/pages/Events.vue

@@ -1,15 +1,83 @@
+<script lang="ts" setup>
+import { 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'
+
+const eventStore = useEventStore()
+const events = await eventStore.fetchEvents()
+const eventType = ref(0)
+
+const searchQuery = ref('')
+</script>
+
 <template>
-  <div>Events</div>
+  <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 events" :key="event.id">
+        <event-item :event="event" :event-level="eventType" />
+      </li>
+    </ul>
+  </page-container>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<style lang="scss" module>
+.header {
+  margin: 4rem 0 2rem;
+}
+
+.searchFormContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 0.5rem;
+}
 
-export default defineComponent({
-  name: 'Events',
-  components: {},
-  setup() {
-    return {}
+.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;
+    }
+
+    &:hover {
+      background-color: $color-background-dim;
+    }
   }
-})
-</script>
+}
+</style>