Changeset 1056


Ignore:
Timestamp:
Nov 3, 2010, 12:58:27 PM (12 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 edited

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 );
Note: See TracChangeset for help on using the changeset viewer.