From 2792d25305dc8b10f48bd07233d42fc6e24ca393 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 18:02:43 +0900
Subject: [PATCH] =?UTF-8?q?=E7=94=B3=E8=AB=8B=E8=A9=B3=E7=B4=B0=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E4=B8=8A=E3=81=A8=E5=8F=B3=E3=81=AE?=
 =?UTF-8?q?=E8=A6=8B=E3=81=9F=E7=9B=AE=E3=82=92=E3=81=84=E3=81=84=E6=84=9F?=
 =?UTF-8?q?=E3=81=98=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestAmount.vue           |  4 +-
 src/components/requestDetail/RequestGroup.vue | 52 +++---------
 src/components/requestDetail/RequestLogs.vue  |  1 +
 .../requestDetail/RequestSidebar.vue          | 15 ++++
 src/components/requestDetail/RequestTags.vue  | 44 ++---------
 .../requestDetail/RequestTarget.vue           | 32 ++++++++
 .../requestDetail/RequestTargets.vue          | 60 +++-----------
 src/components/shared/TagsGroup.vue           | 27 +++----
 src/pages/RequestDetailPage.vue               | 79 ++++---------------
 9 files changed, 110 insertions(+), 204 deletions(-)
 create mode 100644 src/components/requestDetail/RequestSidebar.vue
 create mode 100644 src/components/requestDetail/RequestTarget.vue

diff --git a/src/components/requestDetail/RequestAmount.vue b/src/components/requestDetail/RequestAmount.vue
index 297088c8..c6c26d1a 100644
--- a/src/components/requestDetail/RequestAmount.vue
+++ b/src/components/requestDetail/RequestAmount.vue
@@ -14,7 +14,7 @@ const totalAmount = computed(
 </script>
 
 <template>
-  <div v-if="request" class="flex items-center">
-    <span class="text-2xl">金額：{{ totalAmount }}円</span>
+  <div>
+    <span class="text-3xl font-bold">{{ totalAmount }}円</span>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index e6d635d2..7378a132 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -1,63 +1,33 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-import { useGroupStore } from '/@/stores/group'
 import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
+import { computed } from 'vue'
 
 const userStore = useUserStore()
-const groupStore = useGroupStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { groupOptions } = storeToRefs(groupStore)
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
 
-const handleComplete = () => {
-  emit('changeEditMode', '')
-}
+const groupName = computed(() =>
+  request.value?.group ? request.value.group.name : 'なし'
+)
 </script>
 
 <template>
-  <div class="flex items-center">
-    グループ：
-    <div v-if="!props.isEditMode && request">
-      <span v-if="!request.group">なし</span>
-      <span v-else>{{ request.group.name }}</span>
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'group')" />
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <div>グループ</div>
+      <EditButton v-if="hasAuthority" />
     </div>
