Add code to remove items from Multile type form field. Add new red minus icon

Author: Tim Berners-Lee

lib/icons/noun_2188_red.svg

@@ -402,6 +402,8 @@ widgetModule.field[UI.ns.ui('Options').uri] = function (
 */
 widgetModule.field[UI.ns.ui('Multiple').uri] = function (
   dom, container, already, subject, form, store, callback) {
+  // var plusIcon = UI.icons.originalIconBase + 'tango/22-list-add.png' // blue plus
+  var plusIconURI = UI.icons.iconBase + 'noun_19460_green.svg' // white plus in green circle
   var kb = UI.store
   kb.updater = kb.updater || new $rdf.UpdateManager(kb)
   var box = dom.createElement('table')
@@ -432,8 +434,8 @@ widgetModule.field[UI.ns.ui('Multiple').uri] = function (
   var body = box.appendChild(dom.createElement('tr'))
   var tail = box.appendChild(dom.createElement('tr'))
   var img = tail.appendChild(dom.createElement('img'))
-  img.setAttribute('src', UI.icons.originalIconBase + 'tango/22-list-add.png') // blue plus
-  img.setAttribute('style', 'margin: 0.2em;') // blue plus
+  img.setAttribute('src', plusIconURI) //  plus sign
+  img.setAttribute('style', 'margin: 0.2em; width: 1em; height:1em')
   img.title = 'Click to add one or more ' + UI.utils.label(property)
   var prompt = tail.appendChild(dom.createElement('span'))
 
@@ -442,23 +444,38 @@ widgetModule.field[UI.ns.ui('Multiple').uri] = function (
     ++count
     if (!object) object = widgetModule.newThing(store)
     var tr = box.insertBefore(dom.createElement('tr'), tail)
-    var itemDone = function (ok, body) {
+    var itemDone = function (uri, ok, message) {
       if (ok) { // @@@ Check IT hasnt alreday been written in
         if (!kb.holds(subject, property, object)) {
           var ins = [$rdf.st(subject, property, object, store)]
           kb.updater.update([], ins, linkDone)
         }
       } else {
         tr.appendChild(widgetModule.errorMessageBlock(dom, 'Multiple: item failed: ' + body))
-        callback(ok, body)
+        callback(ok, message)
       }
     }
-    var linkDone = function (uri, ok, body) {
-      return callback(ok, body)
+    var linkDone = function (uri, ok, message) {
+      return callback(ok, message)
     }
+
     var fn = widgetModule.fieldFunction(dom, element)
-    // box.appendChild(dom.createTextNode('multiple object: '+object ))
-    fn(dom, body, already, object, element, store, itemDone)
+    var subField = fn(dom, body, already, object, element, store, itemDone)
+
+    // delete button
+    var deleteItem = function(){
+      if (kb.holds(subject, property, object)) {
+        var del = [$rdf.st(subject, property, object, store)]
+        kb.updater.update(del, [], function(uri, ok, message){
+          if(ok){
+            body.removeChild(subField)
+          } else {
+            body.appendChild(widgetModule.errorMessageBlock(dom, 'Multiple: delete failed: ' + message))
+          }
+        })
+      }
+    }
+    widgetModule.deleteButtonWithCheck(dom, subField, UI.utils.label(property), deleteItem)
   }
 
   var values = kb.each(subject, property)
@@ -467,7 +484,8 @@ widgetModule.field[UI.ns.ui('Multiple').uri] = function (
 
   values.map(function (obj) { addItem(null, obj) })
 
-  for (i = values.length; i < min; i++) {
+  while (values.length < min) {
+    console.log("Adding extra: min " + min )
     addItem() // Add blanks if less than minimum
   }
 
@@ -612,7 +630,7 @@ widgetModule.field[UI.ns.ui('PhoneField').uri] =
                           kb.updater.update(ds, is, function (uri, ok, body) {
                             if (ok) {
                               field.disabled = false
-                              field.setAttribute('style', 'color: black;')
+                              field.setAttribute('style', style)
                             } else {
                               box.appendChild(widgetModule.errorMessageBlock(dom, body))
                             }