#156 Updated datalist docs, added deletefuntion config and started re…

…writing the deleteAction

core/src/main/java/com/themecleanflex/models/DatalistModel.java

@@ -32,7 +32,14 @@
           "type": "string",
           "x-source": "inject",
           "x-form-label": "Javascript function to call to load data",
-          "x-form-hint": "Function must accept (name)",
+          "x-form-hint": "Function must accept (endpointurl)",
+          "x-form-type": "text"
+        },
+        "deletefunction": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call to delete rows",
+          "x-form-hint": "Function must accept vue object",
           "x-form-type": "text"
         },
         "columns": {
@@ -444,10 +451,14 @@ public class DatalistModel extends AbstractComponent {
 	@Default(values ="")
 	private String endpointurl;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Javascript function to call to load data","x-form-hint":"Function must accept (name)","x-form-type":"text"} */
+	/* {"type":"string","x-source":"inject","x-form-label":"Javascript function to call to load data","x-form-hint":"Function must accept (endpointurl)","x-form-type":"text"} */
 	@Inject
 	private String loadfunction;
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Javascript function to call to delete rows","x-form-hint":"Function must accept vue object","x-form-type":"text"} */
+	@Inject
+	private String deletefunction;
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Table Configuration","x-form-fieldLabel":"header","x-form-type":"collection","properties":{"header":{"type":"string","x-source":"inject","x-form-label":"Column Header","x-form-type":"text"},"value":{"type":"string","x-source":"inject","x-form-label":"Data Value","x-form-type":"text"}}} */
 	@Inject
 	private List<IComponent> columns;
@@ -605,11 +616,16 @@ public String getEndpointurl() {
 		return endpointurl;
 	}
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Javascript function to call to load data","x-form-hint":"Function must accept (name)","x-form-type":"text"} */
+	/* {"type":"string","x-source":"inject","x-form-label":"Javascript function to call to load data","x-form-hint":"Function must accept (endpointurl)","x-form-type":"text"} */
 	public String getLoadfunction() {
 		return loadfunction;
 	}
 
+	/* {"type":"string","x-source":"inject","x-form-label":"Javascript function to call to delete rows","x-form-hint":"Function must accept vue object","x-form-type":"text"} */
+	public String getDeletefunction() {
+		return deletefunction;
+	}
+
 	/* {"type":"string","x-source":"inject","x-form-label":"Table Configuration","x-form-fieldLabel":"header","x-form-type":"collection","properties":{"header":{"type":"string","x-source":"inject","x-form-label":"Column Header","x-form-type":"text"},"value":{"type":"string","x-source":"inject","x-form-label":"Data Value","x-form-type":"text"}}} */
 	public List<IComponent> getColumns() {
 		return columns;

docs/datalist.md

@@ -9,16 +9,17 @@ If a endpoint URL is indicated, then the datalist will do an axios GET request w
 
 The endpoint should return a list of objects.
 ex.
-[{
-    "firstName": "Kyle",
-    "lastName": "Watson"
-},{
-    "firstName": "Shane",
-    "lastName": "Mcgrath"
-},{
-    "firstName": "Ben",
-    "lastName": "Kahn"
-}]
+
+    [{
+        "firstName": "Kyle",
+        "lastName": "Watson"
+    },{
+        "firstName": "Shane",
+        "lastName": "Mcgrath"
+    },{
+        "firstName": "Ben",
+        "lastName": "Kahn"
+    }]
 
 #### Javascript Function to Get Data
 Instead of the default GET endpoint behaviour, the user can configure a custom function to be called instead. This function can be part of any object as long as it can be accessed through the javascript window object.

fragments/datalist/model.json

@@ -15,7 +15,14 @@
           "type": "string",
           "x-source": "inject",
           "x-form-label": "Javascript function to call to load data",
-          "x-form-hint": "Function must accept (name)",
+          "x-form-hint": "Function must accept (endpointurl)",
+          "x-form-type": "text"
+        },
+        "deletefunction": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call to delete rows",
+          "x-form-hint": "Function must accept vue object",
           "x-form-type": "text"
         },
         "columns": {

fragments/datalist/template.vue

@@ -197,20 +197,36 @@
             }
           },
           deleteAction: function() {
-            if(this.model.endpointurl && this.model.endpointurl !== '') {
-              // load data from URL
-              axios.post(this.model.endpointurl, {
-                firstName: 'Fred',
-                lastName: 'Flinstone'
-              })
-              .then( (response) => {
-                  console.log(response)
-                  // Vue.set(this, 'storageData', response.data)
-                  // Vue.set(this, 'active', new Array(response.data.length).fill(false))
-              })
-              .catch( (error) => {
-                  console.log(error)
-              })
+            if(this.model.deletefunction && this.model.deletefunction !== '') {
+              const objs = this.model.deletefunction.split('.')
+              let parent = window
+              let obj = objs.shift()
+              while(obj && parent[obj]) {
+                if(objs.length === 0) {
+                  try {
+                    const result = parent[obj](this)
+                    if(result === false) {
+                      console.error('Failed to remove rows')
+                    } else {
+                      Vue.set(this, 'storageData', result)
+                    }
+                  } catch(err) {
+                    console.error(err)
+                  }
+                  return
+                }
+                parent = parent[obj]
+                obj = objs.shift()
+              }
+              console.log('window.' + this.model.deletefunction + ' not found')
+              return
+            }
+            else if(this.model.loadfunction && this.model.loadfunction !== '') {
+              console.error('Data loaded externally, we cannot delete')
+            }
+            else {
+              // data loaded from local storage, find rows and delete them
+              // TODO: Finish local data deleting
             }
           }
         }

ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/dialog.json

