Merge pull request #414 from kaizumaki/feature/issue-413-add-function-search

患者一覧の検索機能を追加

Author: soutaito

components/SearchField.vue

@@ -4,7 +4,7 @@
     type="search"
     placeholder="検索"
     :value="value"
-    @input="$emit('input', $event.target.value)"
+    @keydown.enter="search"
   />
 </template>
 
@@ -18,6 +18,12 @@ export default Vue.extend({
       default: '',
     },
   },
+  methods: {
+    search($event: { keyCode: number; target: { value: string } }): void {
+      if ($event.keyCode !== 13) return
+      this.$emit('input', $event.target.value)
+    },
+  },
 })
 </script>
 

pages/center/_centerId/index.vue

@@ -24,7 +24,7 @@
       <PatientRegistered v-else :new-patient="newPatient" :sended="sended" />
     </ModalBase>
     <div class="searchContainer">
-      <SearchField v-model="inputSearch" />
+      <SearchField v-model="inputSearch" @input="handleSearch" />
       <SortSelect v-model="sortSelect" @input="handleSortSelect" />
       <HiddenSelect v-model="displaySelect" @input="handleDisplaySelect" />
     </div>
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import ActionButton from '@/components/ActionButton.vue'
 import PlusIcon from '@/static/icon-plus.svg'
 import ModalBase from '@/components/ModalBase.vue'
@@ -90,6 +90,7 @@ export default class CenterId extends Vue {
   showModal = false
   registered = false
   inputSearch = ''
+  searchWord = ''
   sortSelect = ''
   displaySelect = 'show-only-display-true'
   patients: Patient[] = []
@@ -115,6 +116,13 @@ export default class CenterId extends Vue {
     }
   }
 
+  @Watch('searchWord')
+  onSearchWordChanged(newValue: string, oldValue: string) {
+    if (newValue !== oldValue) {
+      this.fetchPatients()
+    }
+  }
+
   checkAndFetchPatients(): void {
     authStore.checkIsExpired().then((expired) => {
       if (expired) {
@@ -140,6 +148,14 @@ export default class CenterId extends Vue {
           ? item.display
           : !item.display
       })
+      if (this.searchWord) {
+        this.patients = this.patients.filter((item) => {
+          const pattern = new RegExp(this.searchWord, 'ig')
+          return (
+            pattern.test(item.phone) || (item.memo && pattern.test(item.memo))
+          )
+        })
+      }
       this.sortSelect = utilsStore.getSortItem
       this.sortItems(this.sortSelect)
     })
@@ -191,6 +207,10 @@ export default class CenterId extends Vue {
     this.fetchPatients()
   }
 
+  handleSearch(value: string): void {
+    this.searchWord = value
+  }
+
   handleInputTel(): void {
     this.errorMessage = ''
   }