Fix view mode rendering of select2Many/selectMany #256

grails-app/assets/javascripts/forms-knockout-bindings.js

@@ -1146,6 +1146,21 @@
  ecodata.forms.OutputListSupport.apply(target, [options.metadata, options.constructorFunction, options.context, options.userAddedRows, options.config]);
  };
 
+ /**
+ * The role of this extender is to provide a function the view model can use to render a list of
+ * values selected using a multi select component (select2Many / selectMany) that have also used a
+ * label/value configuration for the options.
+ * @param target the observable.
+ * @param options unused
+ */
+ ko.extenders.toReadOnlyString = function(target, options) {
+ target.toReadOnlyString = function() {
+ var values = ko.utils.unwrapObservable(target);
+ var labels = target.constraints && _.isFunction(target.constraints.label) ? _.map(values, target.constraints.label) : values;
+ return labels.join(', ');
+ }
+ }
+
  /**
  * This is kind of a hack to make the closure config object available to the any components that use the model.
  */

grails-app/taglib/au/org/ala/ecodata/forms/ModelJSTagLib.groovy

@@ -732,7 +732,8 @@ class ModelJSTagLib {
  }
 
  def stringListViewModel(JSModelRenderContext ctx) {
- observableArray(ctx)
+ String extender = '{toReadOnlyString:true}'
+ observableArray(ctx, [extender])
  }
 
  def setViewModel(JSModelRenderContext ctx) {

src/main/groovy/au/org/ala/ecodata/forms/ViewModelWidgetRenderer.groovy

@@ -72,9 +72,23 @@ class ViewModelWidgetRenderer implements ModelWidgetRenderer {
  context.writer << "<span ${context.attributes.toString()} data-bind='${context.databindAttrs.toString()}'></span>"
  }
 
+ /**
+ * The binding looks for the toReadOnlyString function because there exist some misconfigurations that
+ * use a "text" data model item with a selectMany/select2Many view. This is a workaround to prevent exceptions.
+ */
+ private static String selectManyBindingString(WidgetRenderContext context) {
+ '_.isFunction(('+context.source+' || []).toReadOnlyString) ? '+ context.source+'.toReadOnlyString() : ('+context.source+'() || []).join(", ")'
+ }
+
  @Override
  void renderSelectMany(WidgetRenderContext context) {
- context.databindAttrs.add 'text', '('+context.source+'() || []).join(", ")'
+ context.databindAttrs.add 'text',selectManyBindingString(context)
+ context.writer << "<span ${context.attributes.toString()} data-bind='${context.databindAttrs.toString()}'></span>"
+ }
+
+ @Override
+ void renderSelect2Many(WidgetRenderContext context) {
+ context.databindAttrs.add 'text', selectManyBindingString(context)
  context.writer << "<span ${context.attributes.toString()} data-bind='${context.databindAttrs.toString()}'></span>"
  }
 
@@ -195,12 +209,6 @@ class ViewModelWidgetRenderer implements ModelWidgetRenderer {
  context.writer << """\$<span data-bind='${context.databindAttrs.toString()}'></span>.00"""
  }
 
- @Override
- void renderSelect2Many(WidgetRenderContext context) {
- context.databindAttrs.add 'text', '('+context.source+'() || []).join(", ")'
- context.writer << "<span ${context.attributes.toString()} data-bind='${context.databindAttrs.toString()}'></span>"
- }
-
  @Override
  void renderMultiInput(WidgetRenderContext context) {
  context.databindAttrs.add 'text', '('+context.source+'() || []).join(", ")'