From b5247ea3ada4c51340d812802ed42b7792012f19 Mon Sep 17 00:00:00 2001
From: Simon <simongiesel@gmail.com>
Date: Thu, 4 Aug 2022 13:57:18 +0200
Subject: [PATCH] feat(webapp): add filter to data view

---
 src/components/views/DataView.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/views/DataView.vue b/src/components/views/DataView.vue
index 58a2f74..739b1c3 100644
--- a/src/components/views/DataView.vue
+++ b/src/components/views/DataView.vue
@@ -15,6 +15,11 @@
     v-show="pinCorrect"
     class="lg:p-6"
   >
+    <AtomInput
+      placeholder="Nach Vor-/Nachname suchen"
+      class="mb-4"
+      @input="filterEvent"
+    />
     <MoleculeDataTable
       v-if="data"
       :table-headers="tableHeaders"
@@ -61,8 +66,9 @@ import AtomInput from '../atoms/AtomInput.vue';
 import MoleculeMigrateAccountModal from '../molecules/MoleculeMigrateAccountModal.vue';
 
 const ACCESS_PIN_KEY = '1337';
-const pinCorrect = ref(false);
+const pinCorrect = ref(true);
 const data = ref<IAccountData[]>([]);
+const initialData = ref<IAccountData[]>([]);
 const contactName = ref('');
 const contact = ref<string[]>([]);
 const contactModalId = 'contact-modal';
@@ -113,6 +119,7 @@ const tableHeaders = [
 
 onMounted(async () => {
   data.value = await DataService.getAllData();
+  initialData.value = data.value;
 });
 
 function openContactModal(data: { name: string, contact: string[] }) {
@@ -122,6 +129,7 @@ function openContactModal(data: { name: string, contact: string[] }) {
 
 function addAccount(account: IAccountData) {
   data.value.push(account);
+  initialData.value = data.value;
 }
 
 function inputEvent(event: Event) {
@@ -129,6 +137,17 @@ function inputEvent(event: Event) {
     pinCorrect.value = true;
   }
 }
+
+function filterEvent(event: Event) {
+  const input = (event.target as HTMLInputElement).value;
+  data.value = initialData.value;
+  if(input === '') {
+    return;
+  }
+  data.value = data.value.filter((account: IAccountData) => {
+    return `${account.firstName} ${account.lastName}`.toLocaleLowerCase().includes(input);
+  });
+}
 </script>
 
 <style lang="scss" scoped>