Graham's initial bib attr definition create/update UI. w00t
authorerickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Thu, 25 Sep 2008 19:11:23 +0000 (19:11 +0000)
committererickson <erickson@dcc99617-32d9-48b4-a31d-7c20da2025e4>
Thu, 25 Sep 2008 19:11:23 +0000 (19:11 +0000)
git-svn-id: svn://svn.open-ils.org/ILS/trunk@10702 dcc99617-32d9-48b4-a31d-7c20da2025e4

Open-ILS/web/vandelay/vandelay.html
Open-ILS/web/vandelay/vandelay.js

index 87bce0f..76eacc0 100644 (file)
@@ -21,6 +21,7 @@
             .container:after {content: ""; display: block; height: 0; clear: both; }
             .form_table td { padding: 6px; }
             table { border-collapse: collapse; }
             .container:after {content: ""; display: block; height: 0; clear: both; }
             .form_table td { padding: 6px; }
             table { border-collapse: collapse; }
+           table.dijitTooltipTable { border-collapse: separate; } // else the tooltip-table is ugly
             .match_div {
                 height: 95%;
                 width: 95%;
             .match_div {
                 height: 95%;
                 width: 95%;
@@ -60,6 +61,9 @@
                     onclick='displayGlobalDiv("vl-marc-upload-div");' showLabel="true">Import Records</div>
                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
                     onclick='vlShowQueueSelect();' showLabel="true">Inspect Queue</div>
                     onclick='displayGlobalDiv("vl-marc-upload-div");' showLabel="true">Import Records</div>
                 <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
                     onclick='vlShowQueueSelect();' showLabel="true">Inspect Queue</div>
+
+               <div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCopy" 
+                    onclick="vlShowBibAttrDefs();" showLabel="true">Bib Attr Definitions</div>
             </div>
         </div>
 
             </div>
         </div>
 
                 </tr>
             </table>
         </div>
                 </tr>
             </table>
         </div>
-        <!--
+
+       <!-- bib attribute definitions  -->
+        <div dojoType="dijit.layout.ContentPane"  id="vl-bib-attr-defs-div"
+                class='hidden bib-attr-detail-content-pane' title="Bib Attr Definition" style='height:400px;' layoutAlign="client">
+
+            <div class='vl-bib-attr-defs-actions-div' style='margin:8px;'>
+
+                <div dojoType="dijit.form.DropDownButton" id="vl-create-bib-attr-button">
+                    <span name="create">Create Attribute Definition</span>
+                   <span name="update" class="hidden">Update Attribute Definition</span>
+
+                    <div dojoType="dijit.TooltipDialog" execute="saveNewBibAttrRecord(arguments[0]);" id="bib-attr-dialog">
+                        <script type='dojo/connect' event='onOpen'>onAttrEditorOpen();</script>
+                        <script type='dojo/connect' event='onClose'>onAttrEditorClose();</script>
+                        <table class='dijitTooltipTable'>
+                            <tr>
+                                <td><label for="code">Code: </label></td>
+                                <td><input id='oils-bib-attr-code' name="code" dojoType="dijit.form.TextBox"/></td>
+                            </tr>
+                            <tr>
+                                <td><label for="description">Description: </label></td>
+                                <td><input id='bib-attr-description' dojoType="dijit.form.TextBox" name="description"> </input></td>
+                            </tr>
+                            <tr>
+                                <td><label for="amount">Tag(s): </label></td>
+                                <td><input id="bib-attr-tag" dojoType="dijit.form.TextBox" name="tag"></input>
+                               <div class="hidden" id="bib-attr-tag-tip">
+                               <p>You can enter multiple tags, separated by spaces and/or commas.</p>
+                               <p>Example: <code>120, 220, 300</code> or <code>120 220 330</code></p></div>
+                               </td>
+                            </tr>
+
+                            <tr>
+                                <td><label for="amount">Subfield(s): </label></td>
+                                <td><input dojoType="dijit.form.TextBox" name="subfield" id="bib-attr-subfield"></input></td>
+                               <div class="hidden" id="bib-attr-subfield-tip">
+                               <p>You can enter multiple subfields, separated by spaces and/or commas.</p>
+                               <p>Example: <code>a, b, j, x</code> or <code>a b j x</code></p></div>
+
+                            </tr>
+                            <tr>
+                                <td><label for="ident">Identifer Field?: </label></td>
+                                <td>
+                                    <select dojoType="dijit.form.FilteringSelect" name="ident" id="bib-attr-ident-selector">
+                                        <option value='f' selected='selected'>False</option>
+                                        <option value='t'>True</option>
+                                    </select>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td><label for="amount">XPath (advanced): </label></td>
+
+                                <td><input dojoType="dijit.form.TextBox" id="bib-attr-xpath" name="xpath"></input></td>
+                            </tr>
+                            <tr>
+                                <td><label for="amount">Remove (advanced): </label></td>
+
+                                <td><input dojoType="dijit.form.TextBox" id="bib-attr-remove" name="remove"></input></td>
+                            </tr>
+                            <tr class="create_bar">
+                                <td colspan='2' align='center'>
+                                    <button dojoType="dijit.form.Button" type="submit" 
+                                           id="bib-attr-create-button">Create</button>
+                                   <button type="button" dojoType="dijit.form.Button"
+                                           onclick="dijit.byId('bib-attr-dialog').onCancel();">Cancel</button>
+                                </td>
+                            </tr>
+                            <tr class="update_bar">
+                                <td colspan='2' align='center'>
+                                    <button dojoType="dijit.form.Button" type="submit" 
+                                           id="bib-attr-update-button">Update</button>
+                                   <button type="button" dojoType="dijit.form.Button"
+                                           onclick="dijit.byId('bib-attr-dialog').onCancel();">Cancel</button>
+                                    <button dojoType="dijit.form.Button" 
+                                           type="button" 
+                                           id="bib-attr-delete-button"
+                                           style="padding-left: 2em;">Delete record</button>
+                                </td>
+                            </tr>
+                        </table>
+
+                    </div>
+                </div>
+
+           </div>
+           <script>
+               var bibAttrGridLayout = [{
+               cells : [[
+               {name: 'ID', field: 'id'},
+               {name: 'Code', field:'code', width:'auto'},
+               {name: 'Description', field: "description", width:'auto'}, 
+               {name: 'Tag', get:getTag},
+               {name: 'Subfield', get: getSubfield},
+               {name: 'Identifier', field:'ident'},
+               {name: 'XPath', field:'xpath', width:'auto'},
+               {name: 'Remove', field:'remove', width:'auto'}
+               ]]
+               }];
+             </script>
+
+             <div class='tall'>
+               <div dojoType='dojox.Grid' jsId='bibAttrGrid'> </div>
+             </div>
+
+       </div>
+
         <div style='text-align:center;width:100%;' dojoType="dijit.layout.ContentPane" layoutAlign='bottom'>
             Powered by Evergreen!
         </div>
         <div style='text-align:center;width:100%;' dojoType="dijit.layout.ContentPane" layoutAlign='bottom'>
             Powered by Evergreen!
         </div>
-        -->
       </div>
     </body>
 </html>
       </div>
     </body>
 </html>
index be885d3..e0a5ed2 100644 (file)
@@ -20,6 +20,11 @@ dojo.require("dijit.form.FilteringSelect");
 dojo.require("dijit.layout.LayoutContainer");
 dojo.require("dijit.layout.ContentPane");
 dojo.require("dijit.layout.TabContainer");
 dojo.require("dijit.layout.LayoutContainer");
 dojo.require("dijit.layout.ContentPane");
 dojo.require("dijit.layout.TabContainer");
+dojo.require("dijit.layout.LayoutContainer");
+dojo.require('dijit.form.Button');
+dojo.require('dijit.Toolbar');
+dojo.require('dijit.Tooltip');
+dojo.require('dijit.Menu');
 dojo.require("dijit.Dialog");
 dojo.require("dojo.cookie");
 dojo.require("dojox.grid.Grid");
 dojo.require("dijit.Dialog");
 dojo.require("dojo.cookie");
 dojo.require("dojox.grid.Grid");
@@ -34,6 +39,7 @@ dojo.require('openils.Event');
 dojo.require('openils.MarcXPathParser');
 dojo.require('openils.GridColumnPicker');
 
 dojo.require('openils.MarcXPathParser');
 dojo.require('openils.GridColumnPicker');
 
+
 var globalDivs = [
     'vl-generic-progress',
     'vl-generic-progress-with-total',
 var globalDivs = [
     'vl-generic-progress',
     'vl-generic-progress-with-total',
@@ -42,7 +48,8 @@ var globalDivs = [
     'vl-match-div',
     'vl-marc-html-div',
     'vl-queue-select-div',
     'vl-match-div',
     'vl-marc-html-div',
     'vl-queue-select-div',
-    'vl-marc-upload-status-div'
+    'vl-marc-upload-status-div',
+    'vl-bib-attr-defs-div',
 ];
 
 var authtoken;
 ];
 
 var authtoken;
@@ -150,6 +157,8 @@ function vlInit() {
             checkInitDone();
         }
     );
             checkInitDone();
         }
     );
