Merge pull request #39 from Pugma:feat/me_and_group

created MyPage and GroupPage / activate Suspense and prism

client/package.json

@@ -4,15 +4,17 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "run-p dev-only start-mock",
+    "dev-only": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
     "api-client": "openapi-generator-cli generate -g typescript-axios -i ../docs/openapi.yaml -o ./src/lib/apis/generated",
-    "api-server": "openapi-generator-cli generate -g rust-axum -i ../docs/openapi.yaml -o ../server/apis/"
+    "api-server": "openapi-generator-cli generate -g rust-axum -i ../docs/openapi.yaml -o ../server/apis/",
+    "start-mock": "prism mock -p 4010 -d ../docs/openapi.yaml"
   },
   "dependencies": {
     "vue": "^3.4.21",
@@ -21,6 +23,7 @@
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.13.4",
     "@rushstack/eslint-patch": "^1.8.0",
+    "@stoplight/prism-cli": "^5.8.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.12.5",
     "@vitejs/plugin-vue": "^5.0.4",

client/src/App.vue

@@ -3,7 +3,10 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <Suspense>
+    <RouterView />
+    <template #fallback>loading...</template>
+  </Suspense>
 </template>
 
 <style scoped>

client/src/components/GroupList.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type GroupItem } from '@/lib/apis'
+
+interface Props {
+  groups: GroupItem[]
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <ul>
+    <li v-for="group in groups" :key="group.GroupUuid">
+      {{ group.GroupName }}
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped></style>

client/src/components/ScheduleList.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type ScheduleItem } from '@/lib/apis'
+
+interface Props {
+  schedules: ScheduleItem[]
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <ul>
+    <li v-for="schedule in schedules" :key="schedule.UserName">
+      {{ schedule.Since }} ~ {{ schedule.Until }}
+      {{ schedule.Condition }}
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped></style>

client/src/components/SignUp.vue

@@ -14,7 +14,7 @@ const request = ref<PostLogin>({
 const postNewAccount = () => {
   request.value.UserName = newUserName.value
   request.value.Password = newPassword.value
-  apis.signUpPost(request.value)
+  apis.auth.signUpPost(request.value)
 }
 </script>
 

client/src/lib/apis/index.ts

@@ -1,7 +1,20 @@
 /* eslint-disable no-restricted-imports */
-import { AuthApi, Configuration } from '@/lib/apis/generated'
+import { AuthApi, Configuration, GroupApi, UserApi, ScheduleApi } from '@/lib/apis/generated'
 
-const apis = new AuthApi(new Configuration({ basePath: '/api' }))
+class Apis {
+  auth: AuthApi
+  group: GroupApi
+  user: UserApi
+  schedule: ScheduleApi
+
+  constructor() {
+    this.auth = new AuthApi(new Configuration({ basePath: '/api' }))
+    this.group = new GroupApi(new Configuration({ basePath: '/api' }))
+    this.user = new UserApi(new Configuration({ basePath: '/api' }))
+    this.schedule = new ScheduleApi(new Configuration({ basePath: '/api' }))
+  }
+}
+const apis = new Apis()
 
 export default apis
 export * from '@/lib/apis/generated'

client/src/lib/param.ts

@@ -0,0 +1,15 @@
+import { useRoute } from 'vue-router'
+import { computed, type ComputedRef } from 'vue'
+
+const toStringIfArray = (s: string | undefined | readonly string[]) => (Array.isArray(s) ? s[0] : s)
+
+/**
+ * @param paramName - 取得するparam、存在しないものを取得しようとした場合、undefinedが返るので注意
+ */
+const useParam = (paramName: string): ComputedRef<string> => {
+  const route = useRoute()
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return computed(() => toStringIfArray(route.params[paramName])!)
+}
+
+export default useParam

client/src/router/index.ts

@@ -9,12 +9,20 @@ const router = createRouter({
       component: TopPage
     },
     {
-      path: '/signUp',
-      name: 'SignUp',
+      path: '/me',
+      name: 'MyPage',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('@/components/SignUp.vue')
+      component: () => import('@/views/MyPage.vue')
+    },
+    {
+      path: '/group/:groupId',
+      name: 'GroupPage',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('@/views/GroupPage.vue')
     },
     {
       path: '/:pathMatch(.*)*',

client/src/views/GroupPage.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import PageHeader from '@/components/PageHeader.vue'
+import PageContainer from '@/components/PageContainer.vue'
+import apis, { type ScheduleItem } from '@/lib/apis'
+import { ref } from 'vue'
+import PageTitle from '@/components/PageTitle.vue'
+import useParam from '@/lib/param'
+import ScheduleList from '@/components/ScheduleList.vue'
+
+const info = ref<ScheduleItem[]>([])
+const groupId = useParam('groupId')
+
+info.value = (await apis.schedule.scheduleGroupIdGet(groupId.value)).data
+</script>
+
+<template>
+  <PageHeader />
+  <PageContainer>
+    <PageTitle title="メンバーの忙しさ一覧" />
+    <ScheduleList :schedules="info" />
+  </PageContainer>
+</template>
+
+<style lang="scss" scoped></style>

client/src/views/MyPage.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import PageHeader from '@/components/PageHeader.vue'
+import PageContainer from '@/components/PageContainer.vue'
+import apis, { type GroupItem } from '@/lib/apis'
+import { ref } from 'vue'
+import GroupList from '@/components/GroupList.vue'
+import PageTitle from '@/components/PageTitle.vue'
+
+const groups = ref<GroupItem[]>([])
+groups.value = (await apis.user.meGet()).data
+</script>
+
+<template>
+  <PageHeader />
+  <PageContainer>
+    <PageTitle title="所属しているグループ一覧" />
+    <GroupList :groups="groups" />
+  </PageContainer>
+</template>
+
+<style lang="scss" scoped></style>

client/src/views/TopPage.vue

@@ -12,8 +12,4 @@ import SignUp from '@/components/SignUp.vue'
   </PageContainer>
 </template>
 
-<style lang="scss" scoped>
-// * {
-//   color: $color-primary;
-// }
-</style>
+<style lang="scss" scoped></style>

client/tsconfig.node.json

@@ -11,7 +11,6 @@
     "composite": true,
     "noEmit": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "types": ["node"]

client/vite.config.ts

@@ -16,8 +16,9 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true
+        target: 'http://localhost:4010/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
       }
     }
   },