From 0f5e4c4dc0d9023251165e85459880b3e6b994cb Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Sun, 19 Jan 2025 02:22:44 -0600
Subject: [PATCH 1/2] More little TS fixes.

---
 frontend/components/Public/Podcasts/PodcastCommon.vue     | 1 +
 frontend/components/Public/WebDJ/PlaylistPanel.vue        | 1 +
 frontend/components/Stations/Mounts/EditModal.vue         | 2 +-
 .../Stations/Podcasts/Common/PublishAtFields.vue          | 8 +++++---
 .../components/Stations/Podcasts/PodcastEditModal.vue     | 6 ++++--
 frontend/components/Stations/Streamers/EditModal.vue      | 2 +-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Public/Podcasts/PodcastCommon.vue b/frontend/components/Public/Podcasts/PodcastCommon.vue
index 02e2343d044..9df9cf0ca53 100644
--- a/frontend/components/Public/Podcasts/PodcastCommon.vue
+++ b/frontend/components/Public/Podcasts/PodcastCommon.vue
@@ -27,6 +27,7 @@
     <p class="card-text">
         {{ podcast.description }}
     </p>
+    <!-- @vue-expect-error API mistype on Podcast branding config. -->
     <p
         v-if="podcast.branding_config.public_custom_html"
         class="card-text"
diff --git a/frontend/components/Public/WebDJ/PlaylistPanel.vue b/frontend/components/Public/WebDJ/PlaylistPanel.vue
index 233f916db0a..b01bf0191f3 100644
--- a/frontend/components/Public/WebDJ/PlaylistPanel.vue
+++ b/frontend/components/Public/WebDJ/PlaylistPanel.vue
@@ -286,6 +286,7 @@ const onFileSelected = (e: Event) => {
 
 interface PlayOptions {
     isAutoPlay?: boolean,
+    backward?: boolean,
     fileIndex?: number
 }
 
diff --git a/frontend/components/Stations/Mounts/EditModal.vue b/frontend/components/Stations/Mounts/EditModal.vue
index ee9076fe40d..d5661103175 100644
--- a/frontend/components/Stations/Mounts/EditModal.vue
+++ b/frontend/components/Stations/Mounts/EditModal.vue
@@ -106,7 +106,7 @@ const {
             reset();
         },
         populateForm: (data, formRef) => {
-            record.value = data;
+            record.value = mergeExisting(record.value, data as typeof record.value);
             formRef.value = mergeExisting(formRef.value, data);
         },
         onSubmitSuccess: () => {
diff --git a/frontend/components/Stations/Podcasts/Common/PublishAtFields.vue b/frontend/components/Stations/Podcasts/Common/PublishAtFields.vue
index fcf1723e7b8..e3695bdf704 100644
--- a/frontend/components/Stations/Podcasts/Common/PublishAtFields.vue
+++ b/frontend/components/Stations/Podcasts/Common/PublishAtFields.vue
@@ -30,14 +30,16 @@ import {useAzuraCastStation} from "~/vendor/azuracast.ts";
 const props = withDefaults(
     defineProps<{
         id: string,
-        modelValue?: number
+        modelValue?: string | number | null
     }>(),
     {
         modelValue: null
     }
 );
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: number | null)
+}>();
 
 const publishDate = ref<string>('');
 const publishTime = ref<string>('');
@@ -47,7 +49,7 @@ const {timezone} = useAzuraCastStation();
 
 watch(toRef(props, 'modelValue'), (publishAt) => {
     if (publishAt !== null) {
-        const publishDateTime = DateTime.fromSeconds(publishAt, {zone: timezone});
+        const publishDateTime = DateTime.fromSeconds(Number(publishAt), {zone: timezone});
         publishDate.value = publishDateTime.toISODate();
         publishTime.value = publishDateTime.toISOTime({
             suppressMilliseconds: true,
diff --git a/frontend/components/Stations/Podcasts/PodcastEditModal.vue b/frontend/components/Stations/Podcasts/PodcastEditModal.vue
index cb26bc584bb..0bd95eb6aaf 100644
--- a/frontend/components/Stations/Podcasts/PodcastEditModal.vue
+++ b/frontend/components/Stations/Podcasts/PodcastEditModal.vue
@@ -89,9 +89,11 @@ const {
     $modal,
     {
         artwork_file: {},
+        categories: {}
     },
     {
-        artwork_file: null
+        artwork_file: null,
+        categories: []
     },
     {
         resetForm: (originalResetForm) => {
@@ -104,7 +106,7 @@ const {
                 (row) => row.category
             );
 
-            record.value = data;
+            record.value = mergeExisting(record.value, data as typeof record.value);
             formRef.value = mergeExisting(formRef.value, data);
         },
     },
diff --git a/frontend/components/Stations/Streamers/EditModal.vue b/frontend/components/Stations/Streamers/EditModal.vue
index daa5adbcd4a..6d9c62c990e 100644
--- a/frontend/components/Stations/Streamers/EditModal.vue
+++ b/frontend/components/Stations/Streamers/EditModal.vue
@@ -90,7 +90,7 @@ const {
             reset();
         },
         populateForm: (data, formRef) => {
-            record.value = mergeExisting(record.value, data);
+            record.value = mergeExisting(record.value, data as typeof record.value);
             formRef.value = mergeExisting(formRef.value, data);
         },
     },

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 2/2] 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 f3207786953..574f2dc32d2 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 1cabfb50e6b..831af4f64d8 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 17ef04afd8d..0fb7ab97f1c 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 b01bf0191f3..f1a868aa23d 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>