some user file editor bits

vue3/src/components/model_editors/AutomationEditor.vue

@@ -10,7 +10,6 @@
         :object-name="editingObjName()">
         <v-card-text>
             <v-form :disabled="loading">
-
                 <v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
                 <v-select :label="$t('Type')" :items="AUTOMATION_TYPES" v-model="editingObj.type"></v-select>
 
@@ -22,6 +21,7 @@
                 <v-number-input :label="$t('Order')" :step="10" v-model="editingObj.order" :hint="$t('OrderInformation')" control-variant="stacked"></v-number-input>
                 <v-checkbox :label="$t('Disabled')" v-model="editingObj.disabled"></v-checkbox>
 
+                <a href="https://docs.tandoor.dev/features/automation/" target="_blank">{{$t('Learn_More')}}</a>
             </v-form>
         </v-card-text>
     </model-editor-base>

vue3/src/components/model_editors/UserFileEditor.vue

@@ -0,0 +1,112 @@
+<template>
+    <model-editor-base
+        :loading="loading"
+        :dialog="dialog"
+        @save="saveObject"
+        @delete="deleteObject"
+        @close="emit('close')"
+        :is-update="isUpdate()"
+        :model-class="modelClass"
+        :object-name="editingObjName()">
+        <v-card-text>
+            <v-form :disabled="loading">
+
+                <v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
+<!--                <v-file-input :label="$t('File')" v-model="editingObj.file" @change="uploadFile()"></v-file-input>-->
+
+                <v-label> {{ $t('Preview') }}</v-label>
+                <v-img max-height="25vh" rounded :src="editingObj.preview"></v-img>
+
+                <v-alert v-if="!loading">
+                    {{ $n(editingObj.fileSizeKb / 1000) }} MB <br/>
+                    {{ editingObj.createdBy.displayName }} <br/>
+                    {{ DateTime.fromJSDate(editingObj.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
+                    <template #append>
+                        <v-btn :href="editingObj.fileDownload" target="_blank" color="success" prepend-icon="fa-solid fa-file-arrow-down">{{ $t('Download') }}</v-btn>
+                    </template>
+                </v-alert>
+
+
+            </v-form>
+        </v-card-text>
+    </model-editor-base>
+
+</template>
+
+<script setup lang="ts">
+
+import {onMounted, PropType} from "vue";
+import {Keyword, UserFile, UserFileFromJSON} from "@/openapi";
+import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
+import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
+import {useI18n} from "vue-i18n";
+import {DateTime} from "luxon";
+import UserFileField from "@/components/inputs/UserFileField.vue";
+import {getCookie} from "@/utils/cookie";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+
+const {t} = useI18n()
+
+const props = defineProps({
+    item: {type: {} as PropType<UserFile>, required: false, default: null},
+    itemId: {type: [Number, String], required: false, default: undefined},
+    dialog: {type: Boolean, default: false}
+})
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<UserFile>('UserFile', emit)
+
+// object specific data (for selects/display)
+
+onMounted(() => {
+    setupState(props.item, props.itemId)
+})
+
+// TODO this is aweful, need to fix but works for now
+function uploadFile() {
+    loading.value = true
+    let formData = new FormData()
+    formData.append('file', editingObj.value.file)
+    formData.append('name', editingObj.value.name)
+
+    if (isUpdate()) {
+        //TODO proper URL finding (sub path setups)
+        fetch('/api/user-file/' + editingObj.value.id + '/', {
+            method: 'PUT',
+            headers: {'X-CSRFToken': getCookie('csrftoken')},
+            body: formData
+        }).then(r => { // TODO maybe better use existing URL clients response functions for parsing
+            r.json().then(r => {
+                editingObj.value = UserFileFromJSON(r)
+            })
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        }).finally(() => {
+            loading.value = false
+        })
+    } else {
+        //TODO proper URL finding (sub path setups)
+        fetch('/api/user-file/', {
+            method: 'POST',
+            headers: {'X-CSRFToken': getCookie('csrftoken')},
+            body: formData
+        }).then(r => { // TODO maybe better use existing URL clients response functions for parsing
+            r.json().then(r => {
+                editingObj.value = UserFileFromJSON(r)
+            })
+            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        }).finally(() => {
+            loading.value = false
+        })
+    }
+
+}
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/types/Models.ts

@@ -70,7 +70,7 @@ export type Model = {
 }
 export let SUPPORTED_MODELS = new Map<string, Model>()
 
-export type EditorSupportedModels = 'UnitConversion' | 'AccessToken' | 'InviteLink' | 'UserSpace' | 'MealType' | 'MealPlan' | 'Property' | 'Food' | 'Supermarket' | 'SupermarketCategory' | 'PropertyType' | 'Automation'
+export type EditorSupportedModels = 'UnitConversion' | 'AccessToken' | 'InviteLink' | 'UserSpace' | 'MealType' | 'MealPlan' | 'Property' | 'Food' | 'Supermarket' | 'SupermarketCategory' | 'PropertyType' | 'Automation' | 'Keyword' | 'UserFile'
 
 export const TFood = {
     name: 'Food',