traPtitech · anko9801 · Jul 22, 2024 · May 18, 2024 · May 18, 2024 · May 24, 2024
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
       rel="stylesheet" />
   </head>
   <body>

diff --git a/src/components/newTransaction/NewTransactionTarget.vue b/src/components/newTransaction/NewTransactionTarget.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { PlusCircleIcon, MinusCircleIcon } from '@heroicons/vue/24/solid'
-import { useToast } from 'vue-toastification'
-
 import InputText from '/@/components/shared/InputText.vue'
+import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
 
 interface Props {
   targets: string[]
@@ -11,8 +9,6 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{ (e: 'input', value: string[]): void }>()
 
-const toast = useToast()
-
 function handleEditTarget(index: number, value: string) {
   emit(
     'input',
@@ -24,10 +20,6 @@ function handleAddTarget() {
   emit('input', [...props.targets, ''])
 }
 function handleRemoveTarget(index: number) {
-  if (props.targets.length === 1) {
-    toast.warning('取引相手は1人以上必要です')
-    return
-  }
   emit(
     'input',
     props.targets.filter((_, i) => i !== index)
@@ -36,25 +28,21 @@ function handleRemoveTarget(index: number) {
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <label>取引相手</label>
-    <ul>
-      <li
-        v-for="(target, i) in targets"
-        :key="target"
-        class="mb-2 flex w-2/3 items-center gap-4">
-        <InputText
-          :model-value="target"
-          placeholder="取引相手"
+  <div class="flex flex-col gap-2">
+    <label class="text-sm font-medium" for="target">取引相手</label>
+    <ul class="flex flex-col gap-2">
+      <li v-for="(target, i) in targets" :key="target" class="flex items-center gap-3">
+        <InputText class="flex-grow" :model-value="target" placeholder="取引相手"
           @update:model-value="handleEditTarget(i, $event)" />
-        <button class="flex" @click="handleRemoveTarget(i)">
-          <MinusCircleIcon class="w-6" />
+        <button v-if="props.targets.length > 1" class="flex" @click="handleRemoveTarget(i)">
+          <TrashIcon class="w-6 text-red-400" />
         </button>
       </li>
     </ul>
-    <div class="w-2/3 text-center">
-      <button @click="handleAddTarget">
-        <PlusCircleIcon class="w-8" />
+    <div class="ml-3">
+      <button class="flex items-center p-2 border rounded" @click="handleAddTarget">
+        <PlusIcon class="w-5 mr-2" />
+        取引相手を追加
       </button>
     </div>
   </div>

diff --git a/src/components/shared/InputNumber.vue b/src/components/shared/InputNumber.vue
@@ -6,6 +6,7 @@ interface Props {
   placeholder?: string
   min?: number
   autoFocus?: boolean
+  id?: string
 }
 const model = defineModel<number>({ required: true })
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +31,7 @@ onMounted(() => {
 
 <template>
   <input
+    :id="props.id"
     ref="inputRef"
     class="bg-background rounded border border-gray-300 py-1 px-2"
     :min="props.min"

diff --git a/src/components/shared/InputRadioButton.vue b/src/components/shared/InputRadioButton.vue
@@ -12,7 +12,10 @@ const props = defineProps<Props>()
 
 <template>
   <div class="space-x-4">
-    <label v-for="option in props.options" :key="option.key">
+    <label
+      v-for="option in props.options"
+      :key="option.key"
+      class="cursor-pointer">
       <input v-model="model" type="radio" :value="option.value" />
       {{ option.key }}
     </label>

diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
@@ -20,6 +20,7 @@ interface Props {
   isDropdownAbove?: boolean
   /* [optionsのkey, modelValueのkey] modelValueをselectedValuesに適用するときに使う*/
   uniqKeys?: [string, string]
+  id?: string
   /* デフォルト幅を設定するため */
   class?: string
 }
@@ -284,6 +285,7 @@ onUnmounted(() => {
           <button type="button" @click="removeValue(selectedValue)">×</button>
         </div>
         <input
+          :id="props.id"
           ref="inputRef"
           v-model="searchQuery"
           class="flex-grow bg-transparent pl-1 focus:outline-none"

diff --git a/src/components/shared/InputSelectSingle.vue b/src/components/shared/InputSelectSingle.vue
@@ -17,6 +17,7 @@ interface Props {
   disabled?: boolean
   isDropdownAbove?: boolean
   uniqKeys?: [string, string]
+  id?: string
   class?: string
 }
 
@@ -191,6 +192,7 @@ onUnmounted(() => {
           {{ selectedValue.key }}
         </span>
         <input
+          :id="props.id"
           ref="inputRef"
           v-model="searchQuery"
           class="flex-grow bg-transparent focus:outline-none"

diff --git a/src/pages/NewTransactionPage.vue b/src/pages/NewTransactionPage.vue
@@ -41,50 +41,51 @@ if (!isTagFetched.value) {
 
 <template>
   <div v-if="!isAdmin">権限がありません。</div>
-  <div class="min-w-160 mx-auto flex w-2/3 flex-col px-12 pt-8">
-    <div class="pb-8">
-      <h1 class="text-center text-3xl">入出金記録の新規作成</h1>
+  <div v-else class="min-w-160 mx-auto mb-5 flex w-2/3 flex-col px-12 pt-8">
+    <div class="pb-6">
+      <h1 class="text-2xl">入出金記録の新規作成</h1>
     </div>
-    <form class="flex flex-col gap-2">
-      <div class="flex flex-col">
-        <label>金額</label>
+    <form class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium" for="amount">金額</label>
         <div>
           <InputNumber
+            id="amount"
             v-model="transaction.amount"
             auto-focus
-            class="mr-1"
+            class="mr-2"
             :min="1" />円
         </div>
       </div>
-      <div class="flex flex-col">
-        <label>入出金</label>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium">入出金の方向</label>
         <InputRadioButton
           v-model="moneyDirection"
           :options="directionOptions" />
       </div>
       <NewTransactionTarget
         :targets="transaction.targets"
         @input="transaction.targets = $event" />
-      <div class="flex flex-col">
-        <label>グループ</label>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium" for="group">グループ</label>
         <InputSelectSingle
+          id="group"
           v-model="transaction.group"
-          class="!w-2/3"
+          class="w-full"
           :options="groupOptions"
           placeholder="グループを選択" />
       </div>
-      <div class="flex flex-col">
-        <label>タグ</label>
-        <InputSelectTagWithCreation v-model="transaction.tags" class="!w-2/3" />
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium" for="tag">タグ</label>
+        <InputSelectTagWithCreation id="tag" v-model="transaction.tags" />
       </div>
       <div class="text-right">
         <SimpleButton
-          class="mb-4 w-64"
           :disabled="isSending"
-          font-size="xl"
-          padding="sm"
+          font-size="md"
+          padding="md"
           @click.stop="postTransaction">
-          入出金記録を作成する
+          入出金記録を作成
         </SimpleButton>
       </div>
     </form>