drink can't edit if picture is not loading #3

New Issue

Closed

opened 2021-06-29 12:29:48 +00:00 by crimsen · 1 comment

crimsen commented

2021-06-29 12:29:48 +00:00

Owner

You can't edit a drink if the picture of the drink couldn't load.

Problem is here in line 36:

<q-img style="max-height: 256px" :src="image(props.row.uuid)">
            <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>
            <template #error>
              <q-img 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>
            </template>
          </q-img>

if no image is loaded, the edit button will never show. This can be fixed with error handling e.g:

<template #error>
  <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>
</template>

You can't edit a drink if the picture of the drink couldn't load. Problem is [here](https://flaschengeist.dev/Flaschengeist/flaschengeist-pricelist/src/branch/develop/src/components/CalculationTable.vue#L36) in line 36: ```html <q-img style="max-height: 256px" :src="image(props.row.uuid)"> <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> <template #error> <q-img 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> </template> </q-img> ``` if no image is loaded, the edit button will never show. This can be fixed with error handling e.g: ```html <template #error> <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> </template> ```