working on model editor

vue3/src/components/dialogs/DeleteConfirmDialog.vue

@@ -1,6 +1,6 @@
 <template>
 
-    <v-dialog max-width="400" activator="parent" v-model="dialog">
+    <v-dialog max-width="600" activator="parent" v-model="dialog">
         <v-card>
             <v-card-title>{{ $t('Delete') }}</v-card-title>
             <v-card-text>

vue3/src/components/dialogs/ModelEditorDialog.vue

@@ -0,0 +1,15 @@
+<template>
+    <v-dialog max-width="600" activator="parent">
+        <template  v-slot:default="{ isActive }">
+            <slot name="default"></slot>
+        </template>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/model_editors/AccessTokenEditor.vue

@@ -3,15 +3,19 @@
         <v-card-title>{{ $t(OBJ_LOCALIZATION_KEY) }}</v-card-title>
         <v-card-text>
             <v-form>
-                <v-text-field label="Token" v-model="editingObj.token" :disabled="isUpdate"></v-text-field>
+                <v-text-field label="Token" v-model="editingObj.token" disabled>
+                    <template #append>
+                        <v-btn color="info" variant="tonal" icon="$copy"></v-btn>
+                    </template>
+                </v-text-field>
                 <v-text-field label="Scope" v-model="editingObj.scope"></v-text-field>
-                <v-date-input :label="$t('Valid Until')" v-model="editingObj.scope"></v-date-input>
+                <v-date-input :label="$t('Valid Until')" v-model="editingObj.expires"></v-date-input>
             </v-form>
         </v-card-text>
         <v-card-actions>
-            <v-btn color="save" prepend-icon="$save">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
-            <v-btn color="delete" prepend-icon="$delete">{{ $t('Delete') }}
-                <delete-confirm-dialog :object-name="objectName"></delete-confirm-dialog>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+            <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-card-actions>
     </v-card>
@@ -24,11 +28,14 @@ import {computed, onMounted, ref} from "vue";
 import {AccessToken, ApiApi} from "@/openapi";
 import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
 import {useI18n} from "vue-i18n";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 
 const {t} = useI18n()
 
+const emit = defineEmits(['create', 'save', 'delete'])
+
 const props = defineProps({
-    accessToken: {type: {} as AccessToken, required: false}
+     item: {type: {} as AccessToken, required: false},
 })
 
 const OBJ_LOCALIZATION_KEY = 'Access_Token'
@@ -50,28 +57,46 @@ const objectName = computed(() => {
 })
 
 onMounted(() => {
-    if (props.accessToken != null) {
-        editingObj.value = props.accessToken
+    if (props.item != null) {
+        editingObj.value = props.item
     }
 })
 
 /**
  * saves the edited object in the database
  */
-function saveObject() {
+async function saveObject() {
     let api = new ApiApi()
     if (isUpdate.value) {
-
+        api.apiAccessTokenUpdate({id: editingObj.value.id, accessToken: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('save', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
     } else {
-
+        api.apiAccessTokenCreate({accessToken: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('create', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        })
     }
 }
 
 /**
- * test
+ * deletes the editing object from the database
  */
-function deleteObject() {
-
+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 ?
+        emit('delete')
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+    })
 }
 
 </script>

vue3/src/components/settings/ApiSettings.vue

@@ -23,20 +23,36 @@
         Read and write do what the name says, the bookmarklet scope is only used for the bookmarklet to limit access to
         it.
 
-        <v-alert color="warning" variant="tonal">Make sure to save your token after creation as they cannot be viewed afterwards. </v-alert>
+        <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>
+        </v-btn>
 
         <v-list>
             <v-list-item v-for="at in accessTokenList">
-                <v-list-item-title>{{at.token}}</v-list-item-title>
-                <v-list-item-subtitle>Scope {{at.scope}} Expires {{DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL)}}</v-list-item-subtitle>
+                <v-list-item-title>{{ at.token }}</v-list-item-title>
+                <v-list-item-subtitle>Scope {{ at.scope }}
+                    <v-chip color="error" density="compact" v-if="at.expires < DateTime.now().toJSDate()">Expired</v-chip>
+                    <span v-if="at.expires >= DateTime.now().toJSDate()">
+                        Expires {{ DateTime.fromJSDate(at.expires).toLocaleString(DateTime.DATE_FULL) }}
+                    </span>
+                </v-list-item-subtitle>
                 <template #append>
-<!--                    <v-btn icon="$edit" color="edit"></v-btn>-->
-<!--                    <v-btn icon="$delete" color="delete"></v-btn>-->
+                    <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>
+                    </v-btn>
+                    <!--                    <v-btn icon="$delete" color="delete"></v-btn>-->
                 </template>
             </v-list-item>
         </v-list>
 
-        <access-token-editor class="mt-2"></access-token-editor>
+
 
     </v-form>
 </template>
@@ -49,6 +65,7 @@ import {AccessToken, ApiApi} from "@/openapi";
 import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
 import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
+import ModelEditorDialog from "@/components/dialogs/ModelEditorDialog.vue";
 
 const accessTokenList = ref([] as AccessToken[])
 const accessToken = ref({} as AccessToken)
@@ -57,7 +74,7 @@ onMounted(() => {
     loadAccessTokens()
 })
 
-function loadAccessTokens(){
+function loadAccessTokens() {
     const api = new ApiApi()
     api.apiAccessTokenList().then(r => {
         accessTokenList.value = r