summary page を年度のパスパラメータにする

.github/workflows/frontend.yml

@@ -11,15 +11,15 @@ on:
 jobs:
   frontend:
     runs-on: ubuntu-latest
-    steps: 
+    steps:
       - name: Checkout
         uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: "22.5"
-          cache-dependency-path: 'package-lock.json'
+          cache-dependency-path: "package-lock.json"
 
       - run: node --version
 
@@ -34,6 +34,5 @@ jobs:
         env:
           NODE_OPTIONS: "--max_old_space_size=8192"
 
-      - name: npm run generate
-        run: npm run build
-
+      - name: npm run lint
+        run: npm run lint

components/PostRecord.vue

@@ -1,24 +1,23 @@
-<script setup lang="ts">
-import type { Category } from "@/interfaces";
-const config = useRuntimeConfig(); // nuxt.config.ts に書いてあるコンフィグを読み出す
-const selector = ref<any>()
+<script setup lang='ts'>
+import type { Category } from '@/interfaces'
+let selector: string
 const categoryList = ref<Category[]>()
 const asyncData = await useFetch(
-  "/api/getCategories",
+  '/api/getCategories',
   {
     key: `/api/getCategories`,
-  }
-);
+  },
+)
 
-const data = asyncData.data.value as Category[];
+const data = asyncData.data.value as Category[]
 
 // category 加工
 if (data != undefined) { // 取得済の場合のみ
-  for (let d of data) {
+  for (const d of data) {
     // 100, category_name -> 100:category_name という表示に
     // ただし加工済の場合は skip
-    if (d.category_name[3] != ":") {
-      d.category_name = d.category_id + ":" + d.category_name
+    if (d.category_name[3] != ':') {
+      d.category_name = d.category_id + ':' + d.category_name
     }
   }
 }
@@ -29,40 +28,40 @@
 const priceBox = ref<number>()
 
 const postButton = async (): Promise<void> => {
-  const asyncDataBtn = await useAsyncData(
+  await useAsyncData(
     `record`,
-    (): Promise<any> => {
-      const send_category_id = selector.value.slice(0, 3) // 210-食費→210
-      const param = { 'price': priceBox.value, 'category_id': send_category_id }
-      const paramStr = "?price=" + param['price'] + "&category_id=" + param['category_id']
-      const localurl = "/api/postRecord" + paramStr
-      const response = $fetch(localurl);
-      return response;
-    }
-  );
+    (): Promise<unknown> => {
+      const send_category_id = selector.slice(0, 3) // 210-食費→210
+      const param = { price: priceBox.value, category_id: send_category_id }
+      const paramStr = '?price=' + param['price'] + '&category_id=' + param['category_id']
+      const localurl = '/api/postRecord' + paramStr
+      const response = $fetch(localurl)
+      return response
+    },
+  )
   location.reload()
-};
+}
 
 </script>
 
 <template>
-  <div class="container text-center">
-    <div class="row justify-content-center">
-      <div class="col-2">
-        <select v-model="selector" class="form-select">
-          <option v-for="category in categoryList" :key="category.category_id">
+  <div class='container text-center'>
+    <div class='row justify-content-center'>
+      <div class='col-2'>
+        <select v-model='selector' class='form-select'>
+          <option v-for='category in categoryList' :key='category.category_id'>
             {{ category.category_name }}
           </option>
         </select>
       </div>
 
-      <div class="col-2 mb-3">
-        <input v-model="priceBox" type="number" placeholder="Value" />
+      <div class='col-2 mb-3'>
+        <input v-model='priceBox' type='number' placeholder='Value' />
       </div>
     </div>
 
-    <div class="d-grid col-2 mx-auto">
-      <button class="btn btn-primary" @click="postButton" name="postButton" type="submit">Post</button>
+    <div class='d-grid col-2 mx-auto'>
+      <button class='btn btn-primary' @click='postButton' name='postButton' type='submit'>Post</button>
     </div>
 
   </div>

components/ShowHistory.vue

@@ -0,0 +1,66 @@
+<script setup lang='ts'>
+import type { Record } from '@/interfaces'
+const recordList = ref<Record[]>()
+const asyncData = await useFetch(
+  '/api/history',
+  {
+    key: `/api/history`,
+  },
+)
+
+const data = asyncData.data.value as Record[]
+
+// fetchデータを整形
+if (data != undefined) { // 取得済の場合のみ
+  for (const d of data) {
+    d.datetime = d.datetime.slice(0, 19) // 2023-09-23T00:00:00+09:00 -> 2023-09-23T00:00:00
+  }
+}
+
+recordList.value = data
+
+async function showDeleteDialog(id: number): Promise<void> {
+  const userResponse: boolean = confirm('このデータを削除しますか')
+  if (userResponse == true) {
+    await useAsyncData(
+      `record`,
+      (): Promise<unknown> => {
+        const param = { id: id }
+        const paramStr = '?id=' + param['id']
+        const localurl = '/api/deleteRecord' + paramStr
+        const response = $fetch(localurl)
+        return response
+      },
+    )
+    location.reload()
+  }
+}
+
+</script>
+
+<template>
+  <div class='container-sm'>
+    <table class='table table-striped table-sm'>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>カテゴリ名</th>
+          <th>金額</th>
+          <th>日付</th>
+          <th>メモ</th>
+          <th>削除</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for='record in recordList' :key=record.id>
+          <td>{{ record.id }}</td>
+          <td>{{ record.category_name }}</td>
+          <td>{{ record.price }}</td>
+          <td>{{ record.datetime }}</td>
+          <td>{{ record.memo }}</td>
+          <td><button class='btn btn-secondary' @click='showDeleteDialog(record.id)'>削除</button></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>