[pull] main from AzuraCast:main

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();

frontend/components/Admin/CustomFields/Form.vue

@@ -3,15 +3,15 @@
         <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.')"
         />
 
         <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();
 

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: ''
+                }
+            );
         },
     }
 );

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"

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>
@@ -286,6 +286,7 @@ const onFileSelected = (e: Event) => {
 
 interface PlayOptions {
     isAutoPlay?: boolean,
+    backward?: boolean,
     fileIndex?: number
 }
 

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: () => {

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,

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);
         },
     },

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);
         },
     },