[chore] load new picture only if updated

This commit is contained in:
Tim Gröger 2021-11-19 22:00:38 +01:00
parent 76b0caa62e
commit 33d91c4b9a
3 changed files with 66 additions and 31 deletions

View File

@ -37,8 +37,9 @@
</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" style="max-height: 256px" :src="image(props.row.id)">
<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"
@ -83,6 +84,28 @@
</div>
</template>
</q-img>
<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"
style="background-color: transparent"
>
<q-btn
round
icon="mdi-pencil"
style="background-color: rgba(0, 0, 0, 0.5)"
@click="editDrink = props.row"
/>
</div>
<div class="absolute-bottom-right justify-end">
<div class="text-subtitle1 text-right">
{{ props.row.name }}
</div>
<div class="text-caption text-right">
{{ props.row.type.name }}
</div>
</div>
</q-img>
<q-card-section v-if="!showPic">
<div class="row">
<div class="col">
@ -191,8 +214,8 @@ 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 { PERMISSIONS } from '../permissions';
import { sort } from '../utils/sort';
import { Notify } from 'quasar';
export default defineComponent({
@ -222,7 +245,7 @@ export default defineComponent({
onBeforeMount(() => {
//void store.getDrinks();
onRequest({
void onRequest({
pagination: pagination.value,
filter: undefined,
});
@ -237,8 +260,6 @@ export default defineComponent({
name: 'name',
label: 'Name',
field: 'name',
sortable: true,
sort,
filterable: true,
public: true,
},
@ -248,8 +269,6 @@ export default defineComponent({
label: 'Kategorie',
field: 'type',
format: (val: FG.DrinkType) => `${val.name}`,
sortable: true,
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
filterable: true,
public: true,
},
@ -275,7 +294,6 @@ export default defineComponent({
label: 'Artikelnummer',
field: 'article_id',
sortable: true,
sort,
filterable: true,
public: false,
},
@ -284,7 +302,6 @@ export default defineComponent({
label: 'Inhalt in l des Gebinde',
field: 'volume',
sortable: true,
sort,
public: false,
},
{
@ -292,7 +309,6 @@ export default defineComponent({
label: 'Gebindegröße',
field: 'package_size',
sortable: true,
sort,
public: false,
},
{
@ -301,7 +317,6 @@ export default defineComponent({
field: 'cost_per_package',
format: (val: number | null) => (val ? `${val.toFixed(3)}` : ''),
sortable: true,
sort,
public: false,
},
{
@ -310,7 +325,6 @@ export default defineComponent({
field: 'cost_per_volume',
format: (val: number | null) => (val ? `${val.toFixed(3)}` : ''),
sortable: true,
sort: (a: ComputedRef, b: ComputedRef) => sort(a.value, b.value),
},
{
name: 'volumes',
@ -439,12 +453,12 @@ export default defineComponent({
void store.updateDrink(drink);
}
async function deleteDrink() {
function deleteDrink() {
if (editDrink.value) {
await store.deleteDrink(editDrink.value);
store.deleteDrink(editDrink.value);
}
editDrink.value = undefined;
onRequest({ pagination: pagination.value, filter: search.value });
void onRequest({ pagination: pagination.value, filter: search.value });
}
const showNewDrink = ref(false);
@ -534,10 +548,13 @@ export default defineComponent({
}
if (drinkPic instanceof File) {
await savePicture(drinkPic);
if (drink.id > 0) {
setNewImage(drink.id)
}
}
editDrink.value = undefined;
notLoading.value = true;
onRequest({ pagination: pagination.value, filter: search.value });
void onRequest({ pagination: pagination.value, filter: search.value });
}
function get_volumes(drink_id: number) {
@ -546,20 +563,17 @@ export default defineComponent({
const notLoading = ref(true);
const imageloading = ref<Array<{ id: number; loading: boolean }>>([]);
function getImageLoading(id: number) {
const loading = imageloading.value.find((a) => a.id === id);
if (loading) {
return loading.loading;
}
return false;
}
function image(id: number | undefined) {
if (id) {
const _newImage = getNewImage(id)
if (_newImage) {
return `${
api.defaults.baseURL || ''
}/pricelist/drinks/${id}/picture?thumbnail?t=${new Date()}`;
}/pricelist/drinks/${id}/picture?thumbnail?t=${_newImage.lastModified.toString()}`
}
return `${
api.defaults.baseURL || ''
}/pricelist/drinks/${id}/picture?thumbnail`;
}
return 'no-image.svg';
}
@ -587,7 +601,6 @@ export default defineComponent({
editing_drink,
get_volumes,
notLoading,
getImageLoading,
newDrink,
hasPermission,
PERMISSIONS,

View File

@ -146,6 +146,7 @@
</template>
<script lang="ts">
import { clone, calc_min_prices, DeleteObjects, calc_cost_per_volume } from '../utils/utils';
import { getNewImage } from '../utils/image';
import { defineComponent, PropType, ref, onBeforeMount, computed } from 'vue';
import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
import BuildManual from '../components/CalculationTable/BuildManual.vue';
@ -268,9 +269,6 @@ export default defineComponent({
const image = computed(() => {
console.log(imgsrc.value, deletePic.value, edit_drink.value);
if (deletePic.value) {
return 'no-image.svg';
}
if (imgsrc.value) {
return <string>imgsrc.value;
}
@ -278,9 +276,13 @@ export default defineComponent({
return 'no-image.svg';
}
if (edit_drink.value?.has_image) {
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=${new Date()}`;
}/picture?thumbnail`;
}
return 'no-image.svg';
});

20
src/utils/image.ts Normal file
View File

@ -0,0 +1,20 @@
import { ref } from 'vue';
const newImage = ref<Array<{ id: number; lastModified: Date }>>([]);
export function getNewImage(id: number) {
const image = newImage.value.find((a) => a.id === id);
if (image) {
return image;
}
return null;
}
export function setNewImage(id: number) {
const image = newImage.value.find((a) => a.id === id);
if (image) {
image.lastModified = new Date()
} else {
newImage.value.push({id, lastModified: new Date()})
}
}