From 22dc47d1bff792aa82670db8f1e4ccbcb86ff9b3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Dec 2024 15:55:17 +0530
Subject: [PATCH] fix: reload after updating settings

---
 .../components/Settings/GeneralSettings.vue   |  31 ++---
 .../components/Settings/InviteMemberPage.vue  | 114 +++++++++---------
 frontend/src/stores/settings.js               |  11 +-
 3 files changed, 85 insertions(+), 71 deletions(-)

diff --git a/frontend/src/components/Settings/GeneralSettings.vue b/frontend/src/components/Settings/GeneralSettings.vue
index b0155b25..f590310a 100644
--- a/frontend/src/components/Settings/GeneralSettings.vue
+++ b/frontend/src/components/Settings/GeneralSettings.vue
@@ -10,7 +10,7 @@
       />
     </h2>
 
-    <div v-if="settings.doc" class="flex-1 flex flex-col gap-6 overflow-y-auto">
+    <div v-if="settings.doc" class="flex-1 flex flex-col gap-8 overflow-y-auto">
       <div class="flex w-full">
         <FormControl
           type="text"
@@ -21,10 +21,9 @@
       </div>
 
       <!-- logo -->
-      <hr class="w-full border-outline-gray-2" />
 
-      <div class="flex flex-col justify-between gap-5">
-        <span class="text-lg font-semibold text-ink-gray-9">
+      <div class="flex flex-col justify-between gap-4">
+        <span class="text-base font-semibold text-ink-gray-9">
           {{ __('Logo') }}
         </span>
         <div class="flex flex-1 gap-5">
@@ -57,10 +56,9 @@
       </div>
 
       <!-- favicon -->
-      <hr class="w-full border-outline-gray-2" />
 
-      <div class="flex flex-col justify-between gap-5">
-        <span class="text-lg font-semibold text-ink-gray-9">
+      <div class="flex flex-col justify-between gap-4">
+        <span class="text-base font-semibold text-ink-gray-9">
           {{ __('Favicon') }}
         </span>
         <div class="flex flex-1 gap-5">
@@ -93,10 +91,9 @@
       </div>
 
       <!-- dropdown settings -->
-      <hr class="w-full border-outline-gray-2" />
 
-      <div class="flex flex-col justify-between gap-5">
-        <span class="text-lg font-semibold text-ink-gray-9">
+      <div class="flex flex-col justify-between gap-4">
+        <span class="text-base font-semibold text-ink-gray-9">
           {{ __('Dropdown settings') }}
         </span>
         <div class="flex flex-1">
@@ -107,10 +104,15 @@
           />
         </div>
       </div>
+    </div>
 
-      <div class="flex flex-row-reverse">
-        <Button :label="__('Save')" variant="solid" @click="updateSettings" />
-      </div>
+    <div class="flex flex-row-reverse">
+      <Button
+        variant="solid"
+        :label="__('Update')"
+        :disabled="!settings.isDirty"
+        @click="updateSettings"
+      />
     </div>
   </div>
 </template>
@@ -121,10 +123,11 @@ import { FormControl, Badge } from 'frappe-ui'
 import { getSettings } from '@/stores/settings'
 import { showSettings } from '@/composables/settings'
 
-const { _settings: settings } = getSettings()
+const { _settings: settings, setupBrand } = getSettings()
 
 function updateSettings() {
   settings.save.submit()
   showSettings.value = false
+  setupBrand()
 }
 </script>
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index 325dd8a2..5ce5d2bb 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -3,62 +3,68 @@
     <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
       {{ __('Send Invites To') }}
     </h2>
