finished food view

vue/src/components/GenericHorizontalCard.vue

@@ -11,22 +11,22 @@
       @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="model_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
+          <b-card-img-lazy style="object-fit: cover; height: 10vh;" :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-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
-                    <h5 class="m-0 mt-1 text-truncate">{{ model[title] }}</h5>
-                    <div class= "m-0 text-truncate">{{ model[subtitle] }}</div>
+                    <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="model[child_count] !=0" class="mx-2 btn btn-link btn-sm" 
-                        style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':model})">
-                          <div v-if="!model.show_children">{{ model[child_count] }} {{ model_name }}</div>
+                      <div v-if="item[child_count] !=0" 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] }} {{ item_type }}</div>
                           <div v-else>{{ text.hide_children }}</div>
                       </div>
-                      <div v-if="model[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
-                        v-on:click="$emit('item-action',{'action':'get-recipes','source':model})">
-                        <div v-if="!model.show_recipes">{{ model[recipe_count] }} {{$t('Recipes')}}</div>
+                      <div 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>
                     </div>
@@ -38,18 +38,18 @@
           <generic-context-menu  class="p-0"
             :show_merge="merge"
             :show_move="move"
-            @item-action="$emit('item-action', {'action': $event, 'source': model})">
+            @item-action="$emit('item-action', {'action': $event, 'source': item})">
           </generic-context-menu>
         </div>
       </b-row> 
     </b-card>
     <!-- recursively add child cards -->
-    <div class="row" v-if="model.show_children">
+    <div class="row" v-if="item.show_children">
       <div class="col-md-11 offset-md-1">
-        <generic-horizontal-card v-for="child in model[children]" v-bind:key="child.id"
+        <generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
           :draggable="draggable"
-          :model="child"
-          :model_name="model_name"
+          :item="child"
+          :item_type="item_type"
           :title="title"
           :subtitle="subtitle"
           :child_count="child_count"
@@ -63,10 +63,10 @@
       </div>
     </div>
     <!-- conditionally view recipes -->
-    <div class="row" v-if="model.show_recipes">
+    <div class="row" v-if="item.show_recipes">
       <div class="col-md-11 offset-md-1">
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
-          <recipe-card v-for="r in model[recipes]" 
+          <recipe-card v-for="r in item[recipes]" 
             v-bind:key="r.id"
             :recipe="r">
           </recipe-card>
@@ -75,11 +75,11 @@
     </div>
     <!-- this should be made a generic component, would also require mixin for functions that generate the popup and put in parent container-->  
     <b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index:9999; cursor:pointer">
