space settings and file dialog

vue3/src/components/inputs/UserFileField.vue

@@ -0,0 +1,81 @@
+<template>
+    <v-input>
+        <v-card width="100%" link @click="dialog = !dialog">
+            <v-card-text class="pt-2 pb-2">
+                <v-avatar v-if="model == null" color="primary"><i class="fa-solid fa-file-arrow-up"></i></v-avatar>
+                <v-avatar v-if="model != null && model.preview != ''" :image="model.preview"></v-avatar>
+                <v-avatar v-if="model != null && model.preview == ''" color="success"><i class="fa-solid fa-eye-slash"></i></v-avatar>
+                <span class="ms-2" v-if="model == null">{{ $t('select_file') }}</span>
+                <span class="ms-2" v-if="model != null">{{ model.name }}</span>
+            </v-card-text>
+
+            <!--TODO right floating edit/remove/delete/??? button -->
+        </v-card>
+    </v-input>
+
+    <v-dialog max-width="600px" v-model="dialog">
+        <v-card>
+            <v-card-title>{{ $t('Files') }}</v-card-title>
+            <v-tabs v-model="tab" grow>
+                <v-tab v-if="model != null">Preview</v-tab>
+                <v-tab>New</v-tab>
+                <v-tab>Browse</v-tab>
+            </v-tabs>
+            <v-tabs-window v-model="tab">
+                <v-tabs-window-item v-if="model != null">
+                    <v-card>
+
+                        <v-card-title>
+                            {{ model.name }}
+                        </v-card-title>
+                        <v-card-text>
+                            {{ $n(model.fileSizeKb / 1000) }} MB <br/>
+                            {{ model.createdBy.displayName }} <br/>
+                            {{ DateTime.fromJSDate(model.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
+                        </v-card-text>
+
+                        <v-img class="mr-4 ml-4" rounded :src="model.preview"></v-img>
+
+                        <v-card-actions>
+                            <v-btn :href="model.fileDownload" target="_blank" color="success" prepend-icon="fa-solid fa-file-arrow-down">{{ $t('Download') }}</v-btn>
+                            <!-- TODO implement -->
+                            <v-btn color="delete" prepend-icon="$delete">{{ $t('Delete') }}</v-btn>
+                        </v-card-actions>
+                    </v-card>
+
+
+                </v-tabs-window-item>
+                <v-tabs-window-item :value="0">
+                    <v-file-input></v-file-input>
+                </v-tabs-window-item>
+                <v-tabs-window-item :value="0">
+                    TODO file List
+                </v-tabs-window-item>
+            </v-tabs-window>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+
+import {UserFile} from "@/openapi";
+import {ref} from "vue";
+import {DateTime} from "luxon";
+
+const emit = defineEmits(['update:modelValue', 'create'])
+
+const props = defineProps({
+    model: {type: {} as UserFile, default: null}
+})
+
+const model = defineModel()
+
+const dialog = ref(false)
+const tab = ref(0)
+
+</script>
+
+
+<style scoped>
+
+</style>