#62

added a new display option for image - showRemoveButtonWithImage
added functional tests to test new option.
refactor function names in viewModels.js

Author: temi

grails-app/assets/javascripts/viewModels.js

@@ -36,7 +36,7 @@ function enmapify(args) {
         listSitesUrl = activityLevelData.listSitesUrl || args.listSitesUrl,
         getSiteUrl = activityLevelData.getSiteUrl || args.getSiteUrl,
         context = args.context,
-        uniqueNameUrl = (activityLevelData.uniqueNameUrlz || args.uniqueNameUrl) + "/" + ( activityLevelData.pActivity.projectActivityId || activityLevelData.pActivity.projectId),
+        uniqueNameUrl = (activityLevelData.uniqueNameUrl || args.uniqueNameUrl) + "/" + ( activityLevelData.pActivity.projectActivityId || activityLevelData.pActivity.projectId),
         // hideSiteSelection is now dependent on survey's mapConfiguration
         // check viewModel.transients.hideSiteSelection
         hideMyLocation = args.hideMyLocation || false,
@@ -430,9 +430,9 @@ function enmapify(args) {
                 lonObservable(data.decimalLongitude);
 
                 if (addCreatedSiteToListOfSelectedSites)
-                    completeDraw();
+                    createPublicSite();
                 else
-                    completeDrawWithoutAdditionalSite();
+                    createPrivateSite();
             }
         }
     }
@@ -443,9 +443,9 @@ function enmapify(args) {
     map.registerListener("searchEventFired", function (e) {
         console.log('Received search event');
         if (addCreatedSiteToListOfSelectedSites)
-            completeDraw();
+            createPublicSite();
         else
-            completeDrawWithoutAdditionalSite();
+            createPrivateSite();
     });
 
     // make sure the lat/lng fields are cleared when the marker is removed by cancelling a new marker
@@ -457,9 +457,9 @@ function enmapify(args) {
 
         //Create site for all type including point
         if (addCreatedSiteToListOfSelectedSites)
-            completeDraw();
+            createPublicSite();
         else
-            completeDrawWithoutAdditionalSite();
+            createPrivateSite();
     });
     var saved = false;
     map.registerListener("draw:edited", function (e) {
@@ -474,9 +474,9 @@ function enmapify(args) {
             map.clearLayers();
         } else if (saved) {
             if (addCreatedSiteToListOfSelectedSites)
-                completeDraw();
+                createPublicSite();
             else
-                completeDrawWithoutAdditionalSite()
+                createPrivateSite()
         } else {
             console.log("cancelled edit with selected site, not clearing geometry")
         }
@@ -490,7 +490,14 @@ function enmapify(args) {
         map.markMyLocation();
     }
 
-    function completeDraw() {
+    /**
+     * Public sites have a name and are indexed by ElasticSearch.
+     * Hence they are visible on site listing pages.
+     * Creating public site also adds the site to ProjectActivity's
+     * pre-determined list. Therefore, users will be able to pick it from
+     * site selection drop down after creation.
+     */
+    function createPublicSite() {
         siteSubscriber.dispose();
         siteIdObservable(null);
         Biocollect.Modals.showModal({
@@ -529,7 +536,10 @@ function enmapify(args) {
         siteSubscriber = siteIdObservable.subscribe(updateMapForSite);
     }
 
-    function completeDrawWithoutAdditionalSite() {
+    /**
+     * Private sites are not index by ElasticSearch. Hence not visible on site listing pages.
+     */
+    function createPrivateSite() {
         siteSubscriber.dispose();
 
         var extent = convertGeoJSONToExtent(map.getGeoJSON());

grails-app/assets/stylesheets/forms.css

@@ -152,4 +152,12 @@ table .select2 {
 
 #error-info .formError.inline .formErrorContent {
     box-sizing: border-box;
+}
+
+.margin-top-10 {
+    margin-top: 10px;
+}
+
+.margin-bottom-10 {
+    margin-bottom: 10px;
 }

grails-app/conf/example_data/images.json

@@ -4,5 +4,8 @@
   },
   "images2": {
     "documentId": "d2"
+  },
+  "images3": {
+    "documentId": "d3"
   }
 }

grails-app/conf/example_models/images.json

@@ -8,6 +8,10 @@
       "dataType": "image",
       "description": "",
       "name": "images2"
+    },{
+      "dataType": "image",
+      "description": "",
+      "name": "images3"
     }
   ],
   "modelName": "Images Example",
@@ -30,6 +34,15 @@
               "preLabel": "Default metadata behaviour:",
               "source": "images2",
               "type": "image"
+            },
+            {
+              "preLabel": "Hide metadata and show remove button with image behaviour:",
+              "source": "images3",
+              "type": "image",
+              "showMetadata": false,
+              "displayOptions": {
+                "showRemoveButtonWithImage": true
+              }
             }
           ]
         }

grails-app/controllers/ecodata/client/plugin/UrlMappings.groovy

@@ -16,6 +16,10 @@ class UrlMappings {
             controller = 'preview'
             action = 'imagePreview'
         }
+        "/" {
+            controller = 'preview'
+            action = [GET: 'index', POST: 'model']
+        }
         "500"(view:'/error')
     }
 }

grails-app/views/output/_imageDataTypeEditModelTemplate.gsp

@@ -13,6 +13,14 @@
                         </a>
                     </div>
                 </div>
+                <g:if test="${options?.showRemoveButtonWithImage}">
+                    <div class="row-fluid">
+                        <div class="span12">
+                            <a class="btn btn-danger btn-small margin-top-10 margin-bottom-10 remove-btn-with-image" data-bind="click: remove.bind($data,$parent.${name})"><i
+                                    class="icon-remove icon-white"></i> Remove</a>
+                        </div>
+                    </div>
+                </g:if>
             </div>
             <div class="span8"  style="display:${showImgMetadata};">
                 <div class="row-fluid">

grails-app/views/preview/index.gsp

@@ -120,6 +120,16 @@
                     filename:"Landscape_2.jpg",
                     filesize:1000
 
+                },
+                {
+                    documentId:'d3',
+                    url:fcConfig.imagePreviewUrl+'/Landscape_1.jpg',
+                    thumbnailUrl:fcConfig.imagePreviewUrl+'/Landscape_1.jpg',
+                    "name": "Test image 3",
+                    "attribution": "Test attribution 3",
+                    "notes": "Test notes 3",
+                    filename:"Landscape_1.jpg",
+                    filesize:1000
                 }
             ],
             pActivity: {

src/integration-test/groovy/au/org/ala/ecodata/forms/ImageTypeSpec.groovy

@@ -41,4 +41,16 @@ class ImageTypeSpec extends GebReportingSpec {
         $("ul[data-bind*=images1] span[data-bind*=notes]").text() == "Test notes 1"
 
     }
+
+    def "If the showRemoveButtonWithImage displayOption is set, a remove button is added below image. This can be combined with showMetadata false."() {
+        when:
+        to ([name:'images'], PreviewPage)
+
+        then:
+        title == "Preview Images Example"
+
+        and: "The remove button is displayed below image"
+        $("a.remove-btn-with-image").size() == 1
+        $(".fileupload-buttonbar:nth-child(3) .image-title-input").displayed == false
+    }
 }