LSformElement :: supannLabeledValue.php : Improve edition to permit value selection in SUPANN table

public_html/css/default/LSformElement_supannLabeledValue.css

@@ -0,0 +1,24 @@
+input.LSformElement_supannLabeledValue_search {
+	border: 1px solid #CCC;
+	width: 200px;
+	background: url('../../images/default/find.png') no-repeat scroll 0% 0% #FFF !important;
+	padding-left: 18px;
+}
+
+div.supannLabeledValue_possibleValues ul {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	border: 1px solid #CCC;
+	border-collapse: collapse;
+}
+
+div.supannLabeledValue_possibleValues li {
+	border-bottom: 1px solid #CCC;
+	margin-bottom: 2px;
+}
+
+div.supannLabeledValue_possibleValues li:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}

public_html/includes/class/class.LSformElement_supannLabeledValue.php

@@ -54,6 +54,21 @@ class LSformElement_supannLabeledValue extends LSformElement {
       $parseValues[]=$this -> parseValue($val);
     }
     $return['html'] = $this -> fetchTemplate(NULL,array('parseValues' => $parseValues));
+    LSsession :: addCssFile('LSformElement_supannLabeledValue.css');
+    if (!$this -> isFreeze()) {
+      LSsession :: addJSconfigParam(
+        $this -> name,
+        array(
+          'searchBtn' => _('Modify'),
+          'noValueLabel' => _('No set value'),
+          'noResultLabel' => _('No result'),
+          'components' => $this->components
+        )
+      );
+      LSsession :: addJSscript('LSformElement_supannLabeledValue_field_value.js');
+      LSsession :: addJSscript('LSformElement_supannLabeledValue_field.js');
+      LSsession :: addJSscript('LSformElement_supannLabeledValue.js');
+    }
     return $return;
   }
 
@@ -65,19 +80,56 @@ class LSformElement_supannLabeledValue extends LSformElement {
   * @retval array Un tableau cle->valeur contenant value, translated et label
   **/
   function parseValue($value) {
-	$retval=array(
+    $retval=array(
-		'value' => $value,
+      'value' => $value,
-	);
+    );
-	$pv=supannParseLabeledValue($value);
+    $pv=supannParseLabeledValue($value);
-	if ($pv) {
+    if ($pv) {
-		$retval['label'] = $pv['label'];
+      $retval['label'] = $pv['label'];
-		$retval['translated'] = supannGetNomenclatureLabel($this -> supannNomenclatureTable,$pv['label'],$pv['value']);
+      $retval['translated'] = supannGetNomenclatureLabel($this -> supannNomenclatureTable,$pv['label'],$pv['value']);
-	}
+    }
-	else {
+    else {
-		$retval['label'] = 'no';
+      $retval['label'] = 'no';
-		$retval['translated'] = getFData(__('%s (Unparsable value)'),$value);
+      $retval['translated'] = getFData(__('%s (Unparsable value)'),$value);
-	}
+    }
-	return $retval;
+    return $retval;
+  }
+
+
+  /**
+   * This ajax method is used by the searchPossibleValues function of the form element.
+   *
+   * @param[in] $data The address to the array of data witch will be return by the ajax request
+   *
+   * @retval void
+   **/
+  public static function ajax_searchPossibleValues(&$data) {
+    if ((isset($_REQUEST['attribute'])) && (isset($_REQUEST['objecttype'])) && (isset($_REQUEST['pattern'])) && (isset($_REQUEST['idform'])) ) {
+      if (LSsession ::loadLSobject($_REQUEST['objecttype'])) {
+        $object = new $_REQUEST['objecttype']();
+        $form = $object -> getForm($_REQUEST['idform']);
+        $field=$form -> getElement($_REQUEST['attribute']);
+        $data['possibleValues'] = $field -> searchPossibleValues($_REQUEST['pattern']);
+      }
+    }
+  }
+
+  private function searchPossibleValues($pattern) {
+    $pattern=strtolower($pattern);
+    $retval=array();
+    $table=supannGetNomenclatureTable($this -> supannNomenclatureTable);
+    foreach($table as $label => $values) {
+      foreach($values as $v => $txt) {
+        if (strpos(strtolower($txt),$pattern)!==false) {
+          $retval[]=array(
+            'label' => $label,
+            'value' => "{".$label."}".$v,
+            'translated' => $txt
+          );
+        }
+      }
+    }
+    return $retval;
   }
 
 }

