add shopping_category and supermarkets

vue/src/components/GenericHorizontalCard.vue

@@ -1,34 +1,39 @@
 <template>
   <div row style="margin: 4px">
     <b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
-      style="height: 10vh;" :style="{'cursor:grab' : draggable}"
+      :style="{'cursor:grab' : useDrag}"
       @dragover.prevent
       @dragenter.prevent
-      :draggable="draggable"
+      :draggable="useDrag"
       @dragstart="handleDragStart($event)"
       @dragenter="handleDragEnter($event)"
       @dragleave="handleDragLeave($event)"
       @drop="handleDragDrop($event)">
-      <b-row no-gutters style="height:inherit;">  
-        <b-col no-gutters md="3" style="height:inherit;">
-          <b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
+      <b-row no-gutters >  
+        <b-col no-gutters class="col-sm-3">
+          <b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
         </b-col>
-        <b-col no-gutters md="9" style="height:inherit;">
-            <b-card-body class="m-0 py-0" style="height:inherit;">
+        <b-col no-gutters class="col-sm-9">
+            <b-card-body class="m-0 py-0">
               <b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
                     <h5 class="m-0 mt-1 text-truncate">{{ item[title] }}</h5>
                     <div class= "m-0 text-truncate">{{ item[subtitle] }}</div>
-                    <div class="mt-auto mb-1 d-flex flex-row justify-content-end">
-                      <div v-if="item[child_count]" class="mx-2 btn btn-link btn-sm" 
+                    <!-- <span>{{this_item[itemTags.field]}}</span> -->
+                    <generic-pill v-for="x in itemTags" :key="x.field"
+                      :item_list="item[x.field]"
+                      :label="x.label"
+                      :color="x.color"/>
+                    <div class="mt-auto mb-1" align="right">
+                      <span v-if="item[child_count]" class="mx-2 btn btn-link btn-sm" 
                         style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
                           <div v-if="!item.show_children">{{ item[child_count] }} {{ itemName }}</div>
                           <div v-else>{{ text.hide_children }}</div>
-                      </div>
-                      <div v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
+                      </span>
+                      <span v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
                         v-on:click="$emit('item-action',{'action':'get-recipes','source':item})">
                         <div v-if="!item.show_recipes">{{ item[recipe_count] }} {{$t('Recipes')}}</div>
                         <div v-else>{{$t('Hide_Recipes')}}</div>
-                      </div>
+                      </span>
                     </div>
               </b-card-text>
             </b-card-body>
@@ -45,24 +50,17 @@
     </b-card>
     <!-- recursively add child cards -->
     <div class="row" v-if="item.show_children">
-      <div class="col-md-11 offset-md-1">
+      <div class="col-md-10 offset-md-2">
         <generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
-          :draggable="draggable"
           :item="child"
           :model="model"
-          :title="title"
-          :subtitle="subtitle"
-          :child_count="child_count"
-          :children="children"
-          :recipe_count="recipe_count"
-          :recipes="recipes"
           @item-action="$emit('item-action', $event)">
         </generic-horizontal-card>
       </div>
     </div>
     <!-- conditionally view recipes -->
     <div class="row" v-if="item.show_recipes">
-      <div class="col-md-11 offset-md-1">
+      <div class="col-md-10 offset-md-2">
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
           <recipe-card v-for="r in item[recipes]" 
             v-bind:key="r.id"
@@ -91,19 +89,19 @@
 <script>
 import GenericContextMenu from "@/components/GenericContextMenu";
 import Badges from "@/components/Badges";
