* remove t_ prefix from TT-loaded template files (not needed).
* rename "parts" to "share", which better describes the contents
* remove deprecated column_picker template
Signed-off-by: Bill Erickson <berick@esilibrary.com>
[%
- WRAPPER "staff/t_base.tt2";
+ WRAPPER "staff/base.tt2";
ctx.page_title = l("Workstation Administration");
ctx.page_app = "egWorkstationAdmin";
%]
--- /dev/null
+<!doctype html>
+[%-
+ EVERGREEN_VERSION='0.0.1'
+
+ # create script / css refs to individual files instead of using
+ EXPAND_WEB_IMPORTS=1;
+%]
+<html lang="[% ctx.locale %]"
+ [%- IF ctx.page_app %] ng-app="[% ctx.page_app %]"[% END -%]
+ [%- IF ctx.page_ctrl %] ng-controller="[% ctx.page_ctrl %]"[% END %]>
+ <head>
+ <title>[% l('Evergreen Staff [_1]', ctx.page_title) %]</title>
+ <base href="/eg/staff/">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <!-- TODO: remote hosted CSS should be hosted locally instead -->
+ [% IF EXPAND_WEB_IMPORTS %]
+ <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/bootstrap.min.css" />
+ <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/hotkeys.min.css" />
+ [% ELSE %]
+ <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/evergreen-staff-client-deps.[% EVERGREEN_VERSION %].min.css" />
+ [% END %]
+ <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" />
+ <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/print.css" type="text/css" media="print" />
+ </head>
+ <body>
+ <!-- load the navbar template inline since it's used on every page -->
+ <script type="text/ng-template" id="eg-navbar-template">
+ [% INCLUDE "staff/navbar.tt2" %]
+ </script>
+ <!-- instantiate the navbar by invoking it's name -->
+ <eg-navbar></eg-navbar>
+
+ <div id="top-content-container" class="container">[% content %]</div>
+ [%
+ # status bar along bottom of page
+ INCLUDE "staff/statusbar.tt2";
+
+ # script imports
+ INCLUDE "staff/base_js.tt2";
+
+ # App-specific JS load commands go into an APP_JS block.
+ PROCESS APP_JS;
+ %]
+ <div id="print-div" eg-print-container></div>
+ </body>
+</html>
--- /dev/null
+<script src="/IDL2js"></script>
+
+[% IF EXPAND_WEB_IMPORTS %]
+
+<!-- angular -->
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular.min.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-route.min.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/ui-bootstrap-tpls.min.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/hotkeys.min.js"></script>
+
+<!-- IDL / opensrf (network) -->
+<script src="[% ctx.media_prefix %]/js/dojo/opensrf/JSON_v1.js"></script>
+<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf.js"></script>
+<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf_ws.js"></script>
+
+<!-- evergreen core services -->
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/core.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/strings.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/idl.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/event.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/net.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/auth.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/pcrud.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/env.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/org.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/startup.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/hatch.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/coresvc.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/navbar.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/statusbar.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/ui.js"></script>
+
+[% ELSE %]
+
+<!-- concatenated, minified version of all of the above -->
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/evergreen-staff-client.[% EVERGREEN_VERSION %].min.js"></script>
+
+[% END %]
+
+<script>
+ // Configure OpenSRF
+ // pending api_level thunking in C
+ // OpenSRF.api_level = 2;
+ OpenSRF.Session.transport = OSRF_TRANSPORT_TYPE_WS;
+</script>
+
[%
- WRAPPER "staff/t_base.tt2";
+ WRAPPER "staff/base.tt2";
ctx.page_title = l("Record Buckets");
ctx.page_app = "egCatRecordBuckets";
ctx.page_ctrl = "RecordBucketCtrl";
[%
- WRAPPER "staff/t_base.tt2";
+ WRAPPER "staff/base.tt2";
ctx.page_title = l("Check In");
ctx.page_app = "egCheckinApp";
ctx.page_ctrl = "CheckinCtrl";
[%
- WRAPPER "staff/t_base.tt2";
+ WRAPPER "staff/base.tt2";
ctx.page_title = l("Patron");
ctx.page_app = "egPatronApp";
ctx.page_ctrl = "PatronCtrl";
[%
- WRAPPER "staff/t_base.tt2";
+ WRAPPER "staff/base.tt2";
ctx.page_title = l("Home");
ctx.page_app = "egHome";
%]
--- /dev/null
+<!--
+ main navigation bar
+
+ note the use of target="_self" for navigation links.
+ this tells angular to treat the href as a new page
+ and not an intra-app route. This is necessary when
+ moving between applications.
+
+ For icons, see http://getbootstrap.com/components/#glyphicons
+-->
+
+<div id="top-navbar" role="navigation"
+ class="navbar navbar-default navbar-static-top" role="navigation">
+
+ <!-- navbar-header here needed for supporting angular-ui-bootstrap -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle"
+ ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
+ <span class="sr-only">[% l('Toggle navigation') %]</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ </div>
+
+ <div class="navbar-collapse collapse" ng-class="!navCollapsed && 'in'">
+ <ul class="nav navbar-nav">
+ <li><a href='./' title="[% l('Home') %]" target="_self"
+ class="glyphicon glyphicon-home"></a><li>
+
+ <!-- circulation -->
+ <li class="dropdown">
+ <a href="javascript:;" class="dropdown-toggle"
+ data-toggle="dropdown">[% l('Circulation') %]
+ <b class="caret"></b>
+ </a>
+
+ <ul class="dropdown-menu">
+ <li>
+ <a href="./circ/patron/bcsearch" target="_self">
+ <span class="glyphicon glyphicon-export"></span>
+ [% l('Check Out') %]
+ </a>
+ </li>
+ <li>
+ <a href="./circ/patron/search" target="_self"
+ eg-accesskey="[% l('alt+s') %]"
+ eg-accesskey-desc="[% l('Patron search by name, address, etc.') %]">
+ <span class="glyphicon glyphicon-search"></span>
+ <span eg-accesskey-label>[% l('Patron Search') %]</span>
+ </a>
+ </li>
+ <li>
+ <a href="./circ/checkin/index" target="_self">
+ <span class="glyphicon glyphicon-import"></span>
+ [% l('Check In') %]
+ </a>
+ </li>
+ <!-- sample sub-menu
+ <li class="divider"></li>
+ <li class="dropdown-header">Sub Menu Test</li>
+ <li><a href="javascript:;">Test Item</a></li>
+ -->
+ </ul>
+ </li>
+
+ <!-- cataloging -->
+ <li class="dropdown">
+ <a href="javascript:;" class="dropdown-toggle"
+ data-toggle="dropdown">[% l('Cataloging') %]
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="./cat/bucket/record/view" target="_self">
+ <span class="glyphicon glyphicon-list-alt"></span>
+ [% l('Record Buckets') %]
+ </a>
+ </li>
+ </ul>
+ </li>
+
+ <!-- cataloging -->
+ <li class="dropdown">
+ <a href="javascript:;" class="dropdown-toggle"
+ data-toggle="dropdown">[% l('Administration') %]
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu">
+ <li>
+ <a href="./admin/workstation/index" target="_self">
+ <span class="glyphicon glyphicon-hdd"></span>
+ [% l('Workstation') %]
+ </a>
+ </li>
+ </ul>
+ </li>
+
+ </ul> <!-- end left side entries -->
+
+ <!-- entries along the right side of the navbar -->
+ <ul class="nav navbar-nav navbar-right" style='margin-right: 6px;'>
+ <li>
+ <a ng-cloak ng-show="username"
+ ng-init="workstation = '[% l('<no workstation>') %]'">
+ [% l('{{username}} @ {{workstation}}') %]
+ </a>
+ </li>
+
+ <!-- locale selector.
+ only shown if multiple locales are registered -->
+ [% IF ctx.locales.keys.size > 1 %]
+ <li class="dropdown">
+ <a href='' class="dropdown-toggle" data-toggle="dropdown">
+ [% lcl = ctx.locale; ctx.locales.$lcl %]
+ <span class="glyphicon glyphicon-flag"></span>
+ </a>
+ <ul class="dropdown-menu">
+ [% FOR locale IN ctx.locales.keys.sort %]
+ <!-- disable the selected locale -->
+ <li ng-class="{disabled : '[% ctx.locale %]'=='[% locale %]'}">
+ <a href="" ng-click="applyLocale('[% locale %]')">
+ [% ctx.locales.$locale %]
+ </a>
+ </li>
+ [% END %]
+ </ul>
+ </li>
+ [% END %]
+
+ <li class="dropdown" ng-show="username">
+ <a href='' class="dropdown-toggle glyphicon glyphicon-list"
+ data-toggle="dropdown"></a>
+ <ul class="dropdown-menu">
+ <li class="disabled">
+ <a href="" ng-click="" target="_self">
+ <span class="glyphicon glyphicon-random"></span>
+ [% l('Change Operator') %]
+ </a>
+ </li>
+ <li>
+ <a href="./login" ng-click="logout()" target="_self">
+ <span class="glyphicon glyphicon-log-out"></span>
+ [% l('Log Out') %]
+ </a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+</div>
+
+
+++ /dev/null
-
-[%#
-Must be wrapped in a btn-group/text-left div for correct display.
-It's not done here since the caller may wish to add other buttons/
-dropdowns, etc. to the btn-group
-
-<div class="btn-group text-left">
- [ INCLUDE 'staff/parts/column_picker.tt2' listname=somelist ]
-<div>
-%]
-
-<div class="btn-group column-picker" dropdown>
- <button type="button" class="btn btn-default dropdown-toggle">
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu pull-right">
- <li ng-repeat="col in [% listname %].allColumns">
- <a href='' ng-click="[% listname %].displayColumns[col.name] =
- ![% listname %].displayColumns[col.name]">
- <span ng-if="[% listname %].displayColumns[col.name]"
- class="label label-success">✓</span>
- <span ng-if="![% listname %].displayColumns[col.name]"
- class="label label-warning">✗</span>
- <span>{{col.label}}</span>
- </a>
- </li>
- <li role="presentation" class="divider"></li>
- <li>
- <a href='' ng-click="[% listname %].showAllColumns()">
- [% l('Show All Columns') %]
- </a>
- </li>
- <li>
- <a href='' ng-click="[% listname %].hideAllColumns()">
- [% l('Hide All Columns') %]
- </a>
- </li>
- <li class='disabled'>
- <a href='' ng-click="">[% l('Save Columns') %]</a>
- </li>
- </ul>
-</div>
-
+++ /dev/null
-<!-- Status bar along the bottom of the page -->
-
-<div id="status-bar"
- class="navbar navbar-default navbar-fixed-bottom"
- role="navigation">
-
- <!--
- Define the status bar as a directive so it may be used globally.
- The template is defined inline (below) to leverage i18n and
- so one less network fetch is required.
- -->
- <eg-status-bar></eg-status-bar>
- <script type="text/ng-template" id="eg-status-bar-template">
- <ul class="nav navbar-nav navbar-right">
- <li>{{messages[0]}}</li>
- <li>
- <span
- ng-click="hatchConnect()"
- title="[% l('Print/Store Connection Status') %]"
- class="glyphicon glyphicon-transfer"
- ng-class="{'status-bar-connected' : hatchConnected()}">
- </span>
- </li>
- <li>
- <span
- title="[% l('Network Connection Status') %]"
- class="glyphicon glyphicon-signal"
- ng-class="{'status-bar-connected' : netConnected()}">
- </span>
- </li>
- </ul>
- </script>
-</div>
+++ /dev/null
-<!--
- Generic alert dialog.
- The only user action allowed is the 'OK' button.
--->
-<div>
- <div class="modal-header">
- <button type="button" class="close"
- ng-click="ok()" aria-hidden="true">×</button>
- <h4 class="modal-title alert alert-danger">[% l('Alert') %]</h4>
- </div>
- <div class="modal-body">{{message}}</div>
- <div class="modal-footer">
- <input type="submit"
- class="btn btn-primary" ng-click="ok()" value="[% l('OK') %]"/>
- </div>
-</div>
+++ /dev/null
-
-<!--
- Actions row.
- This sits above the grid and contains the column picker, etc.
--->
-
-<div class="eg-grid-row eg-grid-action-row">
-
- <div style="flex:1">
- <div class="eg-grid-primary-label">{{mainLabel}}</div>
- </div>
-
- <div class="btn-group" ng-if="menuLabel" dropdown style="margin-right: 10px">
- <button type="button" class="btn btn-default dropdown-toggle">
- {{menuLabel}}<span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <li ng-repeat="item in menuItems" ng-class="{divider: item.divider}">
- <a ng-if="!item.divider" href
- ng-click="item.handler(item, item.handlerData)">{{item.label}}</a>
- </li>
- </ul>
- </div>
-
- <!-- column picker, pager, etc. -->
- <div class="btn-group column-picker">
-
- <!-- first page -->
- <button type="button" class="btn btn-default"
- ng-class="{disabled : onFirstPage()}"
- ng-click="offset(0);collect()"
- title="[% l('Start') %]">
- <span class="glyphicon glyphicon-fast-backward"></span>
- </button>
-
- <!-- previous page -->
- <button type="button" class="btn btn-default"
- ng-class="{disabled : onFirstPage()}"
- ng-click="decrementPage()"
- title="[% l('Previous Page') %]">
- <span class="glyphicon glyphicon-backward"></span>
- </button>
-
- <!-- next page -->
- <!-- todo: paging needs a total count value to be fully functional -->
- <button type="button" class="btn btn-default"
- ng-class="{disabled : !hasNextPage()}"
- ng-click="incrementPage()"
- title="[% l('Next Page') %]">
- <span class="glyphicon glyphicon-forward"></span>
- </button>
-
- <!-- actions drop-down menu -->
- <div class="btn-group" ng-if="actions.length" dropdown>
- <button type="button" class="btn btn-default dropdown-toggle"
- ng-class="{disabled : false}">
- [% l('Actions') %] <span class="caret"></span>
- </button>
- <ul class="dropdown-menu pull-right">
- <li ng-class="{disabled : false}" ng-repeat="action in actions">
- <a href="" ng-click="actionLauncher(action)">{{action.label}}</a>
- </li>
- </ul>
- </div>
-
- <div class="btn-group" dropdown>
- <button type="button" title="[% ('Select Row Count') %]"
- class="btn btn-default dropdown-toggle">
- [% l('Rows [_1]', '{{limit()}}') %]
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <li ng-repeat="t in [5,10,25,50,100]">
- <a href dropdown-toggle ng-click='offset(0);limit(t);collect()'>
- {{t}}
- </a>
- </li>
- </ul>
- </div>
-
- <div class="btn-group" dropdown>
- <button type="button" title="[% ('Select Page') %]"
- class="btn btn-default dropdown-toggle">
- [% l('Page [_1]', '{{page()}}') %]
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- <li>
- <div class="input-group">
- <input type="text" class="form-control"
- ng-model="pageFromUI"
- ng-click="$event.stopPropagation()"/>
- <span class="input-group-btn">
- <button class="btn btn-default" type="button"
- ng-click="goToPage(pageFromUI);pageFromUI=''">
- [% l('Go To...') %]
- </button>
- </span>
- </div>
- </li>
- <li role="presentation" class="divider"></li>
- <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
- <a href dropdown-toggle ng-click='goToPage(t)'>{{t}}</a>
- </li>
- </ul>
- </div>
-
- <div class="btn-group" dropdown>
- <button type="button"
- class="btn btn-default dropdown-toggle">
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu pull-right">
- <li><a href dropdown-toggle ng-click="toggleConfDisplay()">
- <span class="glyphicon glyphicon-wrench"></span>
- [% l('Configure Columns') %]
- </a></li>
- <li><a href dropdown-toggle ng-click="saveConfig()">
- <span class="glyphicon glyphicon-floppy-save"></span>
- [% l('Save Columns') %]
- </a></li>
- <li><a href dropdown-toggle ng-click="showAllColumns()">
- <span class="glyphicon glyphicon-resize-full"></span>
- [% l('Show All Columns') %]
- </a></li>
- <li><a href dropdown-toggle ng-click="hideAllColumns()">
- <span class="glyphicon glyphicon-resize-small"></span>
- [% l('Hide All Columns') %]
- </a></li>
- <li><a ng-click="generateCSVExportURL()"
- download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
- <span class="glyphicon glyphicon-download"></span>
- [% l('Download CSV') %]
- </a></li>
- <li><a href dropdown-toggle ng-click="printCSV()">
- <span class="glyphicon glyphicon-print"></span>
- [% l('Print CSV') %]
- </a></li>
- <li role="presentation" class="divider"></li>
- <li ng-repeat="col in columns">
- <a href dropdown-toggle ng-click="col.visible = !col.visible">
- <span ng-if="col.visible"
- class="label label-success">✓</span>
- <span ng-if="!col.visible"
- class="label label-warning">✗</span>
- <span>{{col.label}}</span>
- </a>
- </li>
- </ul>
- </div>
- </div>
-</div>
-
-<!-- Grid -->
-<div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
-
- <!-- import our eg-grid-field defs -->
- <div ng-transclude></div>
-
- <div class="eg-grid-row eg-grid-header-row">
- <div class="eg-grid-cell eg-grid-cell-stock">
- <div>[% l('#') %]</div>
- </div>
- <div class="eg-grid-cell eg-grid-cell-stock">
- <div>
- <input type='checkbox' ng-click="toggleSelectAllItems()"/>
- </div>
- </div>
- <div class="eg-grid-cell"
- eg-grid-column-drag-dest
- column="{{col.name}}"
- eg-right-click="onContextMenu($event)"
- ng-repeat="col in columns"
- style="flex:{{col.flex}}"
- ng-show="col.visible">
-
- <div style="display:flex">
- <div style="flex:1" class="eg-grid-column-move-handle">
- <div ng-if="col.sortable">
- <a column="{{col.name}}" href=''
- eg-grid-column-drag-source
- ng-click="quickSort(col.name)">{{col.label}}</a>
- </div>
- <div ng-if="!col.sortable">
- <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
- </div>
- </div>
- <div eg-grid-column-drag-source
- drag-type="resize" column="{{col.name}}"
- class="eg-grid-column-resize-handle"> </div>
- </div>
- </div>
- </div>
-
- <!-- Inline grid configuration row -->
- <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
- <div class="eg-grid-cell eg-grid-cell-conf-header">
- <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
- <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
- <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
- </div>
- <div class="eg-grid-cell"
- ng-repeat="col in columns"
- style="flex:{{col.flex}}"
- ng-show="col.visible">
- <div class="eg-grid-conf-cell-entry">
- <a href="" title="[% l('Make column wider') %]"
- ng-click="modifyColumnFlex(col,1)">
- <span class="glyphicon glyphicon-fast-forward"></span>
- </a>
- </div>
- <div class="eg-grid-conf-cell-entry">
- <a href="" title="[% l('Make column narrower') %]"
- ng-click="modifyColumnFlex(col,-1)">
- <span class="glyphicon glyphicon-fast-backward"></span>
- </a>
- </div>
- <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
- <div ng-if="col.multisortable">
- <input type='number' ng-model="col.sort"
- title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
- </div>
- </div>
- </div>
- </div>
-
- <div class="eg-grid-content-body">
- <div ng-show="items.length == 0"
- class="alert alert-info">[% l('No Items To Display') %]</div>
-
- <div class="eg-grid-row"
- id="eg-grid-row-{{$index + 1}}"
- ng-repeat="item in items"
- ng-show="items.length > 0"
- ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
- <div class="eg-grid-cell eg-grid-cell-stock"
- ng-click="handleRowClick($event, item)">
- {{$index + offset() + 1}}
- </div>
- <div class="eg-grid-cell eg-grid-cell-stock">
- <!-- ng-click=handleRowClick here has unintended
- consequences and is unnecessary, avoid it -->
- <div>
- <input type='checkbox'
- ng-model="selected[indexValue(item)]"/>
- </div>
- </div>
- <div class="eg-grid-cell eg-grid-cell-content"
- ng-click="handleRowClick($event, item)"
- ng-repeat="col in columns"
- style="flex:{{col.flex}}"
- ng-show="col.visible">
- {{itemFieldValue(item, col)}}
- </div>
- </div>
- </div>
-
-
-</div>
-
+++ /dev/null
-<!--
- Generic confirmation dialog
--->
-<div>
- <div class="modal-header">
- <button type="button" class="close"
- ng-click="cancel()" aria-hidden="true">×</button>
- <h4 class="modal-title alert alert-info">{{title}}</h4>
- </div>
- <div class="modal-body">{{message}}</div>
- <div class="modal-footer">
- [% dialog_footer %]
- <input type="submit" class="btn btn-primary"
- ng-click="ok()" value="[% l('OK/Continue') %]"/>
- <button class="btn btn-warning"
- ng-click="cancel()">[% l('Cancel') %]</button>
- </div>
-</div>
--- /dev/null
+Location for globally shared template files. These are generally used
+by AngularJS directives.
+
+App-specific shared templates should live within the application's
+directory.
--- /dev/null
+<!--
+ Generic alert dialog.
+ The only user action allowed is the 'OK' button.
+-->
+<div>
+ <div class="modal-header">
+ <button type="button" class="close"
+ ng-click="ok()" aria-hidden="true">×</button>
+ <h4 class="modal-title alert alert-danger">[% l('Alert') %]</h4>
+ </div>
+ <div class="modal-body">{{message}}</div>
+ <div class="modal-footer">
+ <input type="submit"
+ class="btn btn-primary" ng-click="ok()" value="[% l('OK') %]"/>
+ </div>
+</div>
--- /dev/null
+
+<!--
+ Actions row.
+ This sits above the grid and contains the column picker, etc.
+-->
+
+<div class="eg-grid-row eg-grid-action-row">
+
+ <div style="flex:1">
+ <div class="eg-grid-primary-label">{{mainLabel}}</div>
+ </div>
+
+ <div class="btn-group" ng-if="menuLabel" dropdown style="margin-right: 10px">
+ <button type="button" class="btn btn-default dropdown-toggle">
+ {{menuLabel}}<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li ng-repeat="item in menuItems" ng-class="{divider: item.divider}">
+ <a ng-if="!item.divider" href
+ ng-click="item.handler(item, item.handlerData)">{{item.label}}</a>
+ </li>
+ </ul>
+ </div>
+
+ <!-- column picker, pager, etc. -->
+ <div class="btn-group column-picker">
+
+ <!-- first page -->
+ <button type="button" class="btn btn-default"
+ ng-class="{disabled : onFirstPage()}"
+ ng-click="offset(0);collect()"
+ title="[% l('Start') %]">
+ <span class="glyphicon glyphicon-fast-backward"></span>
+ </button>
+
+ <!-- previous page -->
+ <button type="button" class="btn btn-default"
+ ng-class="{disabled : onFirstPage()}"
+ ng-click="decrementPage()"
+ title="[% l('Previous Page') %]">
+ <span class="glyphicon glyphicon-backward"></span>
+ </button>
+
+ <!-- next page -->
+ <!-- todo: paging needs a total count value to be fully functional -->
+ <button type="button" class="btn btn-default"
+ ng-class="{disabled : !hasNextPage()}"
+ ng-click="incrementPage()"
+ title="[% l('Next Page') %]">
+ <span class="glyphicon glyphicon-forward"></span>
+ </button>
+
+ <!-- actions drop-down menu -->
+ <div class="btn-group" ng-if="actions.length" dropdown>
+ <button type="button" class="btn btn-default dropdown-toggle"
+ ng-class="{disabled : false}">
+ [% l('Actions') %] <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu pull-right">
+ <li ng-class="{disabled : false}" ng-repeat="action in actions">
+ <a href="" ng-click="actionLauncher(action)">{{action.label}}</a>
+ </li>
+ </ul>
+ </div>
+
+ <div class="btn-group" dropdown>
+ <button type="button" title="[% ('Select Row Count') %]"
+ class="btn btn-default dropdown-toggle">
+ [% l('Rows [_1]', '{{limit()}}') %]
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li ng-repeat="t in [5,10,25,50,100]">
+ <a href dropdown-toggle ng-click='offset(0);limit(t);collect()'>
+ {{t}}
+ </a>
+ </li>
+ </ul>
+ </div>
+
+ <div class="btn-group" dropdown>
+ <button type="button" title="[% ('Select Page') %]"
+ class="btn btn-default dropdown-toggle">
+ [% l('Page [_1]', '{{page()}}') %]
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li>
+ <div class="input-group">
+ <input type="text" class="form-control"
+ ng-model="pageFromUI"
+ ng-click="$event.stopPropagation()"/>
+ <span class="input-group-btn">
+ <button class="btn btn-default" type="button"
+ ng-click="goToPage(pageFromUI);pageFromUI=''">
+ [% l('Go To...') %]
+ </button>
+ </span>
+ </div>
+ </li>
+ <li role="presentation" class="divider"></li>
+ <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
+ <a href dropdown-toggle ng-click='goToPage(t)'>{{t}}</a>
+ </li>
+ </ul>
+ </div>
+
+ <div class="btn-group" dropdown>
+ <button type="button"
+ class="btn btn-default dropdown-toggle">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu pull-right">
+ <li><a href dropdown-toggle ng-click="toggleConfDisplay()">
+ <span class="glyphicon glyphicon-wrench"></span>
+ [% l('Configure Columns') %]
+ </a></li>
+ <li><a href dropdown-toggle ng-click="saveConfig()">
+ <span class="glyphicon glyphicon-floppy-save"></span>
+ [% l('Save Columns') %]
+ </a></li>
+ <li><a href dropdown-toggle ng-click="showAllColumns()">
+ <span class="glyphicon glyphicon-resize-full"></span>
+ [% l('Show All Columns') %]
+ </a></li>
+ <li><a href dropdown-toggle ng-click="hideAllColumns()">
+ <span class="glyphicon glyphicon-resize-small"></span>
+ [% l('Hide All Columns') %]
+ </a></li>
+ <li><a ng-click="generateCSVExportURL()"
+ download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
+ <span class="glyphicon glyphicon-download"></span>
+ [% l('Download CSV') %]
+ </a></li>
+ <li><a href dropdown-toggle ng-click="printCSV()">
+ <span class="glyphicon glyphicon-print"></span>
+ [% l('Print CSV') %]
+ </a></li>
+ <li role="presentation" class="divider"></li>
+ <li ng-repeat="col in columns">
+ <a href dropdown-toggle ng-click="col.visible = !col.visible">
+ <span ng-if="col.visible"
+ class="label label-success">✓</span>
+ <span ng-if="!col.visible"
+ class="label label-warning">✗</span>
+ <span>{{col.label}}</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+<!-- Grid -->
+<div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
+
+ <!-- import our eg-grid-field defs -->
+ <div ng-transclude></div>
+
+ <div class="eg-grid-row eg-grid-header-row">
+ <div class="eg-grid-cell eg-grid-cell-stock">
+ <div>[% l('#') %]</div>
+ </div>
+ <div class="eg-grid-cell eg-grid-cell-stock">
+ <div>
+ <input type='checkbox' ng-click="toggleSelectAllItems()"/>
+ </div>
+ </div>
+ <div class="eg-grid-cell"
+ eg-grid-column-drag-dest
+ column="{{col.name}}"
+ eg-right-click="onContextMenu($event)"
+ ng-repeat="col in columns"
+ style="flex:{{col.flex}}"
+ ng-show="col.visible">
+
+ <div style="display:flex">
+ <div style="flex:1" class="eg-grid-column-move-handle">
+ <div ng-if="col.sortable">
+ <a column="{{col.name}}" href=''
+ eg-grid-column-drag-source
+ ng-click="quickSort(col.name)">{{col.label}}</a>
+ </div>
+ <div ng-if="!col.sortable">
+ <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
+ </div>
+ </div>
+ <div eg-grid-column-drag-source
+ drag-type="resize" column="{{col.name}}"
+ class="eg-grid-column-resize-handle"> </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Inline grid configuration row -->
+ <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
+ <div class="eg-grid-cell eg-grid-cell-conf-header">
+ <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
+ <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
+ <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
+ </div>
+ <div class="eg-grid-cell"
+ ng-repeat="col in columns"
+ style="flex:{{col.flex}}"
+ ng-show="col.visible">
+ <div class="eg-grid-conf-cell-entry">
+ <a href="" title="[% l('Make column wider') %]"
+ ng-click="modifyColumnFlex(col,1)">
+ <span class="glyphicon glyphicon-fast-forward"></span>
+ </a>
+ </div>
+ <div class="eg-grid-conf-cell-entry">
+ <a href="" title="[% l('Make column narrower') %]"
+ ng-click="modifyColumnFlex(col,-1)">
+ <span class="glyphicon glyphicon-fast-backward"></span>
+ </a>
+ </div>
+ <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
+ <div ng-if="col.multisortable">
+ <input type='number' ng-model="col.sort"
+ title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="eg-grid-content-body">
+ <div ng-show="items.length == 0"
+ class="alert alert-info">[% l('No Items To Display') %]</div>
+
+ <div class="eg-grid-row"
+ id="eg-grid-row-{{$index + 1}}"
+ ng-repeat="item in items"
+ ng-show="items.length > 0"
+ ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
+ <div class="eg-grid-cell eg-grid-cell-stock"
+ ng-click="handleRowClick($event, item)">
+ {{$index + offset() + 1}}
+ </div>
+ <div class="eg-grid-cell eg-grid-cell-stock">
+ <!-- ng-click=handleRowClick here has unintended
+ consequences and is unnecessary, avoid it -->
+ <div>
+ <input type='checkbox'
+ ng-model="selected[indexValue(item)]"/>
+ </div>
+ </div>
+ <div class="eg-grid-cell eg-grid-cell-content"
+ ng-click="handleRowClick($event, item)"
+ ng-repeat="col in columns"
+ style="flex:{{col.flex}}"
+ ng-show="col.visible">
+ {{itemFieldValue(item, col)}}
+ </div>
+ </div>
+ </div>
+
+
+</div>
+
--- /dev/null
+<!--
+ Generic confirmation dialog
+-->
+<div>
+ <div class="modal-header">
+ <button type="button" class="close"
+ ng-click="cancel()" aria-hidden="true">×</button>
+ <h4 class="modal-title alert alert-info">{{title}}</h4>
+ </div>
+ <div class="modal-body">{{message}}</div>
+ <div class="modal-footer">
+ [% dialog_footer %]
+ <input type="submit" class="btn btn-primary"
+ ng-click="ok()" value="[% l('OK/Continue') %]"/>
+ <button class="btn btn-warning"
+ ng-click="cancel()">[% l('Cancel') %]</button>
+ </div>
+</div>
--- /dev/null
+<!-- Status bar along the bottom of the page -->
+
+<div id="status-bar"
+ class="navbar navbar-default navbar-fixed-bottom"
+ role="navigation">
+
+ <!--
+ Define the status bar as a directive so it may be used globally.
+ The template is defined inline (below) to leverage i18n and
+ so one less network fetch is required.
+ -->
+ <eg-status-bar></eg-status-bar>
+ <script type="text/ng-template" id="eg-status-bar-template">
+ <ul class="nav navbar-nav navbar-right">
+ <li>{{messages[0]}}</li>
+ <li>
+ <span
+ ng-click="hatchConnect()"
+ title="[% l('Print/Store Connection Status') %]"
+ class="glyphicon glyphicon-transfer"
+ ng-class="{'status-bar-connected' : hatchConnected()}">
+ </span>
+ </li>
+ <li>
+ <span
+ title="[% l('Network Connection Status') %]"
+ class="glyphicon glyphicon-signal"
+ ng-class="{'status-bar-connected' : netConnected()}">
+ </span>
+ </li>
+ </ul>
+ </script>
+</div>
+++ /dev/null
-<!doctype html>
-[%-
- EVERGREEN_VERSION='0.0.1'
-
- # create script / css refs to individual files instead of using
- EXPAND_WEB_IMPORTS=1;
-%]
-<html lang="[% ctx.locale %]"
- [%- IF ctx.page_app %] ng-app="[% ctx.page_app %]"[% END -%]
- [%- IF ctx.page_ctrl %] ng-controller="[% ctx.page_ctrl %]"[% END %]>
- <head>
- <title>[% l('Evergreen Staff [_1]', ctx.page_title) %]</title>
- <base href="/eg/staff/">
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- TODO: remote hosted CSS should be hosted locally instead -->
- [% IF EXPAND_WEB_IMPORTS %]
- <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/bootstrap.min.css" />
- <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/hotkeys.min.css" />
- [% ELSE %]
- <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/evergreen-staff-client-deps.[% EVERGREEN_VERSION %].min.css" />
- [% END %]
- <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" />
- <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/print.css" type="text/css" media="print" />
- </head>
- <body>
- <!-- load the navbar template inline since it's used on every page -->
- <script type="text/ng-template" id="eg-navbar-template">
- [% INCLUDE "staff/t_navbar.tt2" %]
- </script>
- <!-- instantiate the navbar by invoking it's name -->
- <eg-navbar></eg-navbar>
-
- <div id="top-content-container" class="container">[% content %]</div>
- [%
- # status bar along bottom of page
- INCLUDE "staff/parts/statusbar.tt2";
-
- # script imports
- INCLUDE "staff/t_base_js.tt2";
-
- # App-specific JS load commands go into an APP_JS block.
- PROCESS APP_JS;
- %]
- <div id="print-div" eg-print-container></div>
- </body>
-</html>
+++ /dev/null
-<script src="/IDL2js"></script>
-
-[% IF EXPAND_WEB_IMPORTS %]
-
-<!-- angular -->
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular.min.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/angular-route.min.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/ui-bootstrap-tpls.min.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/hotkeys.min.js"></script>
-
-<!-- IDL / opensrf (network) -->
-<script src="[% ctx.media_prefix %]/js/dojo/opensrf/JSON_v1.js"></script>
-<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf.js"></script>
-<script src="[% ctx.media_prefix %]/js/dojo/opensrf/opensrf_ws.js"></script>
-
-<!-- evergreen core services -->
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/core.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/strings.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/idl.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/event.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/net.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/auth.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/pcrud.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/env.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/org.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/startup.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/hatch.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/coresvc.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/navbar.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/statusbar.js"></script>
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/ui.js"></script>
-
-[% ELSE %]
-
-<!-- concatenated, minified version of all of the above -->
-<script src="[% ctx.media_prefix %]/js/ui/default/staff/build/js/evergreen-staff-client.[% EVERGREEN_VERSION %].min.js"></script>
-
-[% END %]
-
-<script>
- // Configure OpenSRF
- // pending api_level thunking in C
- // OpenSRF.api_level = 2;
- OpenSRF.Session.transport = OSRF_TRANSPORT_TYPE_WS;
-</script>
-
+++ /dev/null
-<!--
- main navigation bar
-
- note the use of target="_self" for navigation links.
- this tells angular to treat the href as a new page
- and not an intra-app route. This is necessary when
- moving between applications.
-
- For icons, see http://getbootstrap.com/components/#glyphicons
--->
-
-<div id="top-navbar" role="navigation"
- class="navbar navbar-default navbar-static-top" role="navigation">
-
- <!-- navbar-header here needed for supporting angular-ui-bootstrap -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle"
- ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
- <span class="sr-only">[% l('Toggle navigation') %]</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- </div>
-
- <div class="navbar-collapse collapse" ng-class="!navCollapsed && 'in'">
- <ul class="nav navbar-nav">
- <li><a href='./' title="[% l('Home') %]" target="_self"
- class="glyphicon glyphicon-home"></a><li>
-
- <!-- circulation -->
- <li class="dropdown">
- <a href="javascript:;" class="dropdown-toggle"
- data-toggle="dropdown">[% l('Circulation') %]
- <b class="caret"></b>
- </a>
-
- <ul class="dropdown-menu">
- <li>
- <a href="./circ/patron/bcsearch" target="_self">
- <span class="glyphicon glyphicon-export"></span>
- [% l('Check Out') %]
- </a>
- </li>
- <li>
- <a href="./circ/patron/search" target="_self"
- eg-accesskey="[% l('alt+s') %]"
- eg-accesskey-desc="[% l('Patron search by name, address, etc.') %]">
- <span class="glyphicon glyphicon-search"></span>
- <span eg-accesskey-label>[% l('Patron Search') %]</span>
- </a>
- </li>
- <li>
- <a href="./circ/checkin/index" target="_self">
- <span class="glyphicon glyphicon-import"></span>
- [% l('Check In') %]
- </a>
- </li>
- <!-- sample sub-menu
- <li class="divider"></li>
- <li class="dropdown-header">Sub Menu Test</li>
- <li><a href="javascript:;">Test Item</a></li>
- -->
- </ul>
- </li>
-
- <!-- cataloging -->
- <li class="dropdown">
- <a href="javascript:;" class="dropdown-toggle"
- data-toggle="dropdown">[% l('Cataloging') %]
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li>
- <a href="./cat/bucket/record/view" target="_self">
- <span class="glyphicon glyphicon-list-alt"></span>
- [% l('Record Buckets') %]
- </a>
- </li>
- </ul>
- </li>
-
- <!-- cataloging -->
- <li class="dropdown">
- <a href="javascript:;" class="dropdown-toggle"
- data-toggle="dropdown">[% l('Administration') %]
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li>
- <a href="./admin/workstation/index" target="_self">
- <span class="glyphicon glyphicon-hdd"></span>
- [% l('Workstation') %]
- </a>
- </li>
- </ul>
- </li>
-
- </ul> <!-- end left side entries -->
-
- <!-- entries along the right side of the navbar -->
- <ul class="nav navbar-nav navbar-right" style='margin-right: 6px;'>
- <li>
- <a ng-cloak ng-show="username"
- ng-init="workstation = '[% l('<no workstation>') %]'">
- [% l('{{username}} @ {{workstation}}') %]
- </a>
- </li>
-
- <!-- locale selector.
- only shown if multiple locales are registered -->
- [% IF ctx.locales.keys.size > 1 %]
- <li class="dropdown">
- <a href='' class="dropdown-toggle" data-toggle="dropdown">
- [% lcl = ctx.locale; ctx.locales.$lcl %]
- <span class="glyphicon glyphicon-flag"></span>
- </a>
- <ul class="dropdown-menu">
- [% FOR locale IN ctx.locales.keys.sort %]
- <!-- disable the selected locale -->
- <li ng-class="{disabled : '[% ctx.locale %]'=='[% locale %]'}">
- <a href="" ng-click="applyLocale('[% locale %]')">
- [% ctx.locales.$locale %]
- </a>
- </li>
- [% END %]
- </ul>
- </li>
- [% END %]
-
- <li class="dropdown" ng-show="username">
- <a href='' class="dropdown-toggle glyphicon glyphicon-list"
- data-toggle="dropdown"></a>
- <ul class="dropdown-menu">
- <li class="disabled">
- <a href="" ng-click="" target="_self">
- <span class="glyphicon glyphicon-random"></span>
- [% l('Change Operator') %]
- </a>
- </li>
- <li>
- <a href="./login" ng-click="logout()" target="_self">
- <span class="glyphicon glyphicon-log-out"></span>
- [% l('Log Out') %]
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
-</div>
-
-
},
// TODO: avoid hard-coded url
- templateUrl : '/eg/staff/parts/t_autogrid',
+ templateUrl : '/eg/staff/share/t_autogrid',
link : function(scope, element, attrs) {
// link() is called after page compilation, which means our
service.open = function(message, msg_scope) {
return $modal.open({
- templateUrl: './parts/t_alert_dialog',
+ templateUrl: './share/t_alert_dialog',
controller: ['$scope', '$modalInstance',
function($scope, $modalInstance) {
$scope.message = $interpolate(message)(msg_scope);
service.open = function(title, message, msg_scope) {
return $modal.open({
- templateUrl: './parts/t_confirm_dialog',
+ templateUrl: './share/t_confirm_dialog',
controller: ['$scope', '$modalInstance',
function($scope, $modalInstance) {
$scope.title = $interpolate(title)(msg_scope);
projects / working / Evergreen.git / commitdiff