🐛 fix compare alg

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>
 

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"
         />

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>

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>