Merge pull request #1191 from ruchamahabal/fix-realtime-updates

refactor(PWA): realtime updates, caching & invalidation

frontend/src/components/BaseLayout.vue

@@ -50,15 +50,13 @@
 
 <script setup>
 import { IonHeader, IonContent, IonPage } from "@ionic/vue"
-import { onMounted } from "vue"
 import { FeatherIcon, Avatar } from "frappe-ui"
 
 import { unreadNotificationsCount } from "@/data/notifications"
 
 import { inject } from "vue"
 
 const user = inject("$user")
-const socket = inject("$socket")
 
 const props = defineProps({
 	pageTitle: {
@@ -67,10 +65,4 @@ const props = defineProps({
 		default: "Frappe HR",
 	},
 })
-
-onMounted(() => {
-	socket.on("hrms:update_notifications", () => {
-		unreadNotificationsCount.reload()
-	})
-})
 </script>

frontend/src/components/ExpenseClaimSummary.vue

@@ -69,21 +69,12 @@
 </template>
 
 <script setup>
-import { FeatherIcon, createResource } from "frappe-ui"
-import { computed, inject, onMounted, onBeforeUnmount } from "vue"
+import { FeatherIcon } from "frappe-ui"
+import { computed } from "vue"
 
-import { formatCurrency } from "@/utils/formatters"
-
-const employee = inject("$employee")
-const socket = inject("$socket")
+import { expenseClaimSummary as summary } from "@/data/claims"
 
-const summary = createResource({
-	url: "hrms.api.get_expense_claim_summary",
-	params: {
-		employee: employee.data.name,
-	},
-	auto: true,
-})
+import { formatCurrency } from "@/utils/formatters"
 
 const total_claimed_amount = computed(() => {
 	return (
@@ -94,16 +85,4 @@ 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/LeaveBalance.vue

@@ -44,47 +44,13 @@
 </template>
 
 <script setup>
-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",
-	params: {
-		employee: employee.data.name,
-	},
-	auto: true,
-	transform: (data) => {
-		// Calculate balance percentage for each leave type
-		return Object.fromEntries(
-			Object.entries(data).map(([leave_type, allocation]) => {
-				allocation.balance_percentage =
-					(allocation.balance_leaves / allocation.allocated_leaves) * 100
-				return [leave_type, allocation]
-			})
-		)
-	},
-})
+import { leaveBalance } from "@/data/leaves"
 
 const getChartColor = (index) => {
 	// note: tw colors - rose-400, pink-400 & purple-500 of the old frappeui palette #918ef5
 	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>