All files / src/pages/test TestPage.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <h1>テストページ</h1>
 
  <v-row class="mb-4" align="center" justify="space-between">
 
    <v-col cols="auto">
      <h1>テストページ</h1>
    </v-col>
 
  </v-row>
 
  <v-row class="mb-6">
 
    <v-col cols="4">
 
      <v-select
        v-model="selectedSkillLevelId"
        :items="skillLevelOptions"
        item-title="title"
        item-value="id"
        label="スキルレベル"
        clearable
        @update:modelValue="setSkillLevel"
      >
        <template #item="{ props, item }">
          <v-list-item v-bind="props">
            <v-tooltip
              activator="parent"
              location="right"
            >
              {{ item.raw.desc }}
            </v-tooltip>
          </v-list-item>
        </template>
      </v-select>
 
    </v-col>
 
  </v-row>
 
</template>
 
<script setup lang="ts">
// region import             // 各種ライブラリ・DI対象・ローカルコンポーネント・型の import をまとめる
import {computed, onMounted, ref} from 'vue'
import { useI18n } from 'vue-i18n'
import { type SkillLevelOption, type SkillLevelApiResponse } from '@/types/models'
import { useApi } from '@/composables/useApi'
import { useSchemaLogger } from '@/libs/logger/logger'
import { normalizeError } from '@/utils'
import { withLoading } from '@/libs/loading'
// endregion import
 
// region type               // このファイル内でのみ使う型定義（interface, type alias など）
const skillLevelItems = ref<SkillLevelOption[]>([])
 
// endregion type
 
// region i18n               // useI18n などを初期化し、t() / d() を取り出す
const { t } = useI18n()
// endregion i18n
 
// region router             // useRouter / useRoute など、画面遷移やクエリ取得に関する処理
// endregion router
 
// region store              // Pinia の useXxxStore を読み込み、状態/アクションを利用
// endregion store
 
// region props              // defineProps による外部から受け取る値の定義
// endregion props
 
// region emits              // defineEmits による親へ送るイベント定義
// endregion emits
 
// region slots              // スロットの型情報や利用（useSlots / defineSlots）
// endregion slots
 
// region constant           // このコンポーネント専用の定数/enum/テーブルなど（不変の値）
const api = useApi()
const logger = useSchemaLogger({ module: 'test:test' })
// endregion constant
 
// region state              // ref / reactive / useForm など、変化する状態を定義
const selectedSkillLevelId = ref<number | null>(null)
// endregion state
 
// region computed           // 派生状態（computed）をまとめる
const skillLevelOptions = computed(() => {
  return skillLevelItems.value.map(item => ({
    ...item,
    title: `Lv(${item.id}): ${t(item.label)}`,
    desc: `Lv(${item.id}): ${t(item.description)}`
  }))
})
// endregion computed
 
// region validation         // Zod / Yup / Vee-Validate 等のスキーマ・ルール・フォーム設定
// endregion validation
 
// region permission         // 権限による UI/操作の可否を判定するロジック（isEditable など）
// endregion permission
 
// region api                // Axios クライアントを使った通信処理（fetchXxx / updateXxx など）
const fetchSkillLevel = async () => {
  try {
    const { data } = await api.get<SkillLevelApiResponse>('/option/skill/level')
    skillLevelItems.value = data.items
  } catch (e) {
    logger.error('Failed to fetch skill level options', normalizeError(e))
    skillLevelItems.value = []
  }
}
// endregion api
 
// region watcher            // watch / watchEffect など、状態の変化に応じた処理
// endregion watcher
 
// region effect             // watcher 以外の副作用（外部ライブラリ初期化・setInterval 等）
// endregion effect
 
// region handler            // ボタン押下・フォーム送信など UI から呼ばれるイベントハンドラ
const setSkillLevel = (id: number | null) => {
  logger.debug(`skill level : ${id}`)
}
// endregion handler
 
// region lifecycle          // onMounted / onUnmounted / onBeforeRouteLeave などのライフサイクル処理
onMounted( async () => {
  await withLoading(async () => {
    await Promise.all([
      fetchSkillLevel()
    ])
  }, 'test:test')
})
// endregion lifecycle
 
// region provide-inject     // コンポーネント間で共有する provide / inject の定義
// endregion provide-inject
 
// region expose             // defineExpose により外部へ公開するメソッドやプロパティ
// endregion expose
 
// region devtool            // 開発環境専用のログ出力・debug 情報など（import.meta.env.DEV）
// endregion devtool
 
// region test-id            // data-testid 用の定数定義など（ユニット/E2E テスト向け）
// endregion test-id
</script>
 
<style scoped>
 
</style>