Toward an Angular replacement for Org Units Conify

Signed-off-by: Jason Etheridge <jason@esilibrary.com>

diff --git a/Open-ILS/src/templates/staff/admin/actor/org_unit/index.tt2 b/Open-ILS/src/templates/staff/admin/actor/org_unit/index.tt2
new file mode 100644 (file)
index 0000000..8959e19
--- /dev/null
+++ b/Open-ILS/src/templates/staff/admin/actor/org_unit/index.tt2
@@ -0,0 +1,15 @@
+[%
+  WRAPPER "staff/base.tt2";
+  ctx.page_title = l("Organizational Units");
+  ctx.page_app = "egOrgUnitApp";
+%]
+
+[% BLOCK APP_JS %]
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/services/ui.js"></script>
+<script src="[% ctx.media_prefix %]/js/ui/default/staff/admin/actor/org_unit/app.js"></script>
+<link rel="stylesheet" href="[% ctx.base_path %]/staff/css/admin.css" />
+[% END %]
+
+<div ng-view></div>
+
+[% END %]

diff --git a/Open-ILS/src/templates/staff/admin/actor/org_unit/t_addresses_tab.tt2 b/Open-ILS/src/templates/staff/admin/actor/org_unit/t_addresses_tab.tt2
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/Open-ILS/src/templates/staff/admin/actor/org_unit/t_hours_tab.tt2 b/Open-ILS/src/templates/staff/admin/actor/org_unit/t_hours_tab.tt2
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/Open-ILS/src/templates/staff/admin/actor/org_unit/t_index.tt2 b/Open-ILS/src/templates/staff/admin/actor/org_unit/t_index.tt2
new file mode 100644 (file)
index 0000000..b45667f
--- /dev/null
+++ b/Open-ILS/src/templates/staff/admin/actor/org_unit/t_index.tt2
@@ -0,0 +1,51 @@
+<div class="container-fluid" style="text-align:center">
+  <div class="alert alert-info alert-less-pad strong-text-2">
+    <span>[% l('Organizational Unit') %]</span>
+  </div>
+</div>
+
+<div class="row">
+    <div class="col-md-3">
+        <treecontrol class="tree-classic" tree-model="treedata" on-selection="showSelected(node)" expanded-nodes="expandedNodes">
+            {{node.shortname}} : {{node.name}} ({{node.children.length}})
+        </treecontrol>
+    </div>
+
+    <div class="col-md-9">
+
+        <span class="strong-text-1">{{selectedNode.name || '&nbsp;'}}</span>
+
+        <ul class="nav nav-tabs">
+          <li ng-class="{active : org_tab == 'main'}">
+            <a ng-click="set_org_tab('main')" >
+                [% l('Main Settings') %]
+            </a>
+          </li>
+          <li ng-class="{active : org_tab == 'hours'}">
+            <a ng-click="set_org_tab('hours')" >
+                [% l('Hours of Operation') %]
+            </a>
+          </li>
+          <li ng-class="{active : org_tab == 'addresses'}">
+            <a ng-click="set_org_tab('addresses')" >
+                [% l('Addresses') %]
+            </a>
+          </li>
+        </ul>
+
+        <div class="tab-content">
+          <div class="tab-pane active">
+            <div ng-show="org_tab == 'main'">
+                [% INCLUDE 'staff/admin/actor/org_unit/t_main_tab.tt2' %]
+            </div>
+            <div ng-show="org_tab == 'hours'">
+                <span>hours tab</span>
+            </div>
+            <div ng-show="org_tab == 'addresses'">
+                <span>addr tab</span>
+            </div>
+          </div>
+        </div>
+
+    </div>
+</div>

