Work with new Image Controller

This commit is contained in:
Ferdinand Thiessen 2021-11-15 16:35:54 +01:00
parent 7494a82d6f
commit 3d1f07ef68
5 changed files with 19 additions and 19 deletions

2
src/api.d.ts vendored
View File

@ -7,7 +7,7 @@ declare namespace FG {
volume?: number; volume?: number;
cost_per_volume?: number; cost_per_volume?: number;
cost_per_package?: number; cost_per_package?: number;
uuid: string; has_image: boolean;
receipt?: Array<string>; receipt?: Array<string>;
tags?: Array<Tag>; tags?: Array<Tag>;
type?: DrinkType; type?: DrinkType;

View File

@ -38,7 +38,7 @@
<template #item="props"> <template #item="props">
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4"> <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
<q-card> <q-card>
<q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.uuid)"> <q-img v-if="showPic" style="max-height: 256px" :src="image(props.row.id)">
<div <div
v-if="!public && !nodetails && editable" v-if="!public && !nodetails && editable"
class="absolute-top-right justify-end" class="absolute-top-right justify-end"
@ -496,7 +496,7 @@ export default defineComponent({
tags: [], tags: [],
type: undefined, type: undefined,
volumes: [], volumes: [],
uuid: '', has_image: false,
}; };
function newDrink() { function newDrink() {
@ -555,9 +555,9 @@ export default defineComponent({
return false; return false;
} }
function image(uuid: string | undefined) { function image(id: number | undefined) {
if (uuid) { if (id) {
return `${api.defaults.baseURL || ''}/pricelist/picture/${uuid}?size=256`; return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
} }
return 'no-image.svg'; return 'no-image.svg';
} }

View File

@ -174,7 +174,6 @@ export default defineComponent({
setup(props, { emit }) { setup(props, { emit }) {
onBeforeMount(() => { onBeforeMount(() => {
//edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink)); //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
edit_drink.value = clone(props.drink);
edit_volumes.value = clone(props.drink.volumes); edit_volumes.value = clone(props.drink.volumes);
}); });
@ -188,7 +187,7 @@ export default defineComponent({
ingredients: [], ingredients: [],
}); });
const edit_drink = ref<Drink>(); const edit_drink = ref<Drink>(clone(props.drink));
const edit_volumes = ref<Array<DrinkPriceVolume>>([]); const edit_volumes = ref<Array<DrinkPriceVolume>>([]);
function save() { function save() {
(<Drink>edit_drink.value).volumes = edit_volumes.value; (<Drink>edit_drink.value).volumes = edit_volumes.value;
@ -250,7 +249,7 @@ export default defineComponent({
imgsrc.value = undefined; imgsrc.value = undefined;
drinkPic.value = undefined; drinkPic.value = undefined;
if (edit_drink.value) { if (edit_drink.value) {
edit_drink.value.uuid = ''; edit_drink.value.has_image = false;
} }
} }
@ -267,14 +266,15 @@ export default defineComponent({
} }
const image = computed(() => { const image = computed(() => {
console.log(imgsrc.value, deletePic.value, edit_drink.value)
if (deletePic.value) { if (deletePic.value) {
return 'no-image.svg'; return 'no-image.svg';
} }
if (imgsrc.value) { if (imgsrc.value) {
return <string>imgsrc.value; return <string>imgsrc.value;
} }
if (edit_drink.value?.uuid) { if (edit_drink.value?.has_image) {
return `${api.defaults.baseURL || ''}/pricelist/picture/${edit_drink.value.uuid}?size=256`; return `${api.defaults.baseURL || ''}/pricelist/drinks/${edit_drink.value.id}/picture?thumbnail`;
} }
return 'no-image.svg'; return 'no-image.svg';
}); });

View File

@ -21,7 +21,7 @@
<q-img <q-img
style="max-height: 256px" style="max-height: 256px"
loading="lazy" loading="lazy"
:src="image(props.row.uuid)" :src="image(props.row.id)"
placeholder-src="no-image.svg" placeholder-src="no-image.svg"
> >
<div class="absolute-bottom-right justify-end"> <div class="absolute-bottom-right justify-end">
@ -166,9 +166,9 @@ export default defineComponent({
const search = ref<Search>({ value: '', key: '', label: '' }); const search = ref<Search>({ value: '', key: '', label: '' });
const search_keys = computed(() => columns_drinks.filter((column) => column.filterable)); const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
function image(uuid: string | undefined) { function image(id: number) {
if (uuid) { if (id) {
return `${api.defaults.baseURL || ''}/pricelist/picture/${uuid}?size=256`; return `${api.defaults.baseURL || ''}/pricelist/drinks/${id}/picture?thumbnail`;
} }
return 'no-image.svg'; return 'no-image.svg';
} }

View File

@ -46,7 +46,7 @@ class Drink {
cost_per_package, cost_per_package,
tags, tags,
type, type,
uuid, has_image,
receipt, receipt,
}: FG.Drink) { }: FG.Drink) {
this.id = id; this.id = id;
@ -60,7 +60,7 @@ class Drink {
this.tags = tags; this.tags = tags;
this.type = type; this.type = type;
this.volumes = []; this.volumes = [];
this.uuid = uuid; this.has_image = has_image;
this.receipt = receipt || []; this.receipt = receipt || [];
} }
} }
@ -304,12 +304,12 @@ export const usePricelistStore = defineStore({
}); });
const _drink = this.drinks.find((a) => a.id === drink.id); const _drink = this.drinks.find((a) => a.id === drink.id);
if (_drink) { if (_drink) {
_drink.uuid = data.uuid; _drink.has_image = data.has_image;
} }
}, },
async delete_drink_picture(drink: Drink) { async delete_drink_picture(drink: Drink) {
await api.delete(`pricelist/drinks/${drink.id}/picture`); await api.delete(`pricelist/drinks/${drink.id}/picture`);
drink.uuid = ''; drink.has_image = false;
}, },
async getTags() { async getTags() {
const { data } = await api.get<Array<FG.Tag>>('/pricelist/tags'); const { data } = await api.get<Array<FG.Tag>>('/pricelist/tags');