mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-03 21:37:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

working on model editor

Browse Source
This commit is contained in:
vabene1111
2024-09-12 07:58:12 +02:00
parent 1bed90b804
commit b52d61b6db
4 changed files with 79 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue3/src/components/dialogs/DeleteConfirmDialog.vue
View File

@@ -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>

15
vue3/src/components/dialogs/ModelEditorDialog.vue Normal file
View File

@@ -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>

53
vue3/src/components/model_editors/AccessTokenEditor.vue
View File

@@ -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>

23
vue3/src/components/settings/ApiSettings.vue
View File

@@ -25,18 +25,34 @@
<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-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 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)