shopping_list_category

vue/src/components/GenericInfiniteCards.vue

@@ -0,0 +1,92 @@
+<template>
+    <div id="app" style="margin-bottom: 4vh">
+        <div class="row flex-shrink-0">
+            <div class="col col-md">
+            <!-- search box -->
+                <b-input-group class="mt-3">
+                    <b-input class="form-control" type="search" v-model="search_left" 
+                            v-bind:placeholder="this.text.search"></b-input>
+                </b-input-group>
+            </div>
+        </div>
+        <div class="row" :class="{'vh-100 mh-100 overflow-auto' : scroll}">
+            <div class="col col-md">
+                <slot name="cards"></slot>
+                <infinite-loading
+                    :identifier='column' 
+                    @infinite="infiniteHandler" 
+                    spinner="waveDots">
+                    <template v-slot:no-more><span/></template>
+                    <template v-slot:no-results><span>{{$t('No_Results')}}</span></template>
+                </infinite-loading>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+import _debounce from 'lodash/debounce'
+import InfiniteLoading from 'vue-infinite-loading';
+
+export default {
+  name: 'GenericInfiniteCards',
+  components: {InfiniteLoading},
+  props: {
+    card_list: {type: Array, default(){return []}},
+    card_counts: {type: Object},
+    scroll: {type:Boolean, default: false}
+  },
+  data() {
+    return {
+      search: '',
+      page: 0,
+      state: undefined,
+      column: +new Date(),
+      text: {
+          'new': '',
+          'search': this.$t('Search')
+      },
+    }
+  },
+  mounted() {
+
+  },
+  watch: {
+    search: _debounce(function() {
+      this.page = 0
+      this.$emit('reset')
+      this.column += 1
+    }, 700),
+
+    card_counts: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal.current > 0) {
+          this.state.loaded()
+        }
+        if (newVal.current >= newVal.max) {
+          this.state.complete()
+        }
+      }
+    },
+  },
+  methods: {
+    infiniteHandler: function($state, col) { 
+        let params = {
+            'query': this.search,
+            'page': this.page + 1
+        }
+        this.state = $state
+        this.$emit('search', params)
+        this.page+= 1
+    },
+  }
+}
+
+</script>
+
+<style>
+
+</style>

vue/src/components/GenericPill.vue

@@ -0,0 +1,44 @@
+<template>
+    <div v-if="itemList">
+      <span :key="k.id" v-for="k in itemList" class="pl-1">
+        <b-badge pill :variant="color">{{thisLabel(k)}}</b-badge>
+      </span>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'GenericPill',
+  props: {
+    item_list: {required: true, type: Array},
+    label: {type: String, default: 'name'},
+    color: {type: String, default: 'light'}
+  },
+  computed: {
+    itemList: function() {
+      if(Array.isArray(this.item_list)) {
+        return this.item_list
+      } else if (!this.item_list?.id) {
+        return false
+      } else {
+        return [this.item_list]
+      }
+    },
+    
+  },
+  mounted() {
+
+  },
+  methods: {
+    thisLabel: function (item) {
+      let fields = this.label.split('::')
+      let value = item
+      fields.forEach(x => {
+        value = value[x]
+      });
+      return value
+    }
+  }
+}
+</script>

vue/src/components/Ingredient.vue

@@ -26,8 +26,11 @@
       </td>
       <td v-if="detailed">
         <div v-if="ingredient.note">
-          <span v-b-popover.hover="ingredient.note"
-                class="d-print-none"> <i class="far fa-comment"></i>
+          <span v-b-popover.hover="ingredient.note" v-if="ingredient.note.length > 15"
+                  class="d-print-none touchable"> <i class="far fa-comment"></i>
+          </span>
+          <span v-else>
+            {{ ingredient.note }}
           </span>
 
           <div class="d-none d-print-block">
@@ -72,3 +75,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+/* increase size of hover/touchable space without changing spacing */
+.touchable {
+  padding-right: 2em;
+  padding-left: 2em;
+  margin-right: -2em;
+  margin-left: -2em;
+}
+</style>

vue/src/components/ModelMenu.vue

@@ -0,0 +1,61 @@
+<template>
+    <!-- <b-button variant="link" size="sm" class="text-dark shadow-none"><i class="fas fa-chevron-down"></i></b-button> -->
+    <span>
+        <b-dropdown variant="link" toggle-class="text-decoration-none text-dark shadow-none" no-caret style="boundary:window">
+        <template #button-content>
+            <i class="fas fa-chevron-down">
+        </template>
+        <b-dropdown-item :href="resolveDjangoUrl('list_food')">
+            <i class="fas fa-leaf fa-fw"></i> {{ Models['FOOD'].name }}
+        </b-dropdown-item>
+        
+        <b-dropdown-item :href="resolveDjangoUrl('list_keyword')">
+            <i class="fas fa-tags fa-fw"></i> {{ Models['KEYWORD'].name }}
+        </b-dropdown-item>
+
+        <b-dropdown-item :href="resolveDjangoUrl('list_unit')">
+            <i class="fas fa-balance-scale fa-fw"></i> {{ Models['UNIT'].name }}
+        </b-dropdown-item>
+        
+        <b-dropdown-item :href="resolveDjangoUrl('list_supermarket')">
+            <i class="fas fa-store-alt fa-fw"></i> {{ Models['SUPERMARKET'].name }}
+        </b-dropdown-item>
+
+        <b-dropdown-item :href="resolveDjangoUrl('list_supermarket_category')">
+            <i class="fas fa-cubes fa-fw"></i> {{ Models['SHOPPING_CATEGORY'].name }}
+        </b-dropdown-item>
+
+        </b-dropdown>
+    </span>
+</template>
+
+<script>
+
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import {Models} from "@/utils/models";
+import {ResolveUrlMixin} from "@/utils/utils";
+
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'ModelMenu',
+  mixins: [ResolveUrlMixin],
+  data() {
+      return {
+          Models: Models
+      } 
+  },
+  mounted() {
+  },
+  methods: {
+      gotoURL: function(model) {
+          return
+      }
+  }
+}
+
+</script>