diff --git a/frontend/vue/components/Admin/Permissions/EditModal.vue b/frontend/vue/components/Admin/Permissions/EditModal.vue
index a731504b7..88e11dd0a 100644
--- a/frontend/vue/components/Admin/Permissions/EditModal.vue
+++ b/frontend/vue/components/Admin/Permissions/EditModal.vue
@@ -99,8 +99,10 @@ const {
}
};
},
- getSubmittableFormData(formValue) {
- let form = {
+ getSubmittableFormData(formRef) {
+ const formValue = formRef.value;
+
+ let formReturn = {
name: formValue.name,
permissions: {
global: formValue.permissions.global,
@@ -109,10 +111,10 @@ const {
};
forEach(formValue.permissions.station, (row) => {
- form.permissions.station[row.station_id] = row.permissions;
+ formReturn.permissions.station[row.station_id] = row.permissions;
});
- return form;
+ return formReturn;
},
}
);
diff --git a/frontend/vue/components/Admin/StorageLocations/EditModal.vue b/frontend/vue/components/Admin/StorageLocations/EditModal.vue
index 7936c1f91..4db9fe4c0 100644
--- a/frontend/vue/components/Admin/StorageLocations/EditModal.vue
+++ b/frontend/vue/components/Admin/StorageLocations/EditModal.vue
@@ -1,6 +1,6 @@
-
diff --git a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
index bba11e95f..97596e70a 100644
--- a/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
+++ b/frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue
@@ -146,8 +146,8 @@ const {
publish_time: publishTime
});
},
- getSubmittableFormData: (formValue) => {
- let modifiedForm = formValue;
+ getSubmittableFormData: (formRef) => {
+ let modifiedForm = formRef.value;
if (modifiedForm.publish_date.length > 0 && modifiedForm.publish_time.length > 0) {
let publishDateTimeString = modifiedForm.publish_date + 'T' + modifiedForm.publish_time;
diff --git a/frontend/vue/components/Stations/SftpUsers/EditModal.vue b/frontend/vue/components/Stations/SftpUsers/EditModal.vue
index 31b74169e..7c5e149e5 100644
--- a/frontend/vue/components/Stations/SftpUsers/EditModal.vue
+++ b/frontend/vue/components/Stations/SftpUsers/EditModal.vue
@@ -45,7 +45,7 @@ const {
props,
emit,
$modal,
- (formIsEditMode) => computed(() => {
+ (formRef, formIsEditMode) => computed(() => {
return {
username: {required},
password: formIsEditMode.value ? {} : {required},
diff --git a/frontend/vue/components/Stations/Streamers/EditModal.vue b/frontend/vue/components/Stations/Streamers/EditModal.vue
index c72b0ec0d..be1bb17b1 100644
--- a/frontend/vue/components/Stations/Streamers/EditModal.vue
+++ b/frontend/vue/components/Stations/Streamers/EditModal.vue
@@ -76,7 +76,7 @@ const {
props,
emit,
$modal,
- (formIsEditMode) => computed(() => {
+ (formRef, formIsEditMode) => computed(() => {
return {
'streamer_username': {required},
'streamer_password': (formIsEditMode.value) ? {} : {required},
diff --git a/frontend/vue/functions/useBaseEditModal.js b/frontend/vue/functions/useBaseEditModal.js
index 176cae3d6..7c64e6e00 100644
--- a/frontend/vue/functions/useBaseEditModal.js
+++ b/frontend/vue/functions/useBaseEditModal.js
@@ -1,8 +1,9 @@
import {computed, ref, toRef} from "vue";
-import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
import mergeExisting from "~/functions/mergeExisting";
import {useNotify} from "~/vendor/bootstrapVue";
import {useAxios} from "~/vendor/axios";
+import {useResettableRef} from "~/functions/useResettableRef";
+import useVuelidate from "@vuelidate/core";
export const baseEditModalProps = {
createUrl: {
@@ -40,15 +41,17 @@ export function useBaseEditModal(
return editUrl.value !== null;
});
- const validations = (typeof originalValidations === 'function')
- ? originalValidations(isEditMode)
- : originalValidations;
-
const blankForm = (typeof originalBlankForm === 'function')
? originalBlankForm(isEditMode)
: originalBlankForm;
- const {form, v$, resetForm: originalResetForm, ifValid} = useVuelidateOnForm(validations, blankForm);
+ const {record: form, reset: originalResetForm} = useResettableRef(blankForm);
+
+ const validations = (typeof originalValidations === 'function')
+ ? originalValidations(form, isEditMode)
+ : originalValidations;
+
+ const v$ = useVuelidate(validations, form);
const resetForm = () => {
if (typeof options.resetForm === 'function') {
@@ -109,7 +112,7 @@ export function useBaseEditModal(
const getSubmittableFormData = () => {
if (typeof options.getSubmittableFormData === 'function') {
- return options.getSubmittableFormData(form.value);
+ return options.getSubmittableFormData(form, isEditMode);
}
return form.value;
@@ -154,7 +157,12 @@ export function useBaseEditModal(
};
const doSubmit = () => {
- ifValid(() => {
+ v$.value.$touch();
+ v$.value.$validate().then((isValid) => {
+ if (!isValid) {
+ return;
+ }
+
error.value = null;
wrapWithLoading(