perf(PWA): infinite scroll for list views + other fixes (backport #1095)

frontend/src/components/CheckInPanel.vue

@@ -55,15 +55,18 @@
 
 <script setup>
 import { createListResource, toast, FeatherIcon } from "frappe-ui"
-import { computed, inject, ref } from "vue"
+import { computed, inject, ref, onMounted, onBeforeUnmount } from "vue"
 import { IonModal, modalController } from "@ionic/vue"
 
+const DOCTYPE = "Employee Checkin"
+
+const socket = inject("$socket")
 const employee = inject("$employee")
 const dayjs = inject("$dayjs")
 const checkinTimestamp = ref(null)
 
 const checkins = createListResource({
-	doctype: "Employee Checkin",
+	doctype: DOCTYPE,
 	fields: [
 		"name",
 		"employee",
@@ -138,4 +141,18 @@ const submitLog = (logType) => {
 		}
 	)
 }
+
+onMounted(() => {
+	socket.emit("doctype_subscribe", DOCTYPE)
+	socket.on("list_update", (data) => {
+		if (data.doctype == DOCTYPE) {
+			checkins.reload()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	socket.emit("doctype_unsubscribe", DOCTYPE)
+	socket.off("list_update")
+})
 </script>

frontend/src/components/ExpenseClaimSummary.vue

@@ -70,11 +70,12 @@
 
 <script setup>
 import { FeatherIcon, createResource } from "frappe-ui"
-import { computed, inject } from "vue"
+import { computed, inject, onMounted, onBeforeUnmount } from "vue"
 
 import { formatCurrency } from "@/utils/formatters"
 
 const employee = inject("$employee")
+const socket = inject("$socket")
 
 const summary = createResource({
 	url: "hrms.api.get_expense_claim_summary",
@@ -93,4 +94,16 @@ const total_claimed_amount = computed(() => {
 })
 
 const company_currency = computed(() => summary.data?.currency)
+
+onMounted(() => {
+	socket.on("hrms:update_expense_claims", (data) => {
+		if (data.employee === employee.data.name) {
+			summary.reload()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	socket.off("hrms:update_expense_claims")
+})
 </script>

frontend/src/components/FormField.vue

@@ -206,7 +206,7 @@ const linkFieldList = createResource({
 		return data.map((doc) => {
 			const title = doc?.description?.split(",")?.[0]
 			return {
-				label: title ? `${title} : ${doc.value}`: doc.value,
+				label: title ? `${title} : ${doc.value}` : doc.value,
 				value: doc.value,
 			}
 		})

frontend/src/components/Holidays.vue

@@ -3,7 +3,7 @@
 		<div class="flex flex-row justify-between items-center">
 			<div class="text-lg text-gray-800 font-bold">Upcoming Holidays</div>
 			<div
-				v-if="upcomingHolidays?.length"
+				v-if="holidays?.data?.length"
 				id="open-holiday-list"
 				class="text-sm text-gray-800 font-semibold cursor-pointer underline underline-offset-2"
 			>
@@ -34,7 +34,7 @@
 
 	<ion-modal
 		ref="modal"
-		v-if="upcomingHolidays?.length"
+		v-if="holidays?.data?.length"
 		trigger="open-holiday-list"
 		:initial-breakpoint="1"
 		:breakpoints="[0, 1]"
@@ -55,7 +55,12 @@
 							{{ holiday.description }}
 						</div>
 					</div>
-					<div class="text-base font-bold text-gray-800">
+					<div
+						:class="[
+							'text-base font-bold',
+							holiday.is_upcoming ? 'text-gray-800' : 'text-gray-500',
+						]"
+					>
 						{{ holiday.formatted_holiday_date }}
 					</div>
 				</div>
@@ -80,18 +85,18 @@ const holidays = createResource({
 	auto: true,
 	transform: (data) => {
 		return data.map((holiday) => {
-			holiday.formatted_holiday_date = dayjs(holiday.holiday_date).format(
-				"D MMM YYYY"
-			)
+			const holidayDate = dayjs(holiday.holiday_date)
+			holiday.is_upcoming = holidayDate.isAfter(dayjs())
+			holiday.formatted_holiday_date = holidayDate.format("ddd, D MMM YYYY")
 			return holiday
 		})
 	},
 })
 
 const upcomingHolidays = computed(() => {
-	const filteredHolidays = holidays.data?.filter((holiday) => {
-		return dayjs(holiday.holiday_date).isAfter(dayjs())
-	})
+	const filteredHolidays = holidays.data?.filter(
+		(holiday) => holiday.is_upcoming
+	)
 
 	// show only 5 upcoming holidays
 	return filteredHolidays?.slice(0, 5)

frontend/src/components/LeaveBalance.vue

@@ -44,12 +44,13 @@
 </template>
 
 <script setup>
-import { inject } from "vue"
+import { inject, onMounted, onBeforeUnmount } from "vue"
 import { createResource } from "frappe-ui"
 
 import SemicircleChart from "@/components/SemicircleChart.vue"
 
 const employee = inject("$employee")
+const socket = inject("$socket")
 
 const leaveBalance = createResource({
 	url: "hrms.api.get_leave_balance_map",
@@ -74,4 +75,16 @@ const getChartColor = (index) => {
 	const chartColors = ["text-[#fb7185]", "text-[#f472b6]", "text-[#918ef5]"]
 	return chartColors[index % chartColors.length]
 }
+
+onMounted(() => {
+	socket.on("hrms:update_leaves", (data) => {
+		if (data.employee === employee.data.name) {
+			leaveBalance.reload()
+		}
+	})
+})
+
+onBeforeUnmount(() => {
+	socket.off("hrms:update_leaves")
+})
 </script>