-    <div v-else class="flex">
-      <InputSelectSingle
-        v-model="editedValue.group"
-        class="w-52"
-        :options="groupOptions"
-        placeholder="グループ" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div>
+      {{ groupName }}
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 2adc0919..3ef74036 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -50,6 +50,7 @@ const logs = computed((): Log[] => {
         <StatusChangeLog v-if="log.type === 'statusChange'" :log="log" />
       </li>
     </ul>
+    <NewComment />
   </div>
 </template>
 
diff --git a/src/components/requestDetail/RequestSidebar.vue b/src/components/requestDetail/RequestSidebar.vue
new file mode 100644
index 00000000..c12709d6
--- /dev/null
+++ b/src/components/requestDetail/RequestSidebar.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
+import RequestTags from '/@/components/requestDetail/RequestTags.vue'
+import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
+</script>
+
+<template>
+  <div class="px-12 flex flex-col gap-8">
+    <div class="flex flex-col gap-3">
+      <RequestGroup />
+      <RequestTags />
+    </div>
+    <RequestTargets />
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index c5b91309..ecd5ba1f 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -5,54 +5,26 @@ import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithCreation.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import TagsGroup from '/@/components/shared/TagsGroup.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
-
-const handleComplete = () => {
-  emit('changeEditMode', '')
-}
 </script>
 
 <template>
-  <div class="flex items-center">
-    <div v-if="!props.isEditMode && request" class="pb-2">
-      タグ：
-      <span v-if="request.tags.length === 0">なし</span>
-      <TagsGroup v-else :tags="request.tags" />
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'tags')" />
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <div>タグ</div>
+      <EditButton v-if="hasAuthority" />
     </div>
-    <div v-else class="flex items-center">
-      タグ：
-      <InputSelectTagWithCreation v-model="editedValue.tags" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div>
+      <TagsGroup v-if="request?.tags" :tags="request.tags" />
+      <span v-else>なし</span>
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
new file mode 100644
index 00000000..15e25c39
--- /dev/null
+++ b/src/components/requestDetail/RequestTarget.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+import { useUserStore } from '/@/stores/user'
+import type { RequestTarget } from '/@/features/requestTarget/model'
+
+import UserIcon from '/@/components/shared/UserIcon.vue'
+import { RouterLink } from 'vue-router'
+
+defineProps<{
+  target: RequestTarget
+}>()
+
+const userStore = useUserStore()
+const { userMap } = storeToRefs(userStore)
+</script>
+
+<template>
+  <div class="flex items-center gap-3 justify-between">
+    <div class="flex items-center gap-1">
+      <UserIcon class="w-12" :name="userMap[target.target]" />
+      <span>{{ userMap[target.target] }}</span>
+    </div>
+    <div class="flex gap-3">
+      <span>{{ target.amount }}円</span>
+      <!--TODO: link-->
+      <RouterLink class="text-blue-500 underline" to="/">
+        入出金記録を作成
+      </RouterLink>
+    </div>
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index c128a312..acba514c 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -1,68 +1,32 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
 
 import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectMultiple from '/@/components/shared/InputSelectMultiple.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
+import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
-const { me, userOptions, userMap } = storeToRefs(userStore)
-
-const formattedTargets = computed(
-  () =>
-    request.value?.targets
-      .map(target => userMap.value[target.target])
-      .join(', ') ?? ''
-)
+const { request } = storeToRefs(requestDetailStore)
+const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
-
-const handleComplete = () => {
-  emit('changeEditMode', '')
-}
 </script>
 
 <template>
-  <div>
-    <div v-if="!props.isEditMode">
-      払い戻し対象者：
-      {{ formattedTargets }}
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'targets')" />
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center justify-between">
+      <div>払い戻し対象者</div>
+      <EditButton v-if="hasAuthority" />
     </div>
-    <div v-else class="flex items-center">
-      払い戻し対象者：
-      <InputSelectMultiple
-        v-model="editedValue.targets"
-        :options="userOptions"
-        placeholder="払い戻し対象者"
-        uniq-key="target" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div class="flex flex-col gap-2">
+      <RequestTarget
+        v-for="target in request?.targets"
+        :key="target.target"
+        :target="target" />
     </div>
   </div>
 </template>
diff --git a/src/components/shared/TagsGroup.vue b/src/components/shared/TagsGroup.vue
index 86947102..d3945f55 100644
--- a/src/components/shared/TagsGroup.vue
+++ b/src/components/shared/TagsGroup.vue
@@ -3,26 +3,23 @@ import type { Tag } from '/@/features/tag/model'
 
 interface Props {
   tags: Tag[]
-  limit?: number //1-indexedでlimitを指定
+  limit?: number
 }
 
-const props = withDefaults(defineProps<Props>(), { limit: 20 })
+const props = withDefaults(defineProps<Props>(), { limit: 4 })
 
-const slicedTags = props.tags.slice(
-  0,
-  !(props.tags.length > props.limit) ? props.tags.length : props.limit
-)
+const slicedTags = props.tags.slice(0, props.limit)
 const tagToolTip = props.tags.map(tag => tag.name).join(', ')
 </script>
 
 <template>
-  <span
-    v-for="(tag, index) in slicedTags"
-    :key="tag.id"
-    class="border-dark-600 rounded border p-0.5"
-    :class="index !== 0 ? 'ml-2' : ''"
-    :title="tagToolTip">
-    {{ tag.name }}
-  </span>
-  <span v-if="limit !== 0 && tags.length > limit"> ...</span>
+  <div class="flex items-center gap-2" :title="tagToolTip">
+    <div
+      v-for="tag in slicedTags"
+      :key="tag.id"
+      class="border-dark-600 rounded border p-0.5">
+      {{ tag.name }}
+    </div>
+    <span v-if="limit !== 0 && tags.length > limit"> ...</span>
+  </div>
 </template>
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index b5ddc4ad..b6b80961 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { DateTime } from 'luxon'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
@@ -9,26 +8,16 @@ import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useTagStore } from '/@/stores/tag'
 import { useUserStore } from '/@/stores/user'
 
