From 641e2bc0fc1b52fbbd8decf3e10fcbdbf32ebee2 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 14:50:19 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=8E=A8=20Grid/subgrid=20=E4=BD=BF?=
 =?UTF-8?q?=E3=81=A3=E3=81=A6=E8=A1=A8=E3=82=92=E5=86=8D=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Subgrid 完全に理解した！
---
 .../transactions/TransactionFilters.vue       | 144 ------------------
 .../transactions/TransactionItem.vue          |  47 ------
 .../transactions/TransactionTable.vue         |  53 +++++++
 src/pages/TransactionsPage.vue                |  41 ++---
 4 files changed, 66 insertions(+), 219 deletions(-)
 delete mode 100644 src/components/transactions/TransactionFilters.vue
 delete mode 100644 src/components/transactions/TransactionItem.vue
 create mode 100644 src/components/transactions/TransactionTable.vue

diff --git a/src/components/transactions/TransactionFilters.vue b/src/components/transactions/TransactionFilters.vue
deleted file mode 100644
index f11b187c..00000000
--- a/src/components/transactions/TransactionFilters.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script lang="ts" setup>
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
-import { XMarkIcon } from '@heroicons/vue/24/solid'
-import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
-
-import { useGroupStore } from '/@/stores/group'
-import { useTagStore } from '/@/stores/tag'
-import { useTransactionStore } from '/@/stores/transaction'
-
-import InputSelectMultiple from '/@/components/shared/InputSelectMultiple.vue'
-import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
-import InputText from '/@/components/shared/InputText.vue'
-import { useFetchTransactionsUsecase } from '/@/features/transaction/usecase'
-
-import SortOrderButtons from './SortOrderButtons.vue'
-
-const transactionStore = useTransactionStore()
-const groupStore = useGroupStore()
-const tagStore = useTagStore()
-
-const isFilterByTarget = ref(false)
-
-const { filterParams } = storeToRefs(transactionStore)
-const { groupOptions } = storeToRefs(groupStore)
-const { tagIdOptions } = storeToRefs(tagStore)
-
-function changeIsTargetSearchMode() {
-  if (isFilterByTarget.value) {
-    filterParams.value.target = ''
-    isFilterByTarget.value = false
-  } else {
-    isFilterByTarget.value = true
-  }
-}
-function sort(sortKind: 'created_at' | 'amount') {
-  if (sortKind === 'created_at') {
-    if (filterParams.value.sort === 'created_at') {
-      filterParams.value.sort = '-created_at'
-    } else if (filterParams.value.sort === '-created_at') {
-      filterParams.value.sort = ''
-    } else {
-      filterParams.value.sort = 'created_at'
-    }
-  } else {
-    if (filterParams.value.sort === 'amount') {
-      filterParams.value.sort = '-amount'
-    } else if (filterParams.value.sort === '-amount') {
-      filterParams.value.sort = ''
-    } else {
-      filterParams.value.sort = 'amount'
-    }
-  }
-  useFetchTransactionsUsecase()
-}
-
-const sortOption = computed(() => (sortKind: 'created_at' | 'amount') => {
-  if (sortKind === 'created_at') {
-    if (filterParams.value.sort === 'created_at') {
-      return 'asc'
-    } else if (filterParams.value.sort === '-created_at') {
-      return 'desc'
-    } else {
-      return 'none'
-    }
-  } else {
-    if (filterParams.value.sort === 'amount') {
-      return 'asc'
-    } else if (filterParams.value.sort === '-amount') {
-      return 'desc'
-    } else {
-      return 'none'
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="divider">
-    <div class="children:px-2 flex h-8 px-4">
-      <!-- 年月日 -->
-      <!-- todo:多分since,untilでの検索をつける -->
-      <button
-        class="w-3/20 flex items-center justify-between"
-        @click="sort('created_at')">
-        <span>年 月 日</span>
-        <SortOrderButtons :sort="sortOption('created_at')" />
-      </button>
-      <!-- 取引額 -->
-      <!-- todo:多分範囲で検索にする -->
-      <button
-        class="w-3/20 flex items-center justify-between"
-        @click="sort('amount')">
-        <span>取引額</span>
-        <SortOrderButtons :sort="sortOption('amount')" />
-      </button>
-      <!-- 取引相手 -->
-      <div class="w-4/20 flex h-full w-full items-center">
-        <div v-if="!isFilterByTarget" class="w-full">
-          <button
-            class="flex w-full items-center justify-between"
-            @click="changeIsTargetSearchMode">
-            <span>取引相手</span>
-            <MagnifyingGlassIcon class="mr-1 h-4" />
-          </button>
-        </div>
-        <div v-else class="relative w-full">
-          <InputText
-            v-model="filterParams.target"
-            class="w-full border-none"
-            placeholder="取引相手" />
-          <XMarkIcon
-            class="absolute right-1 top-2 h-4 cursor-pointer"
-            @click="changeIsTargetSearchMode" />
-        </div>
-      </div>
-      <!-- グループ -->
-      <InputSelectSingle
-        v-model="filterParams.group"
-        class="!w-2/10"
-        :options="groupOptions"
-        placeholder="取引グループ"
-        @close="'updateTransactions'" />
-      <!-- タグ -->
-      <InputSelectMultiple
-        v-model="filterParams.tags"
-        class="!w-3/10"
-        :options="tagIdOptions"
-        placeholder="タグ"
-        @close="'updateTransactions'" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.divider::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 1px;
-  background-color: #d4d4d8;
-  margin-top: 8px;
-}
-</style>
diff --git a/src/components/transactions/TransactionItem.vue b/src/components/transactions/TransactionItem.vue
deleted file mode 100644
index 4ddb1671..00000000
--- a/src/components/transactions/TransactionItem.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-import { formatDate } from '/@/lib/date'
-
-import TagsGroup from '/@/components/shared/TagsGroup.vue'
-import type { Transaction } from '/@/features/transaction/model'
-
-interface Props {
-  transaction: Transaction
-}
-const props = defineProps<Props>()
-
-const formattedDate = computed(() => formatDate(props.transaction.createdAt))
-</script>
-
-<template>
-  <router-link :to="`transactions/${transaction.id}`">
-    <div
-      class="children:px-2 relative flex h-12 items-center px-4 hover:bg-hover-secondary">
-      <div class="w-3/20">
-        {{ formattedDate }}
-      </div>
-      <div class="w-3/20 text-right">
-        <span
-          :class="` ${
-            props.transaction.amount > 0
-              ? 'text-blue-500'
-              : 'text-error-primary'
-          }`">
-          {{ props.transaction.amount }}円
-        </span>
-      </div>
-      <div class="w-4/20">
-        {{ props.transaction.target }}
-      </div>
-      <div class="w-2/10 truncate">
-        {{
-          props.transaction.group ? props.transaction.group.description : 'なし'
-        }}
-      </div>
-      <div class="w-3/10">
-        <TagsGroup :limit="3" :tags="props.transaction.tags" />
-      </div>
-    </div>
-  </router-link>
-</template>
diff --git a/src/components/transactions/TransactionTable.vue b/src/components/transactions/TransactionTable.vue
new file mode 100644
index 00000000..2e7f89de
--- /dev/null
+++ b/src/components/transactions/TransactionTable.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import TagsGroup from '/@/components/shared/TagsGroup.vue'
+import type { Transaction } from '/@/features/transaction/model'
+import { formatDate } from '/@/lib/date'
+import { PencilIcon } from '@heroicons/vue/24/solid'
+
+interface Props {
+  page: number
+  transactions: Transaction[]
+}
+const props = defineProps<Props>()
+
+const sliceTransactionAt = (index: number, n: number) => {
+  const start = (index - 1) * n
+  const end = index * n
+  return props.transactions.slice(start, end)
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[1fr_100px_1fr_1fr_2fr_50px]">
+    <div
+      class="grid grid-cols-[subgrid] col-span-6 bg-surface-tertiary px-6 py-4">
+      <div>年 月 日</div>
+      <div>取引額</div>
+      <div>取引相手</div>
+      <div>取引グループ</div>
+      <div>タグ</div>
+    </div>
+    <router-link
+      v-for="transaction in sliceTransactionAt(props.page, 10)"
+      :key="transaction.id"
+      class="grid grid-cols-[subgrid] col-span-6 hover:bg-hover-secondary px-6 py-4"
+      :to="`transactions/${transaction.id}`">
+      <div>
+        {{ formatDate(transaction.createdAt) }}
+      </div>
+      <div>{{ transaction.amount }}円</div>
+      <div>
+        {{ transaction.target }}
+      </div>
+      <div class="truncate">
+        {{ transaction.group ? transaction.group.description : 'なし' }}
+      </div>
+      <div>
+        <TagsGroup :limit="3" :tags="transaction.tags" />
+      </div>
+      <div>
+        <PencilIcon></PencilIcon>
+      </div>
+    </router-link>
+  </div>
+</template>
diff --git a/src/pages/TransactionsPage.vue b/src/pages/TransactionsPage.vue
index 58a6101d..f75479c5 100644
--- a/src/pages/TransactionsPage.vue
+++ b/src/pages/TransactionsPage.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 import { useGroupStore } from '/@/stores/group'
 import { useTagStore } from '/@/stores/tag'
@@ -12,8 +12,7 @@ import { toPage } from '/@/lib/parseQueryParams'
 
 import PaginationBar from '/@/components/shared/PaginationBar.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import TransactionFilters from '/@/components/transactions/TransactionFilters.vue'
-import TransactionItem from '/@/components/transactions/TransactionItem.vue'
+import TransactionTable from '/@/components/transactions/TransactionTable.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
 import { useFetchTagsUsecase } from '/@/features/tag/usecase'
 import { useFetchTransactionsUsecase } from '/@/features/transaction/usecase'
@@ -30,12 +29,6 @@ const { isGroupFetched } = storeToRefs(groupStore)
 const { isTagFetched } = storeToRefs(tagStore)
 const { isAdmin } = storeToRefs(userStore)
 
-const sliceTransactionAt = (index: number, n: number) => {
-  const start = (index - 1) * n
-  const end = index * n
-  return transactions.value?.slice(start, end)
-}
-
 //TODO:  `request: toId(route.query.requestID)`でフィルターする
 await useFetchTransactionsUsecase()
 if (!isGroupFetched.value) {
@@ -55,33 +48,25 @@ watch(
 
 <template>
   <div>
-    <div class="min-w-160 mx-auto flex w-2/3 flex-col">
-      <div class="relative flex w-full items-center justify-center pt-8 pb-4">
-        <h1 class="text-center text-3xl">入出金記録</h1>
-        <div v-if="isAdmin" class="absolute right-0">
+    <div class="min-w-160 mx-auto my-8 flex w-2/3 flex-col">
+      <div class="relative flex w-full items-center mb-7">
+        <h1 class="text-center text-3xl">入出金記録一覧</h1>
+        <div v-if="!isAdmin" class="ml-7">
           <RouterLink to="/transactions/new">
             <SimpleButton font-size="lg" padding="md">
-              新規入出金記録作成
+              入出金記録を作成
             </SimpleButton>
           </RouterLink>
         </div>
       </div>
       <div class="min-h-128">
-        <div class="mb-2">
-          <span v-if="transactions && transactions.length !== 0">
-            {{ transactions?.length }}件取得しました
-          </span>
-          <span v-else>条件に一致する申請は見つかりませんでした</span>
-        </div>
-        <TransactionFilters />
-        <ul v-if="transactions" class="mt-2 divide-y">
-          <li
-            v-for="transaction in sliceTransactionAt(page, 10)"
-            :key="transaction.id">
-            <TransactionItem :transaction="transaction" />
-          </li>
-        </ul>
+        <!-- TODO: ソートボタン, 各カラムの検索フィルター -->
+        <TransactionTable
+          v-if="transactions"
+          :page="page"
+          :transactions="transactions" />
         <div v-else>loading...</div>
+
         <PaginationBar
           v-if="transactions && transactions.length > 0"
           class="my-4"

From 2cc0153d18691f73a7bb04868e9cf27c89c13b78 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 15:34:06 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/transactions/TransactionTable.vue | 4 ++--
 src/pages/TransactionsPage.vue                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/transactions/TransactionTable.vue b/src/components/transactions/TransactionTable.vue
index 2e7f89de..126e37dc 100644
--- a/src/components/transactions/TransactionTable.vue
+++ b/src/components/transactions/TransactionTable.vue
@@ -18,7 +18,7 @@ const sliceTransactionAt = (index: number, n: number) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-[1fr_100px_1fr_1fr_2fr_50px]">
+  <div class="grid grid-cols-[1fr_100px_1fr_1fr_2fr_50px] divide-y">
     <div
       class="grid grid-cols-[subgrid] col-span-6 bg-surface-tertiary px-6 py-4">
       <div>年 月 日</div>
@@ -46,7 +46,7 @@ const sliceTransactionAt = (index: number, n: number) => {
         <TagsGroup :limit="3" :tags="transaction.tags" />
       </div>
       <div>
-        <PencilIcon></PencilIcon>
+        <PencilIcon class="w-6" />
       </div>
     </router-link>
   </div>
diff --git a/src/pages/TransactionsPage.vue b/src/pages/TransactionsPage.vue
index f75479c5..932695fa 100644
--- a/src/pages/TransactionsPage.vue
+++ b/src/pages/TransactionsPage.vue
@@ -50,7 +50,7 @@ watch(
   <div>
     <div class="min-w-160 mx-auto my-8 flex w-2/3 flex-col">
       <div class="relative flex w-full items-center mb-7">
-        <h1 class="text-center text-3xl">入出金記録一覧</h1>
+        <h1 class="text-center text-2xl">入出金記録一覧</h1>
         <div v-if="!isAdmin" class="ml-7">
           <RouterLink to="/transactions/new">
             <SimpleButton font-size="lg" padding="md">

From 4f044a84a7dac04ce05de9e6d6200d635abcf443 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 16:11:58 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=94=A5=20=E9=96=8B=E7=99=BA=E7=94=A8?=
 =?UTF-8?q?=E3=81=AB=E3=83=9C=E3=82=BF=E3=83=B3=E8=A1=A8=E7=A4=BA=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=81=9F=E3=81=AE=E3=82=92=E6=88=BB=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/TransactionsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/TransactionsPage.vue b/src/pages/TransactionsPage.vue
index 932695fa..c9713a60 100644
--- a/src/pages/TransactionsPage.vue
+++ b/src/pages/TransactionsPage.vue
@@ -51,7 +51,7 @@ watch(
     <div class="min-w-160 mx-auto my-8 flex w-2/3 flex-col">
       <div class="relative flex w-full items-center mb-7">
         <h1 class="text-center text-2xl">入出金記録一覧</h1>
-        <div v-if="!isAdmin" class="ml-7">
+        <div v-if="isAdmin" class="ml-7">
           <RouterLink to="/transactions/new">
             <SimpleButton font-size="lg" padding="md">
               入出金記録を作成

From 3b428216f28d90da3027799644ef935894073b23 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 7 Sep 2024 10:52:58 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=8E=A8=20=E6=A8=AA=E5=B9=85=E3=82=92?=
 =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=8D=E3=83=BC=E3=82=B7=E3=83=A7?=
 =?UTF-8?q?=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AB=E6=8F=83=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/TransactionsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/TransactionsPage.vue b/src/pages/TransactionsPage.vue
index c9713a60..1f020080 100644
--- a/src/pages/TransactionsPage.vue
+++ b/src/pages/TransactionsPage.vue
@@ -48,7 +48,7 @@ watch(
 
 <template>
   <div>
-    <div class="min-w-160 mx-auto my-8 flex w-2/3 flex-col">
+    <div class="min-w-96 mx-auto my-8 flex w-2/3 flex-col">
       <div class="relative flex w-full items-center mb-7">
         <h1 class="text-center text-2xl">入出金記録一覧</h1>
         <div v-if="isAdmin" class="ml-7">

From bb50e1ff735634dd46c7a815e69f978246f8dd8b Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 7 Sep 2024 10:53:26 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../transactions/TransactionTable.vue           | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/transactions/TransactionTable.vue b/src/components/transactions/TransactionTable.vue
index 126e37dc..fe46fb80 100644
--- a/src/components/transactions/TransactionTable.vue
+++ b/src/components/transactions/TransactionTable.vue
@@ -18,19 +18,20 @@ const sliceTransactionAt = (index: number, n: number) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-[1fr_100px_1fr_1fr_2fr_50px] divide-y">
+  <div
+    class="grid grid-cols-[repeat(minmax(100px,1fr),4)_2fr_50px] divide-y w-full overflow-x-scroll">
     <div
-      class="grid grid-cols-[subgrid] col-span-6 bg-surface-tertiary px-6 py-4">
+      class="grid grid-cols-[subgrid] col-span-6 bg-surface-tertiary gap-x-[1vw] pl-[1vw] py-4">
       <div>年 月 日</div>
       <div>取引額</div>
       <div>取引相手</div>
-      <div>取引グループ</div>
+      <div class="whitespace-nowrap">取引グループ</div>
       <div>タグ</div>
     </div>
     <router-link
       v-for="transaction in sliceTransactionAt(props.page, 10)"
       :key="transaction.id"
-      class="grid grid-cols-[subgrid] col-span-6 hover:bg-hover-secondary px-6 py-4"
+      class="grid grid-cols-[subgrid] col-span-6 hover:bg-hover-secondary gap-x-[1vw] pl-[1vw] py-4"
       :to="`transactions/${transaction.id}`">
       <div>
         {{ formatDate(transaction.createdAt) }}
@@ -42,12 +43,8 @@ const sliceTransactionAt = (index: number, n: number) => {
       <div class="truncate">
         {{ transaction.group ? transaction.group.description : 'なし' }}
       </div>
-      <div>
-        <TagsGroup :limit="3" :tags="transaction.tags" />
-      </div>
-      <div>
-        <PencilIcon class="w-6" />
-      </div>
+      <TagsGroup :limit="3" :tags="transaction.tags" />
+      <PencilIcon class="w-6" />
     </router-link>
   </div>
 </template>

From 23cb6425189489b4b294f7c7aa2be63ac5f07457 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sun, 8 Sep 2024 21:55:05 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=8E=A8=20Grid=20=E3=81=AE=20repeat=20?=
 =?UTF-8?q?=E3=81=AE=E5=BC=95=E6=95=B0=E3=81=AE=E9=A0=86=E7=95=AA=E9=96=93?=
 =?UTF-8?q?=E9=81=95=E3=81=88=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/transactions/TransactionTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/transactions/TransactionTable.vue b/src/components/transactions/TransactionTable.vue
index fe46fb80..761cb9a7 100644
--- a/src/components/transactions/TransactionTable.vue
+++ b/src/components/transactions/TransactionTable.vue
@@ -19,7 +19,7 @@ const sliceTransactionAt = (index: number, n: number) => {
 
 <template>
   <div
-    class="grid grid-cols-[repeat(minmax(100px,1fr),4)_2fr_50px] divide-y w-full overflow-x-scroll">
+    class="grid grid-cols-[repeat(4,minmax(100px,1fr))_2fr_50px] divide-y w-full overflow-x-scroll">
     <div
       class="grid grid-cols-[subgrid] col-span-6 bg-surface-tertiary gap-x-[1vw] pl-[1vw] py-4">
       <div>年 月 日</div>