generic api mixin

vue/src/apps/FoodListView/FoodListView.vue

@@ -2,8 +2,6 @@
   <div id="app" style="margin-bottom: 4vh">
     <generic-split-lists
       :list_name="this_model"
-      :load_more_left="load_more_left"
-      :load_more_right="load_more_right"
       @reset="resetList"
       @get-list="getFoods"
       @item-action="startAction" 
@@ -14,7 +12,6 @@
           :model=f
           :model_name="this_model"
           :draggable="true"
-          :tree="true"
           :merge="true"
           :move="true"
           @item-action="startAction($event, 'left')" 
@@ -30,7 +27,6 @@
           :model=f
           :model_name="this_model"
           :draggable="true"
-          :tree="true"
           :merge="true"
           :move="true"
           @item-action="startAction($event, 'right')" 
@@ -136,18 +132,13 @@
 
 <script>
 
-import axios from "axios";
-axios.defaults.xsrfCookieName = 'csrftoken'
-axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
-
 import Vue from 'vue'
 import {BootstrapVue} from 'bootstrap-vue'
 
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
-import {ToastMixin} from "@/utils/utils";
+import {ToastMixin, ApiMixin, CardMixin} from "@/utils/utils";
 
-import {ApiApiFactory} from "@/utils/openapi/api.ts";
 import GenericSplitLists from "@/components/GenericSplitLists";
 import GenericHorizontalCard from "@/components/GenericHorizontalCard";
 import GenericMultiselect from "@/components/GenericMultiselect";
