events/:eventIdのtokensの作成

src/components/EventDetail/EventTokenItem.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { Token } from '@/lib/apis'
+import { formatDate } from '@/utils/date'
+import AIcon from '@/components/UI/AIcon.vue'
+import EmoineIcon from '@/components/UI/EmoineIcon.vue'
+import MenuModal from '@/components/UI/MenuModal.vue'
+import { MenuItem } from '@/components/UI/MenuModal.vue'
+import { useMenuModal } from '@/composables/useMenuModal'
+
+defineProps<{
+ token: Token
+}>()
+
+const menuItems: MenuItem[] = [
+ {
+ key: 'delete',
+ label: 'Delete',
+ icon: 'ph:trash',
+ onClick: async () => {
+ try {
+ //todo: deleteのAPIが生えてない
+ console.log('delete')
+ } catch {
+ console.error('error')
+ }
+ }
+ }
+]
+
+const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
+</script>
+
+<template>
+ <div :class="$style.container">
+ <emoine-icon />
+ <div :class="[$style.containerBase, $style.leftContainer]">
+ <p :class="$style.userId">{{ token.username }}</p>
+ <p :class="$style.description">{{ token.description }}</p>
+ </div>
+ <div :class="[$style.containerBase, $style.middleContainer]">
+ <p :class="$style.expireDate">
+ {{ formatDate(new Date(token.expireAt)) }}
+ </p>
+ </div>
+ <div :class="[$style.containerBase, $style.rightContainer]">
+ <button
+ ref="itemButtonRef"
+ :class="$style.dotsButton"
+ @click="toggleMenuModal"
+ >
+ <a-icon name="ph:dots-three-light" :size="32" />
+ </button>
+ </div>
+ <menu-modal v-if="isMenuModalOpen" :menu-items="menuItems" />
+ </div>
+</template>
+
+<style lang="scss" module>
+.container {
+ display: flex;
+ align-items: center;
+ height: 3.75rem;
+ padding: 8px;
+ position: relative;
+}
+.containerBase {
+ display: flex;
+ align-items: center;
+ height: 70%;
+}
+.leftContainer {
+ flex-grow: 1;
+ border-right: 1px solid $color-secondary;
+ padding-right: 20px;
+}
+.userId {
+ font-size: 1.25rem;
+ font-weight: bold;
+ margin-left: 20px;
+ color: $text-primary;
+}
+.description {
+ font-size: 1.25rem;
+ margin-left: 20px;
+ color: $text-secondary;
+}
+.middleContainer {
+ border-right: 1px solid $color-secondary;
+ padding: 0 1.25rem;
+ width: 8.75rem;
+}
+.expireDate {
+ color: $color-secondary;
+}
+.rightContainer {
+ padding: 0 1.25rem;
+ width: 5rem;
+}
+.dotsButton {
+ border-radius: 50%;
+ padding: 0.5rem;
+ &:hover {
+ background-color: $background-secondary;
+ }
+}
+</style>

src/components/EventDetail/EventTokenNew.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import BaseButton from '@/components/UI/BaseButton.vue'
+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 { useRoute } from 'vue-router'
+import { getMeetingId } from '@/lib/parsePathParams'
+import EmoineIcon from '@/components/UI/EmoineIcon.vue'
+
+const emit = defineEmits<{
+ (e: 'close'): void
+}>()
+
+const route = useRoute()
+const meetingId = getMeetingId(route.params.id)
+
+const userName = ref('')
+const description = ref('')
+const expireDate = ref('')
+
+const handleAddToken = async () => {
+ // todo: error handling
+ await apis.createToken({
+ username: userName.value,
+ meetingId: meetingId,
+ expireAt: expireDate.value + ':00Z', // fixme: https:/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
+ description: description.value
+ })
+ userName.value = ''
+ description.value = ''
+ expireDate.value = ''
+}
+</script>
+
+<template>
+ <div :class="$style.container">
+ <emoine-icon />
+ <div :class="$style.formContainer">
+ <base-input v-model="userName" placeholder="ユーザー名を入力" />
+ <base-input
+ v-model="description"
+ placeholder="説明文を入力"
+ :class="$style.description"
+ />
+ <base-date-input v-model="expireDate" />
+ </div>
+ <div :class="$style.buttonContainer">
+ <base-button type="primary" @click="handleAddToken">保存</base-button>
+ <base-button type="secondary" @click="emit('close')">
+ <a-icon name="basil:cross-solid" />
+ </base-button>
+ </div>
+ </div>
+</template>
+
+<style lang="scss" module>
+.container {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 3.75rem;
+ padding: 8px;
+}
+.formContainer {
+ display: flex;
+ align-items: center;
+ gap: 0.625rem;
+ flex-grow: 1;
+ border-right: 1px solid $color-secondary;
+ height: 70%;
+ padding-right: 20px;
+ margin-left: 1.25rem;
+}
+.description {
+ flex-grow: 1;
+}
+.buttonContainer {
+ display: flex;
+ align-items: center;
+ gap: 0.625rem;
+ padding: 0 1.25rem;
+ height: 70%;
+}
+</style>

