updated model editors to composable and base template

This commit is contained in:
vabene1111
2024-09-28 13:07:46 +02:00
parent 67fff17f06
commit 143eafa24a
43 changed files with 531 additions and 522 deletions

View File

@@ -1,9 +1,13 @@
<template>
<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>
<model-editor-base
:loading="loading"
:dialog="dialog"
@save="saveObject"
@delete="deleteObject"
@close="emit('close')"
:is-update="isUpdate()"
:model-name="$t(modelClass.model.localizationKey)"
:object-name="editingObjName()">
<v-card-text>
<v-form :disabled="loading">
<v-row>
@@ -19,65 +23,33 @@
<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="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(modelClass, editingObj)">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
</v-card-actions>
</v-card>
</model-editor-base>
</template>
<script setup lang="ts">
import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
import {computed, onBeforeMount, onMounted, PropType, ref} from "vue";
import {onMounted, PropType} from "vue";
import {AccessToken} 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";
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'])
import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
const props = defineProps({
item: {type: {} as PropType<AccessToken>, required: false},
item: {type: {} as PropType<AccessToken>, required: false, default: null},
itemId: {type: Number, required: false, default: undefined},
dialog: {type: Boolean, default: false}
})
//const editingObj = ref({} as AccessToken)
const modelClass = ref({} as GenericModel)
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<AccessToken>('AccessToken', emit)
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
*/
const isUpdate = computed(() => {
return editingObj.value.id !== undefined
})
/**
* display name for object in headers/delete dialog/...
*/
const objectName = computed(() => {
return isUpdate ? `${t(modelClass.value.model.localizationKey)} ${editingObj.value.token}` : `${t(modelClass.value.model.localizationKey)} (${t('New')})`
})
onBeforeMount(() => {
modelClass.value = getGenericModelFromString('AccessToken', t)
})
onMounted(() => {
if (props.item != null) {
editingObj.value = props.item
} else {
if (!setupState(props.item, props.itemId)) {
// functions to populate defaults
editingObj.value.expires = DateTime.now().plus({year: 1}).toJSDate()
editingObj.value.scope = 'read write'