Work with new Image Controller
This commit is contained in:
parent
7494a82d6f
commit
3d1f07ef68
|
@ -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;
|
||||||
|
|
|
@ -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';
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
});
|
});
|
||||||
|
|
|
@ -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';
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
|
|
Loading…
Reference in New Issue