プロフィールページの実装

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
         message: 'Please use /@/lib/apis instead.'
       }
     ],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
     'vue/custom-event-name-casing': ['error', 'camelCase'],
     'vue/multi-word-component-names': 'off',
     'vue/no-reserved-component-names': 'off'

package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "concurrently \"vite\" \"npm run start-mock\"",
     "build": "vite build",
-    "lint": "eslint --ext .ts,.vue src",
+    "lint": "eslint --fix --ext .ts,.vue src",
+    "lint:nofix": "eslint --ext .ts,.vue src",
     "type-check": "tsc",
     "fetch-openapi": "node scripts/fetchOpenapi.js",
     "gen-api": "node scripts/generateApi.js",

src/components/UserAccounts/ServiceLogo.vue

@@ -12,7 +12,7 @@ defineProps<Props>()
 
 <template>
   <div :class="$style.logo">
-    <Icon :name="services[service].icon" />
+    <icon :name="services[service].icon" />
     {{ services[service].name }}
   </div>
 </template>

src/components/Users/UserAccounts.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Icon from '/@/components/UI/Icon.vue'
+import { serviceArray, type ServiceWithType } from '/@/consts/services'
+import type { Account } from '/@/lib/apis'
+
+interface Service extends ServiceWithType {
+  url: string
+  displayName: string
+}
+
+interface Props {
+  accounts: Account[]
+}
+
+const props = defineProps<Props>()
+
+const shownServices = computed((): Service[] => {
+  //各serviceに対するaccountの配列たちが入っている配列をflatする
+  return serviceArray.flatMap(service => {
+    //serviceに一致するaccountを抽出
+    const accounts = props.accounts
+      .filter(account => account.type === service.type)
+      .map(account => {
+        return {
+          url: account.url,
+          displayName: account.displayName
+        }
+      })
+    return accounts.map(account => ({
+      ...service,
+      url: account.url,
+      displayName: account.displayName
+    }))
+  })
+})
+</script>
+
+<template>
+  <div :class="$style.container">
+    <a
+      v-for="service in shownServices"
+      :key="service.name"
+      :href="service.url"
+      :title="service.displayName"
+      :class="$style.anchor"
+    >
+      <icon :name="service.icon" :class="$style.icon" />
+    </a>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.anchor {
+  text-decoration: none;
+  color: $color-secondary-text;
+}
+</style>

src/components/Users/UserProfile.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+import UserIcon from '/@/components/UI/UserIcon.vue'
+import UserAccounts from '/@/components/Users/UserAccounts.vue'
+import type { UserDetail } from '/@/lib/apis'
+
+interface Props {
+  user: UserDetail
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="$style.profileContainer">
+    <user-icon :user-id="user.id" :size="128" />
+    <div>
+      <div :class="$style.nameContainer">
+        <p :class="$style.name">{{ user.name }}</p>
+        <p :class="$style.realName">{{ user.realName }}</p>
+      </div>
+      <div :class="$style.accounts">
+        <user-accounts :accounts="user.accounts" />
+        <router-link to="/users/accounts" :class="$style.link">
+          <base-button icon="mdi:account">Edit</base-button>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.profileContainer {
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+}
+.nameContainer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 2rem;
+}
+.name {
+  color: $color-primary;
+  font-size: 3rem;
+}
+.realName {
+  font-size: 1.5rem;
+}
+.accounts {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-top: 1rem;
+}
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+</style>