@@ -13,7 +13,15 @@
       "placeholder": "loadfunction",
       "label": "Javascript function to call to load data",
       "model": "loadfunction",
-      "hint": "Function must accept (name)"
+      "hint": "Function must accept (endpointurl)"
+    },
+    {
+      "type": "input",
+      "inputType": "text",
+      "placeholder": "deletefunction",
+      "label": "Javascript function to call to delete rows",
+      "model": "deletefunction",
+      "hint": "Function must accept vue object"
     },
     {
       "type": "collection",

ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/datalist/template.vue

@@ -197,20 +197,36 @@
             }
           },
           deleteAction: function() {
-            if(this.model.endpointurl && this.model.endpointurl !== '') {
-              // load data from URL
-              axios.post(this.model.endpointurl, {
-                firstName: 'Fred',
-                lastName: 'Flinstone'
-              })
-              .then( (response) => {
-                  console.log(response)
-                  // Vue.set(this, 'storageData', response.data)
-                  // Vue.set(this, 'active', new Array(response.data.length).fill(false))
-              })
-              .catch( (error) => {
-                  console.log(error)
-              })
+            if(this.model.deletefunction && this.model.deletefunction !== '') {
+              const objs = this.model.deletefunction.split('.')
+              let parent = window
+              let obj = objs.shift()
+              while(obj && parent[obj]) {
+                if(objs.length === 0) {
+                  try {
+                    const result = parent[obj](this)
+                    if(result === false) {
+                      console.error('Failed to remove rows')
+                    } else {
+                      Vue.set(this, 'storageData', result)
+                    }
+                  } catch(err) {
+                    console.error(err)
+                  }
+                  return
+                }
+                parent = parent[obj]
+                obj = objs.shift()
+              }
+              console.log('window.' + this.model.deletefunction + ' not found')
+              return
+            }
+            else if(this.model.loadfunction && this.model.loadfunction !== '') {
+              console.error('Data loaded externally, we cannot delete')
+            }
+            else {
+              // data loaded from local storage, find rows and delete them
+              // TODO: Finish local data deleting
             }
           }
         }

ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css

@@ -529,7 +529,8 @@ img,
 svg,
 video,
 canvas,
-iframe {
+iframe,
+object {
   display: block;
   vertical-align: middle;
 }