Restructure StorageLocations and Webhook definitions to meet TS stand…

…ards.
igecloudsdev · Jan 19, 2025 · 97af8ab · 97af8ab
1 parent ae1a9a6
commit 97af8ab
Show file tree

Hide file tree

Showing 19 changed files with 131 additions and 97 deletions.
diff --git a/frontend/components/Admin/StorageLocations/EditModal.vue b/frontend/components/Admin/StorageLocations/EditModal.vue
@@ -36,14 +36,15 @@ import {
     ModalFormTemplateRef,
     useBaseEditModal
 } from "~/functions/useBaseEditModal";
-import {computed, ref} from "vue";
+import {computed, nextTick, ref, watch} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import ModalForm from "~/components/Common/ModalForm.vue";
 import StorageLocationForm from "./Form.vue";
 import Sftp from "~/components/Admin/StorageLocations/Form/Sftp.vue";
 import S3 from "~/components/Admin/StorageLocations/Form/S3.vue";
 import Dropbox from "~/components/Admin/StorageLocations/Form/Dropbox.vue";
 import Tabs from "~/components/Common/Tabs.vue";
+import mergeExisting from "~/functions/mergeExisting.ts";
 
 interface StorageLocationsEditModalProps extends BaseEditModalProps {
     type: string
@@ -60,6 +61,7 @@ const {
     isEditMode,
     form,
     v$,
+    resetForm,
     clearContents,
     create,
     edit,
@@ -69,27 +71,21 @@ const {
     props,
     emit,
     $modal,
-    {},
     {
-        // These have to be defined here because the sub-items conditionally render.
-        dropboxAppKey: null,
-        dropboxAppSecret: null,
-        dropboxAuthToken: null,
-        s3CredentialKey: null,
-        s3CredentialSecret: null,
-        s3Region: null,
-        s3Version: 'latest',
-        s3Bucket: null,
-        s3Endpoint: null,
-        s3UsePathStyle: false,
-        sftpHost: null,
-        sftpPort: '22',
-        sftpUsername: null,
-        sftpPassword: null,
-        sftpPrivateKey: null,
-        sftpPrivateKeyPassPhrase: null,
+        adapter: {},
     },
     {
+        adapter: 'local',
+    },
+    {
+        populateForm: (data, formRef) => {
+            formRef.value.adapter = data.adapter;
+            
+            nextTick(() => {
+                resetForm();
+                formRef.value = mergeExisting(formRef.value, data);
+            });
+        },
         getSubmittableFormData: (formRef, isEditModeRef) => {
             if (isEditModeRef.value) {
                 return formRef.value;
@@ -103,6 +99,21 @@ const {
     }
 );
 
+watch(
+    () => form.value.adapter,
+    () => {
+        if (!isEditMode.value) {
+            const originalForm = form.value;
+
+            nextTick(() => {
+                resetForm();
+                form.value = mergeExisting(form.value, originalForm);
+            });
+        }
+
+    }
+)
+
 const {$gettext} = useTranslate();
 
 const langTitle = computed(() => {

diff --git a/frontend/components/Admin/StorageLocations/Form/Dropbox.vue b/frontend/components/Admin/StorageLocations/Form/Dropbox.vue
@@ -87,6 +87,11 @@ const {form, v$, tabClass} = useVuelidateOnFormTab(
         dropboxAppSecret: {},
         dropboxAuthToken: {required},
     },
+    {
+        dropboxAppKey: null,
+        dropboxAppSecret: null,
+        dropboxAuthToken: null,
+    }
 );
 
 const baseAuthUrl = 'https://www.dropbox.com/oauth2/authorize';

diff --git a/frontend/components/Admin/StorageLocations/Form/S3.vue b/frontend/components/Admin/StorageLocations/Form/S3.vue
@@ -79,6 +79,15 @@ const {v$, tabClass} = useVuelidateOnFormTab(
         s3Bucket: {required},
         s3Endpoint: {required},
         s3UsePathStyle: {}
+    },
+    {
+        s3CredentialKey: null,
+        s3CredentialSecret: null,
+        s3Region: null,
+        s3Version: 'latest',
+        s3Bucket: null,
+        s3Endpoint: null,
+        s3UsePathStyle: false,
     }
 );
 </script>
diff --git a/frontend/components/Admin/StorageLocations/Form/Sftp.vue b/frontend/components/Admin/StorageLocations/Form/Sftp.vue
@@ -72,6 +72,14 @@ const {v$, tabClass} = useVuelidateOnFormTab(
         sftpPassword: {},
         sftpPrivateKey: {},
         sftpPrivateKeyPassPhrase: {}
+    },
+    {
+        sftpHost: null,
+        sftpPort: '22',
+        sftpUsername: null,
+        sftpPassword: null,
+        sftpPrivateKey: null,
+        sftpPrivateKeyPassPhrase: null,
     }
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/EditModal.vue b/frontend/components/Stations/Webhooks/EditModal.vue
@@ -61,6 +61,7 @@ import GetMeRadio from "~/components/Stations/Webhooks/Form/GetMeRadio.vue";
 import RadioReg from "~/components/Stations/Webhooks/Form/RadioReg.vue";
 import GroupMe from "~/components/Stations/Webhooks/Form/GroupMe.vue";
 import Bluesky from "~/components/Stations/Webhooks/Form/Bluesky.vue";
+import mergeExisting from "~/functions/mergeExisting.ts";
 
 interface WebhookEditModalProps extends BaseEditModalProps {
     nowPlayingUrl: string,
@@ -118,16 +119,21 @@ const {
     props,
     emit,
     $modal,
-    {},
-    {},
+    {
+        type: {}
+    },
+    {
+        type: null
+    },
     {
         populateForm: (data, formRef) => {
             type.value = data.type;
-            formRef.value = {
-                name: data.name,
-                triggers: data.triggers,
-                config: data.config
-            };
+
+            // Wait for type-specific components to mount.
+            nextTick(() => {
+                resetForm();
+                formRef.value = mergeExisting(formRef.value, data);
+            });
         },
         getSubmittableFormData(formRef, isEditModeRef) {
             const formData = formRef.value;
@@ -156,7 +162,7 @@ const clearContents = () => {
     originalClearContents();
 };
 
-const setType = (newType) => {
+const setType = (newType: WebhookType) => {
     type.value = newType;
     nextTick(resetForm);
 };

diff --git a/frontend/components/Stations/Webhooks/Form/BasicInfo.vue b/frontend/components/Stations/Webhooks/Form/BasicInfo.vue
@@ -24,6 +24,7 @@
                 :description="$gettext('This web hook will only run when the selected event(s) occur on this specific station.')"
             />
 
+            <!-- @vue-expect-error Vuelidate mistyping -->
             <form-group-select
                 id="form_config_rate_limit"
                 class="col-md-5"

diff --git a/frontend/components/Stations/Webhooks/Form/Bluesky.vue b/frontend/components/Stations/Webhooks/Form/Bluesky.vue
@@ -47,11 +47,11 @@ const {form, v$, tabClass} = useVuelidateOnFormTab(
             app_password: {required}
         }
     },
-    {
+    () => ({
         config: {
             handle: '',
             app_password: ''
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/Discord.vue b/frontend/components/Stations/Webhooks/Form/Discord.vue
@@ -102,22 +102,20 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             footer: {},
         }
     },
-    () => {
-        return {
-            config: {
-                webhook_url: '',
-                content: $gettext(
-                    'Now playing on %{station}:',
-                    {'station': '{{ station.name }}'}
-                ),
-                title: '{{ now_playing.song.title }}',
-                description: '{{ now_playing.song.artist }}',
-                url: '{{ station.listen_url }}',
-                author: '{{ live.streamer_name }}',
-                thumbnail: '{{ now_playing.song.art }}',
-                footer: $gettext('Powered by AzuraCast'),
-            }
+    () => ({
+        config: {
+            webhook_url: '',
+            content: $gettext(
+                'Now playing on %{station}:',
+                {'station': '{{ station.name }}'}
+            ),
+            title: '{{ now_playing.song.title }}',
+            description: '{{ now_playing.song.artist }}',
+            url: '{{ station.listen_url }}',
+            author: '{{ live.streamer_name }}',
+            thumbnail: '{{ now_playing.song.art }}',
+            footer: $gettext('Powered by AzuraCast'),
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/Email.vue b/frontend/components/Stations/Webhooks/Form/Email.vue
@@ -54,12 +54,12 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             message: {required}
         }
     },
-    {
+    () => ({
         config: {
             to: '',
             subject: '',
             message: ''
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/Generic.vue b/frontend/components/Stations/Webhooks/Form/Generic.vue
@@ -96,13 +96,13 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             timeout: {},
         }
     },
-    {
+    () => ({
         config: {
             webhook_url: '',
             basic_auth_username: '',
             basic_auth_password: '',
             timeout: '5',
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/GetMeRadio.vue b/frontend/components/Stations/Webhooks/Form/GetMeRadio.vue
@@ -42,11 +42,11 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             station_id: {required}
         }
     },
-    {
+    () => ({
         config: {
             token: '',
             station_id: '',
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/GoogleAnalyticsV4.vue b/frontend/components/Stations/Webhooks/Form/GoogleAnalyticsV4.vue
@@ -42,11 +42,11 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             measurement_id: {required}
         }
     },
-    {
+    () => ({
         config: {
             api_secret: '',
             measurement_id: ''
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/GroupMe.vue b/frontend/components/Stations/Webhooks/Form/GroupMe.vue
@@ -67,22 +67,20 @@ const { v$, tabClass } = useVuelidateOnFormTab(
             text: { required }
         }
     },
-    () => {
-        return {
-            config: {
-                bot_id: '',
-                api: '',
-                text: $gettext(
-                    'Now playing on %{station}: %{title} by %{artist}! Tune in now.',
-                    {
-                        station: '{{ station.name }}',
-                        title: '{{ now_playing.song.title }}',
-                        artist: '{{ now_playing.song.artist }}'
-                    }
-                )
-            }
-        };
-    }
+    () => ({
+        config: {
+            bot_id: '',
+            api: '',
+            text: $gettext(
+                'Now playing on %{station}: %{title} by %{artist}! Tune in now.',
+                {
+                    station: '{{ station.name }}',
+                    title: '{{ now_playing.song.title }}',
+                    artist: '{{ now_playing.song.artist }}'
+                }
+            )
+        }
+    })
 );
 
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/Mastodon.vue b/frontend/components/Stations/Webhooks/Form/Mastodon.vue
@@ -94,13 +94,13 @@ const {form, v$, tabClass} = useVuelidateOnFormTab(
             visibility: {required}
         }
     },
-    {
+    () => ({
         config: {
             instance_url: '',
             access_token: '',
             visibility: 'public',
         }
-    }
+    })
 );
 
 const {$gettext} = useTranslate();

diff --git a/frontend/components/Stations/Webhooks/Form/MatomoAnalytics.vue b/frontend/components/Stations/Webhooks/Form/MatomoAnalytics.vue
@@ -52,12 +52,12 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             token: {},
         }
     },
-    {
+    () => ({
         config: {
             matomo_url: '',
             site_id: '',
             token: ''
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/RadioDe.vue b/frontend/components/Stations/Webhooks/Form/RadioDe.vue
@@ -40,11 +40,11 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             apikey: {required}
         }
     },
-    {
+    () => ({
         config: {
             broadcastsubdomain: '',
             apikey: ''
         }
-    }
+    })
 );
 </script>
diff --git a/frontend/components/Stations/Webhooks/Form/RadioReg.vue b/frontend/components/Stations/Webhooks/Form/RadioReg.vue
@@ -42,11 +42,11 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             apikey: {required}
         }
     },
-    {
+    () => ({
         config: {
             webhookurl: '',
             apikey: ''
         }
-    }
+    })
 );
 </script>