fix: show dirty badge and update settings

frappe-ui

@@ -1 +1 @@
-Subproject commit 1eead791a7d5ed06363e0d04de9b1f5e15853b37
+Subproject commit 0c0212cc5bbac151cffc6dc73dfbdf7b69d45ec2

frontend/src/components/Settings/SettingsPage.vue

@@ -1,23 +1,37 @@
 <template>
   <div class="flex h-full flex-col gap-8">
-    <h2 class="text-xl font-semibold leading-none">
-      {{ __(doctype) }}
+    <h2 class="flex gap-2 text-xl font-semibold leading-none">
+      <div>{{ __(doctype) }}</div>
+      <Badge
+        :label="__('Not Saved')"
+        variant="subtle"
+        theme="orange"
+        v-if="data.isDirty"
+      />
     </h2>
-    <div class="flex-1 overflow-y-auto">
+    <div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
       <Fields
         v-if="data?.doc && sections"
         :sections="sections"
         :data="data.doc"
       />
     </div>
+    <div v-else class="flex flex-1 items-center justify-center">
+      <Spinner />
+    </div>
     <div class="flex flex-row-reverse">
-      <Button :label="__('Update')" variant="solid" />
+      <Button
+        :loading="data.save.loading"
+        :label="__('Update')"
+        variant="solid"
+        @click="update"
+      />
     </div>
   </div>
 </template>
 <script setup>
 import Fields from '@/components/Fields.vue'
-import { createDocumentResource, createResource } from 'frappe-ui'
+import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -76,4 +90,8 @@ const sections = computed(() => {
 
   return _sections
 })
+
+function update() {
+  data.save.submit()
+}
 </script>