-    <div class="flex-1 overflow-y-auto">
-      <label class="block text-xs text-ink-gray-5 mb-1.5">
-        {{ __('Invite by email') }}
-      </label>
-      <MultiValueInput
-        v-model="invitees"
-        :validate="validateEmail"
-        :error-message="
-          (value) => __('{0} is an invalid email address', [value])
-        "
-      />
-      <FormControl
-        type="select"
-        class="mt-4"
-        v-model="role"
-        :label="__('Invite as')"
-        :options="[
-          { label: __('Regular Access'), value: 'Sales User' },
-          { label: __('Manager Access'), value: 'Sales Manager' },
-        ]"
-        :description="description"
-      />
-      <ErrorMessage class="mt-2" v-if="error" :message="error" />
+    <div class="flex-1 flex flex-col gap-8 overflow-y-auto">
+      <div>
+        <label class="block text-xs text-ink-gray-5 mb-1.5">
+          {{ __('Invite by email') }}
+        </label>
+        <MultiValueInput
+          v-model="invitees"
+          :validate="validateEmail"
+          :error-message="
+            (value) => __('{0} is an invalid email address', [value])
+          "
+        />
+        <FormControl
+          type="select"
+          class="mt-4"
+          v-model="role"
+          :label="__('Invite as')"
+          :options="[
+            { label: __('Regular Access'), value: 'Sales User' },
+            { label: __('Manager Access'), value: 'Sales Manager' },
+          ]"
+          :description="description"
+        />
+        <ErrorMessage class="mt-2" v-if="error" :message="error" />
+      </div>
       <template v-if="pendingInvitations.data?.length && !invitees.length">
-        <div
-          class="mt-6 flex items-center justify-between py-4 text-base font-semibold"
-        >
-          <div>{{ __('Pending Invites') }}</div>
-        </div>
-        <ul class="flex flex-col gap-1">
-          <li
-            class="flex items-center justify-between px-2 py-1 rounded-lg bg-surface-gray-2"
-            v-for="user in pendingInvitations.data"
-            :key="user.name"
+        <div class="flex flex-col gap-4">
+          <div
+            class="flex items-center justify-between text-base font-semibold"
           >
-            <div class="text-base">
-              <span class="text-ink-gray-9">
-                {{ user.email }}
-              </span>
-              <span class="text-ink-gray-5"> ({{ roleMap[user.role] }}) </span>
-            </div>
-            <div>
-              <Tooltip text="Delete Invitation">
-                <Button
-                  icon="x"
-                  variant="ghost"
-                  :loading="
-                    pendingInvitations.delete.loading &&
-                    pendingInvitations.delete.params.name === user.name
-                  "
-                  @click="pendingInvitations.delete.submit(user.name)"
-                />
-              </Tooltip>
-            </div>
-          </li>
-        </ul>
+            <div>{{ __('Pending Invites') }}</div>
+          </div>
+          <ul class="flex flex-col gap-1">
+            <li
+              class="flex items-center justify-between px-2 py-1 rounded-lg bg-surface-gray-2"
+              v-for="user in pendingInvitations.data"
+              :key="user.name"
+            >
+              <div class="text-base">
+                <span class="text-ink-gray-9">
+                  {{ user.email }}
+                </span>
+                <span class="text-ink-gray-5">
+                  ({{ roleMap[user.role] }})
+                </span>
+              </div>
+              <div>
+                <Tooltip text="Delete Invitation">
+                  <Button
+                    icon="x"
+                    variant="ghost"
+                    :loading="
+                      pendingInvitations.delete.loading &&
+                      pendingInvitations.delete.params.name === user.name
+                    "
+                    @click="pendingInvitations.delete.submit(user.name)"
+                  />
+                </Tooltip>
+              </div>
+            </li>
+          </ul>
+        </div>
       </template>
     </div>
     <div class="flex flex-row-reverse">
diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js
index 829a162e..99439587 100644
--- a/frontend/src/stores/settings.js
+++ b/frontend/src/stores/settings.js
@@ -10,16 +10,21 @@ export function getSettings() {
     name: 'FCRM Settings',
     onSuccess: (data) => {
       settings.value = data
-      brand.name = settings.value?.brand_name
-      brand.logo = settings.value?.brand_logo
-      brand.favicon = settings.value?.favicon
+      setupBrand()
       return data
     },
   })
 
+  function setupBrand() {
+    brand.name = settings.value?.brand_name
+    brand.logo = settings.value?.brand_logo
+    brand.favicon = settings.value?.favicon
+  }
+
   return {
     _settings,
     settings,
     brand,
+    setupBrand,
   }
 }