src/components/EventDetail/EventTokens.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { Token } from '@/lib/apis'
+import EventTokenItem from './EventTokenItem.vue'
+import AIcon from '@/components/UI/AIcon.vue'
+import { ref } from 'vue'
+import EventTokenNew from './EventTokenNew.vue'
+
+defineProps<{
+ tokens: Token[]
+}>()
+
+const isNewTokenOpen = ref(false)
+const toggleNewToken = () => {
+ isNewTokenOpen.value = !isNewTokenOpen.value
+}
+</script>
+
+<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"
+ :key="token.token"
+ :class="$style.tokenListItem"
+ >
+ <event-token-item :token="token" />
+ </li>
+ <li :class="$style.newTokenButtonContainer">
+ <button
+ v-if="!isNewTokenOpen"
+ :class="$style.newTokenButton"
+ @click="toggleNewToken"
+ >
+ <a-icon name="mdi:plus-circle-outline" />
+ 新しいトークンを追加
+ </button>
+ <event-token-new v-else @close="toggleNewToken" />
+ </li>
+ </ul>
+ </div>
+</template>
+
+<style lang="scss" module>
+.tokenList {
+ list-style: none;
+ background-color: white;
+}
+.heading {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+.tokenListItem {
+ padding: 0.25rem 0;
+ margin-top: 1rem;
+ &:not(:last-child) {
+ border-bottom: 1px solid $background-secondary;
+ }
+}
+.newTokenButtonContainer {
+ display: flex;
+ justify-content: center;
+ padding: 4px 0px;
+}
+.newTokenButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 4px 12px;
+ font-weight: bold;
+ color: $color-secondary;
+ text-decoration: none;
+ &:hover {
+ color: $color-primary;
+ background-color: $background-secondary;
+ }
+}
+.paginationBarContainer {
+ display: flex;
+ justify-content: center;
+}
+</style>

src/components/UI/BaseButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ButtonType = 'primary'
+type ButtonType = 'primary' | 'secondary'
 const props = withDefaults(
  defineProps<{
  type?: ButtonType
@@ -17,13 +17,28 @@ const props = withDefaults(
 
 <style lang="scss" module>
 .button {
- color: white;
- background-color: $color-primary;
+ display: flex;
+ align-items: center;
  border-radius: 0.25rem;
  padding: 0.5rem;
  height: 1.875rem;
  font-size: 0.75rem;
 
+ &[data-type='primary'] {
+ color: white;
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0.1) 0%,
+ rgba(0, 0, 0, 0.1) 100%
+ ),
+ #ff007f;
+ }
+ &[data-type='secondary'] {
+ color: $color-secondary;
+ background-color: white;
+ border: 1px solid $color-secondary;
+ }
+
  &:hover {
  opacity: 0.7;
  transition: all 0.2s ease-in-out;

src/components/UI/BaseDateInput.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+ modelValue: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+ (e: 'update:modelValue', modelValue: string): void
+}>()
+
+const handleInput = (event: Event) => {
+ emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+ <div :class="$style.container">
+ <input
+ :class="$style.input"
+ :data-is-blank="props.modelValue === ''"
+ type="datetime-local"
+ :value="props.modelValue"
+ @input="handleInput"
+ />
+ </div>
+</template>
+
+<style lang="scss" module>
+.container {
+ display: flex;
+ align-items: center;
+ padding: 0.5rem;
+ border: 1px solid $color-secondary;
+ border-radius: 0.25rem;
+ height: 2.5rem;
+ font-size: 0.875rem;
+ &:focus-within {
+ border-color: black;
+ }
+}
+.input {
+ &[data-is-blank='true'] {
+ color: $color-secondary;
+ }
+}
+</style>

src/components/UI/BaseInput.vue

@@ -33,5 +33,13 @@ const value = computed({
  border-radius: 0.25rem;
  height: 2.5rem;
  font-size: 0.875rem;
+ border: 1px solid $color-secondary;
+
+ &::placeholder {
+ color: $text-secondary;
+ }
+ &:focus {
+ border-color: black;
+ }
 }
 </style>

src/components/UI/DateChip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getDateDiffText } from '@/utils/dateFormat'
+import { getDateDiffText } from '@/utils/date'
 
 type LiveStatus = 'isPlanned' | 'isStreaming' | 'isArchived'