composable for model editor functions WIP

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -1,16 +1,16 @@
 <template>
-    <v-card>
+    <v-card :loading="loading">
         <v-card-title>
             {{ $t(modelClass.model.localizationKey) }}
             <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
         </v-card-title>
         <v-card-text>
-            <v-form>
+            <v-form :disabled="loading">
                 <v-row>
                     <v-col cols="10">
                         <v-text-field label="Token" v-model="editingObj.token" disabled></v-text-field>
                     </v-col>
-                    <v-col cols="2" >
+                    <v-col cols="2">
                         <btn-copy :copy-value="editingObj.token" class="me-1"></btn-copy>
                     </v-col>
                 </v-row>
@@ -23,7 +23,7 @@
             <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
                 <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
             </v-btn>
-            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject(modelClass, editingObj)">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
         </v-card-actions>
     </v-card>
 </template>
@@ -39,19 +39,22 @@ import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/Messa
 import {DateTime} from "luxon";
 import BtnCopy from "@/components/buttons/BtnCopy.vue";
 import {GenericModel, getGenericModelFromString} from "@/types/Models";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
 
 const {t} = useI18n()
 
 const emit = defineEmits(['create', 'save', 'delete', 'close'])
 
+
 const props = defineProps({
     item: {type: {} as PropType<AccessToken>, required: false},
     dialog: {type: Boolean, default: false}
 })
 
-const editingObj = ref({} as AccessToken)
+//const editingObj = ref({} as AccessToken)
 const modelClass = ref({} as GenericModel)
-const loading = ref(false)
+
+const {deleteObject, saveObject, loading, editingObj} = useModelEditorFunctions<AccessToken>(emit)
 
 /**
  * checks if given object has ID property to determine if it needs to be updated or created
@@ -81,41 +84,6 @@ onMounted(() => {
     }
 })
 
-/**
- * saves the edited object in the database
- */
-async function saveObject() {
-    if (isUpdate.value) {
-        modelClass.value.update(editingObj.value.id, editingObj.value).then(r => {
-            editingObj.value = r
-            emit('save', r)
-            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
-        })
-    } else {
-        modelClass.value.create(editingObj.value).then(r => {
-            editingObj.value = r
-            emit('create', r)
-            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
-        })
-    }
-}
-
-/**
- * deletes the editing object from the database
- */
-async function deleteObject() {
-    modelClass.value.destroy(editingObj.value.id).then(r => {
-        editingObj.value = {} as AccessToken
-        emit('delete', editingObj.value)
-    }).catch(err => {
-        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
-    })
-}
-
 </script>
 
 <style scoped>

vue3/src/composables/useModelEditorFunctions.ts

@@ -0,0 +1,55 @@
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {computed, onBeforeMount, ref} from "vue";
+import {GenericModel} from "@/types/Models";
+
+// TODO type emit parameter (https://mokkapps.de/vue-tips/emit-event-from-composable)
+// TODO alternatively there seems to be a getContext method to get the calling context
+
+export function useModelEditorFunctions<T>(emit: any) {
+
+    const loading = ref(false)
+    const editingObj = ref({} as T)
+
+    onBeforeMount(() => {
+        console.log('COMPOSABLE OF TYPE ', typeof editingObj)
+    })
+
+    /**
+     * saves the edited object in the database
+     */
+    function saveObject(modelClass: GenericModel, obj: any) {
+        loading.value = true
+        if (obj.id) {
+            modelClass.update(obj.id, obj).then((r: any) => {
+                emit('save', r)
+                useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+            }).catch((err: any) => {
+                useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+            }).finally(() => {
+                loading.value = false
+            })
+        } else {
+            modelClass.create(obj).then((r: any) => {
+                emit('create', r)
+                useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+            }).catch((err: any) => {
+                useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+            }).finally(() => {
+                loading.value = false
+            })
+        }
+    }
+
+    /**
+     * deletes the editing object from the database
+     */
+    function deleteObject(modelClass: GenericModel, obj: any) {
+        modelClass.destroy(obj.id).then((r: any) => {
+            emit('delete', obj)
+        }).catch((err: any) => {
+            useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+        })
+    }
+
+    return {emit, saveObject, deleteObject, loading, editingObj}
+}