-import { formatDate } from '/@/lib/date'
 import { toId } from '/@/lib/parseQueryParams'
 
-import NewComment from '/@/components/requestDetail/NewComment.vue'
-import RequestAmount from '/@/components/requestDetail/RequestAmount.vue'
-import RequestContent from '/@/components/requestDetail/RequestContent.vue'
-import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
 import RequestLogs from '/@/components/requestDetail/RequestLogs.vue'
-import RequestTags from '/@/components/requestDetail/RequestTags.vue'
-import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
-import RequestTitle from '/@/components/requestDetail/RequestTitle.vue'
-import StatusChangeButtons from '/@/components/requestDetail/StatusChangeButtons.vue'
-import ToTransactionButtons from '/@/components/requestDetail/ToTransactionButtons.vue'
+import RequestSidebar from '/@/components/requestDetail/RequestSidebar.vue'
 import StatusChip from '/@/components/shared/StatusChip.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
 import { useFetchRequestUsecase } from '/@/features/request/usecase'
 import { useFetchTagsUsecase } from '/@/features/tag/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
 
-import { useRequestDetail } from './composables/useRequestDetail'
 
 const route = useRoute()
 const id = toId(route.params.id)
@@ -37,15 +26,14 @@ const requestDetailStore = useRequestDetailStore()
 const userStore = useUserStore()
 const groupStore = useGroupStore()
 const tagStore = useTagStore()
-const { isUserFetched, userMap } = storeToRefs(userStore)
+const { isUserFetched } = storeToRefs(userStore)
 const { isGroupFetched } = storeToRefs(groupStore)
 const { isTagFetched } = storeToRefs(tagStore)
 
-const { editMode, changeEditMode } = useRequestDetail()
 const { request } = storeToRefs(requestDetailStore)
 
-const formattedDate = computed(() =>
-  formatDate(request.value?.createdAt ?? DateTime.fromISO(''))
+const totalAmount = computed(
+  () => request.value?.targets.reduce((a, target) => a + target.amount, 0) ?? 0
 )
 
 await useFetchRequestUsecase(id)
@@ -66,56 +54,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="request !== undefined" class="min-w-160 mx-auto px-12 pt-4">
-    <div class="bottom-bar">
+  <div
+    v-if="request !== undefined"
+    class="mx-auto w-4/5 pt-5 flex flex-col gap-5">
+    <div class="flex flex-col gap-4">
+      <div class="flex gap-2">
+        <h1 class="flex-1 text-2xl">{{ request.title }}</h1>
+        <div>...</div>
+      </div>
       <div class="flex items-center justify-between">
         <StatusChip has-text :status="request.status" />
-        <RequestTitle
-          class="ml-2"
-          :is-edit-mode="editMode === 'title'"
-          @change-edit-mode="changeEditMode($event)" />
-        <div class="ml-2">
-          <StatusChangeButtons />
-        </div>
-      </div>
-      <div class="mt-4 flex justify-between">
-        <RequestTags
-          :is-edit-mode="editMode === 'tags'"
-          @change-edit-mode="changeEditMode($event)" />
-        <div class="flex items-center gap-4">
-          <RequestGroup
-            :is-edit-mode="editMode === 'group'"
-            @change-edit-mode="changeEditMode($event)" />
-          <p>申請者：{{ userMap[request.created_by] }}</p>
-          <p>申請日：{{ formattedDate }}</p>
-          <RequestAmount />
-        </div>
-      </div>
-      <div class="mt-4 flex">
-        <RequestContent
-          :is-edit-mode="editMode === 'content'"
-          @change-edit-mode="changeEditMode($event)" />
-        <RequestTargets
-          :is-edit-mode="editMode === 'targets'"
-          @change-edit-mode="changeEditMode($event)" />
+        <div class="text-3xl font-bold">{{ totalAmount }}円</div>
       </div>
     </div>
-    <div class="flex">
-      <RequestLogs class="w-2/3" />
-      <div class="w-1/3">
-        <ToTransactionButtons />
-        <NewComment />
-      </div>
+    <div class="h-0.25 bg-[#e5e7eb]" />
+    <div class="flex justify-between">
+      <RequestLogs class="basis-2/3" />
+      <RequestSidebar class="basis-1/3" />
     </div>
   </div>
 </template>
-
-<style scoped>
-.bottom-bar::after {
-  content: '';
-  display: block;
-  border: 1px solid #e5e7eb;
-  margin: 12px auto;
-  background-color: #e5e7eb;
-}
-</style>