+import GenericPill from "@/components/GenericPill";
 import RecipeCard from "@/components/RecipeCard";
 import { mixin as clickaway } from 'vue-clickaway';
 import { createPopper } from '@popperjs/core';
 
 export default {
   name: "GenericHorizontalCard",
-  components: { GenericContextMenu, RecipeCard, Badges},
+  components: { GenericContextMenu, RecipeCard, Badges, GenericPill},
   mixins: [clickaway],
   props: {
     item: {type: Object},
     model: {type: Object},
-    draggable: {type: Boolean, default: false},
-    title: {type: String, default: 'name'},  // this and the following props can probably be moved to model.js and made computed values
+    title: {type: String, default: 'name'},  // this and the following props need to be moved to model.js and made computed values
     subtitle: {type: String, default: 'description'},
     child_count: {type: String, default: 'numchild'},
     children: {type: String, default: 'children'},
@@ -134,10 +132,16 @@ export default {
       return this.model?.name ?? "You Forgot To Set Model Name in model.js"
     },
     useMove: function() {
-      return this.model['move'] !== false
+      return (this.model?.['move'] ?? false) ? true : false
     },
     useMerge: function() {
-      return this.model['merge'] !== false
+      return (this.model?.['merge'] ?? false) ? true : false
+    },
+    useDrag: function() {
+      return this.useMove || this.useMerge
+    },
+    itemTags: function() {
+      return this.model?.tags ?? []
     }
   },
   methods: {

vue/src/components/GenericSplitLists.vue

@@ -1,220 +0,0 @@
-<template>
-  <div id="app" style="margin-bottom: 4vh">
-
-    <div class="row">
-      <div class="col-md-2 d-none d-md-block">
-      </div>
-      <div class="col-xl-8 col-12">
-        <div class="container-fluid d-flex flex-column flex-grow-1" :class="{'vh-100' : show_split}">
-          <!-- expanded options box -->
-          <div class="row flex-shrink-0">
-            <div class="col col-md-12">
-              <b-collapse id="collapse_advanced" class="mt-2" v-model="advanced_visible">
-                <div class="card">
-                  <div class="card-body">
-                    <div class="row">
-                      <div class="col-md-3" style="margin-top: 1vh">
-                       <div class="btn btn-primary btn-block text-uppercase" @click="$emit('item-action', {'action':'new'})">
-                            {{ this.text.new }}
-                          </div>
-                      </div>
-
-                      <div class="col-md-3" style="margin-top: 1vh">
-                        <button class="btn btn-primary btn-block text-uppercase" @click="resetSearch">
-                          {{ this.text.reset }}
-                        </button>
-                      </div>
-                      <div class="col-md-3" style="position: relative; margin-top: 1vh">
-                        <b-form-checkbox v-model="show_split" name="check-button"
-                                        class="shadow-none"
-                                        style="position:relative;top: 50%;  transform: translateY(-50%);" switch>
-                          {{ this.text.split }}
-                        </b-form-checkbox>
-                      </div>
-                    </div>
-
-                  </div>
-                </div>
-              </b-collapse>
-            </div>
-          </div>
-
-          <div class="row flex-shrink-0">
-            <!-- search box -->
-            <div class="col col-md">
-              <b-input-group class="mt-3">
-                <b-input class="form-control" v-model="search_left" 
-                        v-bind:placeholder="this.text.search"></b-input>
-                <b-input-group-append>
-                  <b-button v-b-toggle.collapse_advanced variant="primary" class="shadow-none">
-                    <i class="fas fa-caret-down" v-if="!advanced_visible"></i>
-                    <i class="fas fa-caret-up"  v-if="advanced_visible"></i>
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
-            </div>
-
-            <!-- split side search -->
-            <div class="col col-md" v-if="show_split">
-              <b-input-group class="mt-3">
-                <b-input class="form-control" v-model="search_right" 
-                        v-bind:placeholder="this.text.search"></b-input>
-              </b-input-group>
-            </div>
-          </div>
-
-          <!-- only show scollbars in split mode -->
-          <!-- TODO: weird behavior when switching to split mode, infinite scoll doesn't trigger if 
-                bottom of page is in viewport can trigger by scrolling page (not column) up  -->
-          <div class="row" :class="{'overflow-hidden' : show_split}">
-            <div class="col col-md" :class="{'mh-100 overflow-auto' : show_split}">
-              <slot name="cards-left"></slot>
-              <infinite-loading
-                :identifier='left' 
-                @infinite="infiniteHandler($event, 'left')" 
-                spinner="waveDots">
-                <template v-slot:no-more><span/></template>
-                <template v-slot:no-results><span>{{$t('No_Results')}}</span></template>
-              </infinite-loading>
-            </div>
-            <!-- right side cards -->
-            <div class="col col-md mh-100 overflow-auto" v-if="show_split">
-              <slot name="cards-right"></slot>
-              <infinite-loading
-                :identifier='right' 
-                @infinite="infiniteHandler($event, 'right')" 
-                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>
-      </div>
-      <div class="col-md-2 d-none d-md-block">
-      </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 {
-  // TODO: this should be simplified into a Generic Infinitely Scrolling List and added as two components when split lists desired
-  name: 'GenericSplitLists',
-  components: {InfiniteLoading},
-  props: {
-    list_name: {type: String, default: 'Blank List'},  // TODO update translations to handle plural translations
-    left_list: {type: Array, default(){return []}},
-    left_counts: {type: Object},
-    right_list: {type:Array, default(){return []}},
-    right_counts: {type: Object},
-  },
-  data() {
-    return {
-      advanced_visible: false,
-      show_split: false,
-      search_right: '',
-      search_left: '',
-      right_page: 0,
-      left_page: 0,
-      right_state: undefined,
-      left_state: undefined,
-      right_dirty: false,
-      left_dirty: false,
-      right: +new Date(),
-      left: +new Date(),
-      text: {
-          'new': '',
-          'name': '',
-          'reset': this.$t('Reset_Search'),
-          'split': this.$t('show_split_screen'),
-          'search': this.$t('Search')
-      },
-    }
-  },
-  mounted() {
-    this.dragMenu = this.$refs.tooltip
-    this.text.new = this.$t('New_' + this.list_name)
-  },
-  watch: {
-    search_left: _debounce(function() {
-      if (this.left_dirty) {
-        //prevents running twice if search is reset
-        this.left_dirty = false
-        return
-      }
-      this.left_page = 0
-      this.$emit('reset', {'column':'left'})
-      this.left += 1
-    }, 700),
-    search_right: _debounce(function(newVal, oldVal) {
-      if (this.right_dirty) {
-        //prevents running twice if search is reset
-        this.right_dirty = false
-        return
-      }
-      this.right_page = 0
-      this.$emit('reset', {'column':'right'})
-      this.right += 1
-    }, 700),
-    right_counts: {
-      deep: true,
-      handler(newVal, oldVal) {
-        if (newVal.current > 0) {
-          this.right_state.loaded()
-        }
-        if (newVal.current >= newVal.max) {
-          this.right_state.complete()
-        }
-      }
-    },
-    left_counts: {
-      deep: true,
-      handler(newVal, oldVal) {
-        if (newVal.current > 0) {
-          this.left_state.loaded()
-        }
-        if (newVal.current >= newVal.max) {
-          this.left_state.complete()
-        }
-      }
-    }
-  },
-  methods: {
-    resetSearch: function () {
-        this.right_dirty = true
-        this.search_right = ''
-        this.right_page = 0
-        this.right += 1
-        this.$emit('reset', {'column':'right'})
-
-        this.left_dirty = true
-        this.search_left = ''
-        this.left_page = 0
-        this.left += 1
-        this.$emit('reset', {'column':'left'})
-    },
-    infiniteHandler: function($state, col) { 
-        let params = {
-            'query': (col==='left') ? this.search_left : this.search_right,
-            'page': (col==='left') ? this.left_page + 1 : this.right_page + 1,
-            'column': col
-        }
-        this[col+'_state'] = $state
-        this.$emit('get-list', params)
-        this[col+'_page'] += 1
-    },
-  }
-}
-
-</script>
-
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
-
-<style>
-
-</style>

vue/src/locales/en.json

@@ -39,7 +39,7 @@
   "Edit_Keyword": "Edit Keyword",
   "Move_Keyword": "Move Keyword",
   "Merge_Keyword": "Merge Keyword",
-  "Hide_Keywords": "Hide Keywords",
+  "Hide_Keywords": "Hide Keyword",
   "Hide_Recipes": "Hide Recipes",
 
   "Keywords": "Keywords",