エラーハンドリング

traPtitech · May 22, 2024 · 143b03a · 143b03a
1 parent 7e71cb3
commit 143b03a
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 35 deletions.
diff --git a/src/components/modal/StatusChangeModal.vue b/src/components/modal/StatusChangeModal.vue
@@ -26,10 +26,8 @@ const putStatus = async (nextStatus: RequestStatus, comment: string) => {
     await changeStatusUsecase(props.request.id, nextStatus, comment)
     toast.success('申請の状態を変更しました')
     emit('closeModal')
-  } catch (e) {
-    if (e instanceof Error) {
-      toast.error(e.message)
-    }
+  } catch {
+    toast.error('変更に失敗しました')
   }
 }
 </script>

diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
@@ -13,6 +13,7 @@ import { editRequestUsecase } from '/@/features/request/usecase'
 import EditButton from '/@/components/shared/EditButton.vue'
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -22,6 +23,7 @@ const formattedDateAndTime = formatDateAndTime(props.request.createdAt)
 
 const userStore = useUserStore()
 const { userMap } = storeToRefs(userStore)
+const toast = useToast()
 
 const isEditMode = ref(false)
 const editedContent = ref(props.request.content)
@@ -32,12 +34,16 @@ const toggleEditContent = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateContent = async () => {
-  if (!props.request) return
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
-    content: editedContent.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      content: editedContent.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>

diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
@@ -10,6 +10,7 @@ import { useGroupStore } from '/@/stores/group'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
 import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -20,6 +21,7 @@ const groupStore = useGroupStore()
 const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
 const { groupOptions } = storeToRefs(groupStore)
+const toast = useToast()
 
 const hasAuthority = isRequestCreator.value(me.value)
 
@@ -39,10 +41,15 @@ const toggleEditGroup = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateGroup = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: editedGroup.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: editedGroup.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>

diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
@@ -11,6 +11,7 @@ import type { Tag } from '/@/features/tag/model'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
 import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -19,6 +20,7 @@ const props = defineProps<{
 const userStore = useUserStore()
 const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const toast = useToast()
 
 const hasAuthority = isRequestCreator.value(me.value)
 
@@ -31,11 +33,16 @@ const toggleEditTags = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateTags = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
-    tags: editedTags.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      tags: editedTags.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>

diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
@@ -17,6 +17,7 @@ import type { RequestDetail } from '/@/features/request/model'
 
 import { useNewTransaction } from '/@/pages/composables/useNewTransaction'
 import { computed } from 'vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
 
 const props = defineProps<{
   request: RequestDetail
@@ -42,8 +43,23 @@ const targetModel = defineModel<RequestTarget>('targetModel', {
   required: true
 })
 
-const handleRemoveTarget = () => {
-  console.log('remove')
+const handleRemoveTarget = async () => {
+  const result = confirm('本当に削除しますか？')
+  if (!result) {
+    return
+  }
+
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null,
+      targets: props.request.targets.filter(
+        target => target.target !== props.target.target
+      )
+    })
+  } catch {
+    alert('削除に失敗しました')
+  }
 }
 </script>
 

diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
@@ -11,6 +11,7 @@ import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
 import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -19,6 +20,7 @@ const props = defineProps<{
 const userStore = useUserStore()
 const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const toast = useToast()
 
 const hasAuthority = isRequestCreator.value(me.value)
 
@@ -30,11 +32,16 @@ const toggleEditTargets = () => {
 }
 
 const handleUpdateTargets = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
-    targets: editedTargets.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      targets: editedTargets.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>

diff --git a/src/components/requestDetail/RequestTitle.vue b/src/components/requestDetail/RequestTitle.vue
@@ -6,11 +6,14 @@ import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import InputText from '/@/components/shared/InputText.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import EditButton from '/@/components/shared/EditButton.vue'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
 }>()
 
+const toast = useToast()
+
 const isEditMode = ref(false)
 const editedTitle = ref(props.request.title)
 const toggleEditTitle = () => {
@@ -20,11 +23,16 @@ const toggleEditTitle = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateTitle = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null,
-    title: editedTitle.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null,
+      title: editedTitle.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>

diff --git a/src/components/requestDetail/composables/useNewComment.ts b/src/components/requestDetail/composables/useNewComment.ts
@@ -20,9 +20,7 @@ export const useNewComment = (requestId: string) => {
       comment.value = ''
       toast.success('コメントを送信しました')
     } catch (e) {
-      if (e instanceof Error) {
-        toast.error(e.message)
-      }
+      toast.error('送信に失敗しました')
     }
     isSending.value = false
   }

diff --git a/src/pages/composables/useNewTransaction.ts b/src/pages/composables/useNewTransaction.ts
@@ -8,12 +8,16 @@ import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
 import type { TransactionCreateSeed } from '/@/features/transaction/model'
 import { createTransactionUsecase } from '/@/features/transaction/usecase'
 import type { RequestTarget } from '/@/features/requestTarget/model'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '/@/stores/user'
 
 export type MoneyDirection = 'toTraP' | 'fromTraP'
 
 export const useNewTransaction = () => {
   const toast = useToast()
   const router = useRouter()
+  const userStore = useUserStore()
+  const { userMap } = storeToRefs(userStore)
 
   const isSending = ref(false)
 
@@ -62,7 +66,9 @@ export const useNewTransaction = () => {
     target: RequestTarget
   ) => {
     const result = confirm(
-      `この申請に紐づけて@${target.target}の入出金記録を作成しますか？`
+      `この申請に紐づけて@${
+        userMap.value[target.target]
+      }の入出金記録を作成しますか？`
     )
     if (!result) return
     isSending.value = true