From ec6b5dee8e478958f995c30af59efa2d90159de3 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Sun, 19 Jan 2025 06:09:14 -0600
Subject: [PATCH] More TS work. Actually making progress, I swear!

---
 .../Admin/CustomFields/EditModal.vue          | 16 +++------
 .../components/Admin/CustomFields/Form.vue    | 35 +++++++++++++++----
 frontend/components/Admin/Users/EditModal.vue | 25 ++++++++-----
 .../components/Public/WebDJ/PlaylistPanel.vue |  2 +-
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/frontend/components/Admin/CustomFields/EditModal.vue b/frontend/components/Admin/CustomFields/EditModal.vue
index f320778695..574f2dc32d 100644
--- a/frontend/components/Admin/CustomFields/EditModal.vue
+++ b/frontend/components/Admin/CustomFields/EditModal.vue
@@ -9,14 +9,13 @@
         @hidden="clearContents"
     >
         <admin-custom-fields-form
-            :form="v$"
+            v-model:form="form"
             :auto-assign-types="autoAssignTypes"
         />
     </modal-form>
 </template>
 
 <script setup lang="ts">
-import {required} from '@vuelidate/validators';
 import ModalForm from "~/components/Common/ModalForm.vue";
 import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form.vue";
 import {computed, ref} from "vue";
@@ -41,6 +40,7 @@ const {
     loading,
     error,
     isEditMode,
+    form,
     v$,
     clearContents,
     create,
@@ -51,16 +51,8 @@ const {
     props,
     emit,
     $modal,
-    {
-        'name': {required},
-        'short_name': {},
-        'auto_assign': {}
-    },
-    {
-        'name': '',
-        'short_name': '',
-        'auto_assign': ''
-    },
+    {},
+    {},
 );
 
 const {$gettext} = useTranslate();
diff --git a/frontend/components/Admin/CustomFields/Form.vue b/frontend/components/Admin/CustomFields/Form.vue
index 1cabfb50e6..831af4f64d 100644
--- a/frontend/components/Admin/CustomFields/Form.vue
+++ b/frontend/components/Admin/CustomFields/Form.vue
@@ -3,7 +3,7 @@
         <form-group-field
             id="edit_form_name"
             class="col-md-6"
-            :field="form.name"
+            :field="v$.name"
             :label="$gettext('Field Name')"
             :description="$gettext('This will be used as the label when editing individual songs, and will show in API results.')"
         />
@@ -11,7 +11,7 @@
         <form-group-field
             id="edit_form_short_name"
             class="col-md-6"
-            :field="form.short_name"
+            :field="v$.short_name"
             :label="$gettext('Programmatic Name')"
         >
             <template #description>
@@ -24,7 +24,7 @@
         <form-group-select
             id="edit_form_auto_assign"
             class="col-md-6"
-            :field="form.auto_assign"
+            :field="v$.auto_assign"
             :label="$gettext('Automatically Set from ID3v2 Value')"
             :options="autoAssignOptions"
             :description="$gettext('Optionally select an ID3v2 metadata field that, if present, will be used to set this field\'s value.')"
@@ -38,12 +38,33 @@ import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import {forEach} from "lodash";
 import FormGroupSelect from "~/components/Form/FormGroupSelect.vue";
-import {VuelidateRef} from "~/functions/useVuelidateOnForm.ts";
+import {required} from "@vuelidate/validators";
+import {FormTabEmits, FormTabProps, useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab.ts";
 
-const props = defineProps<{
-    form: VuelidateRef,
+interface CustomFieldsProps extends FormTabProps {
     autoAssignTypes: Record<string, string>
-}>();
+}
+
+const props = defineProps<CustomFieldsProps>();
+
+const emit = defineEmits<FormTabEmits>();
+
+const {
+    v$
+} = useVuelidateOnFormTab(
+    props,
+    emit,
+    {
+        'name': {required},
+        'short_name': {},
+        'auto_assign': {}
+    },
+    {
+        'name': '',
+        'short_name': '',
+        'auto_assign': ''
+    }
+)
 
 const {$gettext} = useTranslate();
 
diff --git a/frontend/components/Admin/Users/EditModal.vue b/frontend/components/Admin/Users/EditModal.vue
index 17ef04afd8..0fb7ab97f1 100644
--- a/frontend/components/Admin/Users/EditModal.vue
+++ b/frontend/components/Admin/Users/EditModal.vue
@@ -28,6 +28,7 @@ import {
 } from "~/functions/useBaseEditModal";
 import {useTranslate} from "~/vendor/gettext";
 import ModalForm from "~/components/Common/ModalForm.vue";
+import mergeExisting from "~/functions/mergeExisting.ts";
 
 interface UsersEditModalProps extends BaseEditModalProps {
     roles: Record<number, string>
@@ -53,16 +54,24 @@ const {
     props,
     emit,
     $modal,
-    {},
-    {},
+    {
+        roles: {},
+        new_password: {}
+    },
+    {
+        roles: [],
+        new_password: null
+    },
     {
         populateForm: (data, formRef) => {
-            formRef.value = {
-                name: data.name,
-                email: data.email,
-                new_password: '',
-                roles: map(data.roles, 'id')
-            };
+            formRef.value = mergeExisting(
+                formRef.value,
+                {
+                    ...data,
+                    roles: map(data.roles, 'id'),
+                    new_password: ''
+                }
+            );
         },
     }
 );
diff --git a/frontend/components/Public/WebDJ/PlaylistPanel.vue b/frontend/components/Public/WebDJ/PlaylistPanel.vue
index b01bf0191f..f1a868aa23 100644
--- a/frontend/components/Public/WebDJ/PlaylistPanel.vue
+++ b/frontend/components/Public/WebDJ/PlaylistPanel.vue
@@ -19,7 +19,7 @@
                         v-if="!isPlaying || isPaused"
                         type="button"
                         class="btn btn-sm btn-success"
-                        @click="play"
+                        @click="play()"
                     >
                         <icon :icon="IconPlayCircle" />
                     </button>