public_html/includes/js/LSformElement_supannLabeledValue.js

@@ -0,0 +1,18 @@
+var LSformElement_supannLabeledValue = new Class({
+    initialize: function(){
+      this.fields = [];
+      this.initialiseLSformElement_supannLabeledValue();
+    },
+    
+    initialiseLSformElement_supannLabeledValue: function(el) {
+      if (!$type(el)) {
+        el = document;
+      }
+      el.getElements('ul.LSformElement_supannLabeledValue').each(function(ul) {
+        this.fields[ul.id] = new LSformElement_supannLabeledValue_field(ul);
+      }, this);
+    }
+});
+window.addEvent(window.ie ? 'load' : 'domready', function() {
+  varLSformElement_supannLabeledValue = new LSformElement_supannLabeledValue();
+});

public_html/includes/js/LSformElement_supannLabeledValue_field.js

@@ -0,0 +1,38 @@
+var LSformElement_supannLabeledValue_field = new Class({
+    initialize: function(ul){
+		this.ul=ul;
+		this.dd=ul.getParent();
+		this.name = ul.id;
+		this.values = [];
+		this.field_type = ul.get('data-fieldType');
+		this.initializeLSformElement_supannLabeledValue_field();
+		varLSform.addField(this.name,this);
+		console.log(this.field_type);
+		varLSform.addModule(this.field_type,this);
+    },
+    
+    initializeLSformElement_supannLabeledValue_field: function(el) {
+		if (!$type(el)) {
+			el = this.ul;
+		}
+		el.getElements('li').each(function(li) {
+			this.values.push(new LSformElement_supannLabeledValue_field_value(li,this.name,this.field_type));
+		}, this);
+    },
+    
+    clearValue: function() {
+		if (this.values.length>1) {
+			for(var i=1; i<=this.values.length; i++) {
+				$(this.values[i].li).dispose();
+			}
+			this.values[0].clear();
+		}
+		else if (this.values.length==1) {
+			this.values[0].clear();
+		}
+	},
+	
+    reinitialize: function(li) {
+      this.values.push(new LSformElement_supannLabeledValue_field_value(li,this.name,this.field_type));
+    }
+});

public_html/includes/js/LSformElement_supannLabeledValue_field_value.js

