Flaschengeist
/
flaschengeist-pricelist
7
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Activity

[chore] better filepicker for images

This commit is contained in:
Tim Gröger 2021-11-20 10:48:10 +01:00
parent 33d91c4b9a
commit 774db1873a
3 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/CalculationTable.vue
View File

@ -37,9 +37,13 @@
</template>
<template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
<q-card>
<q-img v-if="showPic && props.row.has_image" style="max-height: 256px" :src="image(props.row.id)" fit="contain">
<q-img
v-if="showPic && props.row.has_image"
style="max-height: 256px"
:src="image(props.row.id)"
fit="contain"
>
<div
v-if="!public && !nodetails && editable"
class="absolute-top-right justify-end"
@ -84,7 +88,12 @@
</div>
</template>
</q-img>
<q-img v-if="showPic && !props.row.has_image" class="bg-white" style="max-height: 256px" src="no-image.svg">
<q-img
v-if="showPic && !props.row.has_image"
class="bg-white"
style="max-height: 256px"
src="no-image.svg"
>
<div
v-if="!public && !nodetails && editable"
class="absolute-top-right justify-end"
@ -214,7 +223,7 @@ import { filter, Search } from '../utils/filter';
import SearchInput from './SearchInput.vue';
import DrinkModify from './DrinkModify.vue';
import { DeleteObjects } from '../utils/utils';
import { setNewImage, getNewImage} from '../utils/image';
import { setNewImage, getNewImage } from '../utils/image';
import { PERMISSIONS } from '../permissions';
import { Notify } from 'quasar';
@ -546,10 +555,10 @@ export default defineComponent({
editDrink.value.id = _drink.id;
}
}
if (drinkPic instanceof File) {
if (drinkPic instanceof File && drinkPic.name) {
await savePicture(drinkPic);
if (drink.id > 0) {
setNewImage(drink.id)
setNewImage(drink.id);
}
}
editDrink.value = undefined;
@ -565,15 +574,13 @@ export default defineComponent({
function image(id: number | undefined) {
if (id) {
const _newImage = getNewImage(id)
const _newImage = getNewImage(id);
if (_newImage) {
return `${
api.defaults.baseURL || ''
}/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`
}/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`;
}
return `${
api.defaults.baseURL || ''
}/pricelist/drinks/${id}/picture?thumbnail`;
return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
}
return 'no-image.svg';
}

36
src/components/DrinkModify.vue
View File

@ -24,26 +24,28 @@
</div>
</q-card-section>
<q-card-section>
<q-img :src="image" style="max-height: 256px" fit="contain" />
<div class="full-width row">
<div class="col-10 q-pa-sm">
<q-file
v-model="drinkPic"
filled
clearable
:clearable="drinkPic.name != ''"
dense
accept=".jpg, .jpeg, .png, image/*"
@update:model-value="imagePreview"
@clear="imgsrc = undefined"
@clear="clear"
>
<template #prepend>
<q-icon name="mdi-image" />
<template #file>
<q-img :src="image" style="max-height: 256px" fit="contain" />
</template>
</q-file>
</div>
<div class="col-2 q-pa-sm text-right">
<q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
<q-tooltip> Bild entfernen </q-tooltip>
</q-btn>
<div class="column justify-center">
<div class="col-2 q-pa-sm">
<q-btn round icon="mdi-delete" color="negative" size="sm" @click="delete_pic">
<q-tooltip> Bild entfernen </q-tooltip>
</q-btn>
</div>
</div>
</div>
</q-card-section>
@ -241,7 +243,7 @@ export default defineComponent({
edit_drink.value?.receipt?.splice(event, 1);
}
const drinkPic = ref<File | undefined>();
const drinkPic = ref<File>(new File([], '', {}));
const imgsrc = ref();
const deletePic = ref(false);
@ -249,7 +251,7 @@ export default defineComponent({
function delete_pic() {
deletePic.value = true;
imgsrc.value = undefined;
drinkPic.value = undefined;
drinkPic.value = new File([], '', {});
if (edit_drink.value) {
edit_drink.value.has_image = false;
}
@ -276,9 +278,11 @@ export default defineComponent({
return 'no-image.svg';
}
if (edit_drink.value?.has_image) {
const _image = getNewImage(edit_drink.value?.id)
const _image = getNewImage(edit_drink.value?.id);
if (_image) {
return `${api.defaults.baseURL || ''}/pricelist/drinks/${edit_drink.value.id}/picture?thumbnail?t=${_image.lastModified.toString()}`
return `${api.defaults.baseURL || ''}/pricelist/drinks/${
edit_drink.value.id
}/picture?thumbnail?t=${_image.lastModified.toString()}`;
}
return `${api.defaults.baseURL || ''}/pricelist/drinks/${
edit_drink.value.id
@ -331,6 +335,11 @@ export default defineComponent({
edit_volumes.value?.some((a) => a.ingredients.length > 0)
);
function clear(val: File) {
drinkPic.value = new File([], '', {});
imgsrc.value = undefined;
}
return {
edit_drink,
save,
@ -357,6 +366,7 @@ export default defineComponent({
hasIngredients,
hasPermission,
PERMISSIONS,
clear,
};
},
});

4
src/utils/image.ts
View File

@ -13,8 +13,8 @@ export function getNewImage(id: number) {
export function setNewImage(id: number) {
const image = newImage.value.find((a) => a.id === id);
if (image) {
image.lastModified = new Date()
image.lastModified = new Date();
} else {
newImage.value.push({id, lastModified: new Date()})
newImage.value.push({ id, lastModified: new Date() });
}
}