fix: conditional rendering for checkin ion-modal (#1678)

Author: ruchamahabal

frontend/src/components/CheckInPanel.vue

@@ -1,8 +1,6 @@
 <template>
 	<div class="flex flex-col bg-white rounded w-full py-6 px-4 border-none">
-		<h2 class="text-lg font-bold text-gray-900">
-			Hey, {{ employee?.data?.first_name }} 👋
-		</h2>
+		<h2 class="text-lg font-bold text-gray-900">Hey, {{ employee?.data?.first_name }} 👋</h2>
 
 		<template v-if="allowCheckinFromMobile.data">
 			<div class="font-medium text-sm text-gray-500 mt-1.5" v-if="lastLog">
@@ -15,48 +13,43 @@
 			>
 				<template #prefix>
 					<FeatherIcon
-						:name="
-							nextAction.action === 'IN'
-								? 'arrow-right-circle'
-								: 'arrow-left-circle'
-						"
+						:name="nextAction.action === 'IN' ? 'arrow-right-circle' : 'arrow-left-circle'"
 						class="w-4"
 					/>
 				</template>
 				{{ nextAction.label }}
 			</Button>
+
+			<ion-modal
+				ref="modal"
+				trigger="open-checkin-modal"
+				:initial-breakpoint="1"
+				:breakpoints="[0, 1]"
+			>
+				<div class="h-40 w-full flex flex-col items-center justify-center gap-5 p-4 mb-5">
+					<div class="flex flex-col gap-1.5 items-center justify-center">
+						<div class="font-bold text-xl">
+							{{ dayjs(checkinTimestamp).format("hh:mm:ss a") }}
+						</div>
+						<div class="font-medium text-gray-500 text-sm">
+							{{ dayjs().format("D MMM, YYYY") }}
+						</div>
+					</div>
+					<Button
+						variant="solid"
+						class="w-full py-5 text-sm"
+						@click="submitLog(nextAction.action)"
+					>
+						Confirm {{ nextAction.label }}
+					</Button>
+				</div>
+			</ion-modal>
 		</template>
+
 		<div v-else class="font-medium text-sm text-gray-500 mt-1.5">
 			{{ dayjs().format("ddd, D MMMM, YYYY") }}
 		</div>
 	</div>
-
-	<ion-modal
-		ref="modal"
-		trigger="open-checkin-modal"
-		:initial-breakpoint="1"
-		:breakpoints="[0, 1]"
-	>
-		<div
-			class="h-40 w-full flex flex-col items-center justify-center gap-5 p-4 mb-5"
-		>
-			<div class="flex flex-col gap-1.5 items-center justify-center">
-				<div class="font-bold text-xl">
-					{{ dayjs(checkinTimestamp).format("hh:mm:ss a") }}
-				</div>
-				<div class="font-medium text-gray-500 text-sm">
-					{{ dayjs().format("D MMM, YYYY") }}
-				</div>
-			</div>
-			<Button
-				variant="solid"
-				class="w-full py-5 text-sm"
-				@click="submitLog(nextAction.action)"
-			>
-				Confirm {{ nextAction.label }}
-			</Button>
-		</div>
-	</ion-modal>
 </template>
 
 <script setup>
@@ -74,14 +67,7 @@ const checkinTimestamp = ref(null)
 
 const checkins = createListResource({
 	doctype: DOCTYPE,
-	fields: [
-		"name",
-		"employee",
-		"employee_name",
-		"log_type",
-		"time",
-		"device_id",
-	],
+	fields: ["name", "employee", "employee_name", "log_type", "time", "device_id"],
 	filters: {
 		employee: employee.data.name,
 	},