From c92c19d9b2bca8dc7d0114f23e983b37dd6eef2f Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sat, 24 Aug 2024 09:59:48 +0200
Subject: [PATCH] basic working file selector

---
 vue3/src/components/inputs/UserFileField.vue  | 65 ++++++++++++++-----
 .../src/components/settings/SpaceSettings.vue |  4 +-
 vue3/src/locales/en.json                      |  1 +
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/vue3/src/components/inputs/UserFileField.vue b/vue3/src/components/inputs/UserFileField.vue
index e247a99c4..ddf7cefef 100644
--- a/vue3/src/components/inputs/UserFileField.vue
+++ b/vue3/src/components/inputs/UserFileField.vue
@@ -2,11 +2,20 @@
     <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>
+                <div class="d-flex flex-row">
+                    <div>
+                        <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>
+
+                    </div>
+                    <div class="align-content-center">
+                        <template v-if="label != ''"><span class="ms-2 text-disabled">{{ label }}</span><br/></template>
+                        <span class="ms-2" v-if="model == null">{{ $t('select_file') }}</span>
+                        <span class="ms-2" v-if="model != null">{{ model.name }}</span></div>
+                </div>
+
+
             </v-card-text>
 
             <!--TODO right floating edit/remove/delete/??? button -->
@@ -17,9 +26,9 @@
         <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-tab v-if="model != null">{{ $t('Preview') }}</v-tab>
+                <v-tab>{{ $t('New') }}</v-tab>
+                <v-tab>{{ $t('Search') }}</v-tab>
             </v-tabs>
             <v-tabs-window v-model="tab">
                 <v-tabs-window-item v-if="model != null">
@@ -34,7 +43,7 @@
                             {{ 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-img class="mr-4 ml-4" max-height="50vh" 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>
@@ -52,16 +61,35 @@
                         <v-card-text>
                             <v-text-field :label="$t('Name')" v-model="newUserFile.name"></v-text-field>
                             <v-file-input :label="$t('File')" v-model="newUserFile.file"></v-file-input>
-                            <v-btn color="save" prepend-icon="$save" @click="uploadFile()">{{ $t('Save') }}</v-btn>
+
 
                         </v-card-text>
+
+                        <v-card-actions>
+                            <v-btn color="save" prepend-icon="$save" @click="uploadFile()">{{ $t('Save') }}</v-btn>
+                            <v-btn @click="dialog = false">{{ $t('Close') }}</v-btn>
+                        </v-card-actions>
                     </v-card>
                 </v-tabs-window-item>
                 <v-tabs-window-item>
-                    <v-container fluid>
-                        <v-text-field :label="$t('Search')" prepend-inner-icon="$search"></v-text-field>
-                        <v-data-table density="compact" :headers="tableHeaders" :items="userFiles"></v-data-table>
-                    </v-container>
+                    <v-card>
+                        <v-card-text>
+                            <v-text-field :label="$t('Search')" prepend-inner-icon="$search" v-model="tableSearch"></v-text-field>
+                            <v-data-table density="compact" :headers="tableHeaders" :items="userFiles" v-model:search="tableSearch">
+                                <template #item.preview="{item}">
+                                    <v-avatar :image="item.preview"></v-avatar>
+                                </template>
+                                <template #item.actions="{item}">
+                                    <v-btn icon="fa-solid fa-hand-pointer" color="save" density="comfortable" @click="model = item; tab=0"></v-btn>
+                                </template>
+                            </v-data-table>
+
+                        </v-card-text>
+
+                        <v-card-actions>
+                            <v-btn @click="dialog = false">{{ $t('Close') }}</v-btn>
+                        </v-card-actions>
+                    </v-card>
                 </v-tabs-window-item>
             </v-tabs-window>
         </v-card>
@@ -80,7 +108,8 @@ import {useI18n} from "vue-i18n";
 const emit = defineEmits(['update:modelValue', 'create'])
 
 const props = defineProps({
-    model: {type: {} as UserFile, default: null}
+    model: {type: {} as UserFile, default: null},
+    label: {type: String, default: ''},
 })
 
 const model = defineModel()
@@ -91,9 +120,13 @@ const tab = ref(0)
 const newUserFile = ref({} as UserFile)
 const userFiles = ref([] as UserFile[])
 
+const tableSearch = ref('')
 const tableHeaders = ref([
-    {title: 'ID', value: 'id'},
+    {title: t('Quick actions'), key: 'actions'},
+    {title: t('Preview'), key: 'preview'},
     {title: t('Name'), value: 'name'},
+    {title: t('created_on'), key: 'createdAt', value: item => DateTime.fromJSDate(item.createdAt).toLocaleString(DateTime.DATETIME_MED)},
+    {title: t('created_by'), value: 'createdBy.displayName',},
 ])
 
 onMounted(() => {
diff --git a/vue3/src/components/settings/SpaceSettings.vue b/vue3/src/components/settings/SpaceSettings.vue
index f9c98aa8f..21c5b370e 100644
--- a/vue3/src/components/settings/SpaceSettings.vue
+++ b/vue3/src/components/settings/SpaceSettings.vue
@@ -29,8 +29,8 @@
             </v-col>
         </v-row>
         <v-divider class="mt-3 mb-3"></v-divider>
-        <user-file-field v-model="space.image"></user-file-field>
-        <user-file-field v-model="space.logoColor32"></user-file-field>
+        <user-file-field v-model="space.image" :label="$t('Image')"></user-file-field>
+        <user-file-field v-model="space.logoColor32" :label="$t('Logo') + ' 32x32px'"></user-file-field>
         <user-file-field v-model="space.logoColor128"></user-file-field>
 
         <v-text-field></v-text-field>
diff --git a/vue3/src/locales/en.json b/vue3/src/locales/en.json
index cc278ac50..7e153f83d 100644
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -574,6 +574,7 @@
 	"tsp": "teaspoon [tsp] (US, volume)",
 	"updatedon": "Updated On",
 	"view_recipe": "View Recipe",
+	"Preview": "Preview",
 	"warning_duplicate_filter": "Warning: Due to technical limitations having multiple filters of the same combination (and/or/not) might yield unexpected results.",
 	"warning_feature_beta": "This feature is currently in a BETA (testing) state. Please expect bugs and possibly breaking changes in the future (possibly losing feature-related data) when using this feature.",
 	"warning_space_delete": "You can delete your space including all recipes, shopping lists, meal plans and whatever else you have created. This cannot be undone! Are you sure you want to do this ?"