Even more TypeScript work.

frontend/components/Account/EditForm.vue

@@ -44,11 +44,11 @@
 
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions, {FormOption} from "~/functions/objectToFormOptions";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import {HasGenericFormProps} from "~/entities/Forms.ts";
+import {objectToSimpleFormOptions} from "~/functions/objectToFormOptions.ts";
 
 interface AccountEditFormProps extends HasGenericFormProps {
     supportedLocales: Record<string, string>
@@ -58,8 +58,8 @@ const props = defineProps<AccountEditFormProps>();
 
 const {$gettext} = useTranslate();
 
-const localeOptions = computed<FormOption[]>(() => {
-    const localeOptions = objectToFormOptions(toRef(props, 'supportedLocales')).value;
+const localeOptions = computed(() => {
+    const localeOptions = objectToSimpleFormOptions(props.supportedLocales).value;
 
     localeOptions.unshift({
         text: $gettext('Use Browser Default'),
@@ -69,7 +69,7 @@ const localeOptions = computed<FormOption[]>(() => {
     return localeOptions;
 });
 
-const show24hourOptions = computed<FormOption[]>(() => {
+const show24hourOptions = computed(() => {
     return [
         {
             text: $gettext('Prefer System Default'),

frontend/components/Admin/Backups.vue

@@ -171,7 +171,7 @@ import {DataTableTemplateRef} from "~/functions/useHasDatatable.ts";
 
 const props = withDefaults(
     defineProps<{
-        storageLocations: object, // TODO,
+        storageLocations: Record<number, string>,
         isDocker: boolean,
     }>(),
     {

frontend/components/Admin/Backups/ConfigureModal.vue

@@ -61,7 +61,7 @@
                     class="col-md-6"
                     :field="v$.backup_storage_location"
                     :label="$gettext('Storage Location')"
-                    :options="storageLocationOptions"
+                    :options="storageLocations"
                 />
 
                 <form-group-multi-check
@@ -85,8 +85,7 @@ import FormFieldset from "~/components/Form/FormFieldset.vue";
 import mergeExisting from "~/functions/mergeExisting";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
 import TimeCode from "~/components/Common/TimeCode.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
-import {computed, ref, toRef} from "vue";
+import {computed, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 import {useNotify} from "~/functions/useNotify";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
@@ -97,7 +96,7 @@ import {useHasModal} from "~/functions/useHasModal.ts";
 
 const props = defineProps<{
     settingsUrl: string,
-    storageLocations: object, // TODO
+    storageLocations: Record<number, string>,
 }>();
 
 const emit = defineEmits(['relist']);
@@ -123,8 +122,6 @@ const {form, resetForm, v$, ifValid} = useVuelidateOnForm(
     }
 );
 
-const storageLocationOptions = objectToFormOptions(toRef(props, 'storageLocations'));
-
 const formatOptions = computed(() => {
     return [
         {

frontend/components/Admin/Backups/RunBackupModal.vue

@@ -26,7 +26,7 @@
                             id="edit_form_storage_location"
                             class="col-md-12"
                             :field="v$.storage_location"
-                            :options="storageLocationOptions"
+                            :options="storageLocations"
                             :label="$gettext('Storage Location')"
                         />
 
@@ -106,9 +106,8 @@ import FormFieldset from "~/components/Form/FormFieldset.vue";
 import FormGroupField from "~/components/Form/FormGroupField.vue";
 import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
 import StreamingLogView from "~/components/Common/StreamingLogView.vue";
-import {ref, toRef} from "vue";
+import {ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
 import Modal from "~/components/Common/Modal.vue";
@@ -117,13 +116,11 @@ import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
 
 const props = defineProps<{
     runBackupUrl: string,
-    storageLocations: object, // TODO
+    storageLocations: Record<number, string>,
 }>();
 
 const emit = defineEmits(['relist']);
 
-const storageLocationOptions = objectToFormOptions(toRef(props, 'storageLocations'));
-
 const logUrl = ref(null);
 const error = ref(null);
 

frontend/components/Admin/Stations/Form/AdminForm.vue

@@ -81,7 +81,6 @@
 
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
 import {computed, onMounted, reactive, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
@@ -154,9 +153,9 @@ const {v$, tabClass} = useVuelidateOnFormTab(
 
 const storageLocationsLoading = ref(true);
 const storageLocationOptions = reactive({
-    media_storage_location: [],
-    recordings_storage_location: [],
-    podcasts_storage_location: []
+    media_storage_location: {},
+    recordings_storage_location: {},
+    podcasts_storage_location: {}
 });
 
 const filterLocations = (group) => {
@@ -177,15 +176,15 @@ const {axios} = useAxios();
 
 const loadLocations = () => {
     axios.get(storageLocationApiUrl.value).then((resp) => {
-        storageLocationOptions.media_storage_location = objectToFormOptions(
-            filterLocations(resp.data.media_storage_location)
-        ).value;
-        storageLocationOptions.recordings_storage_location = objectToFormOptions(
-            filterLocations(resp.data.recordings_storage_location)
-        ).value;
-        storageLocationOptions.podcasts_storage_location = objectToFormOptions(
-            filterLocations(resp.data.podcasts_storage_location)
-        ).value;
+        storageLocationOptions.media_storage_location = filterLocations(
+            resp.data.media_storage_location
+        );
+        storageLocationOptions.recordings_storage_location = filterLocations(
+            resp.data.recordings_storage_location
+        );
+        storageLocationOptions.podcasts_storage_location = filterLocations(
+            resp.data.podcasts_storage_location
+        );
     }).finally(() => {
         storageLocationsLoading.value = false;
     });

frontend/components/Admin/Stations/Form/FrontendForm.vue

@@ -116,7 +116,7 @@
                         <form-group-select
                             id="edit_form_frontend_banned_countries"
                             :field="v$.frontend_config.banned_countries"
-                            :options="countryOptions"
+                            :options="countries"
                             multiple
                             :label="$gettext('Banned Countries')"
                             :description="$gettext('Select the countries that are not allowed to connect to the streams.')"
@@ -169,8 +169,7 @@
 import FormFieldset from "~/components/Form/FormFieldset.vue";
 import FormGroupField from "~/components/Form/FormGroupField.vue";
 import {FrontendAdapter} from "~/entities/RadioAdapters";
-import objectToFormOptions from "~/functions/objectToFormOptions";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import FormGroupSelect from "~/components/Form/FormGroupSelect.vue";
@@ -182,7 +181,7 @@ import Tab from "~/components/Common/Tab.vue";
 interface StationFrontendFormProps extends FormTabProps {
     isRsasInstalled: boolean,
     isShoutcastInstalled: boolean,
-    countries: object, // TODO
+    countries: Record<string, string>,
 }
 
 const props = defineProps<StationFrontendFormProps>();
@@ -289,8 +288,6 @@ const frontendTypeOptions = computed(() => {
     return frontendOptions;
 });
 
-const countryOptions = objectToFormOptions(toRef(props, 'countries'));
-
 const isLocalFrontend = computed(() => {
     return form.value.frontend_type !== FrontendAdapter.Remote;
 });

frontend/components/Admin/Stations/Form/ProfileForm.vue

@@ -45,7 +45,7 @@
                 id="edit_form_timezone"
                 class="col-md-12"
                 :field="v$.timezone"
-                :options="timezoneOptions"
+                :options="timezones"
                 :label="$gettext('Time Zone')"
                 :description="$gettext('Scheduled playlists and other timed items will be controlled by this time zone.')"
             />
@@ -133,9 +133,8 @@
 <script setup lang="ts">
 import FormFieldset from "~/components/Form/FormFieldset.vue";
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
 import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import FormGroupSelect from "~/components/Form/FormGroupSelect.vue";
 import {FormTabEmits, FormTabProps, useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
@@ -144,7 +143,7 @@ import {useAzuraCast} from "~/vendor/azuracast";
 import Tab from "~/components/Common/Tab.vue";
 
 interface StationProfileFormProps extends FormTabProps {
-    timezones: object, // TODO
+    timezones: Record<string, string>,
 }
 
 const props = defineProps<StationProfileFormProps>();
@@ -205,8 +204,6 @@ const {v$, tabClass} = useVuelidateOnFormTab(
     }
 );
 
-const timezoneOptions = objectToFormOptions(toRef(props, 'timezones'));
-
 const {$gettext} = useTranslate();
 
 const historyItemsOptions = computed(() => {

frontend/components/Admin/Stations/StationForm.vue

@@ -72,12 +72,12 @@
 <script lang="ts">
 export interface StationFormParentProps {
     // Profile
-    timezones: object,
+    timezones: Record<string, string>,
     // Frontend
     isRsasInstalled?: boolean,
     isShoutcastInstalled?: boolean,
     isStereoToolInstalled?: boolean,
-    countries: object
+    countries: Record<string, string>
 }
 </script>
 

frontend/components/Admin/Users/Form.vue

@@ -34,23 +34,22 @@
             id="edit_form_roles"
             class="col-md-12"
             :field="v$.roles"
-            :options="roleOptions"
+            :options="roles"
             :label="$gettext('Roles')"
         />
     </div>
 </template>
 
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
-import {computed, toRef} from "vue";
+import {computed} from "vue";
 import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import {FormTabEmits, FormTabProps, useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
 import {email, required} from "@vuelidate/validators";
 import validatePassword from "~/functions/validatePassword";
 
 interface AdminUsersFormProps extends FormTabProps {
-    roles: object,
+    roles: Record<number, string>,
     isEditMode: boolean,
 }
 
@@ -77,6 +76,4 @@ const {v$} = useVuelidateOnFormTab(
         roles: [],
     }
 );
-
-const roleOptions = objectToFormOptions(toRef(props, 'roles'));
 </script>

frontend/components/Common/BitrateOptions.vue

@@ -72,10 +72,10 @@
 
 <script setup lang="ts">
 import {FormFieldProps, useFormField} from "~/components/Form/useFormField";
-import {computed, ComputedRef, useSlots} from "vue";
+import {computed, useSlots, WritableComputedRef} from "vue";
 import {includes, map} from "lodash";
 import useSlotsExcept from "~/functions/useSlotsExcept.ts";
-import FormMultiCheck, {FormMultiCheckOption} from "~/components/Form/FormMultiCheck.vue";
+import FormMultiCheck from "~/components/Form/FormMultiCheck.vue";
 import FormLabel, {FormLabelParentProps} from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 
@@ -106,7 +106,7 @@ const radioBitrates = [
     32, 48, 64, 96, 128, 192, 256, 320
 ].filter((bitrate) => props.maxBitrate === 0 || bitrate <= props.maxBitrate);
 
-const customField: ComputedRef<number | null> = computed({
+const customField: WritableComputedRef<number | null> = computed({
     get() {
         return includes(radioBitrates, model.value)
             ? ''
@@ -117,7 +117,7 @@ const customField: ComputedRef<number | null> = computed({
     }
 });
 
-const radioField: ComputedRef<number | string | null> = computed({
+const radioField: WritableComputedRef<number | string | null> = computed({
     get() {
         return includes(radioBitrates, model.value)
             ? model.value
@@ -130,7 +130,7 @@ const radioField: ComputedRef<number | string | null> = computed({
     }
 });
 
-const bitrateOptions: FormMultiCheckOption[] = map(
+const bitrateOptions = map(
     radioBitrates,
     (val: number) => {
         return {

frontend/components/Common/SidebarMenu.vue

@@ -85,40 +85,40 @@ import Icon from "~/components/Common/Icon.vue";
 import {useRoute} from "vue-router";
 import {some} from "lodash";
 import {IconOpenInNew} from "~/components/Common/icons.ts";
-import {MenuCategory} from "~/functions/filterMenu.ts";
+import {MenuCategory, MenuSubCategory, ReactiveMenu} from "~/functions/filterMenu.ts";
 
 const props = defineProps<{
-    menu: MenuCategory[]
+    menu: ReactiveMenu
 }>();
 
 const currentRoute = useRoute();
 
-const isRouteLink = (item) => {
+const isRouteLink = (item: MenuSubCategory) => {
     return (typeof (item.url) !== 'undefined')
         && (typeof (item.url) !== 'string');
 };
 
-const isActiveItem = (item) => {
-    if (item.items && some(item.items, isActiveItem)) {
+const isActiveItem = (item: MenuCategory | MenuSubCategory) => {
+    if ('items' in item && some(item.items, isActiveItem)) {
         return true;
     }
 
     return isRouteLink(item) && !('params' in item.url) && item.url.name === currentRoute.name;
 };
 
-const getLinkClass = (item) => {
+const getLinkClass = (item: MenuSubCategory) => {
     return [
         item.class ?? null,
         isActiveItem(item) ? 'active' : ''
     ];
 }
 
-const getCategoryLink = (item) => {
+const getCategoryLink = (item: MenuSubCategory) => {
     const linkAttrs: {
         [key: string]: any
     } = {};
 
-    if (item.items) {
+    if ('items' in item) {
         linkAttrs['data-bs-toggle'] = 'collapse';
         linkAttrs.href = '#sidebar-submenu-' + item.key;
     } else {

frontend/components/Form/FormCheckbox.vue

@@ -10,9 +10,14 @@
 <script setup lang="ts">
 import {useVModel} from "@vueuse/core";
 
-const props = defineProps<{
-    modelValue: boolean | null
-}>();
+const props = withDefaults(
+    defineProps<{
+        modelValue?: boolean
+    }>(),
+    {
+        modelValue: false
+    }
+);
 
 const emit = defineEmits(['update:modelValue']);
 const checkboxValue = useVModel(props, 'modelValue', emit);