diff --git a/Open-ILS/src/templates/staff/admin/actor/org_unit/t_main_tab.tt2 b/Open-ILS/src/templates/staff/admin/actor/org_unit/t_main_tab.tt2
new file mode 100644 (file)
index 0000000..11134b7
--- /dev/null
+++ b/Open-ILS/src/templates/staff/admin/actor/org_unit/t_main_tab.tt2
@@ -0,0 +1,46 @@
+<div id="edit-org-container" class="container">
+
+<form name="orgForm" novalidate class="simple-form">
+    <div class="row">
+        <div class="col-md-2">
+            <span>[% l('Name') %]</span>
+        </div>
+        <div class="col-md-9">
+            <input class="form-control" type="text" ng-model="org.name" required ng-disabled="!org"/>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-2">
+            <span>[% l('Short Name') %]</span>
+        </div>
+        <div class="col-md-9">
+            <input class="form-control" type="text" ng-model="org.shortname" required ng-disabled="!org"/>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-2">
+            <span>[% l('Email') %]</span>
+        </div>
+        <div class="col-md-9">
+            <input class="form-control" type="text" ng-model="org.email" ng-disabled="!org"/>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-2">
+            <span>[% l('Phone') %]</span>
+        </div>
+        <div class="col-md-9">
+            <input class="form-control" type="text" ng-model="org.phone" ng-disabled="!org"/>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-3">
+            <button class="form-control" ng-click="reset()">[% l('Reset Form') %]</button>
+            <button class="form-control" ng-click="update()" ng-disabled="orgForm.$invalid">[% l('Update Org') %]</button>
+        </div>
+        <div class="col-md-7">
+        </div>
+    </div>
+</form>
+
+</div>

diff --git a/Open-ILS/src/templates/staff/css/admin.css.tt2 b/Open-ILS/src/templates/staff/css/admin.css.tt2
index 0de1df9..80e9ccf 100644 (file)
--- a/Open-ILS/src/templates/staff/css/admin.css.tt2
+++ b/Open-ILS/src/templates/staff/css/admin.css.tt2
@@ -28,3 +28,10 @@
 #auto-print-container .row {
   margin-top: 20px;
 }
+
+#edit-org-container input.ng-invalid-required {
+  background-color: yellow;
+  color: red;
+}
+
+

diff --git a/Open-ILS/web/js/ui/default/staff/admin/actor/org_unit/app.js b/Open-ILS/web/js/ui/default/staff/admin/actor/org_unit/app.js
new file mode 100644 (file)
index 0000000..bab6a63
--- /dev/null
+++ b/Open-ILS/web/js/ui/default/staff/admin/actor/org_unit/app.js
@@ -0,0 +1,87 @@
+angular.module('egOrgUnitApp',
+    ['ngRoute', 'ui.bootstrap', 'treeControl', 'egCoreMod', 'egUiMod'])
+
+.config(function($routeProvider, $locationProvider, $compileProvider) {
+    $locationProvider.html5Mode(true);
+    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob):/); // grid export
+
+    var resolver = {delay :
+        ['egStartup', function(egStartup) {return egStartup.go()}]}
+
+    $routeProvider.when('/admin/actor/org_unit/:org_id', {
+        templateUrl: './admin/actor/org_unit/t_index',
+        controller: 'OrgUnitCtrl',
+        resolve : resolver
+    });
+
+    $routeProvider.when('/admin/actor/org_unit/', {
+        templateUrl: './admin/actor/org_unit/t_index',
+        controller: 'OrgUnitCtrl',
+        resolve : resolver
+    });
+
+    $routeProvider.otherwise({redirectTo : '/admin/actor/org_unit/'});
+})
+
+.controller('OrgUnitCtrl',
+       ['$scope','$q','$routeParams','$window','egCore','egOrg',
+function($scope , $q , $routeParams , $window , egCore , egOrg  ) {
+
+    $scope.update = function() {
+        var new_org = egOrg.get($scope.org.id);
+        new_org.name( $scope.org.name );
+        new_org.shortname( $scope.org.shortname );
+        new_org.email( $scope.org.email );
+        new_org.phone( $scope.org.phone );
+        egCore.pcrud.update(new_org).then(
+            function(res) { // success
+                console.log('handler1');
+                window.handler1 = res;
+            },
+            function(res) { // success
+                console.log('handler2');
+                window.handler2 = res;
+            },
+            function(res) { // error
+                console.log('handler3');
+                window.handler3 = res;
+            }
+        );
+    };
+
+    $scope.reset = function() {
+        $scope.org = angular.copy($scope.selectedNode);
+    };
+
+    $scope.reset();
+
+    // the org tree
+
+    $scope.treedata = [ egCore.idl.toHash( egOrg.tree() ) ];
+    $scope.expandedNodes = [ $scope.treedata[0] ];
+
+    $scope.showSelected = function(sel) {
+        $scope.selectedNode = sel;
+        $scope.org = angular.copy($scope.selectedNode);
+    };
+
+    // the tabs
+    $scope.org_tab = 'main';
+    $scope.set_org_tab = function(tab) {
+        $scope.org_tab = tab;
+
+        switch(tab) {
+
+            case 'main':
+                break;
+
+            case 'hours':
+                break;
+
+            case 'addresses':
+                break;
+        }
+    }
+
+}])
+