@@ -0,0 +1,173 @@
+var LSformElement_supannLabeledValue_field_value = new Class({
+    initialize: function(li,name,field_type){
+		this.li=li;
+		this.name = name;
+		this.field_type = field_type;
+        this.params = varLSdefault.LSjsConfig[this.name];
+
+        this.input = this.li.getElement('input');
+        this.img = this.li.getElement('img.LSformElement_supannLabeledValue_label');
+        this.span = this.li.getElement('span');
+        
+		this.inputSearch=new Element(
+		'input',
+		{
+			'class': 'LSformElement_supannLabeledValue_search',
+			'styles': {
+				'display': 'none'
+			}
+		}
+		);
+		this.inputSearch.addEvent('keydown',this.onKeyUpInputSearch.bindWithEvent(this));
+		this.inputSearch.injectInside(this.li);
+
+		this.searchBtn=new Element(
+			'img',
+			{
+				'src': varLSdefault.imagePath('modify'),
+				'alt': this.params.searchBtn,
+				'title': this.params.searchBtn,
+			}
+		);
+		this.searchBtn.addEvent('click',this.toogleInputSearch.bind(this));
+		this.searchBtn.injectAfter(this.span);
+
+		this._lastSearch=null;
+		this._possibleValues=null;
+    },
+
+    toogleInputSearch: function() {
+		if (this.inputSearch.getStyle('display')=='none') {
+			this.inputSearch.setStyle('display','block');
+			this.inputSearch.focus();
+		}
+		else {
+			this.hidePossibleValues();
+			this.inputSearch.setStyle('display','none');
+			this.inputSearch.set('value','');
+		}
+	},
+    
+    onKeyUpInputSearch: function(event) {
+      event = new Event(event);
+      
+      if ((event.key=='enter')||(event.key=='tab')) {
+        event.stop();
+        if (this.inputSearch.value!="") {
+          this.launchSearch();
+        }
+      }
+      
+      if (event.key=='esc') {
+        this.toogleInputSearch();
+      }
+    },
+    
+    launchSearch: function() {
+		this.hidePossibleValues();
+		this._lastSearch=this.inputSearch.value;
+		var data = {
+		  template:   'LSformElement_supannLabeledValue',
+		  action:     'searchPossibleValues',
+		  attribute:  this.name,
+		  objecttype: varLSform.objecttype,
+		  idform:     varLSform.idform,
+		  pattern:    this.inputSearch.value
+		};
+		data.imgload=varLSdefault.loadingImgDisplay(this.inputSearch);
+		new Request({url: 'index_ajax.php', data: data, onSuccess: this.onSearchComplete.bind(this)}).send();
+    },
+    
+    onSearchComplete: function(responseText, responseXML) {
+		var data = JSON.decode(responseText);
+		if ( varLSdefault.checkAjaxReturn(data) ) {
+		  this.displayPossibleValues(data.possibleValues);
+		}
+    },
+    
+    displayPossibleValues: function(possibleValues) {
+		if (this._possibleValues==null) {
+			this._possibleValues=new Element(
+				'div',
+				{
+						'class': 'supannLabeledValue_possibleValues',
+				}
+			);
+			this._possibleValues.injectInside(this.li);
+		}
+		
+
+		var ul=new Element('ul');
+		possibleValues.each(function(v) {
+			var li=new Element(
+				'li',
+				{
+						'data-value': v.value,
+						'data-label': v.label,
+						'data-translated': v.translated,
+				}
+			);
+			if (v.label!='no') {
+					li.set('html',"<img src='"+varLSdefault.imagePath('supann_label_'+v.label)+"' alt='["+v.label+"]'/> "+v.translated);
+			}
+			else {
+				li.set('html',v.translated);
+			}
+			li.injectInside(this);
+		}, ul);
+		if (ul.getElements('li').length==0) {
+			new Element(
+				'li',
+				{
+						'html': this.params.noResultLabel
+				}
+			).injectInside(ul);
+		}
+		else {
+			ul.getElements('li').each(function(li) {
+				li.addEvent('click',this.onClickPossibleValue.bindWithEvent(this));
+			}, this);
+		}
+		ul.injectInside(this._possibleValues);
+		this._possibleValues.setStyle('display', 'block');
+	},
+	
+	hidePossibleValues: function() {
+		if (this._possibleValues!=null) {
+			this._possibleValues.setStyle('display', 'none');
+			this._possibleValues.empty();
+		}
+	},
+	
+	onClickPossibleValue: function(event) {
+		this.hidePossibleValues();
+		event = new Event(event);
+		var li=$(event.target);
+		if (event.target.tagName=='IMG') {
+			li=li.getParent();
+		}
+		this.input.set('value',li.get('data-value'));
+		if (li.get('data-label')!='no') {
+			if (this.img==null) {
+				this.img=new Element('img',{'class': 'LSformElement_supannLabeledValue_label'});
+				this.img.injectBefore(this.span);
+			}
+			this.img.set('src',varLSdefault.imagePath('supann_label_'+li.get('data-label')));
+		}
+		this.span.set('html',li.get('data-translated'));
+		this.span.set('title',li.get('data-value'));
+		this.toogleInputSearch();
+	},
+	
+	clear: function() {
+		if (this.img) {
+			this.img.dispose();
+			this.img=null;
+		}
+		this.input.set('value','');
+		if (this.span) {
+			this.span.set('html',this.params.noValueLabel);
+		}
+	},
+
+});

