Merge pull request #167 from traPtitech/feat/new_request

申請作成ページを Figma に合わせる
traPtitech · Jul 22, 2024 · 3a4408a · 3a4408a
2 parents 7ba2361 + abb140c
commit 3a4408a
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 59 deletions.
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/newRequest/NewRequestFileForm.vue b/src/components/newRequest/NewRequestFileForm.vue
@@ -44,12 +44,19 @@ function removeFile(index: number) {
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <label>画像</label>
-    <input ref="inputRef" multiple type="file" @change="handleFileChange" />
+  <div class="flex flex-col gap-2">
+    <label class="text-sm font-medium" for="image">画像</label>
+    <input
+      id="image"
+      ref="inputRef"
+      multiple
+      type="file"
+      @change="handleFileChange" />
   </div>
   <div>
-    <div v-if="files.length === 0">画像プレビュー</div>
+    <div v-if="files.length === 0" class="text-sm font-medium">
+      画像プレビュー
+    </div>
     <div v-if="files.length !== 0" class="flex flex-wrap">
       <div
         v-for="(file, index) in files"
@@ -62,6 +69,7 @@ function removeFile(index: number) {
           :src="file.src" />
         <DocumentIcon v-else class="h-32" />
         <button
+          aria-label="ファイルを削除"
           class="absolute top-0 right-0 h-6 w-6"
           @click="removeFile(index)">
           <XCircleIcon />

diff --git a/src/components/newRequest/NewRequestTag.vue b/src/components/newRequest/NewRequestTag.vue
@@ -10,13 +10,12 @@ const emit = defineEmits<{ (e: 'input', value: Tag[]): void }>()
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <label>タグ</label>
-    <div class="flex">
-      <InputSelectTagWithCreation
-        class="w-2/3"
-        :model-value="props.tags"
-        @update:model-value="emit('input', $event)" />
-    </div>
+  <div class="flex flex-col gap-2">
+    <label class="text-sm font-medium" for="tag">タグ</label>
+    <InputSelectTagWithCreation
+      id="tag"
+      class="w-full"
+      :model-value="props.tags"
+      @update:model-value="emit('input', $event)" />
   </div>
 </template>
diff --git a/src/components/newRequest/NewRequestTargets.vue b/src/components/newRequest/NewRequestTargets.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { PlusCircleIcon, MinusCircleIcon } from '@heroicons/vue/24/solid'
+import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
 import { storeToRefs } from 'pinia'
-import { useToast } from 'vue-toastification'
 
 import { useUserStore } from '/@/stores/user'
 
@@ -18,7 +17,6 @@ const props = defineProps<Props>()
 const emit = defineEmits<{ (e: 'input', value: RequestTarget[]): void }>()
 
 const userStore = useUserStore()
-const toast = useToast()
 const { userOptions } = storeToRefs(userStore)
 
 function handleEditTarget(index: number, value: unknown) {
@@ -49,10 +47,6 @@ function handleAddTarget() {
   emit('input', [...props.targets, { target: '', amount: 0 }])
 }
 function handleRemoveTarget(index: number) {
-  if (props.targets.length === 1) {
-    toast.warning('払い戻し対象者は1人以上必要です')
-    return
-  }
   emit(
     'input',
     props.targets.filter((_, i) => i !== index)
@@ -61,35 +55,42 @@ function handleRemoveTarget(index: number) {
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <label>払い戻し対象者</label>
-    <ul>
+  <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.target"
-        class="mb-2 flex w-2/3 items-center gap-4">
+        class="flex items-center gap-3">
         <InputSelectSingle
-          class="!w-1/3 flex-grow"
+          class="flex-grow"
           :model-value="target.target"
           :options="userOptions"
           placeholder="払い戻し対象者を選択"
           @update:model-value="handleEditTarget(i, $event)" />
         <div>
           <InputNumber
-            class="mr-1"
+            class="mr-2"
             :min="1"
             :model-value="target.amount"
             placeholder="金額"
             @update:model-value="handleEditTarget(i, $event)" />円
         </div>
-        <button class="flex" @click="handleRemoveTarget(i)">
-          <MinusCircleIcon class="w-6" />
+        <button
+          v-if="targets.length > 1"
+          aria-label="払い戻し対象者を削除"
+          class="flex"
+          @click="handleRemoveTarget(i)">
+          <TrashIcon class="w-6 text-red-400" />
         </button>
       </li>
     </ul>
-    <div v-if="userOptions.length > targets.length" class="w-2/3 text-center">
-      <button @click="handleAddTarget">
-        <PlusCircleIcon class="w-8" />
+    <div v-if="userOptions.length > targets.length" class="ml-3">
+      <button
+        class="flex items-center p-2 border rounded text-base"
+        @click="handleAddTarget">
+        <PlusIcon class="w-5 mr-2" />
+        払い戻し対象者を追加
       </button>
     </div>
   </div>

diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
@@ -16,7 +16,7 @@ const { comment, isSending, submit } = useNewComment(props.request.id)
     <MarkdownTextarea v-model="comment">
       <SimpleButton
         :disabled="isSending"
-        font-size="md"
+        font-size="base"
         padding="md"
         type="success"
         @click="submit">

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/components/shared/InputSelectTagWithCreation.vue b/src/components/shared/InputSelectTagWithCreation.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-
 import { useTagStore } from '/@/stores/tag'
-
 import InputSelectMultiple from '/@/components/shared/InputSelectMultiple.vue'
 import type { Tag } from '/@/features/tag/model'
 

diff --git a/src/components/shared/InputTextarea.vue b/src/components/shared/InputTextarea.vue
@@ -5,6 +5,7 @@ interface Props {
   required?: boolean
   placeholder?: string
   autoFocus?: boolean
+  id?: string
 }
 
 const model = defineModel<string>({ required: true })
@@ -30,6 +31,7 @@ onMounted(() => {
 
 <template>
   <textarea
+    :id="props.id"
     ref="textareaRef"
     class="bg-background min-h-32 rounded border border-gray-300 px-3 py-2"
     :placeholder="props.placeholder"

diff --git a/src/components/shared/MarkdownTextarea.vue b/src/components/shared/MarkdownTextarea.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-
 import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
-
 import InputTextarea from './InputTextarea.vue'
 import MarkdownIt from './MarkdownIt.vue'
 
 type TabType = 'input' | 'preview'
-
 interface Props {
   placeholder?: string
   templates?: readonly { name: string; value: string }[]
   autoFocus?: boolean
+  id?: string
 }
 
 const model = defineModel<string>({ required: true })
@@ -43,7 +41,6 @@ function setTemplate(template: Record<string, any> | string | null) {
     model.value = foundTemplate.value
   }
 }
-
 function changeCurrentTab(tab: TabType) {
   currentTab.value = tab
 }
@@ -85,6 +82,7 @@ function changeCurrentTab(tab: TabType) {
     <div class="px-5 py-3">
       <InputTextarea
         v-if="currentTab === 'input'"
+        :id="props.id"
         :auto-focus="autoFocus"
         class="min-h-40 w-full"
         :model-value="model"

diff --git a/src/components/shared/SimpleButton.vue b/src/components/shared/SimpleButton.vue
@@ -3,14 +3,14 @@ import { computed } from 'vue'
 
 interface Props {
   type?: 'plain' | 'danger' | 'success'
-  fontSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-  padding?: 'sm' | 'md' | 'lg' | 'xl'
+  fontSize: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl'
+  padding: 'sm' | 'md' | 'lg' | 'xl'
   disabled?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   type: 'plain',
   disabled: false,
-  fontSize: 'md',
+  fontSize: 'base',
   padding: 'md'
 })
 

diff --git a/src/pages/NewRequestPage.vue b/src/pages/NewRequestPage.vue
@@ -40,51 +40,52 @@ if (!isUserFetched.value) {
 </script>
 
 <template>
-  <div class="min-w-160 mx-auto flex w-2/3 flex-col px-12 pt-8">
+  <div class="min-w-147 mx-50 mt-8 mb-30 flex flex-col">
     <div class="pb-8">
-      <h1 class="text-center text-3xl">申請の新規作成</h1>
+      <h1 class="text-2xl">申請の新規作成</h1>
     </div>
-    <form class="flex flex-col gap-2">
-      <div class="flex flex-col">
-        申請者
-        <span class="text-xl">{{ me?.name }}</span>
+    <form class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium">申請者</label>
+        <span>{{ me?.name }}</span>
       </div>
-      <div class="flex flex-col">
-        <label>タイトル</label>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium" for="title">タイトル</label>
         <InputText
+          id="title"
           v-model="request.title"
           auto-focus
-          class="h-8"
           placeholder="タイトルを入力" />
       </div>
-      <div class="flex flex-col">
-        <label>詳細</label>
+      <div class="flex flex-col gap-2">
+        <label class="text-sm font-medium" for="details">詳細</label>
         <MarkdownTextarea
+          id="details"
           v-model="request.content"
           placeholder=""
           :templates="requestTemplates" />
       </div>
       <NewRequestTargets
         :targets="request.targets"
         @input="request.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="request.group"
-          class="!w-2/3"
+          class="w-full"
           :options="groupOptions"
           placeholder="グループを選択" />
       </div>
       <NewRequestTag :tags="request.tags" @input="request.tags = $event" />
       <NewRequestFileForm :files="files" @input="files = $event" />
       <div class="text-right">
         <SimpleButton
-          class="mb-4"
           :disabled="isSending"
-          font-size="xl"
+          font-size="base"
           padding="md"
           @click.stop="postRequest">
-          申請を作成する
+          申請を作成
         </SimpleButton>
       </div>
     </form>

diff --git a/src/pages/TransactionDetailPage.vue b/src/pages/TransactionDetailPage.vue
@@ -71,7 +71,7 @@ if (!isGroupFetched.value) {
       @cancel="isEditMode = false"
       @finish-editing="finishEditing($event)" />
     <RouterLink class="w-fit" :to="`/requests/${transaction.request}`">
-      <SimpleButton font-size="md" padding="sm">
+      <SimpleButton font-size="base" padding="sm">
         紐づいている申請へ移動
       </SimpleButton>
     </RouterLink>