Changeset 558 for trunk/grails-app/views

Timestamp:

Jun 11, 2010, 4:00:10 PM (13 years ago)

Author:

roberth

Message:

Improved template editor , stringlists and ontologyfields can be edited and extra checks are built in.

Location:

trunk/grails-app/views/templateEditor

Files:

• _ontologyDialog.gsp (added)
• elements/_available.gsp (modified) (1 diff)
• elements/_disabledFieldForm.gsp (copied) (copied from trunk/grails-app/views/templateEditor/elements/_fieldForm.gsp) (1 diff)
• elements/_domainField.gsp (added)
• elements/_fieldForm.gsp (modified) (1 diff)
• elements/_liField.gsp (modified) (1 diff)
• elements/_liFieldDomain.gsp (added)
• elements/_liFieldInUse.gsp (modified) (2 diffs)
• elements/_liFieldNotInUse.gsp (modified) (2 diffs)
• elements/_liTemplate.gsp (added)
• elements/_selected.gsp (modified) (1 diff)
• index.gsp (modified) (1 diff)
• template.gsp (modified) (6 diffs)

trunk/grails-app/views/templateEditor/elements/_available.gsp

@@ -1 @@
-<li class="ui-state-default" id="templateField_${it.id}">
-    <g:render template="elements/liField" model="['templateField': it, 'fieldTypes': fieldTypes]"/>
+<li class="ui-state-default <g:if test="${templateField.required}">required</g:if>" id="templateField_${templateField.id}">
+    <g:render template="elements/liField" model="['templateField': templateField, 'ontologies': ontologies, 'fieldTypes': fieldTypes]"/>
 </li>

trunk/grails-app/views/templateEditor/elements/_disabledFieldForm.gsp

@@ -1 @@
-        <label for="name">Name:</label> <g:textField name="name" value="${templateField?.name}" /><br />
-        <label for="type">Type:</label> <g:select from="${fieldTypes}" name="type" value="${templateField?.type}" /><br />
-        <label for="unit">Unit:</label> <g:textField name="unit" value="${templateField?.unit}" /><br />
-        <label for="comment">Comment:</label> <g:textArea name="comment" value="${templateField?.comment}" /><br />
-        <label for="required">Required:</label> <g:checkBox name="required" value="${templateField?.required}" /><br />
+        <label for="name">Name:</label> <g:textField disabled="disabled" name="name" value="${templateField?.name}" /><br />
+        <label for="type">Type:</label> <g:textField disabled="disabled" name="type" value="${templateField?.type}" /><br />
+
+        <div class="extra stringlist_options" <g:if test="${templateField?.type.toString() == 'STRINGLIST'}">style='display: block;'</g:if>>
+          <label for="type">Items:</label>
+                <g:textArea name="listEntries" disabled="disabled" value="${templateField?.listEntries?.name?.join( '\n' )}" />
+        </div>
+        <div class="extra ontologyterm_options" <g:if test="${templateField?.type.toString() == 'ONTOLOGYTERM'}">style='display: block;'</g:if>>
+          <label for="type">Ontology:</label> <g:textArea name="ontology" disabled="disabled" value="${templateField?.ontologies?.name?.join( '\n' )}" /><br />
+        </div>
+        
+        <label for="unit">Unit:</label> <g:textField disabled="disabled" name="unit" value="${templateField?.unit}" /><br />
+        <label for="comment">Comment:</label> <g:textArea disabled="disabled" name="comment" value="${templateField?.comment}" /><br />
+        <label for="required">Required:</label> <input type="checkbox" disabled <g:if test="${templateField?.required}">checked</g:if><br />

trunk/grails-app/views/templateEditor/elements/_fieldForm.gsp

@@ -1 +1 @@
         <label for="name">Name:</label> <g:textField name="name" value="${templateField?.name}" /><br />
-        <label for="type">Type:</label> <g:select from="${fieldTypes}" name="type" value="${templateField?.type}" /><br />
+        <label for="type">Type:</label> <g:select from="${fieldTypes}" name="type" value="${templateField?.type}" onChange="showExtraFields( ${templateField ? templateField.id : '\'new\''} );" /><br />
+
+        <div class="extra stringlist_options" <g:if test="${templateField?.type.toString() == 'STRINGLIST'}">style='display: block;'</g:if>>
+          <label for="type">Items (every item on a new line):</label>
+                <g:textArea name="listEntries" value="${templateField?.listEntries?.name?.join( '\n' )}" />
+        </div>
+        <div class="extra ontologyterm_options" <g:if test="${templateField?.type.toString() == 'ONTOLOGYTERM'}">style='display: block;'</g:if>>
+          <label for="type">Ontology:<br /><br /><a href="#" style="text-decoration: underline;" onClick="openOntologyDialog();">Add new</a></label>
+                <g:select multiple="yes" size="5" from="${ontologies}" class="ontologySelect" optionValue="name" optionKey="id" name="ontologies" id="ontologies_${templateField?.id}" value="${templateField?.ontologies}" /><br />
+        </div>
+
         <label for="unit">Unit:</label> <g:textField name="unit" value="${templateField?.unit}" /><br />
         <label for="comment">Comment:</label> <g:textArea name="comment" value="${templateField?.comment}" /><br />

