Move more components to Composition API.

frontend/vue/components/Stations/Podcasts/EpisodeEditModal.vue

@@ -1,10 +1,10 @@
 <template>
     <modal-form
-        ref="modal"
+        ref="$modal"
         :loading="loading"
         :title="langTitle"
         :error="error"
-        :disable-save-button="v$.form.$invalid"
+        :disable-save-button="v$.$invalid"
         @submit="doSubmit"
         @hidden="clearContents"
     >
@@ -12,10 +12,13 @@
             content-class="mt-3"
             pills
         >
-            <episode-form-basic-info :form="v$.form" />
+            <episode-form-basic-info
+                :form="v$"
+                :locale="locale"
+            />
 
             <episode-form-media
-                v-model="v$.form.media_file.$model"
+                v-model="v$.media_file.$model"
                 :record-has-media="record.has_media"
                 :new-media-url="newMediaUrl"
                 :edit-media-url="record.links.media"
@@ -23,7 +26,7 @@
             />
 
             <podcast-common-artwork
-                v-model="v$.form.artwork_file.$model"
+                v-model="v$.artwork_file.$model"
                 :artwork-src="record.art"
                 :new-art-url="newArtUrl"
                 :edit-art-url="record.links.art"
@@ -32,110 +35,103 @@
     </modal-form>
 </template>
 
-<script>
+<script setup>
 import {required} from '@vuelidate/validators';
-import BaseEditModal from '~/components/Common/BaseEditModal';
 import EpisodeFormBasicInfo from './EpisodeForm/BasicInfo';
 import PodcastCommonArtwork from './Common/Artwork';
 import EpisodeFormMedia from './EpisodeForm/Media';
 import {DateTime} from 'luxon';
+import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
+import {computed, ref} from "vue";
+import {useResettableRef} from "~/functions/useResettableRef";
 import mergeExisting from "~/functions/mergeExisting";
-import useVuelidate from "@vuelidate/core";
+import {useTranslate} from "~/vendor/gettext";
+import ModalForm from "~/components/Common/ModalForm.vue";
 
-/* TODO Options API */
+const props = defineProps({
+    ...baseEditModalProps,
+    stationTimeZone: {
+        type: String,
+        required: true
+    },
+    locale: {
+        type: String,
+        required: true
+    },
+    podcastId: {
+        type: String,
+        required: true
+    },
+    newArtUrl: {
+        type: String,
+        required: true
+    },
+    newMediaUrl: {
+        type: String,
+        required: true
+    }
+});
 
