Fix "Save Changes" button on main System Settings panel.
This commit is contained in:
Buster Neece
parent
11adef3ba0
commit
a6e8d56a17
|
|
@ -22,7 +22,7 @@
|
|||
{{ $gettext('Settings') }}
|
||||
</template>
|
||||
|
||||
<settings-general-tab :form="v$.form"></settings-general-tab>
|
||||
<settings-general-tab :form="v$"></settings-general-tab>
|
||||
</b-tab>
|
||||
|
||||
<b-tab :title-link-class="getTabClass(v$.$validationGroups.securityPrivacyTab)">
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
{{ $gettext('Security & Privacy') }}
|
||||
</template>
|
||||
|
||||
<settings-security-privacy-tab :form="v$.form"></settings-security-privacy-tab>
|
||||
<settings-security-privacy-tab :form="v$"></settings-security-privacy-tab>
|
||||
</b-tab>
|
||||
|
||||
<b-tab :title-link-class="getTabClass(v$.$validationGroups.servicesTab)">
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
{{ $gettext('Services') }}
|
||||
</template>
|
||||
|
||||
<settings-services-tab :form="v$.form"
|
||||
<settings-services-tab :form="v$"
|
||||
:release-channel="releaseChannel"
|
||||
:test-message-url="testMessageUrl"
|
||||
:acme-url="acmeUrl"></settings-services-tab>
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</b-overlay>
|
||||
|
||||
<b-card-body body-class="card-padding-sm">
|
||||
<b-button size="lg" type="submit" :variant="(v$.form.$invalid) ? 'danger' : 'primary'">
|
||||
<b-button size="lg" type="submit" :variant="(v$.$invalid) ? 'danger' : 'primary'">
|
||||
<slot name="submitButtonName">
|
||||
{{ $gettext('Save Changes') }}
|
||||
</slot>
|
||||
|
|
@ -57,159 +57,162 @@
|
|||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
<script setup>
|
||||
import {required} from '@vuelidate/validators';
|
||||
import SettingsGeneralTab from "./Settings/GeneralTab";
|
||||
import SettingsServicesTab from "./Settings/ServicesTab";
|
||||
import SettingsSecurityPrivacyTab from "~/components/Admin/Settings/SecurityPrivacyTab";
|
||||
import {onMounted, ref} from "vue";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
import mergeExisting from "~/functions/mergeExisting";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import gettext from "~/vendor/gettext";
|
||||
|
||||
export default {
|
||||
name: 'AdminSettings',
|
||||
components: {SettingsSecurityPrivacyTab, SettingsServicesTab, SettingsGeneralTab},
|
||||
setup() {
|
||||
return {v$: useVuelidate()}
|
||||
},
|
||||
emits: ['saved'],
|
||||
props: {
|
||||
apiUrl: String,
|
||||
testMessageUrl: String,
|
||||
acmeUrl: String,
|
||||
releaseChannel: {
|
||||
type: String,
|
||||
default: 'rolling',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
error: null,
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
form: {
|
||||
base_url: {required},
|
||||
instance_name: {},
|
||||
prefer_browser_url: {},
|
||||
use_radio_proxy: {},
|
||||
history_keep_days: {required},
|
||||
enable_static_nowplaying: {},
|
||||
enable_advanced_features: {},
|
||||
|
||||
analytics: {required},
|
||||
|
||||
always_use_ssl: {},
|
||||
api_access_control: {},
|
||||
|
||||
check_for_updates: {},
|
||||
acme_email: {},
|
||||
acme_domains: {},
|
||||
mail_enabled: {},
|
||||
mail_sender_name: {},
|
||||
mail_sender_email: {},
|
||||
mail_smtp_host: {},
|
||||
mail_smtp_port: {},
|
||||
mail_smtp_secure: {},
|
||||
mail_smtp_username: {},
|
||||
mail_smtp_password: {},
|
||||
avatar_service: {},
|
||||
avatar_default_url: {},
|
||||
use_external_album_art_in_apis: {},
|
||||
use_external_album_art_when_processing_media: {},
|
||||
last_fm_api_key: {}
|
||||
},
|
||||
$validationGroups: {
|
||||
generalTab: [
|
||||
'form.base_url', 'form.instance_name', 'form.prefer_browser_url', 'form.use_radio_proxy',
|
||||
'form.history_keep_days', 'form.enable_static_nowplaying', 'form.enable_advanced_features'
|
||||
],
|
||||
securityPrivacyTab: [
|
||||
'form.analytics', 'form.always_use_ssl', 'form.api_access_control'
|
||||
],
|
||||
servicesTab: [
|
||||
'form.check_for_updates',
|
||||
'form.acme_email', 'form.acme_domains',
|
||||
'form.mail_enabled', 'form.mail_sender_name', 'form.mail_sender_email',
|
||||
'form.mail_smtp_host', 'form.mail_smtp_port', 'form.mail_smtp_secure', 'form.mail_smtp_username',
|
||||
'form.mail_smtp_password', 'form.avatar_service', 'form.avatar_default_url',
|
||||
'form.use_external_album_art_in_apis', 'form.use_external_album_art_when_processing_media',
|
||||
'form.last_fm_api_key',
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.relist();
|
||||
},
|
||||
methods: {
|
||||
getTabClass(validationGroup) {
|
||||
if (!this.loading && validationGroup.$invalid) {
|
||||
return 'text-danger';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
relist() {
|
||||
this.v$.$reset();
|
||||
this.loading = true;
|
||||
|
||||
this.axios.get(this.apiUrl).then((resp) => {
|
||||
this.populateForm(resp.data);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
populateForm(data) {
|
||||
this.form = {
|
||||
base_url: data.base_url,
|
||||
instance_name: data.instance_name,
|
||||
prefer_browser_url: data.prefer_browser_url,
|
||||
use_radio_proxy: data.use_radio_proxy,
|
||||
history_keep_days: data.history_keep_days,
|
||||
enable_static_nowplaying: data.enable_static_nowplaying,
|
||||
enable_advanced_features: data.enable_advanced_features,
|
||||
|
||||
analytics: data.analytics,
|
||||
|
||||
always_use_ssl: data.always_use_ssl,
|
||||
api_access_control: data.api_access_control,
|
||||
|
||||
check_for_updates: data.check_for_updates,
|
||||
acme_email: data.acme_email,
|
||||
acme_domains: data.acme_domains,
|
||||
mail_enabled: data.mail_enabled,
|
||||
mail_sender_name: data.mail_sender_name,
|
||||
mail_sender_email: data.mail_sender_email,
|
||||
mail_smtp_host: data.mail_smtp_host,
|
||||
mail_smtp_port: data.mail_smtp_port,
|
||||
mail_smtp_secure: data.mail_smtp_secure,
|
||||
mail_smtp_username: data.mail_smtp_username,
|
||||
mail_smtp_password: data.mail_smtp_password,
|
||||
avatar_service: data.avatar_service,
|
||||
avatar_default_url: data.avatar_default_url,
|
||||
use_external_album_art_in_apis: data.use_external_album_art_in_apis,
|
||||
use_external_album_art_when_processing_media: data.use_external_album_art_when_processing_media,
|
||||
last_fm_api_key: data.last_fm_api_key
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
this.v$.$touch();
|
||||
if (this.v$.$errors.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$wrapWithLoading(
|
||||
this.axios({
|
||||
method: 'PUT',
|
||||
url: this.apiUrl,
|
||||
data: this.form
|
||||
})
|
||||
).then(() => {
|
||||
this.$emit('saved');
|
||||
|
||||
this.$notifySuccess(this.$gettext('Changes saved.'));
|
||||
this.relist();
|
||||
});
|
||||
}
|
||||
const props = defineProps({
|
||||
apiUrl: String,
|
||||
testMessageUrl: String,
|
||||
acmeUrl: String,
|
||||
releaseChannel: {
|
||||
type: String,
|
||||
default: 'rolling',
|
||||
required: false
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['saved']);
|
||||
|
||||
const blankForm = {
|
||||
base_url: '',
|
||||
instance_name: '',
|
||||
prefer_browser_url: true,
|
||||
use_radio_proxy: true,
|
||||
history_keep_days: 7,
|
||||
enable_static_nowplaying: true,
|
||||
enable_advanced_features: true,
|
||||
analytics: null,
|
||||
always_use_ssl: false,
|
||||
api_access_control: '*',
|
||||
check_for_updates: 1,
|
||||
acme_email: '',
|
||||
acme_domains: '',
|
||||
mail_enabled: false,
|
||||
mail_sender_name: '',
|
||||
mail_sender_email: '',
|
||||
mail_smtp_host: '',
|
||||
mail_smtp_port: '',
|
||||
mail_smtp_secure: '',
|
||||
mail_smtp_username: '',
|
||||
mail_smtp_password: '',
|
||||
avatar_service: 'gravatar',
|
||||
avatar_default_url: '',
|
||||
use_external_album_art_in_apis: false,
|
||||
use_external_album_art_when_processing_media: false,
|
||||
last_fm_api_key: ''
|
||||
};
|
||||
|
||||
const form = ref({...blankForm});
|
||||
|
||||
const validations = {
|
||||
base_url: {required},
|
||||
instance_name: {},
|
||||
prefer_browser_url: {},
|
||||
use_radio_proxy: {},
|
||||
history_keep_days: {required},
|
||||
enable_static_nowplaying: {},
|
||||
enable_advanced_features: {},
|
||||
|
||||
analytics: {required},
|
||||
|
||||
always_use_ssl: {},
|
||||
api_access_control: {},
|
||||
|
||||
check_for_updates: {},
|
||||
acme_email: {},
|
||||
acme_domains: {},
|
||||
mail_enabled: {},
|
||||
mail_sender_name: {},
|
||||
mail_sender_email: {},
|
||||
mail_smtp_host: {},
|
||||
mail_smtp_port: {},
|
||||
mail_smtp_secure: {},
|
||||
mail_smtp_username: {},
|
||||
mail_smtp_password: {},
|
||||
avatar_service: {},
|
||||
avatar_default_url: {},
|
||||
use_external_album_art_in_apis: {},
|
||||
use_external_album_art_when_processing_media: {},
|
||||
last_fm_api_key: {},
|
||||
$validationGroups: {
|
||||
generalTab: [
|
||||
'base_url', 'instance_name', 'prefer_browser_url', 'use_radio_proxy',
|
||||
'history_keep_days', 'enable_static_nowplaying', 'enable_advanced_features'
|
||||
],
|
||||
securityPrivacyTab: [
|
||||
'analytics', 'always_use_ssl', 'api_access_control'
|
||||
],
|
||||
servicesTab: [
|
||||
'check_for_updates',
|
||||
'acme_email', 'acme_domains',
|
||||
'mail_enabled', 'mail_sender_name', 'mail_sender_email',
|
||||
'mail_smtp_host', 'mail_smtp_port', 'mail_smtp_secure', 'mail_smtp_username',
|
||||
'mail_smtp_password', 'avatar_service', 'avatar_default_url',
|
||||
'use_external_album_art_in_apis', 'use_external_album_art_when_processing_media',
|
||||
'last_fm_api_key',
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validations, form);
|
||||
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
const getTabClass = (validationGroup) => {
|
||||
if (!loading.value && validationGroup.$invalid) {
|
||||
return 'text-danger';
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const {axios} = useAxios();
|
||||
|
||||
const populateForm = (data) => {
|
||||
form.value = mergeExisting(form.value, data);
|
||||
};
|
||||
|
||||
const relist = () => {
|
||||
v$.value.$reset();
|
||||
loading.value = true;
|
||||
|
||||
axios.get(props.apiUrl).then((resp) => {
|
||||
populateForm(resp.data);
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(relist);
|
||||
|
||||
const {wrapWithLoading, notifySuccess} = useNotify();
|
||||
const {$gettext} = gettext;
|
||||
|
||||
const submit = () => {
|
||||
v$.value.$touch();
|
||||
if (v$.value.$errors.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrapWithLoading(
|
||||
axios({
|
||||
method: 'PUT',
|
||||
url: props.apiUrl,
|
||||
data: form.value
|
||||
})
|
||||
).then(() => {
|
||||
emit('saved');
|
||||
|
||||
notifySuccess($gettext('Changes saved.'));
|
||||
relist();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const validations = {
|
|||
emailAddress: {required, email}
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validations, form);
|
||||
const v$ = useVuelidate(validations, form, {$stopPropagation: true});
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {...blankForm};
|
||||
|
|
|
|||
Loading…
Reference in New Issue