public_html/templates/default/LSformElement_supannLabeledValue.tpl

@@ -1,21 +1,7 @@
-<ul class='LSform{if $multiple && !$freeze} LSformElement_multiple'{/if}' id='{$attr_name}'>
+<ul class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_supannLabeledValue' id='{$attr_name}' data-fieldType="{$fieldType}">
-  {if $parseValues}
+	{foreach from=$parseValues item=parseValue}
-    {foreach from=$parseValues item=parseValue}
+	  <li>{include file="ls:$fieldTemplate"}</li>
-      {if $parseValue.translated}{assign var=value value=$parseValue.translated}{else}{assign var=value value=$parseValue.value}{/if}
+	{foreachelse}
-      {if $parseValue.label!="no"}{assign var=label value=$parseValue.label}{else}{assign var=label value=""}{/if}
+	  <li {if $freeze}class='noValue'{/if}>{include file="ls:$fieldTemplate"}</li>
-      <li>{include file="ls:$fieldTemplate"}</li>
+	{/foreach}
-    {foreachelse}
-      {assign var=value value=""}
-      {assign var=parseValue value=""}
-      <li>{include file="ls:$fieldTemplate"}</li>
-    {/foreach}
-  {else}
-    {foreach from=$values item=value}
-      <li>{include file="ls:$fieldTemplate"}</li>
-    {foreachelse}
-      {assign var=value value=""} 
-      {assign var=parseValue value=""}
-      <li>{include file="ls:$fieldTemplate"}</li>
-    {/foreach}
-  {/if}
 </ul>

public_html/templates/default/LSformElement_supannLabeledValue_field.tpl

@@ -1,17 +1,22 @@
 {if $freeze}
-  {if $value or $parseValue}
+  {if isset($parseValue)}
-    {if $parseValue}
+    {if !empty($parseValue.label) and $parseValue.label!='no'}
-      <span class='LSformElement_supannLabeledValue'>{if $label}<img src='{img name="supann_label_$label"}' alt='[{$label}]' title='{$label}' /> {/if}<span title='{$parseValue.value}'>{$value}</span></span> 
+      {assign var=clabel value=$parseValue.label}
-    {else}
+      <img src='{img name="supann_label_$clabel"}' alt='[{$clabel}]' title='{$clabel}'/>
-      <span class='LSformElement_supannLabeledValue_unparsed'>{$value}</span>
     {/if}
+    <span title="{$parseValue.value}">{$parseValue.translated}</span>
   {else}
     {$noValueTxt}
   {/if}
 {else}
-{if $parseValue}
+  <input type='hidden' name='{$attr_name}[]' value="{if $parseValue}{$parseValue.value}{/if}"/>
-  <input type='text' name='{$attr_name}[]' class='LSformElement_text' value="{$parseValue.value}" autocomplete="off"/>
+  {if $parseValue and !empty($parseValue.label) and $parseValue.label!='no'}
-{else}
+    {assign var=clabel value=$parseValue.label}
-  <input type='text' name='{$attr_name}[]' class='LSformElement_text' value="{$value}" autocomplete="off"/>
+    <img class='LSformElement_supannLabeledValue_label' src='{img name="supann_label_$clabel"}' alt='[{$clabel}]' title='{$clabel}'/>
-{/if}
+  {/if}
+  {if $parseValue}
+    <span title="{$parseValue.value}">{$parseValue.translated}</span>
+  {else}
+    <span>{$noValueTxt}</span>
+  {/if}
 {/if}