stubbed out all Food GenericModalForms

vue/src/components/GenericMultiselect.vue

@@ -6,7 +6,7 @@
       :clear-on-select="true"
       :hide-selected="true"
       :preserve-search="true"
-      :placeholder="placeholder"
+      :placeholder="lookupPlaceholder"
       :label="label"
       track-by="id"
       :multiple="multiple"
@@ -19,7 +19,8 @@
 <script>
 
 import Multiselect from 'vue-multiselect'
-import {ApiApiFactory} from "@/utils/openapi/api";
+import {genericAPI} from "@/utils/utils";
+import {Actions} from "@/utils/models";
 
 export default {
   name: "GenericMultiselect",
@@ -32,15 +33,14 @@ export default {
     }
   },
   props: {
-    placeholder: String,
-    search_function: String,
-    label: String,
+    placeholder: {type: String, default: undefined},
+    model: {type: Object, default () {return {}}},
+    label: {type: String, default: 'name'},
     parent_variable: {type: String, default: undefined},
     limit: {type: Number, default: 10,},
     sticky_options: {type:Array, default(){return []}},
     initial_selection: {type:Array, default(){return []}},
-    multiple: {type: Boolean, default: true},
-    tree_api: {type: Boolean, default: false} // api requires params that are unique to TreeMixin
+    multiple: {type: Boolean, default: true}
   },
   watch: {
     initial_selection: function (newVal, oldVal) { // watch it
@@ -59,31 +59,21 @@ export default {
         this.selected_objects = this.initial_selection?.[0] ?? null
       }
   },
+  computed: {
+    lookupPlaceholder() {
+      return this.placeholder || this.model.name || this.$t('Search')
+    },
+  },
   methods: {
     search: function (query) {
-      let apiClient = new ApiApiFactory()
-      if (this.tree_api) {
-        let page = 1
-        let root = undefined
-        let tree = undefined
-        let pageSize = 10
-
-        if (query === '') {
-          query = undefined
-        }
-        apiClient[this.search_function](query, root, tree, page, pageSize).then(result => {
-          this.objects = this.sticky_options.concat(result.data.results)
-        })
-      } else if (this.search_function === 'listRecipes') {
-        apiClient[this.search_function](query, undefined, undefined, undefined, undefined, undefined,
-          undefined, undefined, undefined, undefined, undefined, 25, undefined).then(result => {
-          this.objects = this.sticky_options.concat(result.data.results)
-        })
-      } else {
-        apiClient[this.search_function]({query: {query: query, limit: this.limit}}).then(result => {
-          this.objects = this.sticky_options.concat(result.data)
-        })
+      let options = {
+        'page': 1,
+        'pageSize': 10,
+        'query': query
       }
+      genericAPI(this.model, Actions.LIST, options).then((result) => {
+        this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
+      })
     },
     selectionChanged: function () {
       this.$emit('change', {var: this.parent_variable, val: this.selected_objects})

vue/src/components/Modals/GenericModalForm.vue

@@ -1,13 +1,15 @@
 <template>
     <div>
       <b-modal class="modal" id="modal" >
-        <template v-slot:modal-title><h4>{{model}} {{action}}</h4></template>
-        <div v-for="(f, i) in fields" v-bind:key=i>
+        <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>
           <lookup-input v-if="f.type=='lookup'"
             :label="f.label"
             :value="f.value"
             :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 -->
           <checkbox-input v-if="f.type=='checkbox'"
             :label="f.label"
@@ -22,7 +24,7 @@
         
         <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="primary" v-on:click="doAction">{{buttonLabel}}</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>
@@ -32,7 +34,10 @@
 <script>
 import Vue from 'vue'
 import {BootstrapVue} from 'bootstrap-vue'
+import {getForm} from "@/utils/utils";
 Vue.use(BootstrapVue)
+
+import {Models} from "@/utils/models";
 import CheckboxInput from "@/components/Modals/CheckboxInput";
 import LookupInput from "@/components/Modals/LookupInput";
 import TextInput from "@/components/Modals/TextInput";
@@ -41,46 +46,17 @@ export default {
   name: 'GenericModalForm',
   components: {CheckboxInput, LookupInput, TextInput},
   props: {
-    model: {type: String, default: ''},
+    model: {type: Object, default: function() {}},
+    action: {type: Object, default: function() {}},
+    item1: {type: Object, default: function() {}},
+    item2: {type: Object, default: function() {}},
     // action: {type: String, default: ''},
     show: {type: Boolean, default: false},
   },
   data() {
     return {
       new_item: {},
-      action: '',
-      fields: [
-        {'label': 'This is a long set of instructions that tell you to be careful with what you do next or really bad things are likely to happen.',
-          'type': 'instruction',
-          'value': undefined},
-        {'field': 'name',
-          'label': 'first',
-          'type': 'text',
-          'value': undefined,
-          'placeholder': 'do the thing'},
-        {'field': 'shopping',
-          'label': 'second',
-          'type': 'lookup',
-          'value': undefined},
-        {'field': 'isreal',
-          'label': 'third',
-          'type': 'checkbox',
-          'value': undefined},
-        {'field': 'ignore',
-          'label': 'fourth',
-          'type': 'checkbox',
-          'value': undefined},
-        {'field': 'another_category',
-          'label': 'fifth',
-          'type': 'lookup',
-          'value': undefined},
-        {'field': 'description',
-          'label': 'sixth',
-          'type': 'text',
-          'value': undefined,
-          'placeholder': 'also, do the thing'
-        }
-      ],
+      form: {},
       buttons: {
         'new':{'label': this.$t('Save')},
         'delete':{'label': this.$t('Delete')},
@@ -101,20 +77,20 @@ export default {
   watch: {
     'show': function () {
       if (this.show) {
+        this.form = getForm(this.model, this.action, this.item1, this.item2)
         this.$bvModal.show('modal')
       }
     },
   },
   methods: {
       Button: function(e) {
-        console.log(typeof({}), typeof([]), typeof('this'), typeof(1))
-        this.action='new'
+        this.form = getForm(this.model, this.action, this.item1, this.item2)
+        console.log(this.form)
         this.$bvModal.show('modal')
       },
       doAction: function(){
-        console.log(this.new_item)
         let alert_text = ''
-        for (const [k, v] of Object.entries(this.fields)) {
+        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"
           }
@@ -122,11 +98,17 @@ export default {
         this.$nextTick(function() {this.$bvModal.hide('modal')})
         setTimeout(() => {}, 0) // confirm that the 
         alert(alert_text)
-        console.log(this.model_values)
       },
       changeValue: function(field, value) {
+        // console.log('catch change', field, value)
         this.new_item[field] = value
-        console.log('catch value', field, value)
+      },
+      listModel: function(m) {
+        if (m === 'self') {
+          return this.model
+        } else {
+          return Models[m]
+        }
       }
   }
 }

vue/src/components/Modals/LookupInput.vue

@@ -4,19 +4,19 @@
             v-bind:label="label"
             class="mb-3">
         <generic-multiselect 
-          @change="new_value=$event.val"
-          label="name"
+          @change="new_value=$event.val['id']"
           :initial_selection="[]"  
-          search_function="listSupermarketCategorys" 
+          :model="model"
           :multiple="false"
-          :sticky_options="[{'id': null,'name': $t('None')}]"
+          :sticky_options="sticky_options"
           style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-          :placeholder="$t('Shopping_Category')">
+          :placeholder="modelName">
         </generic-multiselect>
     </div>
 </template>
 
 <script>
+import Vue from "vue";
 import GenericMultiselect from "@/components/GenericMultiselect";
 
 export default {
@@ -24,10 +24,10 @@ export default {
   components: {GenericMultiselect},
   props: {
     field: {type: String, default: 'You Forgot To Set Field Name'},
-    label: {type: String, default: 'Lookup Field'},
+    label: {type: String, default: ''},
     value: {type: Object, default () {return {}}},
-    show_move: {type: Boolean, default: false},
-    show_merge: {type: Boolean, default: false},
+    model: {type: Object, default () {return {}}},
+    sticky_options: {type:Array, default(){return []}},
   },
   data() {
     return {
@@ -37,6 +37,11 @@ export default {
   mounted() {
     this.new_value = this.value.id
   },
+  computed: {
+    modelName() {
+      return this?.model?.name  ?? this.$t('Search')
+    }
+  },
   watch: {
     'new_value': function () {
       this.$root.$emit('change', this.field, this.new_value)