/
settings.vue
96 lines (83 loc) · 2.56 KB
/
settings.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
<div class="flex flex-col">
<h1 class="text-lg font-bold text-secondaryDark">
{{ t('settings.settings') }}
</h1>
</div>
<div
v-if="fetchingInfraConfigs || fetchingAllowedAuthProviders"
class="flex justify-center"
>
<HoppSmartSpinner />
</div>
<div v-else-if="infraConfigsError || allowedAuthProvidersError">
{{ t('configs.load_error') }}
</div>
<div v-else-if="workingConfigs" class="flex flex-col py-8">
<HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
<HoppSmartTab :id="'config'" :label="t('configs.title')">
<SettingsConfigurations
v-model:config="workingConfigs"
class="py-8 px-4"
/>
</HoppSmartTab>
</HoppSmartTabs>
</div>
<div v-if="isConfigUpdated" class="fixed bottom-0 right-0 m-10">
<HoppButtonPrimary
:label="t('configs.save_changes')"
@click="showSaveChangesModal = !showSaveChangesModal"
/>
</div>
<SettingsServerRestart
v-if="initiateServerRestart"
:workingConfigs="workingConfigs"
/>
<HoppSmartConfirmModal
:show="showSaveChangesModal"
:title="t('configs.confirm_changes')"
@hide-modal="showSaveChangesModal = false"
@resolve="restartServer"
/>
</template>
<script setup lang="ts">
import { isEqual } from 'lodash-es';
import { computed, ref } from 'vue';
import { useI18n } from '~/composables/i18n';
import { useToast } from '~/composables/toast';
import { useConfigHandler } from '~/composables/useConfigHandler';
const t = useI18n();
const toast = useToast();
const showSaveChangesModal = ref(false);
const initiateServerRestart = ref(false);
// Tabs
type OptionTabs = 'config';
const selectedOptionTab = ref<OptionTabs>('config');
// Obtain the current and working configs from the useConfigHandler composable
const {
currentConfigs,
workingConfigs,
fetchingInfraConfigs,
infraConfigsError,
fetchingAllowedAuthProviders,
allowedAuthProvidersError,
AreAnyConfigFieldsEmpty,
} = useConfigHandler();
// Check if the configs have been updated
const isConfigUpdated = computed(() =>
currentConfigs.value && workingConfigs.value
? !isEqual(currentConfigs.value, workingConfigs.value)
: false
);
// Check if any of the fields in workingConfigs are empty
const areAnyFieldsEmpty = computed(() =>
workingConfigs.value ? AreAnyConfigFieldsEmpty(workingConfigs.value) : false
);
const restartServer = () => {
if (areAnyFieldsEmpty.value) {
return toast.error(t('configs.input_empty'));
}
initiateServerRestart.value = true;
showSaveChangesModal.value = false;
};
</script>