Merge pull request #225 from traPtitech/feat/search_case_insensitive

case insensitiveな検索をする

src/components/Contest/ContestTeams.vue

@@ -6,6 +6,7 @@ import ContestTeamItem from '/@/components/Contest/ContestTeamItem.vue'
 import { RouterLink } from 'vue-router'
 import { ContestTeam } from '/@/lib/apis'
 import { computed, ref } from 'vue'
+import { searchListCaseInsensitive } from '/@/lib/search'
 
 interface Props {
   contestId: string
@@ -15,9 +16,7 @@ interface Props {
 const props = defineProps<Props>()
 const searchQuery = ref('')
 const filteredContestTeams = computed(() =>
-  props.contestTeams.filter(contestTeam =>
-    contestTeam.name.includes(searchQuery.value)
-  )
+  searchListCaseInsensitive(props.contestTeams, searchQuery.value, 'name')
 )
 </script>
 

src/components/UI/MemberInput.vue

@@ -5,6 +5,7 @@ import 'vue-select/dist/vue-select.css'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 import { User } from '/@/lib/apis'
 import UserIcon from '/@/components/UI/UserIcon.vue'
+import { searchListCaseInsensitive } from '/@/lib/search'
 
 interface Props {
   modelValue: U[]
@@ -28,8 +29,8 @@ const value = computed({
 const limit = ref(10)
 const search = ref('')
 
-const filtered = computed(
-  () => props.users.filter(user => user.name.includes(search.value)) ?? []
+const filtered = computed(() =>
+  searchListCaseInsensitive(props.users, search.value, 'name')
 )
 const options = computed(() => filtered.value.slice(0, limit.value))
 const hasNextPage = computed(() => filtered.value.length > options.value.length)

src/lib/search.ts

@@ -0,0 +1,17 @@
+export const searchListCaseInsensitive = <T>(
+  list: T[],
+  _query: string,
+  key: keyof T
+): T[] => {
+  const value = list[0]?.[key]
+  if (typeof value !== 'string') {
+    throw new Error(
+      `The value corresponds to a given key ${key.toString()} must be string`
+    )
+  }
+  const query = _query.toLowerCase()
+  // valueがstringなので、item[key]もstringなはず
+  return list.filter(item =>
+    (item[key] as string).toLowerCase().includes(query)
+  )
+}

src/pages/Contests.vue

@@ -9,13 +9,14 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import ContestItem from '/@/components/Contests/ContestItem.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
+import { searchListCaseInsensitive } from '/@/lib/search'
 
 const contestStore = useContestStore()
 const contests = await contestStore.fetchContests()
 
 const searchQuery = ref('')
 const filteredContests = computed(() =>
-  contests.filter(contest => contest.name.includes(searchQuery.value))
+  searchListCaseInsensitive(contests, searchQuery.value, 'name')
 )
 </script>
 

src/pages/Events.vue

@@ -11,6 +11,7 @@ import {
   type EventLevelValueWithAll,
   eventLevelValueMap
 } from '/@/consts/eventLevel'
+import { searchListCaseInsensitive } from '/@/lib/search'
 
 const eventStore = useEventStore()
 const events = await eventStore.fetchEvents()
@@ -28,8 +29,10 @@ const filteredEventsByLevel = computed(() => {
   }
 })
 const filteredEventsBySearch = computed(() =>
-  filteredEventsByLevel.value.filter(event =>
-    event.name.includes(searchQuery.value)
+  searchListCaseInsensitive(
+    filteredEventsByLevel.value,
+    searchQuery.value,
+    'name'
   )
 )
 </script>

src/pages/Projects.vue

@@ -9,13 +9,14 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
 import ProjectItem from '/@/components/Projects/ProjectItem.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
+import { searchListCaseInsensitive } from '/@/lib/search'
 
 const projectStore = useProjectStore()
 const projects = await projectStore.fetchProjects()
 
 const searchQuery = ref('')
 const filteredProjects = computed(() =>
-  projects.filter(project => project.name.includes(searchQuery.value))
+  searchListCaseInsensitive(projects, searchQuery.value, 'name')
 )
 </script>