basic model editor workflow done

vue3/src/components/dialogs/ModelEditorDialog.vue

@@ -1,13 +1,51 @@
 <template>
-    <v-dialog max-width="600" activator="parent">
-        <template  v-slot:default="{ isActive }">
-            <slot name="default"></slot>
-        </template>
+    <v-dialog max-width="600" activator="parent" v-model="dialog">
+        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" v-if="model == SupportedModels.AccessToken"></access-token-editor>
     </v-dialog>
 </template>
 
 <script setup lang="ts">
 
+
+import {PropType, ref} from "vue";
+import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
+import {AccessToken, Food} from "@/openapi";
+
+enum SupportedModels {
+    AccessToken = 'AccessToken'
+}
+
+const emit = defineEmits(['create', 'save', 'delete'])
+
+const props = defineProps({
+    model: {
+        type: '',
+        required: true,
+        validator: (val) => ['AccessToken'].includes(val)
+    },
+    item: {default: null},
+    closeAfterCreate: {default: true},
+    closeAfterSave: {default: true},
+    closeAfterDelete: {default: true},
+})
+
+const dialog = ref(false)
+
+function createEvent(arg) {
+    emit('create', arg)
+    dialog.value = dialog.value && !props.closeAfterCreate
+}
+
+function saveEvent(arg) {
+    emit('save', arg)
+    dialog.value = dialog.value && !props.closeAfterSave
+}
+
+function deleteEvent(arg) {
+    emit('delete', arg)
+    dialog.value = dialog.value && !props.closeAfterDelete
+}
+
 </script>
 
 <style scoped>

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -29,6 +29,7 @@ import {AccessToken, ApiApi} from "@/openapi";
 import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {useI18n} from "vue-i18n";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {DateTime} from "luxon";
 
 const {t} = useI18n()
 
@@ -59,6 +60,10 @@ const objectName = computed(() => {
 onMounted(() => {
     if (props.item != null) {
         editingObj.value = props.item
+    } else {
+        // functions to populate defaults
+        editingObj.value.expires = DateTime.now().plus({year: 1}).toJSDate()
+        editingObj.value.scope = 'read write'
     }
 })
 
@@ -92,7 +97,7 @@ async function saveObject() {
 async function deleteObject() {
     let api = new ApiApi()
     api.apiAccessTokenDestroy({id: editingObj.value.id}).then(r => {
-        editingObj.value = {} as AccessToken // TODO make more generic with class as constant ?
+        editingObj.value = {} as AccessToken
         emit('delete')
     }).catch(err => {
         useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)

vue3/src/components/settings/ApiSettings.vue

@@ -26,9 +26,7 @@
         <v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards.</v-alert>
 
         <v-btn prepend-icon="$create" color="create">{{$t('New')}}
-             <model-editor-dialog>
-                 <access-token-editor @create="loadAccessTokens()"></access-token-editor>
-             </model-editor-dialog>
+             <model-editor-dialog model="AccessToken" @create="loadAccessTokens()" :close-after-create="false"></model-editor-dialog>
         </v-btn>
 
         <v-list>
@@ -43,11 +41,8 @@
                 <template #append>
                     <v-btn color="edit">
                         <v-icon icon="$edit"></v-icon>
-                        <model-editor-dialog>
-                            <access-token-editor :item="at" class="mt-2" @delete="loadAccessTokens()"></access-token-editor>
-                        </model-editor-dialog>
+                        <model-editor-dialog model="AccessToken" :item="at" class="mt-2" @delete="loadAccessTokens()"></model-editor-dialog>
                     </v-btn>
-                    <!--                    <v-btn icon="$delete" color="delete"></v-btn>-->
                 </template>
             </v-list-item>
         </v-list>
@@ -61,7 +56,7 @@
 <script setup lang="ts">
 
 import {onMounted, ref} from "vue";
-import {AccessToken, ApiApi} from "@/openapi";
+import {ApiApi} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
 import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";