/user/accounts の実装

src/components/Layout/PageContainer.vue

@@ -1,15 +1,9 @@
+<script setup lang="ts"></script>
+
 <template>
   <main :class="$style.container"><slot /></main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PageContainer'
-})
-</script>
-
 <style lang="scss" module>
 .container {
   width: 100%;

src/components/UserAccounts/AccountItem.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { Account } from '/@/lib/apis'
+import ServiceLogo from '/@/components/UserAccounts/ServiceLogo.vue'
+import Icon from '/@/components/UI/Icon.vue'
+
+interface Props {
+  account: Account
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <router-link
+    :to="`/user/accounts/${props.account.id}/edit`"
+    :class="$style.link"
+  >
+    <div :class="$style.container">
+      <div :class="$style.displayNameContainer">
+        <p :class="$style.displayName">{{ props.account.displayName }}</p>
+        <service-logo :service="props.account.type" />
+      </div>
+      <p :class="$style.url"><icon name="mdi:link" />{{ props.account.url }}</p>
+      <p :class="$style.prPermittion">
+        <icon v-if="props.account.prPermitted" name="mdi:advertisements" />
+        <icon v-else name="mdi:advertisements-off" />
+        <span>
+          traP広報にて言及を許可{{
+            props.account.prPermitted ? 'する' : 'しない'
+          }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
+<style lang="scss" module>
+.link {
+  color: inherit;
+  text-decoration: none;
+}
+.container {
+  padding: 8px;
+}
+.displayNameContainer {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.displayName {
+  color: $color-primary;
+  font-size: 18px;
+}
+.url {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.prPermittion {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+</style>

src/components/UserAccounts/ServiceLogo.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+import type { AccountType } from '/@/lib/apis'
+import type { Service } from '/@/consts/services'
+import { serviceArray } from '/@/consts/services'
+
+interface Props {
+  service: AccountType
+}
+
+const props = defineProps<Props>()
+
+const validateService = (service: Service | undefined) => {
+  if (service === undefined) {
+    return {
+      name: 'Unknown',
+      icon: 'mdi:help-circle'
+    }
+  }
+  return service
+}
+</script>
+
+<template>
+  <div :class="$style.logo">
+    <Icon
+      :name="validateService(serviceArray[props.service]).icon"
+      :class="$style.icon"
+    />
+    {{ validateService(serviceArray[props.service]).name }}
+  </div>
+</template>
+
+<style lang="scss" module>
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.icon {
+  display: flex;
+}
+</style>

src/consts/services.ts

@@ -0,0 +1,55 @@
+export interface Service {
+  name: string
+  icon: string
+}
+
+export const serviceArray: Service[] = [
+  {
+    name: 'HomePage',
+    icon: 'mdi:home'
+  },
+  {
+    name: 'Blog',
+    icon: 'mdi:post-outline'
+  },
+  {
+    name: 'Twitter',
+    icon: 'mdi:twitter'
+  },
+  {
+    name: 'Facebook',
+    icon: 'mdi:facebook'
+  },
+  {
+    name: 'pixiv',
+    icon: 'simple-icons:pixiv'
+  },
+  {
+    name: 'Github',
+    icon: 'mdi:github'
+  },
+  {
+    name: 'Qiita',
+    icon: 'simple-icons:qiita'
+  },
+  {
+    name: 'Zenn',
+    icon: 'simple-icons:zenn'
+  },
+  {
+    name: 'AtCoder',
+    icon: 'atcoder' //アイコンは保留
+  },
+  {
+    name: 'SoundCloud',
+    icon: 'mdi:soundcloud'
+  },
+  {
+    name: 'HackTheBox',
+    icon: 'simple-icons:hackthebox'
+  },
+  {
+    name: 'CTFtime',
+    icon: 'ctftime' //アイコンは保留
+  }
+]

src/pages/UserAccounts.vue

@@ -0,0 +1,87 @@
+<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 AccountItem from '/@/components/UserAccounts/AccountItem.vue'
+import { ref } from 'vue'
+import apis from '/@/lib/apis'
+import useUserDataFetcher from '/@/use/userDataFetcher'
+
+const userId = ref('c714a848-2886-4c10-a313-de9bc61cb2bb')
+// todo: get meが実装されたらそれを使う
+
+const { data: accounts, fetcherState: fetcherState } = useUserDataFetcher(
+  userId,
+  userId => apis.getUserAccounts(userId)
+)
+</script>
+
+<template>
+  <page-container>
+    <div :class="$style.headerContainer">
+      <content-header
+        icon-name="mdi:account-circle-outline"
+        :header-texts="[
+          { title: 'Profile', url: '/user' },
+          { title: 'Accounts', url: '/user/accounts' }
+        ]"
+        detail="アカウント情報を変更します。"
+        :class="$style.header"
+      />
+      <router-link to="/user/accounts/new" :class="$style.link">
+        <BaseButton type="primary" icon="mdi:account">New</BaseButton>
+      </router-link>
+    </div>
+    <ul v-if="fetcherState === 'loaded'" :class="$style.accountList">
+      <li v-for="account in accounts" :key="account.id">
+        <account-item :account="account" />
+      </li>
+    </ul>
+    <p v-else-if="fetcherState === 'loading'">ローディング中...</p>
+    <p v-else-if="fetcherState === 'error'">エラーが発生しました</p>
+
+    <router-link to="/user" :class="$style.link">
+      <BaseButton
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+      >
+        Back
+      </BaseButton>
+    </router-link>
+  </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;
+}
+.accountList {
+  list-style: none;
+  padding: 8px 0;
+  li {
+    border: 1px solid $color-primary-text;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    &:hover {
+      background-color: $color-background-dim;
+    }
+  }
+}
+.backButton {
+  margin-top: 32px;
+}
+</style>

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const Index = () => import('/@/pages/Index.vue')
 const User = () => import('/@/pages/User.vue')
+const UserAccounts = () => import('/@/pages/UserAccounts.vue')
 const Projects = () => import('/@/pages/Projects.vue')
 const Project = () => import('/@/pages/Project.vue')
 const Events = () => import('/@/pages/Events.vue')
@@ -55,6 +56,11 @@ const routes = [
     path: '/user',
     name: 'Profile',
     component: User
+  },
+  {
+    path: '/user/accounts',
+    name: 'UserAccounts',
+    component: UserAccounts
   }
 ]