From f238814d6787543d5cc346da6e6d3e74a08d1165 Mon Sep 17 00:00:00 2001
From: Naomi Calabretta <nyaomicalabretta@gmail.com>
Date: Tue, 7 May 2024 16:09:00 +0200
Subject: [PATCH] basic member view

---
 src/components/MemberInList.vue | 36 +++++++++++++++++++++++++++++++++
 src/views/tabbed/Members.vue    | 28 ++++++++++++++++++++++---
 translations/en/members.json    |  4 ++++
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src/components/MemberInList.vue
 create mode 100644 translations/en/members.json

diff --git a/src/components/MemberInList.vue b/src/components/MemberInList.vue
new file mode 100644
index 0000000..c0bc4da
--- /dev/null
+++ b/src/components/MemberInList.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+	import {
+		IonItemSliding,
+		IonItem,
+		IonAvatar,
+		IonLabel,
+		IonItemOptions,
+		IonItemOption
+	} from "@ionic/vue";
+
+	import { Member, getTable } from '../lib/db/entities/members';
+	import { getBlobURL } from '../lib/util/blob';
+
+	const { member } = defineProps<{
+		member: Member
+	}>();
+
+	async function removeFromDatabase() {
+		await getTable().delete(member.uuid);
+	}
+</script>
+
+<template>
+	<IonItemSliding :key="member.uuid">
+		<IonItem>
+			<IonAvatar slot="start" v-if="member.image">
+				<img aria-hidden="true" :src="getBlobURL(member.image)" />
+			</IonAvatar>
+			<IonLabel>{{ member.name }}</IonLabel>
+			<!-- TODO: Add tags as chips -> @mecha-cat -->
+		</IonItem>
+		<IonItemOptions>
+			<IonItemOption color="danger" @click="removeFromDatabase()">Delete</IonItemOption>
+		</IonItemOptions>
+	</IonItemSliding>
+</template>
\ No newline at end of file
diff --git a/src/views/tabbed/Members.vue b/src/views/tabbed/Members.vue
index 509c46f..567a29a 100644
--- a/src/views/tabbed/Members.vue
+++ b/src/views/tabbed/Members.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-	import { IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-	import { inject } from 'vue';
+	import { IonContent, IonHeader, IonLabel, IonList, IonPage, IonSearchbar, IonTitle, IonToolbar } from '@ionic/vue';
+	import { inject, ref } from 'vue';
+	import { getFilteredMembers } from '../../lib/db/liveQueries';
+	import MemberInList from '../../components/MemberInList.vue';
 
 	const isIOS = inject<boolean>("isIOS");
+
+	const search = ref("");
+	const members = getFilteredMembers(search);
 </script>
 
 <template>
@@ -10,14 +15,31 @@
 		<IonHeader>
 			<IonToolbar>
 				<IonTitle>
-					Members
+					{{ $t("members:header") }}
 				</IonTitle>
 			</IonToolbar>
+			<IonToolbar>
+				<IonSearchbar
+					:debounce="1000"
+					:animated="true"
+					:placeholder="$t('members:searchPlaceholder')"
+					showCancelButton="focus"
+					showClearButton="focus"
+					:spellcheck="false"
+					v-model="search"
+				/>
+			</IonToolbar>
 		</IonHeader>
 		
 		<IonContent>
 			<IonList :inset="isIOS">
 
+				<!-- FIXME: Remove this when modal is done -->
+				<IonLabel>
+					TODO: Member add/edit modal. If you want to test this view, add a member through Testing Grounds
+				</IonLabel>
+
+				<MemberInList v-for="member in members" :member />
 			</IonList>
 		</IonContent>
 	</IonPage>
diff --git a/translations/en/members.json b/translations/en/members.json
new file mode 100644
index 0000000..ff779fa
--- /dev/null
+++ b/translations/en/members.json
@@ -0,0 +1,4 @@
+{
+	"header": "Members",
+	"searchPlaceholder": "Search members..."
+}
\ No newline at end of file