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

basic working file selector

Browse Source
This commit is contained in:
vabene1111
2024-08-24 09:59:48 +02:00
parent 8fe6f5c141
commit c92c19d9b2
3 changed files with 52 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
vue3/src/components/inputs/UserFileField.vue
View File

@@ -2,11 +2,20 @@
<v-input> <v-input>
<v-card width="100%" link @click="dialog = !dialog"> <v-card width="100%" link @click="dialog = !dialog">
<v-card-text class="pt-2 pb-2"> <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> <div class="d-flex flex-row">
<v-avatar v-if="model != null && model.preview != ''" :image="model.preview"></v-avatar> <div>
<v-avatar v-if="model != null && model.preview == ''" color="success"><i class="fa-solid fa-eye-slash"></i></v-avatar> <v-avatar v-if="model == null" color="primary"><i class="fa-solid fa-file-arrow-up"></i></v-avatar>
<span class="ms-2" v-if="model == null">{{ $t('select_file') }}</span> <v-avatar v-if="model != null && model.preview != ''" :image="model.preview"></v-avatar>
<span class="ms-2" v-if="model != null">{{ model.name }}</span> <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> </v-card-text>
<!--TODO right floating edit/remove/delete/??? button --> <!--TODO right floating edit/remove/delete/??? button -->
@@ -17,9 +26,9 @@
<v-card> <v-card>
<v-card-title>{{ $t('Files') }}</v-card-title> <v-card-title>{{ $t('Files') }}</v-card-title>
<v-tabs v-model="tab" grow> <v-tabs v-model="tab" grow>
<v-tab v-if="model != null">Preview</v-tab> <v-tab v-if="model != null">{{ $t('Preview') }}</v-tab>
<v-tab>New</v-tab> <v-tab>{{ $t('New') }}</v-tab>
<v-tab>Browse</v-tab> <v-tab>{{ $t('Search') }}</v-tab>
</v-tabs> </v-tabs>
<v-tabs-window v-model="tab"> <v-tabs-window v-model="tab">
<v-tabs-window-item v-if="model != null"> <v-tabs-window-item v-if="model != null">
@@ -34,7 +43,7 @@
{{ DateTime.fromJSDate(model.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }} {{ DateTime.fromJSDate(model.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
</v-card-text> </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-card-actions>
<v-btn :href="model.fileDownload" target="_blank" color="success" prepend-icon="fa-solid fa-file-arrow-down">{{ $t('Download') }}</v-btn> <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-card-text>
<v-text-field :label="$t('Name')" v-model="newUserFile.name"></v-text-field> <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-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-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-card>
</v-tabs-window-item> </v-tabs-window-item>
<v-tabs-window-item> <v-tabs-window-item>
<v-container fluid> <v-card>
<v-text-field :label="$t('Search')" prepend-inner-icon="$search"></v-text-field> <v-card-text>
<v-data-table density="compact" :headers="tableHeaders" :items="userFiles"></v-data-table> <v-text-field :label="$t('Search')" prepend-inner-icon="$search" v-model="tableSearch"></v-text-field>
</v-container> <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-item>
</v-tabs-window> </v-tabs-window>
</v-card> </v-card>
@@ -80,7 +108,8 @@ import {useI18n} from "vue-i18n";
const emit = defineEmits(['update:modelValue', 'create']) const emit = defineEmits(['update:modelValue', 'create'])
const props = defineProps({ const props = defineProps({
model: {type: {} as UserFile, default: null} model: {type: {} as UserFile, default: null},
label: {type: String, default: ''},
}) })
const model = defineModel() const model = defineModel()
@@ -91,9 +120,13 @@ const tab = ref(0)
const newUserFile = ref({} as UserFile) const newUserFile = ref({} as UserFile)
const userFiles = ref([] as UserFile[]) const userFiles = ref([] as UserFile[])
const tableSearch = ref('')
const tableHeaders = 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('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(() => { onMounted(() => {

4
vue3/src/components/settings/SpaceSettings.vue
View File

@@ -29,8 +29,8 @@
</v-col> </v-col>
</v-row> </v-row>
<v-divider class="mt-3 mb-3"></v-divider> <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.image" :label="$t('Image')"></user-file-field>
<user-file-field v-model="space.logoColor32"></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> <user-file-field v-model="space.logoColor128"></user-file-field>
<v-text-field></v-text-field> <v-text-field></v-text-field>

1
vue3/src/locales/en.json
View File

@@ -574,6 +574,7 @@
"tsp": "teaspoon [tsp] (US, volume)", "tsp": "teaspoon [tsp] (US, volume)",
"updatedon": "Updated On", "updatedon": "Updated On",
"view_recipe": "View Recipe", "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_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_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 ?" "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 ?"