[pricelist] delete drink pictures

This commit is contained in:
Tim Gröger 2021-03-25 23:14:49 +01:00
parent 8c6036c686
commit d42c6dcce1
3 changed files with 54 additions and 26 deletions

View File

@ -59,23 +59,34 @@
@click="deleteDrink(drinks_props.row)"
/>
</q-td>
<q-td key="picture" :props="drinks_props" style="width: 128px">
<q-td key="picture" :props="drinks_props" style="min-width: 256px">
<q-img
:src="`http://localhost/api/pricelist/drinks/${drinks_props.row.id}/picture?size=128`"
v-if="!drinks_props.row.loading"
:src="`http://localhost/api/pricelist/drinks/${drinks_props.row.id}/picture?size=256`"
/>
<q-popup-edit
v-slot="scope"
v-model="drinkPic"
buttons
label-set="Speichern"
label-cancel="Abbrechen"
@update:modelValue="savePicture(drinks_props.row)"
>
<q-popup-edit v-model="drinkPic" @update:modelValue="savePicture(drinks_props.row)">
<template #default="scope">
<div class="full-width row">
<q-file v-model="scope.value" filled>
<template #prepend>
<q-icon name="attach_file" />
</template>
</q-file>
<div class="full-width row justify-between">
<q-btn label="Abbrechen" flat color="primary" @click="scope.cancel" />
<q-btn
label="Löschen"
flat
color="primary"
@click="
scope.cancel();
deletePicture(drinks_props.row);
"
/>
<q-btn label="Speichern" flat color="primary" @click="scope.set" />
</div>
</div>
</template>
</q-popup-edit>
</q-td>
<q-td key="name" :props="drinks_props">
@ -446,19 +457,30 @@ export default defineComponent({
});
drinkPic.value = undefined;
}
interface Row extends Drink {
expand: boolean;
}
function savePicture(drink: Drink) {
console.log('hier bin ich!!!', drinkPic.value);
if (drinkPic.value && drinkPic.value instanceof File)
drink.loading = true;
if (drinkPic.value && drinkPic.value instanceof File) {
store
.upload_drink_picture(drink, drinkPic.value)
.then(() => {
root?.$forceUpdate();
})
.catch((response: Response) => {
if (response && response.status == 400) {
onPictureRejected();
}
})
.finally(() => {
drink.loading = false;
});
}
}
function deletePicture(drink: Row) {
drink.loading = true;
void store.delete_drink_picture(drink).finally(() => {
drink.loading = false;
});
}
@ -475,6 +497,7 @@ export default defineComponent({
showNewDrink,
drinkPic,
savePicture,
deletePicture,
console,
};
},

View File

@ -70,14 +70,14 @@ export default defineComponent({
label: 'Getränkeart',
field: 'name',
align: 'left',
sortable: true
sortable: true,
},
{
name: 'actions',
label: 'Aktionen',
field: 'actions',
align: 'right'
}
align: 'right',
},
];
async function addType() {
@ -94,7 +94,7 @@ export default defineComponent({
try {
await store.changeDrinkTypeName({
id: actualDrinkType.value.id,
name: newDrinkTypeName.value
name: newDrinkTypeName.value,
});
} catch (e) {}
discardChanges();
@ -121,9 +121,9 @@ export default defineComponent({
actualDrinkType,
newDrinkTypeName,
discardChanges,
saveChanges
saveChanges,
};
}
},
});
</script>

View File

@ -15,6 +15,7 @@ interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'>
volumes: DrinkPriceVolume[];
cost_price_pro_volume: WritableComputedRef<number | undefined>;
_cost_price_pro_volume?: number;
loading: boolean;
}
class DrinkPriceVolume implements DrinkPriceVolume {
@ -80,6 +81,7 @@ class Drink {
this.tags = tags;
this.type = type;
this.volumes = [];
this.loading = false;
}
}
@ -309,6 +311,9 @@ export const usePricelistStore = defineStore({
},
});
},
async delete_drink_picture(drink: Drink) {
await api.delete(`pricelist/drinks/${drink.id}/picture`);
},
},
});