src/components/Users/UserProfileEdit.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+import FormTextArea from '/@/components/UI/FormTextArea.vue'
+import ToggleSwitch from '/@/components/UI/ToggleSwitch.vue'
+import apis, { type UserDetail } from '/@/lib/apis'
+
+interface Props {
+  user: UserDetail
+}
+
+const props = defineProps<Props>()
+
+const shouldShowRealname = ref(props.user.realName !== '') // todo:checkがUserDetailに追加されたら初期値をそこから取得する
+const bio = ref(props.user.bio)
+
+const isSending = ref(false)
+
+const updateUserProfile = async () => {
+  isSending.value = true
+  try {
+    await apis.editUser(props.user.id, {
+      bio: bio.value,
+      check: shouldShowRealname.value
+    })
+    //eslint-disable-next-line no-console
+    console.log('更新しました') // todo:トーストとかに変えたい
+  } catch {
+    //eslint-disable-next-line no-console
+    console.log('更新に失敗しました')
+  } finally {
+    isSending.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <h2 :class="$style.shouldShowRealnameText">本名を表示する</h2>
+      <div :class="$style.toggleContainer">
+        <p>{{ user.realName }}</p>
+        <toggle-switch v-model="shouldShowRealname" />
+      </div>
+    </div>
+    <div>
+      <h2 :class="$style.bio">自己紹介</h2>
+      <div :class="$style.textareaContainer">
+        <form-text-area
+          v-model="bio"
+          :rows="3"
+          :limit="256"
+          placeholder="自己紹介を入力してください"
+        />
+        <base-button
+          icon="mdi:update"
+          :class="$style.updateButton"
+          :disabled="isSending"
+          @click="updateUserProfile"
+        >
+          Update
+        </base-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.toggleContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.5rem 0 0 0.5rem;
+}
+.shouldShowRealnameText {
+  font-size: 1.25rem;
+}
+.textareaContainer {
+  margin: 0.5rem 0 0 0.5rem;
+}
+.bio {
+  font-size: 1.25rem;
+  margin-top: 2rem;
+}
+.updateButton {
+  margin-top: 2rem;
+}
+</style>

src/consts/services.ts

@@ -1,14 +1,16 @@
 import { AccountType } from '/@/lib/apis'
 
-export type Service = Record<
-  AccountType,
-  {
-    name: string
-    icon: string
-  }
->
+interface Service {
+  name: string
+  icon: string
+}
+export interface ServiceWithType extends Service {
+  type: AccountType
+}
 
-export const services: Service = {
+type ServiceRecord = Record<AccountType, Service>
+
+export const services: ServiceRecord = {
   [AccountType.homepage]: {
     name: 'HomePage',
     icon: 'mdi:home'
@@ -58,3 +60,12 @@ export const services: Service = {
     icon: 'ctftime' //アイコンは保留
   }
 }
+
+export const serviceArray: ServiceWithType[] = Object.entries(services).map(
+  ([type, service]) => {
+    if (isNaN(Number(type))) {
+      throw new Error('Service type is not number')
+    }
+    return { ...service, type: Number(type) }
+  }
+)

src/pages/Contests.vue

@@ -29,7 +29,7 @@ contestStore.fetchContests()
     <div :class="$style.searchFormContainer">
       <div :class="$style.searchForm">
         <p :class="$style.searchFormDescriptionText">検索</p>
-        <FormInput
+        <form-input
           v-model="searchQuery"
           placeholder="コンテスト名"
           icon="magnify"
@@ -38,7 +38,7 @@ contestStore.fetchContests()
       <div :class="$style.newContestLink">
         <p :class="$style.searchFormDescriptionText">コンテスト作成</p>
         <router-link to="/contests/new" :class="$style.link">
-          <BaseButton type="primary" icon="mdi:trophy">New</BaseButton>
+          <base-button type="primary" icon="mdi:trophy">New</base-button>
         </router-link>
       </div>
     </div>

src/pages/UserAccounts.vue

@@ -28,8 +28,8 @@ const { data: accounts, fetcherState } = useUserDataFetcher(userId, userId =>
         detail="アカウント情報を変更します。"
         :class="$style.header"
       />
-      <router-link to="/users/accounts/new" :class="$style.link">
-        <BaseButton type="primary" icon="mdi:account">New</BaseButton>
+      <router-link to="/user/accounts/new" :class="$style.link">
+        <base-button type="primary" icon="mdi:account">New</base-button>
       </router-link>
     </div>
     <ul v-if="fetcherState === 'loaded'" :class="$style.accountList">
@@ -40,14 +40,14 @@ const { data: accounts, fetcherState } = useUserDataFetcher(userId, userId =>
     <p v-else-if="fetcherState === 'loading'">ローディング中...</p>
     <p v-else-if="fetcherState === 'error'">エラーが発生しました</p>
 
-    <router-link to="/users" :class="$style.link">
-      <BaseButton
+    <router-link to="/user" :class="$style.link">
+      <base-button
         :class="$style.backButton"
         type="secondary"
         icon="mdi:arrow-left"
       >
         Back
-      </BaseButton>
+      </base-button>
     </router-link>
   </page-container>
 </template>

src/pages/Users.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import UserProfile from '/@/components/Users/UserProfile.vue'
+import UserProfileEdit from '/@/components/Users/UserProfileEdit.vue'
+import apis from '/@/lib/apis'
+import useUserDataFetcher from '/@/use/userDataFetcher'
+
+const userId = ref('c714a848-2886-4c10-a313-de9bc61cb2bb')
+// todo: get meが実装されたらそれを使う
+
+const { data: user, fetcherState } = useUserDataFetcher(userId, userId =>
+  apis.getUser(userId)
+)
+</script>
+
+<template>
+  <page-container>
+    <div :class="$style.headerContainer">
+      <content-header
+        icon-name="mdi:account-circle-outline"
+        :header-texts="[{ title: 'Profile', url: '/users' }]"
+        detail="プロフィールを変更します。"
+        :class="$style.header"
+      />
+      <!-- todo:プレビューボタンの追加 -->
+    </div>
+    <user-profile v-if="user !== undefined" :user="user" />
+    <user-profile-edit
+      v-if="user !== undefined"
+      :user="user"
+      :class="$style.userProfileEdit"
+    />
+    <p v-else-if="fetcherState === 'loading'">ローディング中...</p>
+    <p v-else-if="fetcherState === 'error'">エラーが発生しました</p>
+  </page-container>
+</template>
+
+<style lang="scss" module>
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header {
+  margin: 4rem 0 2rem;
+}
+.userProfileEdit {
+  margin-top: 2rem;
+}
+</style>