refactor: add ForecastingSettings component and remove GeneralSettingsPage component

(cherry picked from commit f4ff6bbdf306a89b78aab82df972bf55e1e0d82d)

frontend/components.d.ts

@@ -127,11 +127,10 @@ declare module 'vue' {
     FileVideoIcon: typeof import('./src/components/Icons/FileVideoIcon.vue')['default']
     Filter: typeof import('./src/components/Filter.vue')['default']
     FilterIcon: typeof import('./src/components/Icons/FilterIcon.vue')['default']
+    ForecastingSettings: typeof import('./src/components/Settings/ForecastingSettings.vue')['default']
     FormattedInput: typeof import('./src/components/Controls/FormattedInput.vue')['default']
     FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
     GenderIcon: typeof import('./src/components/Icons/GenderIcon.vue')['default']
-    GeneralSettings: typeof import('./src/components/Settings/General/GeneralSettings.vue')['default']
-    GeneralSettingsPage: typeof import('./src/components/Settings/General/GeneralSettingsPage.vue')['default']
     GlobalModals: typeof import('./src/components/Modals/GlobalModals.vue')['default']
     GoogleIcon: typeof import('./src/components/Icons/GoogleIcon.vue')['default']
     Grid: typeof import('./src/components/Controls/Grid.vue')['default']

frontend/src/components/Settings/ForecastingSettings.vue

@@ -2,10 +2,10 @@
   <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
     <div class="flex flex-col gap-1">
       <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
-        {{ __('General') }}
+        {{ __('Forecasting') }}
       </h2>
       <p class="text-p-base text-ink-gray-6">
-        {{ __('Configure general settings for your CRM') }}
+        {{ __('Configure forecasting settings for your CRM') }}
       </p>
     </div>
 
@@ -35,28 +35,30 @@
         </div>
       </div>
       <div class="h-px border-t mx-2 border-outline-gray-modals" />
-      <template v-for="(setting, i) in settingsList" :key="setting.name">
+      <div
-        <li
+        class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
-          class="flex items-center justify-between p-3 cursor-pointer hover:bg-surface-menu-bar rounded"
+        @click="autoUpdateExpectedDealValue"
-          @click="() => emit('updateStep', setting.name)"
+      >
-        >
+        <div class="flex flex-col">
-          <div class="flex flex-col">
+          <div class="text-p-base font-medium text-ink-gray-7 truncate">
-            <div class="text-p-base font-medium text-ink-gray-7 truncate">
+            {{ __('Auto update expected deal value') }}
-              {{ __(setting.label) }}
-            </div>
-            <div class="text-p-sm text-ink-gray-5 truncate">
-              {{ __(setting.description) }}
-            </div>
           </div>
-          <div>
+          <div class="text-p-sm text-ink-gray-5 truncate">
-            <FeatherIcon name="chevron-right" class="text-ink-gray-7 size-4" />
+            {{
+              __(
+                'Automatically update "Expected Deal Value" based on the total value of associated products in a deal',
+              )
+            }}
           </div>
-        </li>
+        </div>
-        <div
+        <div>
-          v-if="settingsList.length !== i + 1"
+          <Switch
-          class="h-px border-t mx-2 border-outline-gray-modals"
+            size="sm"
-        />
+            v-model="settings.doc.auto_update_expected_deal_value"
-      </template>
+            @click.stop="autoUpdateExpectedDealValue"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -65,29 +67,8 @@
 import { getSettings } from '@/stores/settings'
 import { Switch, toast } from 'frappe-ui'
 
-const emit = defineEmits(['updateStep'])
-
 const { _settings: settings } = getSettings()
 
-const settingsList = [
-  {
-    name: 'currency-settings',
-    label: 'Currency & Exchange rate provider',
-    description:
-      'Configure the currency and exchange rate provider for your CRM',
-  },
-  {
-    name: 'brand-settings',
-    label: 'Brand settings',
-    description: 'Configure your brand name, logo and favicon',
-  },
-  {
-    name: 'home-actions',
-    label: 'Home actions',
-    description: 'Configure actions that appear on the home dropdown',
-  },
-]
-
 function toggleForecasting(value) {
   settings.doc.enable_forecasting =
     value !== undefined ? value : !settings.doc.enable_forecasting
@@ -102,4 +83,19 @@ function toggleForecasting(value) {
     },
   })
 }
+
+function autoUpdateExpectedDealValue() {
+  settings.doc.auto_update_expected_deal_value =
+    !settings.doc.auto_update_expected_deal_value
+
+  settings.save.submit(null, {
+    onSuccess: () => {
+      toast.success(
+        settings.doc.auto_update_expected_deal_value
+          ? __('Auto update of expected deal value enabled')
+          : __('Auto update of expected deal value disabled'),
+      )
+    },
+  })
+}
 </script>

frontend/src/components/Settings/General/GeneralSettingsPage.vue

@@ -1,34 +0,0 @@
-<template>
-  <component :is="getComponent(step)" :data="data" @updateStep="updateStep" />
-</template>
-
-<script setup>
-import GeneralSettings from './GeneralSettings.vue'
-import CurrencySettings from './CurrencySettings.vue'
-import BrandSettings from './BrandSettings.vue'
-import HomeActions from './HomeActions.vue'
-import { ref } from 'vue'
-
-const step = ref('general-settings')
-const data = ref(null)
-
-function updateStep(newStep, _data) {
-  step.value = newStep
-  data.value = _data
-}
-
-function getComponent(step) {
-  switch (step) {
-    case 'general-settings':
-      return GeneralSettings
-    case 'currency-settings':
-      return CurrencySettings
-    case 'brand-settings':
-      return BrandSettings
-    case 'home-actions':
-      return HomeActions
-    default:
-      return null
-  }
-}
-</script>