Fix after rebase

vue/src/components/Badges/Icon.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <b-button v-if="item.icon" class=" btn p-0 border-0" variant="link">
+    <b-button v-if="item.icon" class=" btn px-1 py-0 border-0 text-decoration-none" variant="link">
         {{item.icon}}
     </b-button>
   </span>

vue/src/components/Badges/LinkedRecipe.vue

@@ -1,7 +1,7 @@
 <template>
   <span>
     <b-button v-if="item.recipe" v-b-tooltip.hover :title="item.recipe.name"
-                  class=" btn fas fa-book-open p-0 border-0" variant="link" :href="item.recipe.url"/>
+                  class=" btn text-decoration-none fas fa-book-open px-1 py-0 border-0" variant="link" :href="item.recipe.url"/>
   </span>
 </template>
 

vue/src/components/Badges/OnHand.vue

@@ -0,0 +1,40 @@
+<template>
+  <span>
+    <b-button class="btn text-decoration-none fas px-1 py-0  border-0" variant="link" v-b-popover.hover.html 
+          :title="[onhand ? $t('FoodOnHand', {'food': item.name}) : $t('FoodNotOnHand', {'food': item.name})]"
+          :class="[onhand ? 'text-success fa-clipboard-check' :  'text-muted fa-clipboard' ]"
+          @click="toggleOnHand"
+        />
+  </span>
+</template>
+
+<script>
+
+import {ApiMixin} from "@/utils/utils";
+
+export default {
+  name: 'OnHandBadge',
+  props: {
+    item: {type: Object}
+  },
+    mixins: [ ApiMixin ],
+  data() {
+    return {
+        onhand: false
+    }
+  },
+  mounted() {
+      this.onhand = this.item.on_hand
+  },
+  watch: {
+  },
+  methods: {
+      toggleOnHand() {
+        let params = {'id': this.item.id, 'on_hand': !this.onhand}
+        this.genericAPI(this.Models.FOOD, this.Actions.UPDATE, params).then(() => {
+            this.onhand = !this.onhand
+        })
+      }
+  }
+}
+</script>

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>