update member modal

NyaomiDEV · May 25, 2024 · b8cb3bf · b8cb3bf
1 parent 006cd57
commit b8cb3bf
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 90 deletions.
diff --git a/src/components/MemberInList.vue b/src/components/MemberInList.vue
@@ -5,14 +5,13 @@
 		IonAvatar,
 		IonLabel,
 		IonItemOptions,
-		IonItemOption,
-		modalController
+		IonItemOption
 	} from "@ionic/vue";
 
 	import { Member, getTable } from '../lib/db/entities/members';
 	import { getBlobURL } from '../lib/util/blob';
 	import MemberEdit from "../modals/MemberEdit.vue";
-	import { ref } from "vue";
+	import { provide, ref } from "vue";
 
 	const props = defineProps<{
 		member: Member,
@@ -21,32 +20,17 @@
 
 	const member = props.member;
 	const canDelete = props.canDelete;
+	const isOpen = ref(false);
+	provide("isOpen", isOpen);
 
 	async function removeFromDatabase() {
 		await getTable().delete(member.uuid);
 	}
-
-	async function showEditModal() {
-		const modal = ref<HTMLIonModalElement>();
-		modal.value = await modalController.create({
-			component: MemberEdit,
-			componentProps: {
-				self: modal,
-				member,
-				add: false,
-				edit: false
-			}
-		});
-
-		await modal.value.present();
-	}
-
-	console.log(member);
 </script>
 
 <template>
 	<IonItemSliding>
-		<IonItem button @click="showEditModal">
+		<IonItem button @click="isOpen = true">
 			<IonAvatar slot="start" v-if="member.image">
 				<img aria-hidden="true" :src="getBlobURL(member.image)" />
 			</IonAvatar>
@@ -60,4 +44,6 @@
 			<IonItemOption v-if="canDelete" color="danger" @click="removeFromDatabase()">Delete</IonItemOption>
 		</IonItemOptions>
 	</IonItemSliding>
+
+	<MemberEdit :add="false" :edit="false" :member="member" />
 </template>
diff --git a/src/modals/MemberEdit.vue b/src/modals/MemberEdit.vue
@@ -14,7 +14,8 @@
 		IonFabButton,
 		IonLabel,
 		IonItem,
-		modalController
+		modalController,
+		IonModal
 	} from "@ionic/vue";
 
 	import {
@@ -31,18 +32,16 @@
 	import { getBlobURL } from '../lib/util/blob';
 	import { getFiles } from "../lib/util/misc";
 	import { resizeImage } from "../lib/util/image";
-	import { Ref, inject, ref } from "vue";
+	import { Ref, inject, onMounted, ref } from "vue";
 	import { getMarkdownFor } from "../lib/markdown";
 
-
 	type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+	const isOpen = inject<Ref<boolean>>("isOpen");
 	const props = defineProps<{
-		self: Ref<HTMLIonModalElement>,
 		member?: PartialBy<Member, "uuid">,
 		add: boolean,
 		edit?: boolean
 	}>();
-
 	const isIOS = inject<boolean>("isIOS");
 	
 	const member = ref({
@@ -83,54 +82,56 @@
 </script>
 
 <template>
-	<IonHeader>
-		<IonToolbar>
-			<IonTitle>{{ props.add ? $t("members:edit.headerAdd") : $t("members:edit.headerEdit") }}</IonTitle>
-		</IonToolbar>
-	</IonHeader>
-
-	<IonContent>
-		<div class="avatar-container">
-			<IonAvatar>
-				<img aria-hidden="true" :src="member.image ? getBlobURL(member.image) : (isIOS ? personIOS : personMD)" />
-			</IonAvatar>
-			<IonButton shape="round" @click="modifyPicture" v-if="isEditing">
-				<IonIcon slot="icon-only" :ios="pencilIOS" :md="pencilMD" />
-			</IonButton>
-		</div>
-
-		<div class="member-info" v-if="!isEditing">
-			<h1>{{ member.name }}</h1>
-			<p>{{ member.pronouns }}</p>
-			<p>{{ member.role }}</p>
-		</div>
-
-		<div class="member-description" v-if="!isEditing">
-			<IonLabel>Description</IonLabel>
-			<div class="markdown-content" v-html="getMarkdownFor(member.description || '')"></div>
-		</div>
-
-		<IonList v-if="isEditing" :inset="true">
-				<IonItem lines="none">
-					<IonInput mode="md" fill="outline" :label="$t('members:edit.name')" labelPlacement="floating" v-model="member.name" />
-				</IonItem>
-				<IonItem lines="none">
-					<IonInput mode="md" fill="outline" :label="$t('members:edit.pronouns')" labelPlacement="floating" v-model="member.pronouns" />
-				</IonItem>
-				<IonItem lines="none">
-					<IonInput mode="md" fill="outline" :label="$t('members:edit.role')" labelPlacement="floating" v-model="member.role" />
-				</IonItem>
-				<IonItem lines="none">
-					<IonTextarea mode="md" fill="outline" auto-grow :label="$t('members:edit.description')" labelPlacement="floating" v-model="member.description" />
-				</IonItem>
-		</IonList>
-
-		<IonFab slot="fixed" vertical="bottom" horizontal="end">
-			<IonFabButton @click="toggleEditing" v-if="member.name.length > 0">
-				<IonIcon :ios="isEditing ? saveIOS : pencilIOS" :md="isEditing ? saveMD : pencilMD" />
-			</IonFabButton>
-		</IonFab>
-	</IonContent>
+	<IonModal :isOpen @didDismiss="isOpen = false">
+		<IonHeader>
+			<IonToolbar>
+				<IonTitle>{{ props.add ? $t("members:edit.headerAdd") : $t("members:edit.headerEdit") }}</IonTitle>
+			</IonToolbar>
+		</IonHeader>
+
+		<IonContent>
+			<div class="avatar-container">
+				<IonAvatar>
+					<img aria-hidden="true" :src="member.image ? getBlobURL(member.image) : (isIOS ? personIOS : personMD)" />
+				</IonAvatar>
+				<IonButton shape="round" @click="modifyPicture" v-if="isEditing">
+					<IonIcon slot="icon-only" :ios="pencilIOS" :md="pencilMD" />
+				</IonButton>
+			</div>
+
+			<div class="member-info" v-if="!isEditing">
+				<h1>{{ member.name }}</h1>
+				<p>{{ member.pronouns }}</p>
+				<p>{{ member.role }}</p>
+			</div>
+
+			<div class="member-description" v-if="!isEditing">
+				<IonLabel>{{ $t("members:edit.description") }}</IonLabel>
+				<div class="markdown-content" v-html="getMarkdownFor(member.description || $t('members:edit.noDescription'))"></div>
+			</div>
+
+			<IonList v-if="isEditing" :inset="true">
+					<IonItem lines="none">
+						<IonInput mode="md" fill="outline" :label="$t('members:edit.name')" labelPlacement="floating" v-model="member.name" />
+					</IonItem>
+					<IonItem lines="none">
+						<IonInput mode="md" fill="outline" :label="$t('members:edit.pronouns')" labelPlacement="floating" v-model="member.pronouns" />
+					</IonItem>
+					<IonItem lines="none">
+						<IonInput mode="md" fill="outline" :label="$t('members:edit.role')" labelPlacement="floating" v-model="member.role" />
+					</IonItem>
+					<IonItem lines="none">
+						<IonTextarea mode="md" fill="outline" auto-grow :label="$t('members:edit.description')" labelPlacement="floating" v-model="member.description" />
+					</IonItem>
+			</IonList>
+
+			<IonFab slot="fixed" vertical="bottom" horizontal="end">
+				<IonFabButton @click="toggleEditing" v-if="member.name.length > 0">
+					<IonIcon :ios="isEditing ? saveIOS : pencilIOS" :md="isEditing ? saveMD : pencilMD" />
+				</IonFabButton>
+			</IonFab>
+		</IonContent>
+	</IonModal>
 </template>
 
 <style scoped>

diff --git a/src/views/tabbed/Members.vue b/src/views/tabbed/Members.vue
@@ -7,12 +7,11 @@
 		IonSearchbar,
 		IonTitle,
 		IonToolbar,
-		modalController,
 		IonFab,
 		IonFabButton,
 		IonIcon
 	} from '@ionic/vue';
-	import { inject, ref } from 'vue';
+	import { inject, provide, ref } from 'vue';
 	import { getFilteredMembers } from '../../lib/db/liveQueries';
 	import { addOutline as addIOS } from "ionicons/icons";
 	import addMD from "@material-design-icons/svg/outlined/add.svg";
@@ -24,19 +23,8 @@
 	const search = ref("");
 	const members = getFilteredMembers(search);
 
-	async function addNew(){
-		const modal = ref<HTMLIonModalElement>();
-		modal.value = await modalController.create({
-			component: MemberEdit,
-			componentProps: {
-				add: true,
-				edit: true,
-				self: modal
-			}
-		});
-
-		await modal.value.present();
-	}
+	const isOpen = ref(false);
+	provide("isOpen", isOpen);
 </script>
 
 <template>
@@ -66,10 +54,12 @@
 			</IonList>
 
 			<IonFab slot="fixed" vertical="bottom" horizontal="end">
-				<IonFabButton @click="addNew">
+				<IonFabButton @click="isOpen = true">
 					<IonIcon :ios="addIOS" :md="addMD" />
 				</IonFabButton>
 			</IonFab>
 		</IonContent>
+
+		<MemberEdit :edit="true" :add="true" />
 	</IonPage>
 </template>
diff --git a/translations/en/members.json b/translations/en/members.json
@@ -9,6 +9,7 @@
 		"role": "Role",
 		"color": "Preferred color",
 		"description": "Description",
+		"noDescription": "No description",
 		"isArchived": "Archived?"
 	}
 }