-export default {
-    name: 'EditModal',
-    components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo},
-    mixins: [BaseEditModal],
-    props: {
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        locale: {
-            type: String,
-            required: true
-        },
-        podcastId: {
-            type: String,
-            required: true
-        },
-        newArtUrl: {
-            type: String,
-            required: true
-        },
-        newMediaUrl: {
-            type: String,
-            required: true
-        }
+const emit = defineEmits(['relist']);
+
+const $modal = ref(); // Template Ref
+
+const {record, reset} = useResettableRef({
+    has_custom_art: false,
+    art: null,
+    has_media: false,
+    media: null,
+    links: {
+        art: null,
+        media: null
+    }
+});
+
+const {
+    loading,
+    error,
+    isEditMode,
+    v$,
+    clearContents,
+    create,
+    edit,
+    doSubmit,
+    close
+} = useBaseEditModal(
+    props,
+    emit,
+    $modal,
+    {
+        'title': {required},
+        'link': {},
+        'description': {required},
+        'publish_date': {},
+        'publish_time': {},
+        'explicit': {},
+        'artwork_file': {},
+        'media_file': {}
     },
-    setup() {
-        return {v$: useVuelidate()}
+    {
+        'title': '',
+        'link': '',
+        'description': '',
+        'publish_date': '',
+        'publish_time': '',
+        'explicit': false,
+        'artwork_file': null,
+        'media_file': null
     },
-    data() {
-        return {
-            uploadPercentage: null,
-            record: {
-                has_custom_art: false,
-                art: null,
-                has_media: false,
-                media: null,
-                links: {},
-                artwork_file: null,
-                media_file: null
-            },
-        };
-    },
-    computed: {
-        langTitle () {
-            return this.isEditMode
-                ? this.$gettext('Edit Episode')
-                : this.$gettext('Add Episode');
-        }
-    },
-    validations: {
-        form: {
-            'title': { required },
-            'link': {},
-            'description': { required },
-            'publish_date': {},
-            'publish_time': {},
-            'explicit': {},
-            'artwork_file': {},
-            'media_file': {}
-        }
-    },
-    methods: {
-        resetForm () {
-            this.uploadPercentage = null;
-            this.record = {
-                has_custom_art: false,
-                art: null,
-                has_media: false,
-                media: null,
-                links: {
-                    art: null,
-                    media: null
-                }
-            };
-            this.form = {
-                'title': '',
-                'link': '',
-                'description': '',
-                'publish_date': '',
-                'publish_time': '',
-                'explicit': false,
-                'artwork_file': null,
-                'media_file': null
-            };
+    {
+        resetForm: (originalResetForm) => {
+            originalResetForm();
+            reset();
         },
-        populateForm (d) {
+        populateForm: (data, formRef) => {
             let publishDate = '';
             let publishTime = '';
 
-            if (d.publish_at !== null) {
-                let publishDateTime = DateTime.fromSeconds(d.publish_at);
+            if (data.publish_at !== null) {
+                let publishDateTime = DateTime.fromSeconds(data.publish_at);
                 publishDate = publishDateTime.toISODate();
                 publishTime = publishDateTime.toISOTime({
                     suppressMilliseconds: true,
@@ -143,15 +139,15 @@ export default {
                 });
             }
 
-            this.record = mergeExisting(this.record, d);
-            this.form = mergeExisting(this.form, {
-                ...d,
+            record.value = mergeExisting(record.value, data);
+            formRef.value = mergeExisting(formRef.value, {
+                ...data,
                 publish_date: publishDate,
                 publish_time: publishTime
             });
         },
-        getSubmittableFormData() {
-            let modifiedForm = this.form;
+        getSubmittableFormData: (formValue) => {
+            let modifiedForm = formValue;
 
             if (modifiedForm.publish_date.length > 0 && modifiedForm.publish_time.length > 0) {
                 let publishDateTimeString = modifiedForm.publish_date + 'T' + modifiedForm.publish_time;
@@ -161,7 +157,21 @@ export default {
             }
 
             return modifiedForm;
-        },
-    }
-};
+        }
+    },
+);
+
+const {$gettext} = useTranslate();
+
+const langTitle = computed(() => {
+    return isEditMode.value
+        ? $gettext('Edit Episode')
+        : $gettext('Add Episode');
+});
+
+defineExpose({
+    create,
+    edit,
+    close
+});
 </script>

frontend/vue/components/Stations/Podcasts/PodcastEditModal.vue

@@ -1,10 +1,10 @@
 <template>
     <modal-form
-        ref="modal"
+        ref="$modal"
         :loading="loading"
         :title="langTitle"
         :error="error"
-        :disable-save-button="v$.form.$invalid"
+        :disable-save-button="v$.$invalid"
         @submit="doSubmit"
         @hidden="clearContents"
     >
@@ -13,13 +13,13 @@
             pills
         >
             <podcast-form-basic-info
-                :form="v$.form"
+                :form="v$"
                 :categories-options="categoriesOptions"
                 :language-options="languageOptions"
             />
 
             <podcast-common-artwork
-                v-model="v$.form.artwork_file.$model"
+                v-model="v$.artwork_file.$model"
                 :artwork-src="record.art"
                 :new-art-url="newArtUrl"
                 :edit-art-url="record.links.art"
@@ -28,103 +28,104 @@
     </modal-form>
 </template>
 
-<script>
+<script setup>
 import {required} from '@vuelidate/validators';
-import BaseEditModal from '~/components/Common/BaseEditModal';
 import PodcastFormBasicInfo from './PodcastForm/BasicInfo';
 import PodcastCommonArtwork from './Common/Artwork';
 import mergeExisting from "~/functions/mergeExisting";
-import useVuelidate from "@vuelidate/core";
+import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
+import {computed, ref} from "vue";
+import {useResettableRef} from "~/functions/useResettableRef";
+import {useTranslate} from "~/vendor/gettext";
+import ModalForm from "~/components/Common/ModalForm.vue";
 
-/* TODO Options API */
-
-export default {
-    name: 'EditModal',
-    components: {PodcastCommonArtwork, PodcastFormBasicInfo},
-    mixins: [BaseEditModal],
-    props: {
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        languageOptions: {
-            type: Object,
-            required: true
-        },
-        categoriesOptions: {
-            type: Object,
-            required: true
-        },
-        newArtUrl: {
-            type: String,
-            required: true
-        }
+const props = defineProps({
+    ...baseEditModalProps,
+    stationTimeZone: {
+        type: String,
+        required: true
     },
-    setup() {
-        return {v$: useVuelidate()}
+    languageOptions: {
+        type: Object,
+        required: true
     },
-    data() {
-        return {
-            record: {
-                has_custom_art: false,
-                art: null,
-                links: {}
-            },
-            form: {
-                'title': '',
-                'link': '',
-                'description': '',
-                'language': 'en',
-                'author': '',
-                'email': '',
-                'categories': [],
-                'artwork_file': null
-            }
-        };
+    categoriesOptions: {
+        type: Object,
+        required: true
     },
-    computed: {
-        langTitle () {
-            return this.isEditMode
-                ? this.$gettext('Edit Podcast')
-                : this.$gettext('Add Podcast');
-        }
-    },
-    validations: {
-        form: {
-            'title': {required},
-            'link': {},
-            'description': {required},
-            'language': {required},
-            'author': {},
-            'email': {},
-            'categories': {required},
-            'artwork_file': {}
-        }
-    },
-    methods: {
-        resetForm () {
-            this.record = {
-                has_custom_art: false,
-                art: null,
-                links: {
-                    art: null
-                }
-            };
-            this.form = {
-                'title': '',
-                'link': '',
-                'description': '',
-                'language': 'en',
-                'author': '',
-                'email': '',
-                'categories': [],
-                'artwork_file': null
-            };
-        },
-        populateForm (d) {
-            this.record = d;
-            this.form = mergeExisting(this.form, d);
-        }
+    newArtUrl: {
+        type: String,
+        required: true
     }
-};
+});
+
+const emit = defineEmits(['relist']);
+
+const $modal = ref(); // Template Ref
+
+const {record, reset} = useResettableRef({
+    has_custom_art: false,
+    art: null,
+    links: {}
+});
+
+const {
+    loading,
+    error,
+    isEditMode,
+    v$,
+    clearContents,
+    create,
+    edit,
+    doSubmit,
+    close
+} = useBaseEditModal(
+    props,
+    emit,
+    $modal,
+    {
+        'title': {required},
+        'link': {},
+        'description': {required},
+        'language': {required},
+        'author': {},
+        'email': {},
+        'categories': {required},
+        'artwork_file': {}
+    },
+    {
+        'title': '',
+        'link': '',
+        'description': '',
+        'language': 'en',
+        'author': '',
+        'email': '',
+        'categories': [],
+        'artwork_file': null
+    },
+    {
+        resetForm: (originalResetForm) => {
+            originalResetForm();
+            reset();
+        },
+        populateForm: (data, formRef) => {
+            record.value = data;
+            formRef.value = mergeExisting(formRef.value, data);
+        },
+    },
+);
+
+const {$gettext} = useTranslate();
+
+const langTitle = computed(() => {
+    return isEditMode.value
+        ? $gettext('Edit Podcast')
+        : $gettext('Add Podcast');
+});
+
+defineExpose({
+    create,
+    edit,
+    close
+});
 </script>

frontend/vue/components/Stations/SftpUsers/EditModal.vue

@@ -45,11 +45,13 @@ const {
     props,
     emit,
     $modal,
-    {
-        username: {required},
-        password: isEditMode.value ? {} : {required},
-        publicKeys: {}
-    },
+    (formIsEditMode) => computed(() => {
+        return {
+            username: {required},
+            password: formIsEditMode.value ? {} : {required},
+            publicKeys: {}
+        }
+    }),
     {
         username: '',
         password: null,

frontend/vue/components/Stations/Streamers/EditModal.vue

@@ -1,10 +1,10 @@
 <template>
     <modal-form
-        ref="modal"
+        ref="$modal"
         :loading="loading"
         :title="langTitle"
         :error="error"
-        :disable-save-button="v$.form.$invalid"
+        :disable-save-button="v$.$invalid"
         @submit="doSubmit"
         @hidden="clearContents"
     >
@@ -12,14 +12,14 @@
             content-class="mt-3"
             pills
         >
-            <form-basic-info :form="v$.form" />
+            <form-basic-info :form="v$" />
             <form-schedule
                 v-model:schedule-items="form.schedule_items"
-                :form="v$.form"
+                :form="v$"
                 :station-time-zone="stationTimeZone"
             />
             <form-artwork
-                v-model="v$.form.artwork_file.$model"
+                v-model="v$.artwork_file.$model"
                 :artwork-src="record.links.art"
                 :new-art-url="newArtUrl"
                 :edit-art-url="record.links.art"
@@ -27,86 +27,100 @@
         </b-tabs>
     </modal-form>
 </template>
-<script>
+
+<script setup>
 import {required} from '@vuelidate/validators';
 import FormBasicInfo from './Form/BasicInfo';
 import FormSchedule from './Form/Schedule';
 import FormArtwork from './Form/Artwork';
-import BaseEditModal from '~/components/Common/BaseEditModal';
 import mergeExisting from "~/functions/mergeExisting";
-import useVuelidate from "@vuelidate/core";
+import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
+import {computed, ref} from "vue";
+import {useTranslate} from "~/vendor/gettext";
+import {useResettableRef} from "~/functions/useResettableRef";
+import ModalForm from "~/components/Common/ModalForm.vue";
 
-/* TODO Options API */
-
-export default {
-    name: 'EditModal',
-    components: {FormBasicInfo, FormSchedule, FormArtwork},
-    mixins: [BaseEditModal],
-    props: {
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        newArtUrl: {
-            type: String,
-            required: true
-        },
+const props = defineProps({
+    ...baseEditModalProps,
+    stationTimeZone: {
+        type: String,
+        required: true
     },
-    setup() {
-        return {v$: useVuelidate()}
+    newArtUrl: {
+        type: String,
+        required: true
     },
-    validations() {
-        let validations = {
-            form: {
-                'streamer_username': {required},
-                'streamer_password': {},
-                'display_name': {},
-                'comments': {},
-                'is_active': {},
-                'enforce_schedule': {},
-                'artwork_file': {},
-                'schedule_items': {}
-            }
-        };
+});
 
-        if (this.editUrl === null) {
-            validations.form.streamer_password = {required};
-        }
+const emit = defineEmits(['relist']);
 
-        return validations;
-    },
-    data() {
+const $modal = ref(); // Template Ref
+
+const {record, reset} = useResettableRef({
+    has_custom_art: false,
+    links: {}
+});
+
+const {
+    loading,
+    error,
+    isEditMode,
+    form,
+    v$,
+    clearContents,
+    create,
+    edit,
+    doSubmit,
+    close
+} = useBaseEditModal(
+    props,
+    emit,
+    $modal,
+    (formIsEditMode) => computed(() => {
         return {
-            record: {
-                has_custom_art: false,
-                links: {}
-            },
-        }
+            'streamer_username': {required},
+            'streamer_password': (formIsEditMode.value) ? {} : {required},
+            'display_name': {},
+            'comments': {},
+            'is_active': {},
+            'enforce_schedule': {},
+            'artwork_file': {},
+            'schedule_items': {}
+        };
+    }),
+    {
+        'streamer_username': null,
+        'streamer_password': null,
+        'display_name': null,
+        'comments': null,
+        'is_active': true,
+        'enforce_schedule': false,
+        'schedule_items': [],
+        'artwork_file': null
     },
-    computed: {
-        langTitle() {
-            return this.isEditMode
-                ? this.$gettext('Edit Streamer')
-                : this.$gettext('Add Streamer');
-        }
-    },
-    methods: {
-        resetForm() {
-            this.form = {
-                'streamer_username': null,
-                'streamer_password': null,
-                'display_name': null,
-                'comments': null,
-                'is_active': true,
-                'enforce_schedule': false,
-                'schedule_items': [],
-                'artwork_file': null
-            };
+    {
+        resetForm: (originalResetForm) => {
+            originalResetForm();
+            reset();
         },
-        populateForm(d) {
-            this.record = d;
-            this.form = mergeExisting(this.form, d);
-        }
-    }
-};
+        populateForm: (data, formRef) => {
+            record.value = data;
+            formRef.value = mergeExisting(formRef.value, data);
+        },
+    },
+);
+
+const {$gettext} = useTranslate();
+
+const langTitle = computed(() => {
+    return isEditMode.value
+        ? $gettext('Edit Streamer')
+        : $gettext('Add Streamer');
+});
+
+defineExpose({
+    create,
+    edit,
+    close
+});
 </script>

frontend/vue/functions/useBaseEditModal.js

@@ -15,11 +15,12 @@ export function useBaseEditModal(
     props,
     emit,
     $modal,
-    validations,
-    blankForm,
+    originalValidations,
+    originalBlankForm,
     userOptions = {}
 ) {
     const options = {
+        resetForm: null,
         clearContents: null,
         populateForm: null,
         getSubmittableFormData: null,
@@ -39,11 +40,27 @@ export function useBaseEditModal(
         return editUrl.value !== null;
     });
 
-    const {form, v$, resetForm, ifValid} = useVuelidateOnForm(validations, blankForm);
+    const validations = (typeof originalValidations === 'function')
+        ? originalValidations(isEditMode)
+        : originalValidations;
+
+    const blankForm = (typeof originalBlankForm === 'function')
+        ? originalBlankForm(isEditMode)
+        : originalBlankForm;
+
+    const {form, v$, resetForm: originalResetForm, ifValid} = useVuelidateOnForm(validations, blankForm);
+
+    const resetForm = () => {
+        if (typeof options.resetForm === 'function') {
+            return options.resetForm(originalResetForm);
+        }
+
+        originalResetForm();
+    };
 
     const clearContents = () => {
         if (typeof options.clearContents === 'function') {
-            return options.clearContents();
+            return options.clearContents(resetForm);
         }
 
         resetForm();