@@ -156,7 +147,7 @@ Vue.use(BootstrapVue)
 
 export default {
   name: 'FoodListView',
-  mixins: [ToastMixin, GenericSplitLists, GenericHorizontalCard],
+  mixins: [ToastMixin, ApiMixin, CardMixin],
   components: {GenericHorizontalCard, GenericMultiselect, GenericSplitLists},
   data() {
     return {
@@ -250,75 +241,42 @@ export default {
       }
     },
     getFoods: function(params, callback) {
-      let apiClient = new ApiApiFactory()
-      let query = options?.query ?? ''
-      let page = options?.page ?? 1
-      let root = options?.root ?? undefined
-      let tree = options?.tree ?? undefined
-      let pageSize = options?.pageSize ?? 25
-
-      if (query === '') {
-        query = undefined
-        root = 0
-      }
-      //  delete above
-      let options = {
-        'query': params?.query ?? '',
-        'page': params?.page ?? 1,
-        'root' : params?.id ?? undefined
-      }
       let column = params?.column ?? 'left'
 
-      // let promise = this.listObjects(this.this_model, options).then(result => {
-      let promise = apiClient.listFoods(query, root, tree, page, pageSize).then((result) => {
+      this.genericAPI(this.this_model, 'list', params).then((result) => {
         if (result.data.results.length){
           if (column ==='left') {
-            this.foods = this.foods.concat(result.data.results)
-            if (this.foods?.length < result.data.count) {
-              this.load_more_left = true
-            } else {
-              this.load_more_left = false
-            }
-            
+            this.foods = this.foods.concat(result.data.results)            
           } else if (column ==='right') {
             this.foods2 = this.foods2.concat(result.data.results)
-
-            if (this.foods2?.length < result.data.count) {
-              this.load_more_right = true
-            } else {
-              this.load_more_right = false
-            }
           }
+          // are the total elements less than the length of the array? if so, stop loading
+          callback(result.data.count > (column==="left" ? this.foods.length : this.foods2.length))
         } else {
-          if (column ==='left') {
-            this.load_more_left = false
-          } else if (column ==='right') {
-            this.load_more_right = false
-          }
+          callback(false) // stop loading
           console.log('no data returned')
         }
-        callback(promise)
+        // return true if total objects are still less than the length of the list
+        callback(result.data.count < (column==="left" ? this.foods.length : this.foods2.length)) 
       }).catch((err) => {
         console.log(err)
         this.makeToast(this.$t('Error'), err.bodyText, 'danger')
       })
     },
+    getThis: function(id, callback){
+      return this.genericAPI(this.this_model, 'retrieve', {'id': id}) 
+    },
     saveFood: function () {
-      let apiClient = new ApiApiFactory()
-      let food = {
-        name: this.this_item.name,
-        description: this.this_item.description,
-        recipe: this.this_item.recipe?.id ?? null,
-        ignore_shopping: this.this_item.ignore_shopping,
-        supermarket_category: this.this_item.supermarket_category?.id ?? null,
-      }
-      if (!this.this_item.id) { // if there is no item id assume its a new item
-        apiClient.createFood(food).then(result => {
+      let food = {...this.this_item}
+      food.supermarket_category = this.this_item.supermarket_category?.id ?? null
+      food.recipe = this.this_item.recipe?.id ?? null
+      if (!food?.id) { // if there is no item id assume it's a new item
+        this.genericAPI(this.this_model, 'create', food).then((result) => {
           // place all new foods at the top of the list - could sort instead
           this.foods = [result.data].concat(this.foods)
           // this creates a deep copy to make sure that columns stay independent
           if (this.show_split){
-            this.foods2 = [JSON.parse(JSON.stringify(result.data))].concat(this.foods2)
+            this.foods2 = [...this.foods]
           } else {
             this.foods2 = []
           }
@@ -326,8 +284,8 @@ export default {
           console.log(err)
         })
       } else {
-        apiClient.partialUpdateFood(this.this_item.id, food).then(result => {
-          this.refreshCard(this.this_item.id)
+        this.genericAPI(this.this_model, 'updatePartial', food).then((result) => {
+          this.refreshObject(this.this_item.id)
         }).catch((err) => {
           console.log(err)
         })
@@ -335,18 +293,16 @@ export default {
       this.this_item = {...this.blank_item}
     },
     moveFood: function (source_id, target_id) {
-      let apiClient = new ApiApiFactory()
-      apiClient.moveFood(String(source_id), String(target_id)).then(result => {
+      this.genericAPI(this.this_model, 'move', {'source': source_id, 'target': target_id}).then((result) => {
         if (target_id === 0) {
-          let food = this.findCard(this.foods, source_id) || this.findCard(this.foods2, source_id)
+          let food = this.findCard(source_id, this.foods) || this.findCard(source_id, this.foods2)
+          this.foods = [food].concat(this.destroyCard(source_id, this.foods)) // order matters, destroy old card before adding it back in at root
+          this.foods2 = [...[food]].concat(this.destroyCard(source_id, this.foods2)) // order matters, destroy old card before adding it back in at root
           food.parent = null
-          this.foods = [food].concat(this.destroyCard(source_id, this.foods))
-          this.foods2 = [...food].concat(this.destroyCard(source_id, this.foods2)) // order matters, destroy old card before adding it back in at root
-
         } else {
           this.foods = this.destroyCard(source_id, this.foods)
           this.foods2 = this.destroyCard(source_id, this.foods2)
-          this.refreshCard(target_id)
+          this.refreshObject(target_id)
         }
       }).catch((err) => {
         // TODO none of the error checking works because the openapi generated functions don't throw an error?  
@@ -356,31 +312,23 @@ export default {
       })
     },
     mergeFood: function (source_id, target_id) {
-      let apiClient = new ApiApiFactory()
-      apiClient.mergeFood(String(source_id), String(target_id)).then(result => {
-        // this.destroyCard(source_id)
-        this.refreshCard(target_id)
+      this.genericAPI(this.this_model, 'merge', {'source': source_id, 'target': target_id}).then((result) => {
+        this.foods = this.destroyCard(source_id, this.foods)
+        this.foods2 = this.destroyCard(source_id, this.foods2)
+        this.refreshObject(target_id)
       }).catch((err) => {
         console.log('Error', err)
         this.makeToast(this.$t('Error'), err.bodyText, 'danger')
       })
     },
-    // TODO: DRY the listFood functions (refresh, get children, infinityHandler ) can probably all be consolidated into a single function
     getChildren: function(col, food){
-      let apiClient = new ApiApiFactory()
       let parent = {}
-      let query = undefined
-      let page = undefined
-      let root = food.id
-      let tree = undefined
-      let pageSize = 200
-
-      apiClient.listFoods(query, root, tree, page, pageSize).then(result => {
-        if (col == 'left') {
-          parent = this.findCard(this.foods, food.id)
-        } else if (col == 'right'){
-          parent = this.findCard(this.foods2, food.id)
-        }
+      let options = {
+        'root': food.id,
+        'pageSize': 200
+      }
+      this.genericAPI(this.this_model, 'list', options).then((result) => {
+        parent = this.findCard(food.id, col === 'left' ? this.foods : this.foods2)
         if (parent) {
           Vue.set(parent, 'children', result.data.results)
           Vue.set(parent, 'show_children', true)
@@ -392,19 +340,14 @@ export default {
       })
     },
     getRecipes: function(col, food){
-      let apiClient = new ApiApiFactory()
       let parent = {}
-      let pageSize = 200
+      let options = {
+        'foods': food.id,
+        'pageSize': 200
+      }
 
-      apiClient.listRecipes(
-          undefined, undefined, String(food.id), undefined, undefined, undefined,
-          undefined, undefined, undefined, undefined, undefined, pageSize, undefined
-        ).then(result => {
-        if (col == 'left') {
-          parent = this.findCard(this.foods, food.id)
-        } else if (col == 'right'){
-          parent = this.findCard(this.foods2, food.id)
-        }
+      this.genericAPI('recipe', 'list', options).then((result) => {
+        parent = this.findCard(food.id, col === 'left' ? this.foods : this.foods2)
         if (parent) {
           Vue.set(parent, 'recipes', result.data.results)
           Vue.set(parent, 'show_recipes', true)
@@ -416,38 +359,10 @@ export default {
         this.makeToast(this.$t('Error'), err.bodyText, 'danger')
       })
     },
-    refreshCard: function(id){
-      let target = {}
-      let apiClient = new ApiApiFactory()
-      let idx = undefined
-      let idx2 = undefined
-      apiClient.retrieveFood(id).then(result => {
-        target = this.findCard(this.foods, id) || this.findCard(this.foods2, id)
-        
-        if (target.parent) {
-          let parent = this.findCard(this.foods, target.parent)
-          let parent2 = this.findCard(this.foods2, target.parent)
-
-          if (parent) {
-            if (parent.show_children){
-              idx = parent.children.indexOf(parent.children.find(kw => kw.id === target.id))
-              Vue.set(parent.children, idx, result.data)
-            }
-          }
-          if (parent2){
-            if (parent2.show_children){
-              idx2 = parent2.children.indexOf(parent2.children.find(kw => kw.id === target.id))
-              // deep copy to force columns to be indepedent
-              Vue.set(parent2.children, idx2, JSON.parse(JSON.stringify(result.data)))
-            }
-          }
-        } else {
-          idx = this.foods.indexOf(this.foods.find(food => food.id === target.id))
-          idx2 = this.foods2.indexOf(this.foods2.find(food => food.id === target.id))
-          Vue.set(this.foods, idx, result.data)
-          Vue.set(this.foods2, idx2, JSON.parse(JSON.stringify(result.data)))
-        }
-        
+    refreshObject: function(id){
+      this.getThis(id).then(result => {
+        this.refreshCard(result.data, this.foods)
+        this.refreshCard({...result.data}, this.foods2)
       })
     },
     // this would move with modals with mixin?
@@ -461,14 +376,14 @@ export default {
       this.this_item.icon = icon
     },
     deleteThis: function(id, model) {
-      const result = new Promise((callback) => this.deleteObject(id, model, callback))
-      result.then(() => {
+      this.genericAPI(this.this_model, 'destroy', {'id': id}).then((result) => {
         this.foods = this.destroyCard(id, this.foods)
         this.foods2 = this.destroyCard(id, this.foods2)
-      })
-      
+      }).catch((err) => {
+        console.log(err)
+        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
+      }) 
     },
-    
   }
 }
 

vue/src/components/GenericHorizontalCard.vue

@@ -74,7 +74,7 @@
       </div>
     </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:999; cursor:pointer">
+    <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>
@@ -91,7 +91,6 @@
 </template>
 
 <script>
-import {ApiApiFactory} from "@/utils/openapi/api.ts";
 import GenericContextMenu from "@/components/GenericContextMenu";
 import RecipeCard from "@/components/RecipeCard";
 import { mixin as clickaway } from 'vue-clickaway';
@@ -111,9 +110,8 @@ export default {
     children: {type: String, default: 'children'},
     recipe_count: {type: String, default: 'numrecipe'},
     recipes: {type: String, default: 'recipes'},
-    merge: {type: Boolean, default: false},
     move: {type: Boolean, default: false},
-    tree: {type: Boolean, default: false},
+    merge: {type: Boolean, default: false},
   },
   data() {
     return {
@@ -125,8 +123,8 @@ export default {
       source: {'id': undefined, 'name': undefined},
       target: {'id': undefined, 'name': undefined},
       text: {
-          'hide_children': '',
-      }
+        'hide_children': '',
+      },
     }
   },
   mounted() {
@@ -135,9 +133,6 @@ export default {
     this.text.hide_children = this.$t('Hide_' + this.model_name)
   },
   methods: {
-    emitAction: function(m) {
-
-    },
     handleDragStart: function(e) {
       this.isError = false
       e.dataTransfer.setData('source', JSON.stringify(this.model))
@@ -199,38 +194,6 @@ export default {
     closeMenu: function(){
       this.show_menu = false
     },
-    deleteObject: function(id, model, callback) {
-      let apiClient = new ApiApiFactory()
-      let promise = apiClient['destroy' + model](id).then(() => {
-      }).catch((err) => {
-        console.log(err)
-        this.makeToast(this.$t('Error'), err.bodyText, 'danger')
-      })
-      callback(promise)
-    },
-    async listObjects(model, options) {
-      let apiClient = new ApiApiFactory()
-      let query = options?.query ?? ''
-      let page = options?.page ?? 1
-      let root = options?.root ?? undefined
-      let tree = options?.tree ?? undefined
-      let pageSize = options?.pageSize ?? 25
-
-      if (this.tree) {
-        if (query === '') {
-          query = undefined
-          root = 0
-        }
-        await apiClient.listFoods(query, root, tree, page, pageSize).then((result) => {
-          return result
-        })
-      } else {
-        await apiClient.listFoods(query, page, pageSize).then((result) => {
-          return result
-        })
-      }
-    }
-
   }
 }
 </script>

vue/src/components/GenericSplitLists.vue

@@ -108,11 +108,6 @@ export default {
     list_name: {type: String, default: 'Blank List'},  // TODO update translations to handle plural translations
     left_list: {type:Array, default(){return []}},
     right_list: {type:Array, default(){return []}},
-    load_more_left: {type: Boolean, default: false},
-    load_more_right: {type: Boolean, default: false},
-    //merge: {type: Boolean, default: false},
-    //move: {type: Boolean, default: false},
-    //action: Object
   },
   data() {
     return {
@@ -120,8 +115,8 @@ export default {
       show_split: false,
       search_right: '',
       search_left: '',
-      right_page: 1,
-      left_page: 1,
+      right_page: 0,
+      left_page: 0,
       right: +new Date(),
       left: +new Date(),
       isDirtyright: false,
@@ -175,54 +170,17 @@ export default {
             'page': (col==='left') ? this.left_page + 1 : this.right_page + 1,
             'column': col
         }
-        const result = new Promise((callback) => this.$emit('get-list', params, callback))
-        result.then((result) => {
-            console.log(result)
+        new Promise((callback) => this.$emit('get-list', params, callback)).then((result) => {
             this[col+'_page']+=1
             $state.loaded();
-            if (!this['load_more_' + col]) {
+            if (!result) { // callback needs to return true if handler should continue loading more data
                 $state.complete();
             }
         }).catch(() => {
             $state.complete();
         })
     },
-    findCard: function(card_list, id){
-      let card_length = card_list?.length ?? 0
-      if (card_length == 0) {
-        return false
-      }
-      let cards = card_list.filter(obj => obj.id == id)
-      if (cards.length == 1) {
-        return cards[0]
-      } else if (cards.length == 0) {
-        for (const o of card_list.filter(o => o.show_children == true)) {
-          cards = this.findCard(o.children, id)
-          if (cards) {
-            return cards
-          }
-        }
-      } else {
-        console.log('something terrible happened')
-      }
-    },
-    destroyCard: function(id, cardList) {
-      let card = this.findCard(cardList, id)
-      let card_id = undefined
-      let p_id = card?.parent ?? undefined
-
-      if (p_id) {
-        let parent = this.findCard(cardList, p_id)
-        if (parent){
-          Vue.set(parent, 'numchild', parent.numchild - 1)
-          if (parent.show_children) {
-            let idx = parent.children.indexOf(parent.children.find(x => x.id === id))
-            Vue.delete(parent.children, idx)
-          }
-        }
-      }
-      return cardList.filter(kw => kw.id != id)
-    },
+    
   }
 }
 

vue/src/utils/utils.js

@@ -152,3 +152,217 @@ export function roundDecimals(num) {
     let decimals = ((getUserPreference('user_fractions')) ? getUserPreference('user_fractions') : 2);
     return +(Math.round(num + `e+${decimals}`) + `e-${decimals}`);
 }
+
+/*
+* Utility functions to use OpenAPIs generically
+* */
+import {ApiApiFactory} from "@/utils/openapi/api.ts";  // TODO: is it possible to only import inside the Mixin?
+
+import axios from "axios";
+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
+export const ApiMixin = {
+  data() {
+    return {
+      api_settings: {
+        // TODO consider moving this to an API type dictionary that contains api types with details on the function call name, suffix, etc
+        'suffix': { // if OpenApiGenerator adds a suffix to model name in function calls
+            'list': 's'
+        },
+        // model specific settings, when not provided will use defaults instead
+        'food': { // must be lowercase
+            // *REQUIRED* name is name of the model used for translations and looking up APIFactory
+            'name': 'Food', 
+            // *OPTIONAL: parameters will be built model -> model_type -> default
+            'model_type': 'tree',  
+            // *OPTIONAL* model specific params for api, if not present will attempt modeltype_create then default_create
+            // an array will create a dict of name:value pairs
+            'create': [['name', 'description', 'recipe', 'ignore_shopping', 'supermarket_category']],   // required: unordered array of fields that can be set during create
+            // *OPTIONAL* model specific params for api, includes ordered list of parameters
+            //            and an unordered array that will be converted to a dictionary and passed as the 2nd param
+            'partialUpdate': ['id',  // required: ordered array of list params to patch existing object
+                ['name', 'description', 'recipe', 'ignore_shopping', 'supermarket_category']  // must include ordered array of field names that can be updated
+            ],
+            //  *OPTIONAL*  provide model specific typing
+            // 'typing': {},
+        },
+        'keyword': {},
+        'unit': {},
+        'recipe': {
+            'name': 'Recipe',
+            'list': ['query', 'keywords', 'foods', 'books', 'keywordsOr', 'foodsOr', 'booksOr', 'internal', 'random', '_new', 'page', 'pageSize', 'options'],
+            'typing': {
+                'list': {
+                    'foods': 'string',
+                    'keywords': 'string',
+                    'books': 'string',
+                }
+            },
+
+        },
+        // collection of default attributes for model_type TREE. All settings except typing and values will be overwritten by model values
+        'tree': {
+            'values': {
+                'root': 'getFunction()', // if default value is exactly 'getFunction()' will call getFunction(model_type, param, params)
+                'tree': undefined,
+            },
+            'list': ['query', 'root', 'tree', 'page', 'pageSize'], // ordered array of list params for tree
+            'typing': {
+                'move': {
+                    'source': 'string',
+                    'target': 'string',
+                }
+            }
+        },
+        // collection of global defaults.  All settings except typing and values will be overwritten by model_type or model values
+        'default': {
+            'list': ['query', 'page', 'pageSize'], // ordered array of list params for default listApi
+            'destroy': ['id'], // ordered array of list params for default deleteApi
+            'retrieve': ['id'], // ordered array of list params for default retrieveApi
+            'merge': ['source', 'target'], // ordered array of list params for default mergeApi
+            'move': ['source', 'target'], // ordered array of list params for default moveApi
+            'create': [], // ordered array of list params for default createApi
+            'partialUpdate': [], // ordered array of list params for default updateApi
+            'values': {
+                'query': undefined,  // default values for list API
+                'page': 1,
+                'pageSize': 25,
+            },
+            'typing': {   // optional settings to force type on parameters
+                'merge': {
+                    'source': 'string',
+                    'target': 'string',
+                },
+            },
+        }
+      }
+    }
+  },
+  methods: {
+    /**
+     * constructs OpenAPI Generator function using named parameters
+     * @param {string} model string to define which model API to use
+     * @param {string} api string to define which of the API functions to use
+     * @param {object} options dictionary to define all of the parameters necessary to use API
+     */
+    genericAPI: function(model, api, options) {
+        model = model.toLowerCase()
+        // construct settings for this model and this api - values are assigned in order (default is overwritten by api overwritten by model)
+        let settings = {...this.api_settings?.default ?? {}, ...this.api_settings?.[this.api_settings?.[model]?.model_type] ?? {}, ...this.api_settings[model]};
+        // values and typing are also dicts and need to be merged, 
+        settings.values = {...this.api_settings?.default?.values ?? {},
+                            ...this.api_settings?.[this.api_settings?.[model]?.model_type]?.values ?? {},
+                            ...this.api_settings[model].values}
+        settings.typing = {...this.api_settings?.default?.typing?.[api] ?? {},
+                            ...this.api_settings?.[this.api_settings?.[model]?.model_type]?.typing?.[api] ?? {},
+                            ...this.api_settings[model].typing?.[api]}
+        let func = api + settings.name + (this.api_settings.suffix?.[api] ?? '')
+        // does model params exist?
+        let params = []
+        let this_value = undefined
+        settings[api].forEach(function (item, index) {
+            
+            if (Array.isArray(item)) {
+                this_value = {}
+                for (const [k, v] of Object.entries(options)) { // filters options dict based on valus in array, I'm sure there's a better way to do this
+                    if (item.includes(k)) {
+                        this_value[k] = v
+                    }
+                }
+            } else {
+                this_value = options?.[item] ?? settings.values?.[item] ?? undefined // set the value or apply default
+            }
+            if (this_value ==='getFunction()') {
+                this_value = getFunction(item, settings?.model_type, options)
+            }
+            if (Object.keys(settings?.typing).includes(item)) {
+                switch (settings.typing[item]) {
+                    case 'string':
+                        if (this_value) {this_value = String(this_value)} 
+                        break;
+                }
+            }
+            params.push(this_value)
+        });
+
+        let apiClient = new ApiApiFactory()
+        return apiClient[func](...params)
+    }
+  }
+}
+
+/*
+* Utility functions to calculate default value
+* */
+export function getFunction(item, model_type, params) {
+    if (item==='root' && model_type==='tree') {
+        if ((!params?.query ?? undefined) || params?.query?.length == 0) {
+            return 0
+        }
+        return undefined
+    }
+}
+
+
+// /*
+// * Utility functions to use manipulate nested components
+// * */
+import Vue from 'vue'
+export const CardMixin = {
+    methods: {
+        findCard: function(id, card_list){
+            let card_length = card_list?.length ?? 0
+            if (card_length == 0) {
+              return false
+            }
+            let cards = card_list.filter(obj => obj.id == id)
+            if (cards.length == 1) {
+              return cards[0]
+            } else if (cards.length == 0) {
+              for (const c of card_list.filter(x => x.show_children == true)) {
+                cards = this.findCard(id, c.children)
+                if (cards) {
+                  return cards
+                }
+              }
+            } else {
+              console.log('something terrible happened')
+            }
+        },
+        destroyCard: function(id, card_list) {
+            let card = this.findCard(id, card_list)
+            let p_id = card?.parent ?? undefined
+        
+            if (p_id) {
+                let parent = this.findCard(p_id, card_list)
+                if (parent){
+                    Vue.set(parent, 'numchild', parent.numchild - 1)
+                    if (parent.show_children) {
+                        let idx = parent.children.indexOf(parent.children.find(x => x.id === id))
+                        Vue.delete(parent.children, idx)
+                    }
+                }
+            }
+            return card_list.filter(x => x.id != id)
+          },
+        refreshCard: function(obj, card_list){
+            let target = {}
+            let idx = undefined
+            target = this.findCard(obj.id, card_list)
+            
+            if (target.parent) {
+                let parent = this.findCard(target.parent, card_list)
+                if (parent) {
+                    if (parent.show_children){
+                        idx = parent.children.indexOf(parent.children.find(x => x.id === target.id))
+                        Vue.set(parent.children, idx, obj)
+                    }
+                }
+            } else {
+                idx = card_list.indexOf(card_list.find(x => x.id === target.id))
+                console.log(card_list, idx, obj)
+                Vue.set(card_list, idx, obj)
+            }
+        },
+    }
+}