-      <b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': model, 'source': source}); closeMenu()">
-        {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':model.name})}}
+      <b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': item, 'source': source}); closeMenu()">
+        <i class="fas fa-expand-arrows-alt fa-fw"></i> {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':item.name})}}
       </b-list-group-item>
-      <b-list-group-item v-if="merge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': model, 'source': source}); closeMenu()">
-        {{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':model.name}) }}
+      <b-list-group-item v-if="merge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': item, 'source': source}); closeMenu()">
+        <i class="fas fa-compress-arrows-alt fa-fw"></i> {{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':item.name}) }}
       </b-list-group-item>
       <b-list-group-item action v-on:click="closeMenu()">
         {{$t('Cancel')}}
@@ -101,8 +101,8 @@ export default {
   components: { GenericContextMenu, RecipeCard },
   mixins: [clickaway],
   props: {
-    model: Object,
-    model_name: {type: String, default: 'Blank Model'},  // TODO update translations to handle plural translations
+    item: Object,
+    item_type: {type: String, default: 'Blank Item Type'},  // TODO update translations to handle plural translations
     draggable: {type: Boolean, default: false},
     title: {type: String, default: 'name'},
     subtitle: {type: String, default: 'description'},
@@ -115,7 +115,7 @@ export default {
   },
   data() {
     return {
-      model_image: '',
+      item_image: '',
       over: false,
       show_menu: false,
       dragMenu: undefined,
@@ -128,14 +128,14 @@ export default {
     }
   },
   mounted() {
-    this.model_image = this.model?.image ?? window.IMAGE_PLACEHOLDER
+    this.item_image = this.item?.image ?? window.IMAGE_PLACEHOLDER
     this.dragMenu = this.$refs.tooltip
-    this.text.hide_children = this.$t('Hide_' + this.model_name)
+    this.text.hide_children = this.$t('Hide_' + this.item_type)
   },
   methods: {
     handleDragStart: function(e) {
       this.isError = false
-      e.dataTransfer.setData('source', JSON.stringify(this.model))
+      e.dataTransfer.setData('source', JSON.stringify(this.item))
     },
     handleDragEnter: function(e) {
       if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget != null) {
@@ -149,7 +149,7 @@ export default {
     },
     handleDragDrop: function(e) {
       let source = JSON.parse(e.dataTransfer.getData('source'))
-      if (source.id != this.model.id){
+      if (source.id != this.item.id){
         this.source = source
         let menuLocation = {getBoundingClientRect: this.generateLocation(e.clientX, e.clientY),}
         this.show_menu = true
@@ -176,7 +176,7 @@ export default {
         })
         popper.update()
         this.over = false
-        this.$emit({'action': 'drop', 'target': this.model, 'source': this.source})
+        this.$emit({'action': 'drop', 'target': this.item, 'source': this.source})
       } else {
         this.isError = true
       }

vue/src/components/GenericSplitLists.vue

@@ -76,7 +76,7 @@
                 <template v-slot:no-more><span/></template>
               </infinite-loading>
             </div>
-            <!-- right side food cards -->
+            <!-- right side cards -->
             <div class="col col-md mh-100 overflow-auto" v-if="show_split">
               <slot name="cards-right"></slot>
               <infinite-loading
@@ -119,8 +119,6 @@ export default {
       left_page: 0,
       right: +new Date(),
       left: +new Date(),
-      isDirtyright: false,
-      isDirtyleft: false,
       text: {
           'new': '',
           'name': '',
@@ -133,7 +131,6 @@ export default {
   mounted() {
     this.dragMenu = this.$refs.tooltip
     this.text.new = this.$t('New_' + this.list_name)
-    this.text.name = this.$t(this.list_name)
   },
   watch: {
     search_right: _debounce(function() {
@@ -170,6 +167,7 @@ export default {
             'page': (col==='left') ? this.left_page + 1 : this.right_page + 1,
             'column': col
         }
+        // TODO: change this to be an emit and watch a prop to determine if loaded or complete
         new Promise((callback) => this.$emit('get-list', params, callback)).then((result) => {
             this[col+'_page']+=1
             $state.loaded();

vue/src/components/Modals/GenericModalForm.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <b-modal class="modal" id="modal" >
+      <b-modal class="modal" id="modal" @hidden="cancelAction">
         <template v-slot:modal-title><h4>{{form.title}}</h4></template>
         <div v-for="(f, i) in form.fields" v-bind:key=i>
           <p v-if="f.type=='instruction'">{{f.label}}</p>
@@ -10,7 +10,8 @@
             :field="f.field"
             :model="listModel(f.list)"
             :sticky_options="f.sticky_options || undefined"
-            @change="changeValue"/> <!-- TODO add ability to create new items associated with lookup -->
+            @change="storeValue"/> <!-- TODO add ability to create new items associated with lookup -->
+          <!-- TODO: add emoji field -->
           <checkbox-input v-if="f.type=='checkbox'"
             :label="f.label"
             :value="f.value"
@@ -23,11 +24,10 @@
         </div>
         
         <template  v-slot:modal-footer>
-          <b-button class="float-right mx-1" variant="secondary" v-on:click="$bvModal.hide('modal')">{{$t('Cancel')}}</b-button>
+          <b-button class="float-right mx-1" variant="secondary" v-on:click="cancelAction">{{$t('Cancel')}}</b-button>
           <b-button class="float-right mx-1" variant="primary" v-on:click="doAction">{{form.ok_label}}</b-button>
         </template>
       </b-modal>
-        <b-button v-on:click="Button">ok</b-button>
     </div>
 </template>
 
@@ -55,19 +55,13 @@ export default {
   },
   data() {
     return {
-      new_item: {},
+      form_data: {},
       form: {},
-      buttons: {
-        'new':{'label': this.$t('Save')},
-        'delete':{'label': this.$t('Delete')},
-        'edit':{'label': this.$t('Save')},
-        'move':{'label': this.$t('Move')},
-        'merge':{'label': this.$t('Merge')}
-      }
+      dirty: false
     }
   },
   mounted() {
-    this.$root.$on('change', this.changeValue);  // modal is outside Vue instance(?) so have to listen at root of component
+    this.$root.$on('change', this.storeValue);  // modal is outside Vue instance(?) so have to listen at root of component
   },
   computed: {
     buttonLabel() {
@@ -78,30 +72,27 @@ export default {
     'show': function () {
       if (this.show) {
         this.form = getForm(this.model, this.action, this.item1, this.item2)
+        this.dirty = true
         this.$bvModal.show('modal')
+      } else {
+        this.$bvModal.hide('modal')
+        this.form_data = {}
       }
     },
   },
   methods: {
-      Button: function(e) {
-        this.form = getForm(this.model, this.action, this.item1, this.item2)
-        console.log(this.form)
-        this.$bvModal.show('modal')
-      },
       doAction: function(){
-        let alert_text = ''
-        for (const [k, v] of Object.entries(this.form.fields)) {
-          if (v.type !== 'instruction'){
-            alert_text = alert_text + v.field + ": " + this.new_item[v.field] + "\n"
-          }
-        }
-        this.$nextTick(function() {this.$bvModal.hide('modal')})
-        setTimeout(() => {}, 0) // confirm that the 
-        alert(alert_text)
+        this.dirty = false
+        this.$emit('finish-action', {'form_data': this.form_data })
       },
-      changeValue: function(field, value) {
-        // console.log('catch change', field, value)
-        this.new_item[field] = value
+      cancelAction: function() {
+        if (this.dirty) {
+          this.dirty = false
+          this.$emit('finish-action', 'cancel')
+        }
+      },
+      storeValue: function(field, value) {
+        this.form_data[field] = value
       },
       listModel: function(m) {
         if (m === 'self') {