trunk/grails-app/views/templateEditor/elements/_liField.gsp

@@ -1 +1 @@
 <g:if test="${templateField.inUse()}">
-        <g:render template="elements/liFieldInUse" model="['templateField': templateField, 'fieldTypes': fieldTypes]"/>
+        <g:render template="elements/liFieldInUse" model="['templateField': templateField, 'ontologies': ontologies, 'fieldTypes': fieldTypes]"/>
 </g:if>
 <g:else>
-        <g:render template="elements/liFieldNotInUse" model="['templateField': templateField, 'fieldTypes': fieldTypes]"/>
+        <g:render template="elements/liFieldNotInUse" model="['templateField': templateField, 'ontologies': ontologies, 'fieldTypes': fieldTypes]"/>
 </g:else>

trunk/grails-app/views/templateEditor/elements/_liFieldInUse.gsp

@@ -1 +1 @@
 <g:set var="numUses" value="${templateField.numUses()}" />
 <span class="listButtons">
-  <img class="disabled" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/application_edit.png')}" alt="Editing not possible. Field is used in ${numUses} templates." title="Editing not possible. Field is used in ${numUses} templates.">
+  <img onClick="showTemplateFieldForm( 'templateField_' + ${templateField.id}); this.blur(); return false;" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/application_edit.png')}" alt="Edit template field properties" title="Edit template field properties">
   <img class="disabled" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/delete.png')}" alt="Deleting this field is not possible. Field is used in ${numUses} templates." title="Deleting this field is not possible. Field is used in ${numUses} templates.">
-  <img onClick="addTemplateField( ${templateField.id} ); moveFieldListItem( ${templateField.id}, '#selectedTemplateFields' );" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/add.png')}" alt="Add field to template" title="Add field to template">
+  <img onClick="addTemplateField( ${templateField.id}, null, true );" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/add.png')}" alt="Add field to template" title="Add field to template">
 </span>
 
@@ -9 +9 @@
     (<g:if test="${templateField.unit}">${templateField.unit}, </g:if><g:render template="elements/${templateField.type.toString().toLowerCase().replaceAll(/ /,'_')}" model="[templateField: templateField]"/>)
     
+<form class="templateField_form" id="templateField_${templateField.id}_form" action="updateField">
+        <g:hiddenField name="id" value="${templateField.id}" />
+        <g:hiddenField name="version" value="${templateField.version}" />
+        <p class="noEditsPossible">Editing not possible. Field is used in ${numUses} template(s).</p>
+        <g:render template="elements/disabledFieldForm" model="['templateField': templateField, 'ontologies': ontologies, 'fieldTypes': fieldTypes]"/>
+        <div class="templateFieldButtons">
+                <input type="button" value="Close" onClick="hideTemplateFieldForm( ${templateField.id} );">
+        </div>
+</form>
 

trunk/grails-app/views/templateEditor/elements/_liFieldNotInUse.gsp

@@ -2 +2 @@
   <img onClick="showTemplateFieldForm( 'templateField_' + ${templateField.id}); this.blur(); return false;" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/application_edit.png')}" alt="Edit template field properties" title="Edit template field properties">
   <img onClick="if( confirm( 'Are you sure?' ) ) { deleteTemplateField( ${templateField.id} ); }" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/delete.png')}" alt="Delete this template field" title="Delete this template field">
-  <img onClick="addTemplateField( ${templateField.id} ); moveFieldListItem( ${templateField.id}, '#selectedTemplateFields' );" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/add.png')}" alt="Add field to template" title="Add field to template">
+  <img onClick="addTemplateField( ${templateField.id}, null, true );" src="${createLinkTo( dir: 'images', file: 'icons/famfamfam/add.png')}" alt="Add field to template" title="Add field to template">
 </span>
 
@@ -11 +11 @@
         <g:hiddenField name="id" value="${templateField.id}" />
         <g:hiddenField name="version" value="${templateField.version}" />
-        <g:render template="elements/fieldForm" model="['templateField': templateField, 'fieldTypes': fieldTypes]"/>
+        <g:render template="elements/fieldForm" model="['templateField': templateField, 'ontologies': ontologies, 'fieldTypes': fieldTypes]"/>
         <div class="templateFieldButtons">
                 <input type="button" value="Save" onClick="updateTemplateField( ${templateField.id} );">

trunk/grails-app/views/templateEditor/elements/_selected.gsp

