Make BaseEditForm a Composition-able.

frontend/vue/components/Admin/CustomFields/EditModal.vue

@@ -1,6 +1,6 @@
 <template>
     <modal-form
-        ref="modal"
+        ref="$modal"
         :loading="loading"
         :title="langTitle"
         :error="error"
@@ -15,51 +15,63 @@
     </modal-form>
 </template>
 
-<script>
+<script setup>
 import {required} from '@vuelidate/validators';
-import BaseEditModal from '~/components/Common/BaseEditModal.vue';
+import ModalForm from "~/components/Common/ModalForm.vue";
 import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form.vue";
-import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
-import {defineComponent} from "vue";
+import {computed, ref} from "vue";
+import {baseEditModalProps, useBaseEditModal} from "~/functions/useBaseEditModal";
+import {useTranslate} from "~/vendor/gettext";
 
-/* TODO Options API */
+const props = defineProps({
+    ...baseEditModalProps,
+    autoAssignTypes: {
+        type: Object,
+        required: true
+    }
+});
 
-export default defineComponent({
-    name: 'AdminCustomFieldsEditModal',
-    components: {AdminCustomFieldsForm},
-    mixins: [BaseEditModal],
-    props: {
-        autoAssignTypes: {
-            type: Object,
-            required: true
-        }
-    },
-    setup() {
-        const {form, resetForm, v$} = useVuelidateOnForm(
-            {
-                'name': {required},
-                'short_name': {},
-                'auto_assign': {}
-            },
-            {
-                'name': '',
-                'short_name': '',
-                'auto_assign': ''
-            }
-        );
+const emit = defineEmits(['relist']);
 
-        return {
-            form,
-            resetForm,
-            v$
-        };
+const $modal = ref(); // Template Ref
+
+const {
+    loading,
+    error,
+    isEditMode,
+    v$,
+    clearContents,
+    create,
+    edit,
+    doSubmit,
+    close
+} = useBaseEditModal(
+    props,
+    emit,
+    $modal,
+    {
+        'name': {required},
+        'short_name': {},
+        'auto_assign': {}
     },
-    computed: {
-        langTitle() {
-            return this.isEditMode
-                ? this.$gettext('Edit Custom Field')
-                : this.$gettext('Add Custom Field');
-        }
+    {
+        'name': '',
+        'short_name': '',
+        'auto_assign': ''
     },
+);
+
+const {$gettext} = useTranslate();
+
+const langTitle = computed(() => {
+    return isEditMode.value
+        ? $gettext('Edit Custom Field')
+        : $gettext('Add Custom Field');
+});
+
+defineExpose({
+    create,
+    edit,
+    close
 });
 </script>

frontend/vue/components/Common/ModalForm.vue

@@ -137,6 +137,7 @@ const show = () => {
 };
 
 defineExpose({
-    show
+    show,
+    hide
 });
 </script>

frontend/vue/functions/useBaseEditModal.js

@@ -0,0 +1,166 @@
+import {computed, ref, toRef} from "vue";
+import {useVuelidateOnForm} from "~/functions/useVuelidateOnForm";
+import mergeExisting from "~/functions/mergeExisting";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
+
+export const baseEditModalProps = {
+    createUrl: {
+        type: String,
+        required: true
+    }
+};
+
+export function useBaseEditModal(
+    props,
+    emit,
+    $modal,
+    validations,
+    blankForm,
+    userOptions = {}
+) {
+    const options = {
+        clearContents: null,
+        populateForm: null,
+        getSubmittableFormData: null,
+        buildSubmitRequest: null,
+        onSubmitSuccess: null,
+        onSubmitError: null,
+        ...userOptions
+    };
+
+    const createUrl = toRef(props, 'createUrl');
+
+    const loading = ref(true);
+    const error = ref(null);
+    const editUrl = ref(null);
+
+    const isEditMode = computed(() => {
+        return editUrl.value !== null;
+    });
+
+    const {form, v$, resetForm, ifValid} = useVuelidateOnForm(validations, blankForm);
+
+    const clearContents = () => {
+        if (typeof options.clearContents === 'function') {
+            return options.clearContents();
+        }
+
+        resetForm();
+
+        loading.value = false;
+        error.value = null;
+        editUrl.value = null;
+    };
+
+    const create = () => {
+        clearContents();
+
+        $modal.value.show();
+    };
+
+    const populateForm = (data) => {
+        if (typeof options.populateForm === 'function') {
+            return options.populateForm();
+        }
+
+        form.value = mergeExisting(form.value, data);
+    }
+
+    const {wrapWithLoading, notifySuccess} = useNotify();
+    const {axios} = useAxios();
+
+    const doLoad = () => {
+        wrapWithLoading(
+            axios.get(editUrl.value)
+        ).then((resp) => {
+            populateForm(resp.data);
+            loading.value = false;
+        }).catch(() => {
+            close();
+        });
+    };
+
+    const edit = (recordUrl) => {
+        clearContents();
+
+        editUrl.value = recordUrl;
+        $modal.value.show();
+
+        doLoad();
+    };
+
+    const getSubmittableFormData = () => {
+        if (typeof options.getSubmittableFormData === 'function') {
+            return options.getSubmittableFormData();
+        }
+
+        return form.value;
+    };
+
+    const buildSubmitRequest = () => {
+        if (typeof options.buildSubmitRequest === 'function') {
+            return options.buildSubmitRequest();
+        }
+
+        return {
+            method: (isEditMode.value)
+                ? 'PUT'
+                : 'POST',
+            url: (isEditMode.value)
+                ? editUrl.value
+                : createUrl.value,
+            data: getSubmittableFormData()
+        };
+    };
+
+    const close = () => {
+        $modal.value.hide();
+    };
+
+    const onSubmitSuccess = () => {
+        if (typeof options.onSubmitSuccess === 'function') {
+            return options.onSubmitSuccess();
+        }
+
+        notifySuccess();
+        emit('relist');
+        close();
+    };
+
+    const onSubmitError = (error) => {
+        if (typeof options.onSubmitError === 'function') {
+            return options.onSubmitError(error);
+        }
+
+        error.value = error.response.data.message;
+    };
+
+    const doSubmit = () => {
+        ifValid(() => {
+            error.value = null;
+
+            wrapWithLoading(
+                axios(buildSubmitRequest())
+            ).then((resp) => {
+                onSubmitSuccess(resp);
+            }).catch((error) => {
+                onSubmitError(error);
+            });
+        });
+    };
+
+    return {
+        loading,
+        error,
+        editUrl,
+        isEditMode,
+        form,
+        v$,
+        clearContents,
+        create,
+        edit,
+        doSubmit,
+        close
+    };
+}