+
+    bibAttrInit();
 }
 
 function vlRetrieveQueueList(type, filter, onload) {
 }
 
 function vlRetrieveQueueList(type, filter, onload) {
@@ -166,6 +175,7 @@ function vlRetrieveQueueList(type, filter, onload) {
             }
         }
     );
             }
         }
     );
+
 }
 
 function displayGlobalDiv(id) {
 }
 
 function displayGlobalDiv(id) {
@@ -185,6 +195,7 @@ function runStartupCommands() {
     if(currentQueueId)
         return retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);
     vlShowUploadForm();
     if(currentQueueId)
         return retrieveQueuedRecords(currentType, currentQueueId, handleRetrieveRecords);
     vlShowUploadForm();
+
 }
 
 /**
 }
 
 /**
@@ -719,3 +730,105 @@ function vlFetchQueueFromForm() {
 }
 
 dojo.addOnLoad(vlInit);
 }
 
 dojo.addOnLoad(vlInit);
+
+
+//------------------------------------------------------------
+// bib-attr, auth-attr 
+
+function bibAttrInit() {
+    // set up tooltips on attr_record forms
+    connectTooltip('bib-attr-tag'); 
+    connectTooltip('bib-attr-subfield'); 
+}
+
+function vlShowBibAttrDefs() {
+    displayGlobalDiv('vl-bib-attr-defs-div');
+    loadBibAttrGrid();
+}
+
+function idStyle(obid, k, v) { document.getElementById(obid).style[k] = v; }
+function show(obid) { idStyle(obid, 'display', 'block'); }
+function hide(obid) { idStyle(obid, 'display' , 'none'); }
+function textOf(obid) { return document.getElementById(obid).innerHTML; }
+
+function saveNewBibAttrRecord(arg) {
+    // pretend to save...
+    hide('vl-bib-attr-defs-div');
+    show('vl-generic-progress');
+    // not really saving anything yet. For now, just remove the
+    // progress bar after a moment and return to the table.
+    setTimeout("show('vl-bib-attr-defs-div');hide('vl-generic-progress');", 1000);
+}
+
+function onAttrEditorOpen() {
+}
+
+function onAttrEditorClose() {
+    // reset the form to a "create" form. (We may have borrowed it for "editing".)
+    var dialog = dojo.byId('bib-attr-dialog');
+    var create_bar = dialog.getElementsByClassName('create_bar')[0];
+    var update_bar = dialog.getElementsByClassName('update_bar')[0];
+    create_bar.style.display='table-row';
+    update_bar.style.display='none';
+    idStyle('vl-create-bib-attr-button', 'visibility', 'visible');
+    dijit.byId('bib-attr-dialog').reset();
+}
+
+function loadBibAttrGrid() {
+    var store = new dojo.data.ItemFileReadStore({data:vqbrad.toStoreData(bibAttrDefs)});
+    var model = new dojox.grid.data.DojoData(
+        null, store, {rowsPerPage: 100, clientSort: true, query:{id:'*'}});
+    bibAttrGrid.setModel(model);
+    bibAttrGrid.setStructure(bibAttrGridLayout);
+    bibAttrGrid.onRowClick = onBibAttrClick;
+    bibAttrGrid.update();
+}
+
+var xpathParser = new openils.MarcXPathParser();
+
+function getTag(n) {
+    // grid helper: return the tags from the row's xpath column.
+    var xp = this.grid.model.getRow(n);
+    return xp && xpathParser.parse(xp.xpath).tags;
+}
+
+function getSubfield(n) {
+    // grid helper: return the subfields from the row's xpath column.
+    var xp = this.grid.model.getRow(n);
+    return xp && xpathParser.parse(xp.xpath).subfields;
+}
+
+function connectTooltip(fieldId) {
+    // Given an element id, look up a tooltip element in the doc (same
+    // id with a '-tip' suffix) and associate the two. Maybe dojo has
+    // a better way to do this?
+    var fld = dojo.byId(fieldId);
+    var tip = dojo.byId(fieldId + '-tip');
+    dojo.connect(fld, 'onfocus', function(evt) {
+                    dijit.showTooltip(tip.innerHTML, fld, ['below', 'after']); });
+    dojo.connect(fld, 'onblur', function(evt) { dijit.hideTooltip(fld); });
+}
+
+
+function onBibAttrClick(evt) {
+    var row = bibAttrGrid.model.getRow(evt.rowIndex);
+    // populate the popup editor.
+    dojo.byId('oils-bib-attr-code').value = row.code;
+    dojo.byId('bib-attr-description').value = row.description;
+    var _xpath = row.xpath;
+    var xpath = xpathParser.parse(_xpath);
+    dojo.byId('bib-attr-tag').value = xpath.tags;
+    dojo.byId('bib-attr-subfield').value = xpath.subfields;
+    dojo.byId('bib-attr-ident-selector').value = (row.ident ? 'True':'False');
+    dojo.byId('bib-attr-xpath').value = _xpath;
+    dojo.byId('bib-attr-remove').value = row.remove;
+
+    // set up UI for editing
+    var dialog = dojo.byId('bib-attr-dialog');
+    var create_bar = dialog.getElementsByClassName('create_bar')[0];
+    var update_bar = dialog.getElementsByClassName('update_bar')[0];
+    create_bar.style.display='none';
+    update_bar.style.display='table-row';
+    idStyle('vl-create-bib-attr-button', 'visibility', 'hidden');
+    dojo.byId('vl-create-bib-attr-button').click();
+}