transactionのフィルター

src/components/requestDetail/ToTransactionButtons.vue

@@ -27,7 +27,7 @@ const { isAdmin } = storeToRefs(userStore)
       @click="request && postTransactionFromRequest(request)">
       この申請から入出金記録を作成する
     </SimpleButton>
-    <RouterLink class="w-full" :to="`/transactions?requestID=${request?.id}`">
+    <RouterLink class="w-full" :to="`/transactions?request=${request?.id}`">
       <SimpleButton class="w-full" font-size="md" padding="sm">
         この申請の入出金記録へ移動
       </SimpleButton>

src/components/requests/RequestFilters.vue

@@ -29,7 +29,7 @@ function sortByCreatedAt() {
   } else {
     filterParams.value.sort = 'created_at'
   }
-  fetchRequests(filterParams.value)
+  fetchRequests()
 }
 </script>
 
@@ -48,34 +48,34 @@ function sortByCreatedAt() {
         v-model="filterParams.since"
         class="w-28"
         placeholder="yyyy-MM-dd"
-        @blur="fetchRequests(filterParams)" />
+        @blur="fetchRequests" />
       ～
       <InputText
         v-model="filterParams.until"
         class="w-28"
         placeholder="yyyy-MM-dd"
-        @blur="fetchRequests(filterParams)" />
+        @blur="fetchRequests" />
     </div>
     <InputSelectSingle
       v-model="filterParams.target"
       :options="userOptions"
       placeholder="申請者"
-      @close="fetchRequests(filterParams)" />
+      @close="fetchRequests" />
     <InputSelectSingle
       v-model="filterParams.currentStatus"
       :options="requestStatusOptions()"
       placeholder="申請の状態"
-      @close="fetchRequests(filterParams)" />
+      @close="fetchRequests" />
     <InputSelectSingle
       v-model="filterParams.group"
       :options="groupOptions"
       placeholder="グループ"
-      @close="fetchRequests(filterParams)" />
+      @close="fetchRequests" />
     <InputSelectMultiple
       v-model="filterParams.tags"
       :options="tagIdOptions"
       placeholder="タグ"
-      @close="fetchRequests(filterParams)" />
+      @close="fetchRequests" />
   </div>
   <span v-if="requests && requests.length !== 0" class="ml-1/8">
     {{ requests.length }}件取得しました

src/components/shared/MarkdownTextarea.vue

@@ -12,7 +12,7 @@ interface Props {
   placeholder?: string
   modelValue: string
   templates?: readonly { name: string; value: string }[]
-  autoFocus: boolean
+  autoFocus?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

src/components/transactions/TransactionFilters.vue

@@ -18,19 +18,19 @@ const transactionStore = useTransactionStore()
 const groupStore = useGroupStore()
 const tagStore = useTagStore()
 
-const isFilterByTarget = ref(false)
+const shouldShowFilterByTarget = ref(false)
 
 const { fetchTransactions } = transactionStore
 const { filterParams } = storeToRefs(transactionStore)
 const { groupOptions } = storeToRefs(groupStore)
 const { tagIdOptions } = storeToRefs(tagStore)
 
 function changeIsTargetSearchMode() {
-  if (isFilterByTarget.value) {
+  if (shouldShowFilterByTarget.value) {
     filterParams.value.target = ''
-    isFilterByTarget.value = false
+    shouldShowFilterByTarget.value = false
   } else {
-    isFilterByTarget.value = true
+    shouldShowFilterByTarget.value = true
   }
 }
 function sort(sortKind: 'created_at' | 'amount') {
@@ -51,7 +51,7 @@ function sort(sortKind: 'created_at' | 'amount') {
       filterParams.value.sort = 'amount'
     }
   }
-  fetchTransactions(filterParams.value)
+  fetchTransactions()
 }
 
 const sortOption = computed(() => (sortKind: 'created_at' | 'amount') => {
@@ -96,7 +96,7 @@ const sortOption = computed(() => (sortKind: 'created_at' | 'amount') => {
       </button>
       <!-- 取引相手 -->
       <div class="w-4/20 flex h-full w-full items-center">
-        <div v-if="!isFilterByTarget" class="w-full">
+        <div v-if="!shouldShowFilterByTarget" class="w-full">
           <button
             class="flex w-full items-center justify-between"
             @click="changeIsTargetSearchMode">

src/pages/TransactionsPage.vue

@@ -5,10 +5,10 @@ import { RouterLink, useRoute } from 'vue-router'
 
 import { useGroupStore } from '/@/stores/group'
 import { useTagStore } from '/@/stores/tag'
-import { useTransactionStore, defaultParams } from '/@/stores/transaction'
+import { useTransactionStore } from '/@/stores/transaction'
 import { useUserStore } from '/@/stores/user'
 
-import { toId, toPage } from '/@/lib/parseQueryParams'
+import { toPage } from '/@/lib/parseQueryParams'
 
 import PaginationBar from '/@/components/shared/PaginationBar.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
@@ -36,10 +36,7 @@ const sliceTransactionAt = (index: number, n: number) => {
   return transactions.value?.slice(start, end)
 }
 
-await fetchTransactions({
-  ...defaultParams,
-  request: toId(route.query.requestID)
-})
+await fetchTransactions()
 if (!isGroupFetched.value) {
   await fetchGroups()
 }
@@ -76,7 +73,7 @@ watch(
           <span v-else>条件に一致する申請は見つかりませんでした</span>
         </div>
         <TransactionFilters />
-        <ul v-if="transactions" class="mt-2 divide-y">
+        <ul v-if="transactions" class="divide-y">
           <li
             v-for="transaction in sliceTransactionAt(page, 10)"
             :key="transaction.id">

src/stores/request.ts

@@ -18,16 +18,6 @@ interface SearchRequestParams {
   group: string
 }
 
-const defaultParams: SearchRequestParams = {
-  sort: 'created_at',
-  currentStatus: '',
-  target: '',
-  since: '',
-  until: '',
-  tags: [],
-  group: ''
-}
-
 export const useRequestStore = defineStore('request', () => {
   const toast = useToast()
 
@@ -44,25 +34,25 @@ export const useRequestStore = defineStore('request', () => {
     group: ''
   })
 
-  const fetchRequests = async (params: SearchRequestParams = defaultParams) => {
+  const fetchRequests = async () => {
     const rule = /^2[0-9]{3}-[0-9]{1,2}-[0-9]{1,2}$/
     if (
-      (params.since && !rule.test(params.since)) ||
-      (params.until && !rule.test(params.until))
+      (filterParams.value.since && !rule.test(filterParams.value.since)) ||
+      (filterParams.value.until && !rule.test(filterParams.value.until))
     ) {
       toast.warning('日付はyyyy-MM-ddの形式で入力してください')
       return
     }
     try {
       const response = (
         await apis.getRequests(
-          params.sort,
-          params.currentStatus as RequestStatus,
-          params.target,
-          params.since,
-          params.until,
-          params.tags.join(','),
-          params.group
+          filterParams.value.sort,
+          filterParams.value.currentStatus as RequestStatus,
+          filterParams.value.target,
+          filterParams.value.since,
+          filterParams.value.until,
+          filterParams.value.tags.join(','),
+          filterParams.value.group
         )
       ).data
       requests.value = response.map(request => convertRequest(request))

src/stores/transaction.ts

@@ -1,10 +1,12 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useToast } from 'vue-toastification'
 
 import type { Transaction } from '/@/lib/apiTypes'
 import apis from '/@/lib/apis'
 import { convertTransaction } from '/@/lib/date'
+import { toId } from '/@/lib/parseQueryParams'
 
 interface SearchTransactionParams {
   sort: string
@@ -39,10 +41,13 @@ export const directionOptions = [
 
 export const useTransactionStore = defineStore('transaction', () => {
   const toast = useToast()
+  const route = useRoute()
 
   const transactions = ref<Transaction[]>()
   const isTransactionFetched = ref(false)
 
+  const groupId = computed(() => toId(route.query.group))
+  const requestId = computed(() => toId(route.query.request))
   const filterParams = ref<SearchTransactionParams>({
     sort: 'created_at',
     target: '',
@@ -52,28 +57,30 @@ export const useTransactionStore = defineStore('transaction', () => {
     tags: [],
     request: ''
   })
+  watch([groupId, requestId], () => {
+    filterParams.value.group = groupId.value
+    filterParams.value.request = requestId.value
+  })
 
-  const fetchTransactions = async (
-    params: SearchTransactionParams = defaultParams
-  ) => {
+  const fetchTransactions = async () => {
     const rule = /^2[0-9]{3}-[0-9]{1,2}-[0-9]{1,2}$/
     if (
-      (params.since && !rule.test(params.since)) ||
-      (params.until && !rule.test(params.until))
+      (filterParams.value.since && !rule.test(filterParams.value.since)) ||
+      (filterParams.value.until && !rule.test(filterParams.value.until))
     ) {
       toast.warning('日付はyyyy-MM-ddの形式で入力してください')
       return
     }
     try {
       const response = (
         await apis.getTransactions(
-          params.sort,
-          params.target,
-          params.since,
-          params.until,
-          params.tags.join(','),
-          params.group,
-          params.request
+          filterParams.value.sort,
+          filterParams.value.target,
+          filterParams.value.since,
+          filterParams.value.until,
+          filterParams.value.tags.join(','),
+          filterParams.value.group,
+          filterParams.value.request
         )
       ).data
       transactions.value = response.map(transaction =>