Changeset 1056

Show
Ignore:
Timestamp:
03-11-10 12:58:27 (3 years ago)
Author:
robert@…
Message:

Changed template editor to be more user friendly with selecting field types (see ticket #154)

Location:
trunk
Files:
6 added
9 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/domain/dbnp/studycapturing/TemplateFieldType.groovy

    r959 r1056  
    1010 */ 
    1111public enum TemplateFieldType implements Serializable { 
    12         STRING('String'),                                                                       // string 
    13         TEXT('Long string'),                                                            // text 
    14         INTEGER('Integer number'),                                                      // integer 
    15         FLOAT('Floating-point number'),                                         // float 
    16         DOUBLE('Double precision floating-point number'),       // double 
    17         STRINGLIST('List of items'),                                            // string list 
    18         ONTOLOGYTERM('Ontology Reference'),                                     // ontology reference 
    19         DATE('Date'),                                                                           // date 
    20         RELTIME('Relative time'),                                                       // relative date, e.g. days since start of study 
    21         FILE('File'),                                                                           // file 
    22         BOOLEAN('Boolean'),                                                                     // boolean 
    23         TEMPLATE('Template'),                                                           // template 
    24         MODULE('Module'),                                                                       // third party connected module, 
    25         LONG('Long number')                                                                     // long 
     12        STRING('String','Text', ''),                                                                                    // string 
     13        TEXT('Long string', 'Text', ''),                                                                                // text 
     14        INTEGER('Integer number', 'Numerical', '1'),                                                    // integer 
     15        FLOAT('Floating-point number', 'Numerical', '1.0'),                                             // float 
     16        DOUBLE('Double precision floating-point number', 'Numerical', '1.0'),   // double 
     17        STRINGLIST('List of items', 'Text', ''),                                                                // string list 
     18        ONTOLOGYTERM('Ontology Reference', 'Other', ''),                                                // ontology reference 
     19        DATE('Date', 'Date', '2010-01-01'),                                                                             // date 
     20        RELTIME('Relative time', 'Date', '3 days'),                                                             // relative date, e.g. days since start of study 
     21        FILE('File', 'Other', '')               ,                                                                               // file 
     22        BOOLEAN('Boolean', 'Other', 'true/false'),                                                              // boolean 
     23        TEMPLATE('Template', 'Other', ''),                                                                              // template 
     24        MODULE('Module', 'Other', ''),                                                                                  // third party connected module, 
     25        LONG('Long number', 'Numerical', '100')                                                                 // long 
    2626    // TODO: add a timezone-aware date type to use for study start date 
    2727 
    2828    String name 
     29        String category 
     30        String example 
    2931 
    3032        TemplateFieldType(String name) { 
    3133                this.name = name 
     34        } 
     35        TemplateFieldType(String name, String category, String example) { 
     36                this.name = name 
     37                this.category = category 
     38                this.example = example 
    3239        } 
    3340 
  • trunk/grails-app/views/templateEditor/compare.gsp

    r1029 r1056  
    3636                          } ); 
    3737                  } ); 
     38 
     39 
     40                  function toggleColumns() 
     41                  { 
     42                        var columns = new Array( 1, 2, 3, 4); 
     43                         
     44                        /* Get the DataTables object again - this is not a recreation, just a get of the object */ 
     45                        var oTable = $('#compare_templates').dataTable(); 
     46 
     47                        /* Toggle column visibility */ 
     48                        var bVis = oTable.fnSettings().aoColumns[ columns[ 0 ] ].bVisible; 
     49                        $.each( columns, function(index, col) { 
     50                          oTable.fnSetColumnVis( col, bVis ? false : true ); 
     51                        }); 
     52 
     53                        /* Show large or small titles */ 
     54                        if( bVis ) { 
     55                          // If the columns were visible, they are hidden now and large titles should be shown 
     56                          $( '.shortTitle' ).hide(); 
     57                          $( '.longTitle' ).show(); 
     58                        } else { 
     59                          $( '.longTitle' ).hide(); 
     60                          $( '.shortTitle' ).show(); 
     61                        } 
     62                  } 
    3863                </script> 
    3964 
     
    5075          </h1> 
    5176 
     77          <p> 
     78                If you want more space or more information, try to <a class="toggle" href="#" onClick="toggleColumns(); return false;">toggle columns</a>. 
     79          </p> 
     80 
    5281        <table id="list"></table> 
    5382        <div id="pager"></div> 
    5483 
     84        <% /* Length of long titles depends on the number of templates. 
     85                  We've got about 90 characters to show in total */ 
     86                  def numCharsLongTitle = Math.floor( 90 / templates.size() ); 
     87        %> 
    5588        <table id="compare_templates"> 
    5689          <thead> 
     
    6295                  <th>Required</th> 
    6396                  <g:each in="${templates}" var="currentTemplate"> 
    64                         <th title="${currentTemplate.name}">${currentTemplate.name.substring(0,3)}...</th> 
     97                        <th title="${currentTemplate.name}"> 
     98                          <span class="shortTitle"> 
     99                                <g:if test="${currentTemplate.name.size() > 5}"> 
     100                                  ${currentTemplate.name.substring(0,3)}... 
     101                                </g:if> 
     102                                <g:else> 
     103                                  ${currentTemplate.name} 
     104                                </g:else> 
     105                          </span> 
     106                          <span class="longTitle"> 
     107                                <g:if test="${currentTemplate.name.size() > numCharsLongTitle}"> 
     108                                  ${currentTemplate.name.substring(0,numCharsLongTitle - 3)}... 
     109                                </g:if> 
     110                                <g:else> 
     111                                  ${currentTemplate.name} 
     112                                </g:else> 
     113                          </span> 
     114                        </th> 
    65115                  </g:each> 
    66116                </tr> 
     
    77127                        <td style="text-align: center;" align="center"> 
    78128                          <g:if test="${currentTemplate.fields.contains(field)}"> 
    79                                 <img align="center" src="${createLinkTo( dir: 'images/icons', file: 'accept.png', plugin: 'famfamfam' )}" alt="X" /> 
     129                                <img align="center" src="${createLinkTo( dir: 'images/icons', file: 'tick.png', plugin: 'famfamfam' )}" alt="X" /> 
    80130                          </g:if> 
    81131                        </td> 
  • trunk/grails-app/views/templateEditor/elements/_boolean.gsp

    r959 r1056  
    1313         * $Date$ 
    1414         */ 
    15 %> 
    16 True/False 
     15%>True/False 
  • trunk/grails-app/views/templateEditor/elements/_date.gsp

    r959 r1056  
    1313         * $Date$ 
    1414         */ 
    15 %> 
    16 Date 
     15%>Date 
  • trunk/grails-app/views/templateEditor/elements/_double.gsp

    r959 r1056  
    1313         * $Date$ 
    1414         */ 
    15 %> 
    16 Double 
     15%>Double 
  • trunk/grails-app/views/templateEditor/elements/_fieldForm.gsp

    r959 r1056  
    11        <label for="name">Name:</label> <g:textField name="name" value="${templateField?.name}" /><br /> 
    2         <label for="type">Type:</label> <g:select from="${fieldTypes}" name="type" value="${templateField?.type}" onChange="showExtraFields( ${templateField ? templateField.id : '\'new\''} );" /><br /> 
     2        <label for="type">Type:</label> 
     3          <% 
     4                /* Create a list of field types grouped on category */ 
     5                def grouped = [:] 
     6                fieldTypes.each { 
     7                  if( !grouped[ it.category ] ) 
     8                        grouped[ it.category ] = [] 
     9 
     10                        grouped[ it.category ].add( it ) 
     11                } 
     12          %> 
     13          <select name="type" onChange="showExtraFields( ${templateField ? templateField.id : '\'new\''} );"> 
     14                <g:each in="${grouped}" var="group"> 
     15                  <optgroup label="${group.key}"> 
     16                        <g:each in="${group.value}" var="field"> 
     17                          <option 
     18                                <g:if test="${templateField?.type == field}">selected="selected"</g:if> 
     19                                value="${field}">${field} <g:if test="${field.example}">(${field.example})</g:if></option> 
     20                        </g:each> 
     21                  </optgroup> 
     22                </g:each> 
     23          </select> 
     24 
     25                <br /> 
    326 
    427        <div class="extra stringlist_options" <g:if test="${templateField?.type.toString() == 'STRINGLIST'}">style='display: block;'</g:if>> 
  • trunk/grails-app/views/templateEditor/elements/_integer.gsp

    r959 r1056  
    1313         * $Date$ 
    1414         */ 
    15 %> 
    16 Integer 
     15%>Integer 
  • trunk/web-app/css/templateEditor.css

    r1027 r1056  
    110110} 
    111111 
     112.sorting_asc { 
     113        background:url("../images/icons/sort_asc.png") no-repeat scroll right center transparent; 
     114} 
     115.sorting_desc { 
     116        background:url("../images/icons/sort_desc.png") no-repeat scroll right center transparent; 
     117} 
     118.sorting { 
     119        background:url("../images/icons/sort_both.png") no-repeat scroll right center transparent; 
     120} 
     121.sorting_asc_disabled { 
     122        background:url("../images/icons/sort_asc_disabled.png") no-repeat scroll right center transparent; 
     123} 
     124.sorting_desc_disabled { 
     125        background:url("../images/icons/sort_desc_disabled.png") no-repeat scroll right center transparent; 
     126} 
     127 
     128#compare_templates th {white-space: nowrap;} 
     129.longTitle { display: none; } 
    112130 
    113131 
  • trunk/web-app/js/templateEditor.js

    r996 r1056  
    5555} 
    5656 
     57 
     58/** 
     59 * Clears the form after adding a template 
     60 */ 
     61function clearTemplateForm( id ) { 
     62    $( '#template_' + id + '_form input#name' ).val( "" ); 
     63    $( '#template_' + id + '_form textarea' ).val( "" ); 
     64} 
     65 
    5766/** 
    5867 * Creates a new template using AJAX 
     
    7079        type:       "POST", 
    7180        success:    function(data, textStatus, request) { 
    72             hideTemplateForm( id ); 
     81            clearTemplateForm( id ); 
     82                        hideTemplateForm( id ); 
    7383            addTemplateListItem( data.id, data.html ); 
    7484        }, 
     
    236246 
    237247/** 
     248 * Clears the form to add a template field after adding one 
     249 */ 
     250function clearTemplateFieldForm( id ) { 
     251    $( '#templateField_' + id + '_form input#name' ).val( "" ); 
     252    $( '#templateField_' + id + '_form input#unit' ).val( "" ); 
     253    $( '#templateField_' + id + '_form input#required' ).attr( "checked", "" ); 
     254    $( '#templateField_' + id + '_form textarea' ).val( "" ); 
     255    $( '#templateField_' + id + '_form select' ).attr( 'selectedIndex', 0 ); 
     256    $( '#templateField_' + id + '_form .extra' ).hide(); 
     257} 
     258 
     259/** 
    238260 * Adds a new template field using AJAX 
    239261 */ 
     
    251273        type:       "POST", 
    252274        success:    function(data, textStatus, request) { 
     275            clearTemplateFieldForm( id ); 
    253276            hideTemplateFieldForm( id ); 
    254277            addFieldListItem( data.id, data.html );