From 11a9bff57da2312e5993c800396a1abe50db0812 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 26 Sep 2024 12:58:00 +0530
Subject: [PATCH] fix: dirty form for branding section

---
 frontend/src/components/BrandSettings.vue | 24 ++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BrandSettings.vue b/frontend/src/components/BrandSettings.vue
index dc6cbe8b..881021b5 100644
--- a/frontend/src/components/BrandSettings.vue
+++ b/frontend/src/components/BrandSettings.vue
@@ -1,8 +1,16 @@
 <template>
 	<div class="flex flex-col justify-between h-full">
 		<div>
-			<div class="font-semibold mb-1">
-				{{ __(label) }}
+			<div class="flex items-center justify-between">
+				<div class="font-semibold mb-1">
+					{{ __(label) }}
+				</div>
+				<Badge
+					v-if="isDirty"
+					:label="__('Not Saved')"
+					variant="subtle"
+					theme="orange"
+				/>
 			</div>
 			<div class="text-xs text-gray-600">
 				{{ __(description) }}
@@ -17,8 +25,11 @@
 	</div>
 </template>
 <script setup>
-import { createResource, Button } from 'frappe-ui'
+import { createResource, Button, Badge } from 'frappe-ui'
 import SettingFields from '@/components/SettingFields.vue'
+import { watch, ref } from 'vue'
+
+const isDirty = ref(false)
 
 const props = defineProps({
 	fields: {
@@ -64,4 +75,11 @@ const update = () => {
 		fields: fieldsToSave,
 	})
 }
+
+watch(props.data, (newData) => {
+	console.log(newData)
+	if (newData && !isDirty.value) {
+		isDirty.value = true
+	}
+})
 </script>