refactor(web): admin settings (#6177)

* refactor admin settings

* use slots to render buttons in simplified template settings

* remove more boilerplate by looping over components

* fix: onboarding

* fix: reset/reset to default

* remove lodash since it is unecessary

* chore: standardize padding and margins

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
-  import {
-    notificationController,
-    NotificationType,
-  } from '$lib/components/shared-components/notification/notification';
-  import { api, JobName, SystemConfigJobDto } from '@api';
+  import { api, JobName, SystemConfigDto } from '@api';
   import { isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
-  import { handleError } from '../../../../utils/handle-error';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
-  import type { ResetOptions } from '$lib/utils/dipatch';
+  import { createEventDispatcher } from 'svelte';
+  import type { SettingsEventType } from '../admin-settings';
 
-  export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
+  export let savedConfig: SystemConfigDto;
+  export let defaultConfig: SystemConfigDto;
+  export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
 
-  let savedConfig: SystemConfigJobDto;
-  let defaultConfig: SystemConfigJobDto;
+  const dispatch = createEventDispatcher<SettingsEventType>();
 
   const jobNames = [
     JobName.ThumbnailGeneration,
@@ -27,94 +24,33 @@
     JobName.VideoConversion,
     JobName.Migration,
   ];
-
-  const handleReset = (detail: ResetOptions) => {
-    if (detail.default) {
-      resetToDefault();
-    } else {
-      reset();
-    }
-  };
-
-  async function getConfigs() {
-    [savedConfig, defaultConfig] = await Promise.all([
-      api.systemConfigApi.getConfig().then((res) => res.data.job),
-      api.systemConfigApi.getConfigDefaults().then((res) => res.data.job),
-    ]);
-  }
-
-  async function saveSetting() {
-    try {
-      const { data: configs } = await api.systemConfigApi.getConfig();
-
-      const result = await api.systemConfigApi.updateConfig({
-        systemConfigDto: {
-          ...configs,
-          job: jobConfig,
-        },
-      });
-
-      jobConfig = { ...result.data.job };
-      savedConfig = { ...result.data.job };
-
-      notificationController.show({ message: 'Job settings saved', type: NotificationType.Info });
-    } catch (error) {
-      handleError(error, 'Unable to save settings');
-    }
-  }
-
-  async function reset() {
-    const { data: resetConfig } = await api.systemConfigApi.getConfig();
-
-    jobConfig = { ...resetConfig.job };
-    savedConfig = { ...resetConfig.job };
-
-    notificationController.show({
-      message: 'Reset Job settings to the recent saved settings',
-      type: NotificationType.Info,
-    });
-  }
-
-  async function resetToDefault() {
-    const { data: configs } = await api.systemConfigApi.getConfigDefaults();
-
-    jobConfig = { ...configs.job };
-    defaultConfig = { ...configs.job };
-
-    notificationController.show({
-      message: 'Reset Job settings to default',
-      type: NotificationType.Info,
-    });
-  }
 </script>
 
 <div>
-  {#await getConfigs() then}
-    <div in:fade={{ duration: 500 }}>
-      <form autocomplete="off" on:submit|preventDefault>
-        {#each jobNames as jobName}
-          <div class="ml-4 mt-4 flex flex-col gap-4">
-            <SettingInputField
-              inputType={SettingInputFieldType.NUMBER}
-              {disabled}
-              label="{api.getJobName(jobName)} Concurrency"
-              desc=""
-              bind:value={jobConfig[jobName].concurrency}
-              required={true}
-              isEdited={!(jobConfig[jobName].concurrency == savedConfig[jobName].concurrency)}
-            />
-          </div>
-        {/each}
-
-        <div class="ml-4">
-          <SettingButtonsRow
-            on:reset={({ detail }) => handleReset(detail)}
-            on:save={saveSetting}
-            showResetToDefault={!isEqual(savedConfig, defaultConfig)}
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      {#each jobNames as jobName}
+        <div class="ml-4 mt-4 flex flex-col gap-4">
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
             {disabled}
+            label="{api.getJobName(jobName)} Concurrency"
+            desc=""
+            bind:value={config.job[jobName].concurrency}
+            required={true}
+            isEdited={!(config.job[jobName].concurrency == savedConfig.job[jobName].concurrency)}
           />
         </div>
-      </form>
-    </div>
-  {/await}
+      {/each}
+
+      <div class="ml-4">
+        <SettingButtonsRow
+          on:reset={({ detail }) => dispatch('reset', { ...detail, configKeys: ['job'] })}
+          on:save={() => dispatch('save', { job: config.job })}
+          showResetToDefault={!isEqual(savedConfig.job, defaultConfig.job)}
+          {disabled}
+        />
+      </div>
+    </form>
+  </div>
 </div>