basic member view

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>

src/views/tabbed/Members.vue

@@ -1,23 +1,45 @@
 <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>
 	<IonPage>
 		<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>

translations/en/members.json

@@ -0,0 +1,4 @@
+{
+	"header": "Members",
+	"searchPlaceholder": "Search members..."
+}