@@ -1 @@
-<li class="ui-state-default <g:if test="${template.inUse()}">inUse</g:if>" id="templateField_${it.id}">
-    <g:render template="elements/liFieldSelected" model="['templateField': it, 'template': template, 'fieldTypes': fieldTypes]"/>
+<li class="ui-state-default  <g:if test="${templateField.required}">required</g:if>" id="templateField_${templateField.id}">
+    <g:render template="elements/liFieldSelected" model="['templateField': templateField, 'template': template, 'fieldTypes': fieldTypes]"/>
 </li>

trunk/grails-app/views/templateEditor/index.gsp

@@ -32 +32 @@
                                 <li class="empty ui-state-default" <g:if test="${templates.size() > 0 }">style='display: none;'</g:if>>There are no templates for ${humanReadableEntity}. Use the 'Add template' button to add fields.</li>
                                 <g:each in="${templates}" var="currentTemplate">
-                                        <li id="template_${currentTemplate.id}"class="ui-state-default">
-                                          <g:if test="${currentTemplate.inUse()}">
-                                                <g:render template="elements/liTemplateNonEditable" model="['template': currentTemplate]"/>
-                                          </g:if>
-                                          <g:else>
-                                                <g:render template="elements/liTemplateEditable" model="['template': currentTemplate]"/>
-                                          </g:else>
-                                        </li>
+                                  <g:render template="elements/liTemplate" model="['template': currentTemplate]"/>
                                 </g:each>
                         </ul>

trunk/grails-app/views/templateEditor/template.gsp

@@ -21 +21 @@
                 <script src="${createLinkTo(dir: 'js', file: 'templateEditor.js')}" type="text/javascript"></script>
                 <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'templateEditor.css')}" />
+                <g:if env="production">
+                  <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.min.js')}"></script>
+                </g:if><g:else>
+                  <script type="text/javascript" src="${resource(dir: 'js', file: 'ontology-chooser.js')}"></script>
+                </g:else>
         </head>
         <body>
@@ -29 +34 @@
                                 $("#selectedTemplateFields").sortable({
                                         placeholder: 'ui-state-highlight',
+                                        items: 'li:not(.domain)',
                                         cancel: '.empty, input, select, button, textarea, form, label',
                                         connectWith: '.templateFields',
                                         update: updateTemplateFieldPosition,
+                                        receive: addTemplateFieldEvent,
                                         remove: removeTemplateFieldEvent,
-                                        receive: addTemplateFieldEvent
+                                        start: savePosition
                                 }).disableSelection();
 
@@ -40 +47 @@
                                         placeholder: 'ui-state-highlight',
                                         cancel: '.empty, input, select, button, textarea, form, label',
-                                        connectWith: '.templateFields'
+                                        connectWith: '.templateFields',
+                                        start: savePosition
                                 }).disableSelection();
-                                
+
+
+                                $("#ontologyDialog").dialog({
+                                  autoOpen: false,
+                                  title: 'Search for ontology',
+                                  height: 290,
+                                  width: 350,
+                                  modal: true,
+                                  buttons: {
+                                          'Add': addOntology,
+                                          Cancel: function() {
+                                                  $(this).dialog('close');
+                                          }
+                                  },
+                                  close: function() {
+                                  }
+
+                                });
+
                         });
                 </script>
@@ -56 +82 @@
 
                                 <p>Currently, this template contains the following fields. Drag fields to reorder. Drag fields to the list of available fields to remove the field from the template.</p>
-                                <ol id="selectedTemplateFields" class="templateFields">
+                                <ol id="domainFields" class="templateFields <g:if test="${template.inUse()}">inUse</g:if>">
+                                        <g:render template="elements/domainField" var="domainField" collection="${domainFields}" model="['template':template]"/>
+                                </ol>
+                                <ol id="selectedTemplateFields" class="templateFields <g:if test="${template.inUse()}">inUse</g:if>">
+                                        <g:render template="elements/selected" var="templateField" collection="${template.fields}" model="['template':template]"/>
                                         <li class="empty ui-state-default" <g:if test="${template.fields?.size() > 0 }">style='display: none;'</g:if>>This template does not yet contain any fields. Drag a field to this list or use the 'Add field button'.</li>
-                                        <g:render template="elements/selected" collection="${template.fields}" model="['template':template]"/>
                                 </ol>
                         </div>
@@ -67 +96 @@
                                 <ol id="availableTemplateFields" class="templateFields">
                                         <li class="empty ui-state-default" <g:if test="${allFields.size() > template.fields.size()}">style='display: none;'</g:if>>There are no additional fields that can be added. Use the 'Create new field' button to create new fields.</li>
-                                        <g:render template="elements/available" collection="${allFields - template.fields}" />
+                                        <g:render template="elements/available" var="templateField" collection="${allFields - template.fields}" />
                                 </ol>
 
@@ -87 +116 @@
                 </g:if>
 
+                <div id="ontologyDialog">
+                  <g:render template="ontologyDialog" />
+                </div>
 
         </body>