durationのvalidation errorを表示するように

traPtitech · Jan 23, 2024 · d8bfe08 · d8bfe08
1 parent 8990b26
commit d8bfe08
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 9 deletions.
diff --git a/src/components/Projects/ProjectMember.vue b/src/components/Projects/ProjectMember.vue
@@ -4,6 +4,9 @@ import UserIcon from '/@/components/UI/UserIcon.vue'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
 import Icon from '/@/components/UI/Icon.vue'
 import { computed } from 'vue'
+import FieldErrorMessage from '/@/components/UI/FieldErrorMessage.vue'
+import { isValidYearWithSemesterDuration } from '/@/lib/validate'
+
 interface Props {
   user: User
   modelValue: YearWithSemesterDuration
@@ -20,6 +23,10 @@ const emit = defineEmits<{
   (e: 'delete', value: string): void
   (e: 'update:modelValue', value: YearWithSemesterDuration): void
 }>()
+
+const shouldShowDurationError = computed(
+  () => !isValidYearWithSemesterDuration(value.value)
+)
 </script>
 
 <template>
@@ -29,12 +36,19 @@ const emit = defineEmits<{
         <user-icon :user-id="user.id" :size="48" />
         <p :class="$style.name">{{ user.name }}</p>
       </div>
-
-      <form-project-duration
-        v-model="value"
-        since-required
-        :class="$style.projectDuration"
-      />
+      <div>
+        <form-project-duration
+          v-model="value"
+          since-required
+          :class="$style.projectDuration"
+        />
+        <field-error-message
+          v-if="shouldShowDurationError"
+          :class="$style.errorMessage"
+        >
+          開始期間は終了期間よりも前に指定してください。
+        </field-error-message>
+      </div>
     </div>
     <button :class="$style.icon" @click="emit('delete', user.id)">
       <icon :size="32" name="mdi:delete" />
@@ -73,6 +87,10 @@ const emit = defineEmits<{
   }
 }
 
+.errorMessage {
+  align-self: flex-end;
+}
+
 .icon {
   color: $color-secondary;
   &:hover {

diff --git a/src/components/UI/FieldErrorMessage.vue b/src/components/UI/FieldErrorMessage.vue
@@ -0,0 +1,13 @@
+<template>
+  <p :class="$style.container">
+    <slot />
+  </p>
+</template>
+
+<style module lang="scss">
+.container {
+  color: $color-warning;
+  font-size: 0.75rem;
+  padding: 0.5rem 0;
+}
+</style>
diff --git a/src/pages/ContestEdit.vue b/src/pages/ContestEdit.vue
@@ -21,6 +21,7 @@ import useModal from '/@/components/UI/composables/useModal'
 import ConfirmModal from '/@/components/UI/ConfirmModal.vue'
 import { useContestStore } from '/@/store/contest'
 import { useToast } from 'vue-toastification'
+import FieldErrorMessage from '/@/components/UI/FieldErrorMessage.vue'
 
 const router = useRouter()
 const toast = useToast()
@@ -50,6 +51,13 @@ const canSubmit = computed(
     isValidLength(formValues.value.description, 1, 256)
 )
 
+const shouldShowDurationError = computed(
+  () =>
+    formValues.value.duration.since !== '' &&
+    formValues.value.duration.until !== '' &&
+    !isValidDuration(formValues.value.duration)
+)
+
 const updateContest = async () => {
   isSending.value = true
   try {
@@ -105,6 +113,9 @@ const deleteContest = async () => {
       </labeled-form>
       <labeled-form label="開催日時" :class="$style.labeledForm">
         <form-duration v-model="formValues.duration" since-required />
+        <field-error-message v-if="shouldShowDurationError">
+          開始日時は終了日時よりも前に指定してください。
+        </field-error-message>
       </labeled-form>
       <labeled-form label="リンク" :class="$style.labeledForm">
         <form-input v-model="formValues.link" has-anchor />

diff --git a/src/pages/ContestNew.vue b/src/pages/ContestNew.vue
@@ -9,9 +9,14 @@ import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import FormDuration from '/@/components/UI/FormDuration.vue'
-import { isValidDuration, isValidLength, isValidOptionalUrl} from '/@/lib/validate'
+import {
+  isValidDuration,
+  isValidLength,
+  isValidOptionalUrl
+} from '/@/lib/validate'
 import { useToast } from 'vue-toastification'
 import { useContestStore } from '/@/store/contest'
+import FieldErrorMessage from '/@/components/UI/FieldErrorMessage.vue'
 
 const router = useRouter()
 const toast = useToast()
@@ -36,6 +41,13 @@ const canSubmit = computed(
     isValidLength(formValues.description, 1, 256)
 )
 
+const shouldShowDurationError = computed(
+  () =>
+    formValues.duration.since !== '' &&
+    formValues.duration.until !== '' &&
+    !isValidDuration(formValues.duration)
+)
+
 const createContest = async () => {
   isSending.value = true
   try {
@@ -81,6 +93,9 @@ const createContest = async () => {
       </labeled-form>
       <labeled-form label="開催日時" required :class="$style.labeledForm">
         <form-duration v-model="formValues.duration" />
+        <field-error-message v-if="shouldShowDurationError">
+          開始日時は終了日時よりも前に指定してください。
+        </field-error-message>
       </labeled-form>
       <labeled-form label="リンク" :class="$style.labeledForm">
         <form-input

diff --git a/src/pages/Project.vue b/src/pages/Project.vue
@@ -22,6 +22,7 @@ import { useProjectStore } from '/@/store/project'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import ProjectMember from '/@/components/Projects/ProjectMember.vue'
 import { useUserStore } from '/@/store/user'
+import FieldErrorMessage from '/@/components/UI/FieldErrorMessage.vue'
 
 const router = useRouter()
 const toast = useToast()
@@ -54,6 +55,10 @@ const canSubmit = computed(
     )
 )
 
+const shouldShowDurationError = computed(
+  () => !isValidYearWithSemesterDuration(formValues.value.duration)
+)
+
 const updateProject = async () => {
   isSending.value = true
   try {
@@ -122,8 +127,11 @@ const handleDelete = (id: string) => {
       <labeled-form required label="プロジェクト名" :class="$style.labeledForm">
         <form-input v-model="formValues.name" :limit="32" />
       </labeled-form>
-      <labeled-form label="日時" :class="$style.labeledForm">
+      <labeled-form label="期間" :class="$style.labeledForm">
         <form-project-duration v-model="formValues.duration" since-required />
+        <field-error-message v-if="shouldShowDurationError">
+          開始期間は終了期間よりも前に指定してください。
+        </field-error-message>
       </labeled-form>
       <labeled-form label="リンク" :class="$style.labeledForm">
         <form-input v-model="formValues.link" has-anchor />

diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
@@ -22,6 +22,7 @@ import {
   isValidYearWithSemesterDuration
 } from '/@/lib/validate'
 import { useProjectStore } from '/@/store/project'
+import FieldErrorMessage from '/@/components/UI/FieldErrorMessage.vue'
 
 const toast = useToast()
 const { mutate } = useProjectStore()
@@ -72,12 +73,15 @@ const canSubmit = computed(
     isValidOptionalUrl(formValues.link) &&
     isValidYearWithSemesterDuration(formValues.duration) &&
     isValidLength(formValues.description, 1, 256) &&
-    isValidYearWithSemesterDuration(formValues.duration) &&
     members.value.every(member =>
       isValidYearWithSemesterDuration(member.duration)
     )
 )
 
+const shouldShowDurationError = computed(
+  () => !isValidYearWithSemesterDuration(formValues.duration)
+)
+
 const userStore = useUserStore()
 const users = await userStore.fetchUsers()
 
@@ -122,6 +126,9 @@ const handleDelete = (id: string) => {
       </labeled-form>
       <labeled-form label="期間" :class="$style.labeledForm">
         <form-project-duration v-model="formValues.duration" since-required />
+        <field-error-message v-if="shouldShowDurationError">
+          開始期間は終了期間よりも前に指定してください。
+        </field-error-message>
       </labeled-form>
       <labeled-form label="リンク" :class="$style.labeledForm">
         <form-input