Merge pull request #255 from traPtitech/feat/sort-members

プロジェクトメンバーを加入日昇順にソート

src/components/Project/MemberList.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import MemberListItem from './MemberListItem.vue'
 import { ProjectMember } from '/@/lib/apis'
 import SectionTitle from '/@/components/Layout/SectionTitle.vue'
@@ -7,15 +8,28 @@ interface Props {
   members: ProjectMember[]
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const sortedMembers = computed(() => {
+  if (!props.members) return []
+  const li = props.members
+  li.sort((a, b) => {
+    if (a.duration.since.year !== b.duration.since.year) {
+      return a.duration.since.year - b.duration.since.year
+    } else {
+      return a.duration.since.semester - b.duration.since.semester
+    }
+  })
+  return li
+})
 </script>
 
 <template>
   <section :class="$style.section">
     <section-title>プロジェクトメンバー</section-title>
     <ul :class="$style.container">
       <member-list-item
-        v-for="member in members"
+        v-for="member in sortedMembers"
         :key="member.id"
         :member="member"
       />