Fix after rebase

vue/src/components/Badges/Shopping.vue

@@ -0,0 +1,94 @@
+<template>
+  <span>
+    <b-button class="btn text-decoration-none px-1 border-0" variant="link"
+      v-if="ShowBadge"
+      :id="`shopping${item.id}`"
+      @click="addShopping()">
+      <i class="fas" 
+        v-b-popover.hover.html
+        :title="[shopping ? $t('RemoveFoodFromShopping', {'food': item.name}) : $t('AddFoodToShopping', {'food': item.name})]"
+        :class="[shopping ? 'text-success fa-shopping-cart' : 'text-muted fa-cart-plus']"
+      />
+    </b-button>
+    <b-popover :target="`${ShowConfirmation}`" :ref="'shopping'+item.id" triggers="focus" placement="top" >
+      <template #title>{{DeleteConfirmation}}</template>
+      <b-row align-h="end">
+        <b-col cols="auto"><b-button class="btn btn-sm btn-info shadow-none px-1 border-0" @click="cancelDelete()">{{$t("Cancel")}}</b-button>
+        <b-button class="btn btn-sm btn-danger shadow-none px-1" @click="confirmDelete()">{{$t("Confirm")}}</b-button></b-col>
+      </b-row >
+    </b-popover>
+  </span>
+</template>
+
+<script>
+import {ApiMixin, StandardToasts} from "@/utils/utils";
+
+export default {
+  name: 'ShoppingBadge',
+  props: {
+    item: {type: Object},
+    override_ignore: {type: Boolean, default: false}
+  },
+    mixins: [ ApiMixin ],
+  data() {
+    return {
+        shopping: false,
+    }
+  },
+  mounted() {
+      // let random = [true, false,]
+      this.shopping = this.item?.shopping //?? random[Math.floor(Math.random() * random.length)]
+  },
+  computed: {
+    ShowBadge() {
+      if (this.override_ignore) {
+        return true
+      } else {
+        return !this.item.ignore_shopping
+      }
+    },
+    DeleteConfirmation() {
+      return this.$t('DeleteShoppingConfirm',{'food':this.item.name})
+    },
+    ShowConfirmation() {
+      if (this.shopping) {
+        return 'shopping' + this.item.id
+      } else {
+        return 'NoDialog'
+      }
+    }
+  },
+  watch: {
+  },
+  methods: {
+      addShopping() {
+        if (this.shopping) {return}  // if item already in shopping list, excution handled after confirmation
+        let params = {
+          'id': this.item.id,
+          'amount': 1
+        }
+        this.genericAPI(this.Models.FOOD, this.Actions.SHOPPING, params).then((result) => {
+            this.shopping = true
+            StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
+        })
+      },
+      cancelDelete() {
+        this.$refs['shopping' + this.item.id].$emit('close')
+      },
+      confirmDelete() {
+        let params = {
+          'id': this.item.id,
+          '_delete': 'true'
+        }
+        this.genericAPI(this.Models.FOOD, this.Actions.SHOPPING, params).then(() => {
+          this.shopping = false
+          this.$refs['shopping' + this.item.id].$emit('close')
+          StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
+        })
+        
+      }
+      
+  }
+}
+
+</script>