From 6817666e75bce19bed356bc4494b1c61954077d6 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Wed, 4 Jan 2023 21:31:23 +0900
Subject: [PATCH 01/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20impl=20isDisabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/MemberInput.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/MemberInput.vue b/src/components/UI/MemberInput.vue
index ada29471..2c1dc963 100644
--- a/src/components/UI/MemberInput.vue
+++ b/src/components/UI/MemberInput.vue
@@ -14,9 +14,12 @@ store.fetchUsers()
 
 interface Props {
   modelValue: User[]
+  isDisabled: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  isDisabled: false
+})
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: User[]): void
@@ -84,6 +87,7 @@ const onClose = () => {
     multiple
     :close-on-select="false"
     deselect-from-dropdown
+    :disabled="isDisabled"
     @open="onOpen"
     @close="onClose"
     @search="onSearch"

From 3832d13c95ed6767db4b1a508b92b7c49fa33ebd Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Wed, 4 Jan 2023 21:32:03 +0900
Subject: [PATCH 02/11] =?UTF-8?q?=E2=9C=A8=20impl=20projects/:projectId/me?=
 =?UTF-8?q?mbers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProjectMembers.vue | 82 ++++++++++++++++++++++++++++++++++++
 src/router/index.ts          |  6 +++
 2 files changed, 88 insertions(+)
 create mode 100644 src/pages/ProjectMembers.vue

diff --git a/src/pages/ProjectMembers.vue b/src/pages/ProjectMembers.vue
new file mode 100644
index 00000000..f779fa20
--- /dev/null
+++ b/src/pages/ProjectMembers.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import useParam from '/@/use/param'
+import MemberInput from '/@/components/UI/MemberInput.vue'
+import { ref, watchEffect, computed } from 'vue'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+import apis, { ProjectDetail } from '/@/lib/apis'
+
+const projectId = useParam('id')
+const projectDetail = ref<ProjectDetail>()
+
+watchEffect(async () => {
+  if (projectId.value) {
+    projectDetail.value = (await apis.getProject(projectId.value)).data
+  }
+})
+const members = computed(() => projectDetail.value?.members ?? [])
+const name = computed(() => projectDetail.value?.name ?? 'Loading... ')
+
+const fetchState = computed(() => projectDetail.value !== undefined)
+</script>
+
+<template>
+  <page-container>
+    <content-header
+      icon-name="mdi:clipboard-file-outline"
+      :header-texts="[
+        { title: 'Projects', url: '/projects' },
+        { title: `${name}`, url: `/projects/${projectId}` },
+        { title: 'Members', url: '/projects/${projectId}/members' }
+      ]"
+      detail="プロジェクトを変更します"
+      :class="$style.header"
+    />
+    <h2 :class="$style.memberText">メンバー</h2>
+    <member-input
+      v-model="members"
+      :class="$style.memberInput"
+      :is-disabled="!fetchState"
+    />
+    <div :class="$style.buttonContainer">
+      <router-link :to="`/projects/${projectId}`" :class="$style.link">
+        <base-button icon="mdi:arrow-left" type="secondary">Back</base-button>
+      </router-link>
+      <router-link :to="`/projects/${projectId}/edit`" :class="$style.link">
+        <base-button
+          icon="mdi:arrow-right"
+          type="primary"
+          :is-disabled="!fetchState"
+          >Next</base-button
+        >
+      </router-link>
+    </div>
+  </page-container>
+</template>
+
+<style lang="scss" module>
+.header {
+  margin: 4rem 0 2rem;
+}
+
+.memberText {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.memberInput {
+  margin-bottom: 2rem;
+  margin-left: 0.5rem;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: 1rem;
+}
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index dd16419d..6e59945c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ const Users = () => import('/@/pages/Users.vue')
 const UserAccounts = () => import('/@/pages/UserAccounts.vue')
 const Projects = () => import('/@/pages/Projects.vue')
 const Project = () => import('/@/pages/Project.vue')
+const ProjectMembers = () => import('/@/pages/ProjectMembers.vue')
 const Events = () => import('/@/pages/Events.vue')
 const Event = () => import('/@/pages/Event.vue')
 const Contests = () => import('/@/pages/Contests.vue')
@@ -27,6 +28,11 @@ const routes = [
     name: 'Project',
     component: Project
   },
+  {
+    path: '/projects/:id/members',
+    name: 'ProjectMembers',
+    component: ProjectMembers
+  },
   {
     path: '/events',
     name: 'Events',

From ac56bbe6b4e18663c7e3cdb3e92106e4132e79a5 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Tue, 31 Oct 2023 17:56:44 +0900
Subject: [PATCH 03/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20form-project-duratio?=
 =?UTF-8?q?n=E3=81=AE=E8=A6=8B=E3=81=9F=E7=9B=AE=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/BaseSelect.vue          | 14 ++--
 src/components/UI/FormProjectDuration.vue | 99 +++++++++++------------
 src/pages/ProjectNew.vue                  | 13 ++-
 3 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/components/UI/BaseSelect.vue b/src/components/UI/BaseSelect.vue
index 288c09f8..f17f8d33 100644
--- a/src/components/UI/BaseSelect.vue
+++ b/src/components/UI/BaseSelect.vue
@@ -1,24 +1,24 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T">
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
 import { computed } from 'vue'
 import Icon from '/@/components/UI/Icon.vue'
 
-export interface Option {
+export interface Option<T> {
   label: string
-  value: string
+  value: T
 }
 
 interface Props {
-  modelValue: string
-  options: Option[]
+  modelValue: T
+  options: Option<T>[]
   searchable?: boolean
 }
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: T): void
 }>()
 
 const value = computed({
@@ -33,7 +33,7 @@ const value = computed({
     :options="options"
     :clearable="false"
     label="label"
-    :reduce="(option:Option) => option.value"
+    :reduce="(option: Option<T>) => option.value"
     :class="$style.select"
     :searchable="searchable"
   >
diff --git a/src/components/UI/FormProjectDuration.vue b/src/components/UI/FormProjectDuration.vue
index e7487f43..3f747ecc 100644
--- a/src/components/UI/FormProjectDuration.vue
+++ b/src/components/UI/FormProjectDuration.vue
@@ -1,48 +1,56 @@
 <script lang="ts" setup>
-import { Semester, YearWithSemesterDuration } from '/@/lib/apis'
+import {
+  Semester,
+  YearWithSemester,
+  YearWithSemesterDuration
+} from '/@/lib/apis'
 import RequiredChip from '/@/components/UI/RequiredChip.vue'
+import { Option } from '/@/components/UI/BaseSelect.vue'
 import BaseSelect from '/@/components/UI/BaseSelect.vue'
 
 type DateType = 'sinceYear' | 'sinceSemester' | 'untilYear' | 'untilSemester'
 
 interface Props {
   modelValue: YearWithSemesterDuration
+  yearsAgo?: number
   sinceRequired?: boolean
 }
-
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  yearsAgo: 20
+})
 const emit = defineEmits<{
   (e: 'update:modelValue', modelValue: YearWithSemesterDuration): void
 }>()
-
-const yearOptions = Array(20)
+const options: Option<YearWithSemester>[] = Array(props.yearsAgo)
   .fill(null)
-  .map((_, i) => ({
-    label: (new Date().getFullYear() - i).toString(),
-    value: (new Date().getFullYear() - i).toString()
-  }))
-const semesterOptions = [
-  { label: '前期', value: Semester.first.toString() },
-  { label: '後期', value: Semester.second.toString() }
-]
-
-const handleInput = (value: string, dateType: DateType) => {
-  const numValue = parseInt(value)
-  const duration: YearWithSemesterDuration = {
-    since: {
-      year: dateType === 'sinceYear' ? numValue : props.modelValue.since.year,
-      semester:
-        dateType === 'sinceSemester'
-          ? numValue
-          : props.modelValue.since.semester
+  .map((_, i) => [
+    {
+      label: (new Date().getFullYear() - i).toString() + ' 前期',
+      value: {
+        year: new Date().getFullYear() - i,
+        semester: Semester.first
+      }
     },
-    until: props.modelValue.until && {
-      year: dateType === 'untilYear' ? numValue : props.modelValue.until.year,
-      semester:
-        dateType === 'untilSemester'
-          ? numValue
-          : props.modelValue.until.semester
+    {
+      label: (new Date().getFullYear() - i).toString() + ' 後期',
+      value: {
+        year: new Date().getFullYear() - i,
+        semester: Semester.second
+      }
     }
+  ])
+  .flat()
+
+const handleInput = (
+  value: YearWithSemester | undefined,
+  dateType: DateType
+) => {
+  const duration: YearWithSemesterDuration = {
+    since:
+      dateType === 'sinceYear' && value !== undefined
+        ? value
+        : props.modelValue.since,
+    until: dateType === 'untilYear' ? value : props.modelValue.until
   }
   emit('update:modelValue', duration)
 }
@@ -56,18 +64,11 @@ const handleInput = (value: string, dateType: DateType) => {
         <required-chip v-if="sinceRequired" />
       </div>
       <div :class="$style.form">
-        <div :class="$style.yearForm">
-          <base-select
-            :options="yearOptions"
-            :class="$style.yearInput"
-            :model-value="modelValue.since.year.toString()"
-            @update:model-value="handleInput($event, 'sinceYear')"
-          />年
-        </div>
         <base-select
-          :options="semesterOptions"
-          :model-value="modelValue.since.semester.toString()"
-          @update:model-value="handleInput($event, 'sinceSemester')"
+          :options="options"
+          :class="$style.yearInput"
+          :model-value="modelValue.since"
+          @update:model-value="handleInput($event, 'sinceYear')"
         />
       </div>
     </div>
@@ -77,21 +78,11 @@ const handleInput = (value: string, dateType: DateType) => {
         <p :class="$style.head">～まで</p>
       </div>
       <div :class="$style.form">
-        <div :class="$style.yearForm">
-          <base-select
-            :options="yearOptions"
-            :class="$style.yearInput"
-            :model-value="
-              modelValue.until?.year.toString() ??
-              new Date().getFullYear().toString()
-            "
-            @update:model-value="handleInput($event, 'untilYear')"
-          />年
-        </div>
         <base-select
-          :options="semesterOptions"
-          :model-value="modelValue.until?.semester.toString() ?? '前期'"
-          @update:model-value="handleInput($event, 'untilSemester')"
+          :options="options"
+          :class="$style.yearInput"
+          :model-value="modelValue.until"
+          @update:model-value="handleInput($event, 'untilYear')"
         />
       </div>
     </div>
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index f96d9ef6..ab69b4c6 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -2,7 +2,7 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
-import apis, { CreateProjectRequest } from '/@/lib/apis'
+import apis, { CreateProjectRequest, User } from '/@/lib/apis'
 import { RouterLink } from 'vue-router'
 import { reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
@@ -10,6 +10,7 @@ import FormInput from '/@/components/UI/FormInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import { useToast } from 'vue-toastification'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
+import MemberInput from '/@/components/UI/MemberInput.vue'
 
 const toast = useToast()
 
@@ -34,12 +35,14 @@ const createProject = async () => {
   isSending.value = true
   try {
     await apis.createProject(formValues)
+    await apis.addProjectMembers(formValues.name, undefined)
     toast.success('プロジェクトを追加しました')
   } catch {
     toast.error('プロジェクトの追加に失敗しました')
   }
   isSending.value = false
 }
+const members = ref<User[]>([])
 </script>
 
 <template>
@@ -80,6 +83,9 @@ const createProject = async () => {
           :limit="256"
         />
       </labeled-form>
+      <labeled-form label="メンバー" :class="$style.labeledForm">
+        <member-input v-model="members" :class="$style.memberInput" />
+      </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
       <router-link to="/projects" :class="$style.link">
@@ -131,5 +137,10 @@ const createProject = async () => {
   align-items: center;
   margin-top: 4rem;
 }
+
+.memberInput {
+  margin-bottom: 2rem;
+  margin-left: 0.5rem;
+}
 </style>
 '

From 1a37b29c22a5c4e32955bee97453502ff1651489 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Tue, 31 Oct 2023 19:47:20 +0900
Subject: [PATCH 04/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20impl=20project=20men?=
 =?UTF-8?q?ber?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Projects/ProjectMember.vue | 60 +++++++++++++++++++++++
 src/pages/ProjectNew.vue                  | 19 ++++++-
 2 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Projects/ProjectMember.vue

diff --git a/src/components/Projects/ProjectMember.vue b/src/components/Projects/ProjectMember.vue
new file mode 100644
index 00000000..46aaad47
--- /dev/null
+++ b/src/components/Projects/ProjectMember.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { User } from '/@/lib/apis'
+import UserIcon from '/@/components/UI/UserIcon.vue'
+import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
+import Icon from '/@/components/UI/Icon.vue'
+import { ref } from 'vue'
+interface Props {
+  user: User
+}
+
+defineProps<Props>()
+const duration = ref({
+  since: {
+    year: 2021,
+    semester: 1
+  },
+  until: undefined
+})
+
+const emit = defineEmits<{
+  (e: 'delete', value: string): void
+}>()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <user-icon :user-id="user.id" :size="48" />
+      <p :class="$style.name">{{ user.name }}</p>
+      <form-project-duration v-model="duration" since-required />
+    </div>
+    <div @click="emit('delete', user.id)">
+      <icon :size="32" name="mdi:delete" :class="$style.icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+
+  border: 1px solid $color-primary-text;
+  border-radius: 8px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.icon {
+  color: $color-secondary;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index ab69b4c6..14df8e31 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -11,6 +11,7 @@ import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import { useToast } from 'vue-toastification'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
 import MemberInput from '/@/components/UI/MemberInput.vue'
+import ProjectMember from '/@/components/Projects/ProjectMember.vue'
 
 const toast = useToast()
 
@@ -43,6 +44,10 @@ const createProject = async () => {
   isSending.value = false
 }
 const members = ref<User[]>([])
+
+const handleDelete = (id: string) => {
+  members.value = members.value.filter(member => member.id !== id)
+}
 </script>
 
 <template>
@@ -85,6 +90,13 @@ const members = ref<User[]>([])
       </labeled-form>
       <labeled-form label="メンバー" :class="$style.labeledForm">
         <member-input v-model="members" :class="$style.memberInput" />
+        <div v-for="(user, id) in members" :key="id">
+          <project-member
+            :user="user"
+            :class="$style.projectMember"
+            @delete="handleDelete"
+          />
+        </div>
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
@@ -139,8 +151,11 @@ const members = ref<User[]>([])
 }
 
 .memberInput {
-  margin-bottom: 2rem;
-  margin-left: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.projectMember {
+  margin-bottom: 0.5rem;
 }
 </style>
 '

From 323d2a736437876418beee01ebe8e87f228e7bf2 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Tue, 31 Oct 2023 20:47:26 +0900
Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=90=9B=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Projects/ProjectMember.vue | 22 +++++----
 src/pages/ProjectNew.vue                  | 54 ++++++++++++++++++++---
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/src/components/Projects/ProjectMember.vue b/src/components/Projects/ProjectMember.vue
index 46aaad47..90e6820f 100644
--- a/src/components/Projects/ProjectMember.vue
+++ b/src/components/Projects/ProjectMember.vue
@@ -1,24 +1,28 @@
 <script lang="ts" setup>
-import { User } from '/@/lib/apis'
+import { User, YearWithSemesterDuration } from '/@/lib/apis'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
 import Icon from '/@/components/UI/Icon.vue'
-import { ref } from 'vue'
+import { computed } from 'vue'
 interface Props {
   user: User
+  modelValue: YearWithSemesterDuration
 }
 
-defineProps<Props>()
-const duration = ref({
-  since: {
-    year: 2021,
-    semester: 1
+const props = defineProps<Props>()
+
+const value = computed({
+  get() {
+    return props.modelValue
   },
-  until: undefined
+  set(v) {
+    emit('update', v)
+  }
 })
 
 const emit = defineEmits<{
   (e: 'delete', value: string): void
+  (e: 'update', value: YearWithSemesterDuration): void
 }>()
 </script>
 
@@ -27,7 +31,7 @@ const emit = defineEmits<{
     <div :class="$style.content">
       <user-icon :user-id="user.id" :size="48" />
       <p :class="$style.name">{{ user.name }}</p>
-      <form-project-duration v-model="duration" since-required />
+      <form-project-duration v-model="value" since-required />
     </div>
     <div @click="emit('delete', user.id)">
       <icon :size="32" name="mdi:delete" :class="$style.icon" />
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index 14df8e31..8f942495 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -2,9 +2,13 @@
 import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
-import apis, { CreateProjectRequest, User } from '/@/lib/apis'
+import apis, {
+  CreateProjectRequest,
+  User,
+  YearWithSemesterDuration
+} from '/@/lib/apis'
 import { RouterLink } from 'vue-router'
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
@@ -36,18 +40,56 @@ const createProject = async () => {
   isSending.value = true
   try {
     await apis.createProject(formValues)
-    await apis.addProjectMembers(formValues.name, undefined)
+    await apis.addProjectMembers(formValues.name, {
+      members: members.value.map(member => ({
+        userId: member.id,
+        duration: memberWithDurations.value.find(
+          memberWithDuration => memberWithDuration.user.id === member.id
+        )!.duration
+      }))
+    })
     toast.success('プロジェクトを追加しました')
   } catch {
     toast.error('プロジェクトの追加に失敗しました')
   }
   isSending.value = false
 }
+
 const members = ref<User[]>([])
+const durations = ref<YearWithSemesterDuration[]>([])
 
 const handleDelete = (id: string) => {
+  members.value.map((member, i) => {
+    if (member.id === id) {
+      durations.value = durations.value.filter((_, j) => i !== j)
+    }
+    return member
+  })
+
   members.value = members.value.filter(member => member.id !== id)
 }
+
+const memberWithDurations = computed(() =>
+  members.value.map((member, i) => {
+    if (!durations.value[i]) {
+      durations.value.push({
+        since: {
+          year: new Date().getFullYear(),
+          semester: 0
+        },
+        until: {
+          year: new Date().getFullYear(),
+          semester: 0
+        }
+      })
+    }
+
+    return {
+      user: member,
+      duration: durations.value[i]!
+    }
+  })
+)
 </script>
 
 <template>
@@ -90,11 +132,13 @@ const handleDelete = (id: string) => {
       </labeled-form>
       <labeled-form label="メンバー" :class="$style.labeledForm">
         <member-input v-model="members" :class="$style.memberInput" />
-        <div v-for="(user, id) in members" :key="id">
+        <div v-for="(obj, id) in memberWithDurations" :key="id">
           <project-member
-            :user="user"
+            v-model="obj.duration"
+            :user="obj.user"
             :class="$style.projectMember"
             @delete="handleDelete"
+            @update="durations[id] = $event"
           />
         </div>
       </labeled-form>

From 1f3280748b744f8f1d7ef3c978b8ba7c6e9b6bb0 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Sat, 4 Nov 2023 07:46:45 +0900
Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=9A=A7=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Projects/ProjectMember.vue | 27 +++++---
 src/components/UI/FormProjectDuration.vue | 27 ++++----
 src/components/UI/MemberInput.vue         | 11 ++-
 src/pages/ContestTeamEdit.vue             |  6 +-
 src/pages/ContestTeamNew.vue              |  6 +-
 src/pages/ProjectMembers.vue              | 82 -----------------------
 src/pages/ProjectNew.vue                  | 68 ++++++++-----------
 src/router/index.ts                       |  6 --
 8 files changed, 73 insertions(+), 160 deletions(-)
 delete mode 100644 src/pages/ProjectMembers.vue

diff --git a/src/components/Projects/ProjectMember.vue b/src/components/Projects/ProjectMember.vue
index 90e6820f..552ca6d9 100644
--- a/src/components/Projects/ProjectMember.vue
+++ b/src/components/Projects/ProjectMember.vue
@@ -12,12 +12,8 @@ interface Props {
 const props = defineProps<Props>()
 
 const value = computed({
-  get() {
-    return props.modelValue
-  },
-  set(v) {
-    emit('update', v)
-  }
+  get: () => props.modelValue,
+  set: v => emit('update', v)
 })
 
 const emit = defineEmits<{
@@ -29,13 +25,15 @@ const emit = defineEmits<{
 <template>
   <div :class="$style.container">
     <div :class="$style.content">
-      <user-icon :user-id="user.id" :size="48" />
-      <p :class="$style.name">{{ user.name }}</p>
+      <div :class="$style.user">
+        <user-icon :user-id="user.id" :size="48" />
+        <p :class="$style.name">{{ user.name }}</p>
+      </div>
       <form-project-duration v-model="value" since-required />
     </div>
-    <div @click="emit('delete', user.id)">
+    <button @click="emit('delete', user.id)">
       <icon :size="32" name="mdi:delete" :class="$style.icon" />
-    </div>
+    </button>
   </div>
 </template>
 
@@ -53,12 +51,19 @@ const emit = defineEmits<{
 .content {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 1.5rem;
 }
+
 .icon {
   color: $color-secondary;
   &:hover {
     opacity: 0.8;
   }
 }
+
+.user {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 </style>
diff --git a/src/components/UI/FormProjectDuration.vue b/src/components/UI/FormProjectDuration.vue
index 3f747ecc..3b8c8348 100644
--- a/src/components/UI/FormProjectDuration.vue
+++ b/src/components/UI/FormProjectDuration.vue
@@ -8,7 +8,7 @@ import RequiredChip from '/@/components/UI/RequiredChip.vue'
 import { Option } from '/@/components/UI/BaseSelect.vue'
 import BaseSelect from '/@/components/UI/BaseSelect.vue'
 
-type DateType = 'sinceYear' | 'sinceSemester' | 'untilYear' | 'untilSemester'
+type DateType = 'since' | 'until'
 
 interface Props {
   modelValue: YearWithSemesterDuration
@@ -25,17 +25,17 @@ const options: Option<YearWithSemester>[] = Array(props.yearsAgo)
   .fill(null)
   .map((_, i) => [
     {
-      label: (new Date().getFullYear() - i).toString() + ' 前期',
+      label: `${(new Date().getFullYear() - i).toString()} 後期`,
       value: {
         year: new Date().getFullYear() - i,
-        semester: Semester.first
+        semester: Semester.second
       }
     },
     {
-      label: (new Date().getFullYear() - i).toString() + ' 後期',
+      label: `${(new Date().getFullYear() - i).toString()} 前期`,
       value: {
         year: new Date().getFullYear() - i,
-        semester: Semester.second
+        semester: Semester.first
       }
     }
   ])
@@ -47,10 +47,10 @@ const handleInput = (
 ) => {
   const duration: YearWithSemesterDuration = {
     since:
-      dateType === 'sinceYear' && value !== undefined
+      dateType === 'since' && value !== undefined
         ? value
         : props.modelValue.since,
-    until: dateType === 'untilYear' ? value : props.modelValue.until
+    until: dateType === 'until' ? value : props.modelValue.until
   }
   emit('update:modelValue', duration)
 }
@@ -66,9 +66,9 @@ const handleInput = (
       <div :class="$style.form">
         <base-select
           :options="options"
-          :class="$style.yearInput"
+          :class="$style.input"
           :model-value="modelValue.since"
-          @update:model-value="handleInput($event, 'sinceYear')"
+          @update:model-value="handleInput($event, 'since')"
         />
       </div>
     </div>
@@ -80,9 +80,9 @@ const handleInput = (
       <div :class="$style.form">
         <base-select
           :options="options"
-          :class="$style.yearInput"
+          :class="$style.input"
           :model-value="modelValue.until"
-          @update:model-value="handleInput($event, 'untilYear')"
+          @update:model-value="handleInput($event, 'until')"
         />
       </div>
     </div>
@@ -118,13 +118,14 @@ const handleInput = (
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  flex-wrap: nowrap;
 }
 .yearForm {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-.yearInput {
-  width: 8.75rem;
+.input {
+  width: 10rem;
 }
 </style>
diff --git a/src/components/UI/MemberInput.vue b/src/components/UI/MemberInput.vue
index 1e66a20a..c47e36fe 100644
--- a/src/components/UI/MemberInput.vue
+++ b/src/components/UI/MemberInput.vue
@@ -1,18 +1,15 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="U extends User">
 import vSelect from 'vue-select'
 import 'vue-select/dist/vue-select.css'
 
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 import { User } from '/@/lib/apis'
-import { useUserStore } from '/@/store/user'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 
-const userStore = useUserStore()
-const users = await userStore.fetchUsers()
-
 interface Props {
-  modelValue: User[]
+  modelValue: U[]
   isDisabled: boolean
+  users: U[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +29,7 @@ const limit = ref(10)
 const search = ref('')
 
 const filtered = computed(
-  () => users.filter(user => user.name.includes(search.value)) ?? []
+  () => props.users.filter(user => user.name.includes(search.value)) ?? []
 )
 const options = computed(() => filtered.value.slice(0, limit.value))
 const hasNextPage = computed(() => filtered.value.length > options.value.length)
diff --git a/src/pages/ContestTeamEdit.vue b/src/pages/ContestTeamEdit.vue
index 26e05e44..f9b95b25 100644
--- a/src/pages/ContestTeamEdit.vue
+++ b/src/pages/ContestTeamEdit.vue
@@ -16,6 +16,7 @@ import { isValidLength, isValidUrl } from '/@/use/validate'
 import useModal from '/@/components/UI/composables/useModal'
 import ConfirmModal from '/@/components/UI/ConfirmModal.vue'
 import { useToast } from 'vue-toastification'
+import { useUserStore } from '/@/store/user'
 
 const router = useRouter()
 const toast = useToast()
@@ -31,6 +32,9 @@ const contestTeam: ContestTeamDetail = (
 const formValues = ref<Required<EditContestTeamRequest>>(contestTeam)
 const members = ref<User[]>(contestTeam.members)
 
+const userStore = useUserStore()
+const users = await userStore.fetchUsers()
+
 const isSending = ref(false)
 const isDeleting = ref(false)
 const canSubmit = computed(
@@ -120,7 +124,7 @@ const deleteContestTeam = async () => {
         />
       </labeled-form>
       <labeled-form required label="メンバー" :class="$style.labeledForm">
-        <member-input v-model="members" />
+        <member-input v-model="members" :users="users" :is-disabled="false" />
       </labeled-form>
       <labeled-form required label="説明" :class="$style.labeledForm">
         <form-text-area
diff --git a/src/pages/ContestTeamNew.vue b/src/pages/ContestTeamNew.vue
index 3896a148..b1dc5cb0 100644
--- a/src/pages/ContestTeamNew.vue
+++ b/src/pages/ContestTeamNew.vue
@@ -13,6 +13,7 @@ import { computed, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import { isValidLength, isValidUrl } from '/@/use/validate'
 import { useToast } from 'vue-toastification'
+import { useUserStore } from '/@/store/user'
 
 const router = useRouter()
 const toast = useToast()
@@ -20,6 +21,9 @@ const toast = useToast()
 const contestId = useParam('contestId')
 const contest: ContestDetail = (await apis.getContest(contestId.value)).data
 
+const userStore = useUserStore()
+const users = await userStore.fetchUsers()
+
 const formValues = ref<Required<AddContestTeamRequest>>({
   name: '',
   result: '',
@@ -93,7 +97,7 @@ const createContestTeam = async () => {
         />
       </labeled-form>
       <labeled-form required label="メンバー" :class="$style.labeledForm">
-        <member-input v-model="members" />
+        <member-input v-model="members" :users="users" :is-disabled="false" />
       </labeled-form>
       <labeled-form required label="説明" :class="$style.labeledForm">
         <form-text-area
diff --git a/src/pages/ProjectMembers.vue b/src/pages/ProjectMembers.vue
deleted file mode 100644
index f779fa20..00000000
--- a/src/pages/ProjectMembers.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts" setup>
-import PageContainer from '/@/components/Layout/PageContainer.vue'
-import ContentHeader from '/@/components/Layout/ContentHeader.vue'
-import useParam from '/@/use/param'
-import MemberInput from '/@/components/UI/MemberInput.vue'
-import { ref, watchEffect, computed } from 'vue'
-import BaseButton from '/@/components/UI/BaseButton.vue'
-import apis, { ProjectDetail } from '/@/lib/apis'
-
-const projectId = useParam('id')
-const projectDetail = ref<ProjectDetail>()
-
-watchEffect(async () => {
-  if (projectId.value) {
-    projectDetail.value = (await apis.getProject(projectId.value)).data
-  }
-})
-const members = computed(() => projectDetail.value?.members ?? [])
-const name = computed(() => projectDetail.value?.name ?? 'Loading... ')
-
-const fetchState = computed(() => projectDetail.value !== undefined)
-</script>
-
-<template>
-  <page-container>
-    <content-header
-      icon-name="mdi:clipboard-file-outline"
-      :header-texts="[
-        { title: 'Projects', url: '/projects' },
-        { title: `${name}`, url: `/projects/${projectId}` },
-        { title: 'Members', url: '/projects/${projectId}/members' }
-      ]"
-      detail="プロジェクトを変更します"
-      :class="$style.header"
-    />
-    <h2 :class="$style.memberText">メンバー</h2>
-    <member-input
-      v-model="members"
-      :class="$style.memberInput"
-      :is-disabled="!fetchState"
-    />
-    <div :class="$style.buttonContainer">
-      <router-link :to="`/projects/${projectId}`" :class="$style.link">
-        <base-button icon="mdi:arrow-left" type="secondary">Back</base-button>
-      </router-link>
-      <router-link :to="`/projects/${projectId}/edit`" :class="$style.link">
-        <base-button
-          icon="mdi:arrow-right"
-          type="primary"
-          :is-disabled="!fetchState"
-          >Next</base-button
-        >
-      </router-link>
-    </div>
-  </page-container>
-</template>
-
-<style lang="scss" module>
-.header {
-  margin: 4rem 0 2rem;
-}
-
-.memberText {
-  font-size: 1.25rem;
-  margin-bottom: 0.5rem;
-}
-
-.memberInput {
-  margin-bottom: 2rem;
-  margin-left: 0.5rem;
-}
-
-.buttonContainer {
-  display: flex;
-  gap: 1rem;
-}
-
-.link {
-  text-decoration: none;
-  color: inherit;
-}
-</style>
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index 8f942495..2ba64dd3 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -16,9 +16,12 @@ import { useToast } from 'vue-toastification'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import ProjectMember from '/@/components/Projects/ProjectMember.vue'
+import { useUserStore } from '/@/store/user'
 
 const toast = useToast()
 
+type UserWithDuration = User & { duration: YearWithSemesterDuration }
+
 const formValues = reactive<Required<CreateProjectRequest>>({
   name: '',
   link: '',
@@ -43,9 +46,7 @@ const createProject = async () => {
     await apis.addProjectMembers(formValues.name, {
       members: members.value.map(member => ({
         userId: member.id,
-        duration: memberWithDurations.value.find(
-          memberWithDuration => memberWithDuration.user.id === member.id
-        )!.duration
+        duration: member.duration
       }))
     })
     toast.success('プロジェクトを追加しました')
@@ -54,42 +55,26 @@ const createProject = async () => {
   }
   isSending.value = false
 }
+const userStore = useUserStore()
+const users = await userStore.fetchUsers()
 
-const members = ref<User[]>([])
-const durations = ref<YearWithSemesterDuration[]>([])
-
-const handleDelete = (id: string) => {
-  members.value.map((member, i) => {
-    if (member.id === id) {
-      durations.value = durations.value.filter((_, j) => i !== j)
+const userWithDurations = computed<UserWithDuration[]>(() =>
+  users.map(user => ({
+    ...user,
+    duration: {
+      since: {
+        year: new Date().getFullYear(),
+        semester: 0
+      },
+      until: undefined
     }
-    return member
-  })
+  }))
+)
+const members = ref<UserWithDuration[]>([])
 
+const handleDelete = (id: string) => {
   members.value = members.value.filter(member => member.id !== id)
 }
-
-const memberWithDurations = computed(() =>
-  members.value.map((member, i) => {
-    if (!durations.value[i]) {
-      durations.value.push({
-        since: {
-          year: new Date().getFullYear(),
-          semester: 0
-        },
-        until: {
-          year: new Date().getFullYear(),
-          semester: 0
-        }
-      })
-    }
-
-    return {
-      user: member,
-      duration: durations.value[i]!
-    }
-  })
-)
 </script>
 
 <template>
@@ -131,14 +116,19 @@ const memberWithDurations = computed(() =>
         />
       </labeled-form>
       <labeled-form label="メンバー" :class="$style.labeledForm">
-        <member-input v-model="members" :class="$style.memberInput" />
-        <div v-for="(obj, id) in memberWithDurations" :key="id">
+        <member-input
+          v-model="members"
+          :class="$style.memberInput"
+          :users="userWithDurations"
+          :is-disabled="false"
+        />
+        <div v-for="member in members" :key="member.id">
           <project-member
-            v-model="obj.duration"
-            :user="obj.user"
+            v-model="member.duration"
+            :user="member"
             :class="$style.projectMember"
             @delete="handleDelete"
-            @update="durations[id] = $event"
+            @update="member.duration = $event"
           />
         </div>
       </labeled-form>
diff --git a/src/router/index.ts b/src/router/index.ts
index 90803d2d..c2b79361 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,6 @@ const UserAccountNew = () => import('/@/pages/UserAccountNew.vue')
 const UserAccountEdit = () => import('/@/pages/UserAccountEdit.vue')
 const Projects = () => import('/@/pages/Projects.vue')
 const Project = () => import('/@/pages/Project.vue')
-const ProjectMembers = () => import('/@/pages/ProjectMembers.vue')
 const ProjectNew = () => import('/@/pages/ProjectNew.vue')
 const Events = () => import('/@/pages/Events.vue')
 const Event = () => import('/@/pages/Event.vue')
@@ -34,11 +33,6 @@ const routes = [
     name: 'Project',
     component: Project
   },
-  {
-    path: '/projects/:id/members',
-    name: 'ProjectMembers',
-    component: ProjectMembers
-  },
   {
     path: '/projects/new',
     name: 'ProjectNew',

From 265c030412c05ebaafa537b85952ceaf6e31238a Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:10:41 +0900
Subject: [PATCH 07/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20validation=20?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProjectNew.vue | 24 +++++++++++++++++++++---
 src/use/validate.ts      | 15 ++++++++++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index 2ba64dd3..b6b4d263 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -17,6 +17,7 @@ import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import ProjectMember from '/@/components/Projects/ProjectMember.vue'
 import { useUserStore } from '/@/store/user'
+import { isValidYearWithSemesterDuration } from '/@/use/validate'
 
 const toast = useToast()
 
@@ -42,8 +43,12 @@ const isSending = ref(false)
 const createProject = async () => {
   isSending.value = true
   try {
-    await apis.createProject(formValues)
-    await apis.addProjectMembers(formValues.name, {
+    const req: CreateProjectRequest = {
+      ...formValues,
+      link: formValues.link || undefined
+    }
+    const res = await apis.createProject(req)
+    await apis.addProjectMembers(res.data.id, {
       members: members.value.map(member => ({
         userId: member.id,
         duration: member.duration
@@ -55,6 +60,19 @@ const createProject = async () => {
   }
   isSending.value = false
 }
+
+const canSubmit = computed(
+  () =>
+    !isSending.value &&
+    formValues.name !== '' &&
+    isValidYearWithSemesterDuration(formValues.duration) &&
+    members.value
+      .map(member => member.duration)
+      .every(isValidYearWithSemesterDuration) &&
+    new Set(members.value.map(member => member.id)).size ===
+      members.value.length
+)
+
 const userStore = useUserStore()
 const users = await userStore.fetchUsers()
 
@@ -144,7 +162,7 @@ const handleDelete = (id: string) => {
         </base-button>
       </router-link>
       <base-button
-        :is-disabled="isSending"
+        :is-disabled="!canSubmit"
         :class="$style.createButton"
         type="primary"
         icon="mdi:plus"
diff --git a/src/use/validate.ts b/src/use/validate.ts
index 4faa0b8c..39ddae8c 100644
--- a/src/use/validate.ts
+++ b/src/use/validate.ts
@@ -1,4 +1,4 @@
-import { Duration } from '/@/lib/apis'
+import { Duration, YearWithSemesterDuration } from '/@/lib/apis'
 
 export const isValidLength = (value: string, min: number, max: number) => {
   if (value.length < min) return false
@@ -22,3 +22,16 @@ export const isValidDuration = (duration: Duration) => {
   }
   return false
 }
+
+export const isValidYearWithSemesterDuration = (
+  duration: YearWithSemesterDuration
+) => {
+  if (duration.since && duration.until) {
+    return (
+      duration.since.year < duration.until.year ||
+      (duration.since.year == duration.until.year &&
+        duration.since.semester < duration.until.semester)
+    )
+  }
+  return false
+}

From 3c7e635cacb880c0ed19e161f1094dd2e76cc002 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Wed, 15 Nov 2023 17:43:50 +0900
Subject: [PATCH 08/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=20undefined=20?=
 =?UTF-8?q?=E5=91=A8=E3=82=8A=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/BaseSelect.vue          | 11 ++++++-
 src/components/UI/FormProjectDuration.vue | 39 +++++++++++++++++------
 src/pages/ProjectNew.vue                  |  4 +--
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/UI/BaseSelect.vue b/src/components/UI/BaseSelect.vue
index f17f8d33..ee50e277 100644
--- a/src/components/UI/BaseSelect.vue
+++ b/src/components/UI/BaseSelect.vue
@@ -25,6 +25,14 @@ const value = computed({
   get: () => props.modelValue,
   set: v => emit('update:modelValue', v)
 })
+
+const isEquals = (a: T, b: T) => {
+  if (value.value !== null && typeof value.value === 'object') {
+    return JSON.stringify(a) === JSON.stringify(b)
+  } else {
+    return a === b
+  }
+}
 </script>
 
 <template>
@@ -40,7 +48,7 @@ const value = computed({
     <template #option="{ label }">
       <div :class="$style.item">
         <icon
-          v-if="label === options.find(o => o.value === value)?.label"
+          v-if="label === options.find(o => isEquals(o.value, value))?.label"
           name="mdi:tick-circle-outline"
           :class="$style.icon"
         />
@@ -60,6 +68,7 @@ const value = computed({
     color: $color-primary;
   }
   .label {
+    display: grid;
     grid-column: 2;
   }
 }
diff --git a/src/components/UI/FormProjectDuration.vue b/src/components/UI/FormProjectDuration.vue
index 3b8c8348..8276fbca 100644
--- a/src/components/UI/FormProjectDuration.vue
+++ b/src/components/UI/FormProjectDuration.vue
@@ -19,9 +19,16 @@ const props = withDefaults(defineProps<Props>(), {
   yearsAgo: 20
 })
 const emit = defineEmits<{
-  (e: 'update:modelValue', modelValue: YearWithSemesterDuration): void
+  (
+    e: 'update:modelValue',
+    modelValue: {
+      since: YearWithSemester | undefined
+      until: YearWithSemester | undefined
+    }
+  ): void
 }>()
-const options: Option<YearWithSemester>[] = Array(props.yearsAgo)
+
+const options: Option<YearWithSemester | undefined>[] = Array(props.yearsAgo)
   .fill(null)
   .map((_, i) => [
     {
@@ -41,15 +48,29 @@ const options: Option<YearWithSemester>[] = Array(props.yearsAgo)
   ])
   .flat()
 
+const sinceOptions = props.sinceRequired
+  ? options
+  : [
+      {
+        label: '未定',
+        value: undefined
+      },
+      ...options
+    ]
+const untilOptions = [
+  {
+    label: '未定',
+    value: undefined
+  },
+  ...options
+]
+
 const handleInput = (
   value: YearWithSemester | undefined,
   dateType: DateType
 ) => {
-  const duration: YearWithSemesterDuration = {
-    since:
-      dateType === 'since' && value !== undefined
-        ? value
-        : props.modelValue.since,
+  const duration = {
+    since: dateType === 'since' ? value : props.modelValue.since,
     until: dateType === 'until' ? value : props.modelValue.until
   }
   emit('update:modelValue', duration)
@@ -65,7 +86,7 @@ const handleInput = (
       </div>
       <div :class="$style.form">
         <base-select
-          :options="options"
+          :options="sinceOptions"
           :class="$style.input"
           :model-value="modelValue.since"
           @update:model-value="handleInput($event, 'since')"
@@ -79,7 +100,7 @@ const handleInput = (
       </div>
       <div :class="$style.form">
         <base-select
-          :options="options"
+          :options="untilOptions"
           :class="$style.input"
           :model-value="modelValue.until"
           @update:model-value="handleInput($event, 'until')"
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index b6b4d263..edd2f488 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -68,9 +68,7 @@ const canSubmit = computed(
     isValidYearWithSemesterDuration(formValues.duration) &&
     members.value
       .map(member => member.duration)
-      .every(isValidYearWithSemesterDuration) &&
-    new Set(members.value.map(member => member.id)).size ===
-      members.value.length
+      .every(isValidYearWithSemesterDuration)
 )
 
 const userStore = useUserStore()

From 3a511fbbb7dd66491a415f37d039829a74daab0e Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Wed, 15 Nov 2023 17:50:09 +0900
Subject: [PATCH 09/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20validation=20?=
 =?UTF-8?q?=E5=91=A8=E3=82=8A=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProjectNew.vue | 6 +++---
 src/use/validate.ts      | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index edd2f488..fd805095 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -66,9 +66,9 @@ const canSubmit = computed(
     !isSending.value &&
     formValues.name !== '' &&
     isValidYearWithSemesterDuration(formValues.duration) &&
-    members.value
-      .map(member => member.duration)
-      .every(isValidYearWithSemesterDuration)
+    members.value.every(member =>
+      isValidYearWithSemesterDuration(member.duration)
+    )
 )
 
 const userStore = useUserStore()
diff --git a/src/use/validate.ts b/src/use/validate.ts
index 39ddae8c..89bd2d8b 100644
--- a/src/use/validate.ts
+++ b/src/use/validate.ts
@@ -29,9 +29,13 @@ export const isValidYearWithSemesterDuration = (
   if (duration.since && duration.until) {
     return (
       duration.since.year < duration.until.year ||
-      (duration.since.year == duration.until.year &&
-        duration.since.semester < duration.until.semester)
+      (duration.since.year === duration.until.year &&
+        duration.since.semester <= duration.until.semester)
     )
   }
+  if (duration.since) {
+    return true
+  }
+
   return false
 }

From 0166491ab09f99279bb13f184582cf618a5f0a43 Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:35:20 +0900
Subject: [PATCH 10/11] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=E6=8F=83=E3=81=88?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Projects/ProjectMember.vue | 38 ++++++++++++-----------
 src/components/UI/FormProjectDuration.vue |  1 +
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/Projects/ProjectMember.vue b/src/components/Projects/ProjectMember.vue
index 552ca6d9..8479bfa9 100644
--- a/src/components/Projects/ProjectMember.vue
+++ b/src/components/Projects/ProjectMember.vue
@@ -24,15 +24,18 @@ const emit = defineEmits<{
 
 <template>
   <div :class="$style.container">
-    <div :class="$style.content">
-      <div :class="$style.user">
-        <user-icon :user-id="user.id" :size="48" />
-        <p :class="$style.name">{{ user.name }}</p>
-      </div>
-      <form-project-duration v-model="value" since-required />
+    <div :class="$style.user">
+      <user-icon :user-id="user.id" :size="48" />
+      <p :class="$style.name">{{ user.name }}</p>
     </div>
-    <button @click="emit('delete', user.id)">
-      <icon :size="32" name="mdi:delete" :class="$style.icon" />
+
+    <form-project-duration
+      v-model="value"
+      since-required
+      :class="$style.projectDuration"
+    />
+    <button :class="$style.icon" @click="emit('delete', user.id)">
+      <icon :size="32" name="mdi:delete" />
     </button>
   </div>
 </template>
@@ -40,18 +43,22 @@ const emit = defineEmits<{
 <style lang="scss" module>
 .container {
   display: flex;
+  gap: 1rem;
+
   align-items: center;
-  justify-content: space-between;
   padding: 0.5rem;
 
   border: 1px solid $color-primary-text;
   border-radius: 8px;
 }
-
-.content {
+.name {
+  word-break: break-all;
+}
+.user {
+  width: 30%;
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  gap: 0.5rem;
 }
 
 .icon {
@@ -59,11 +66,6 @@ const emit = defineEmits<{
   &:hover {
     opacity: 0.8;
   }
-}
-
-.user {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  margin-left: auto;
 }
 </style>
diff --git a/src/components/UI/FormProjectDuration.vue b/src/components/UI/FormProjectDuration.vue
index 8276fbca..bb53326c 100644
--- a/src/components/UI/FormProjectDuration.vue
+++ b/src/components/UI/FormProjectDuration.vue
@@ -113,6 +113,7 @@ const handleInput = (
 <style module lang="scss">
 .container {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   gap: 0.5rem;
 }

From 5f2bc87bb423e377fba8a52ba6de7189d737184e Mon Sep 17 00:00:00 2001
From: tesso <48358052+tesso57@users.noreply.github.com>
Date: Fri, 22 Dec 2023 23:40:28 +0900
Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=90=9B=20fix=20compare=20alg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Projects/ProjectMember.vue |  4 ++--
 src/components/UI/BaseSelect.vue          | 28 ++++++++++++++++++-----
 src/components/UI/FormProjectDuration.vue | 26 +++++++++++----------
 src/pages/ProjectNew.vue                  |  1 -
 4 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/components/Projects/ProjectMember.vue b/src/components/Projects/ProjectMember.vue
index 8479bfa9..787195b0 100644
--- a/src/components/Projects/ProjectMember.vue
+++ b/src/components/Projects/ProjectMember.vue
@@ -13,12 +13,12 @@ const props = defineProps<Props>()
 
 const value = computed({
   get: () => props.modelValue,
-  set: v => emit('update', v)
+  set: v => emit('update:modelValue', v)
 })
 
 const emit = defineEmits<{
   (e: 'delete', value: string): void
-  (e: 'update', value: YearWithSemesterDuration): void
+  (e: 'update:modelValue', value: YearWithSemesterDuration): void
 }>()
 </script>
 
diff --git a/src/components/UI/BaseSelect.vue b/src/components/UI/BaseSelect.vue
index ee50e277..59c4ba1c 100644
--- a/src/components/UI/BaseSelect.vue
+++ b/src/components/UI/BaseSelect.vue
@@ -12,6 +12,7 @@ export interface Option<T> {
 interface Props {
   modelValue: T
   options: Option<T>[]
+  by?: keyof T | ((a: T, b: T) => boolean)
   searchable?: boolean
 }
 
@@ -26,12 +27,27 @@ const value = computed({
   set: v => emit('update:modelValue', v)
 })
 
-const isEquals = (a: T, b: T) => {
-  if (value.value !== null && typeof value.value === 'object') {
-    return JSON.stringify(a) === JSON.stringify(b)
-  } else {
-    return a === b
+const compare = (a: T, b: T) => {
+  if (typeof props.by === 'function') {
+    return props.by(a, b)
   }
+
+  if (typeof props.by === 'string') {
+    return a[props.by] === b[props.by]
+  }
+
+  if (
+    a !== null &&
+    b !== null &&
+    typeof a === 'object' &&
+    typeof b === 'object' &&
+    'id' in a &&
+    'id' in b
+  ) {
+    return a.id === b.id
+  }
+
+  return a === b
 }
 </script>
 
@@ -48,7 +64,7 @@ const isEquals = (a: T, b: T) => {
     <template #option="{ label }">
       <div :class="$style.item">
         <icon
-          v-if="label === options.find(o => isEquals(o.value, value))?.label"
+          v-if="label === options.find(o => compare(o.value, value))?.label"
           name="mdi:tick-circle-outline"
           :class="$style.icon"
         />
diff --git a/src/components/UI/FormProjectDuration.vue b/src/components/UI/FormProjectDuration.vue
index bb53326c..225baa2d 100644
--- a/src/components/UI/FormProjectDuration.vue
+++ b/src/components/UI/FormProjectDuration.vue
@@ -27,10 +27,9 @@ const emit = defineEmits<{
     }
   ): void
 }>()
-
 const options: Option<YearWithSemester | undefined>[] = Array(props.yearsAgo)
   .fill(null)
-  .map((_, i) => [
+  .flatMap((_, i) => [
     {
       label: `${(new Date().getFullYear() - i).toString()} 後期`,
       value: {
@@ -46,17 +45,7 @@ const options: Option<YearWithSemester | undefined>[] = Array(props.yearsAgo)
       }
     }
   ])
-  .flat()
 
-const sinceOptions = props.sinceRequired
-  ? options
-  : [
-      {
-        label: '未定',
-        value: undefined
-      },
-      ...options
-    ]
 const untilOptions = [
   {
     label: '未定',
@@ -65,6 +54,8 @@ const untilOptions = [
   ...options
 ]
 
+const sinceOptions = props.sinceRequired ? options : untilOptions
+
 const handleInput = (
   value: YearWithSemester | undefined,
   dateType: DateType
@@ -75,6 +66,15 @@ const handleInput = (
   }
   emit('update:modelValue', duration)
 }
+
+const compare = (
+  a: YearWithSemester | undefined,
+  b: YearWithSemester | undefined
+) => {
+  if (a === undefined && b === undefined) return true
+  if (a === undefined || b === undefined) return false
+  return a.year === b.year && a.semester === b.semester
+}
 </script>
 
 <template>
@@ -89,6 +89,7 @@ const handleInput = (
           :options="sinceOptions"
           :class="$style.input"
           :model-value="modelValue.since"
+          :by="compare"
           @update:model-value="handleInput($event, 'since')"
         />
       </div>
@@ -103,6 +104,7 @@ const handleInput = (
           :options="untilOptions"
           :class="$style.input"
           :model-value="modelValue.until"
+          :by="compare"
           @update:model-value="handleInput($event, 'until')"
         />
       </div>
diff --git a/src/pages/ProjectNew.vue b/src/pages/ProjectNew.vue
index 6546c858..9bd84ee4 100644
--- a/src/pages/ProjectNew.vue
+++ b/src/pages/ProjectNew.vue
@@ -147,7 +147,6 @@ const handleDelete = (id: string) => {
             :user="member"
             :class="$style.projectMember"
             @delete="handleDelete"
-            @update="member.duration = $event"
           />
         </div>
       </labeled-form>