support for UI customization

abstratt/kirra-angular##47
abstratt · Jun 14, 2017 · 62d5afb · 62d5afb
1 parent fd2dcec
commit 62d5afb
Show file tree

Hide file tree

Showing 30 changed files with 762 additions and 316 deletions.
diff --git a/images/empty-basket.png b/images/empty-basket.png
diff --git a/images/empty-cart-bg.jpg b/images/empty-cart-bg.jpg
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Loading Kirra application...</title>
-  <script src="application.js"></script>
   <script src="lib/moment/moment.min.js"></script>
   <script src="lib/angular/angular.js"></script>
   <script src="lib/angular-ui-router/angular-ui-router.min.js"></script>

diff --git a/js/kirra-ng.js b/js/kirra-ng.js
diff --git a/templates/account-menu.html b/templates/account-menu.html
@@ -0,0 +1,13 @@
+<div class="nav navbar-nav navbar-right">
+    <p class="navbar-btn">
+        <a ng-if="currentUser" ui-sref="{{kirraNG.toState(currentUser.typeRef.fullName, 'show')}}({ objectId: '{{currentUser.objectId}}' })">User: {{currentUser.values.username}}</a>
+        <a class="btn btn-default btn-sm" ng-click="login()" ng-if="!currentUser">
+            <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
+            Login
+        </a>
+        <a class="btn btn-default btn-sm" ng-click="logout()" ng-if="currentUser">
+            <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
+            Logout
+        </a>
+    </p>
+</div>
diff --git a/templates/dashboard.html b/templates/dashboard.html
@@ -17,16 +17,13 @@ <h3 class="page-header">Dashboard</h3>
                     <div class="panel panel-primary">
                         <div class="panel-heading">
                             <div class="row">
-                                <div class="col-xs-12">
-                                    <i class="fa fa-comments fa-5x">{{metric.query.description}}</i>
-                                </div>
                                 <div class="col-xs-12 text-right">
                                     <div class="huge" ng-if="metric.query.typeRef.fullName=='mdd_types.Boolean'">
                                         <span ng-if="metric.result" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
 	                                    <div ng-if="!metric.result">-</div>
                                     </div>
                                     <div class="huge" ng-if="!(metric.query.typeRef.fullName=='mdd_types.Boolean')">{{metric.result}}</div>
-                                    <div>{{metric.query.label}}</div>
+                                    <div title="{{metric.query.description}}">{{metric.query.label}}</div>
                                 </div>
                             </div>
                         </div>

diff --git a/templates/edit-instance.html b/templates/edit-instance.html
@@ -1,4 +1,3 @@
-<div ng-include src="'templates/header.html'"></div>
 <div class="container-fluid" ng-show="propertyValues || linkValues">
 
 <div class="row">

diff --git a/templates/embedded-instance.html b/templates/embedded-instance.html
@@ -1,4 +1,4 @@
-<div ng-repeat="fieldData in embeddedFieldValues track by $index" ng-init="field = embeddedViewFields[$index]" class="form-horizontal">     
+<div ng-repeat="fieldData in embeddedFieldValues track by $index" ng-init="field = embeddedViewFields[$index]" class="form-horizontal">
     <div ng-init="fieldName = field.name; typeName = field.typeRef.typeName; typeKind = field.typeRef.kind;" class="row">
         <div class="span4 display-values" class="form-group">
             <div class="col-sm-4">
@@ -10,41 +10,4 @@
             </div>
         </div>
     </div>
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<!--
-<div ng-show="child" class="row">
-		<div ng-repeat="(fieldName, fieldData) in childFieldValues" ng-init="field = childFields[fieldName] || childRelationships[fieldName]" ng-show="field.style != 'PARENT'">
-		    <strong class="display-label col-sm-4">{{field.label}}:</strong>
-			<div class="col-sm-8 display-values">
-				<ka-data slot="field" slot-data="fieldData"></ka-data>
-			</div>
-		</div>
-        <div class="col-sm-2">
-            <a ng-if="edge.relationship.editable" ng-click="unlink(edge.relationship, child.raw.typeRef.fullName, child.raw.objectId)">
-                <span class="glyphicon glyphicon-remove"></span>
-            </a>
-            <a ng-if="edge.relationship.editable" ui-sref="{{kirraNG.toState(edge.relatedEntity.fullName, 'edit')}}({ objectId: '{{child.raw.objectId}}' })">
-                <span class="glyphicon glyphicon-edit"></span>
-            </a>
-            <a ng-if="edge.relatedEntity.topLevel" ui-sref="{{kirraNG.toState(edge.relatedEntity.fullName, 'show')}}({ objectId: '{{child.raw.objectId}}' })">
-                <span class="glyphicon glyphicon-link"></span>
-            </a>
-        </div>
-		
-</div>
--->
+</div>
diff --git a/templates/entity-footer.html b/templates/entity-footer.html
diff --git a/templates/entity-header.html b/templates/entity-header.html
diff --git a/templates/execute-action.html b/templates/execute-action.html
@@ -1,4 +1,3 @@
-<div ng-include src="'templates/header.html'"></div>
 <div class="container-fluid">
 <div class="row">
 <div class="col-sm-8">

diff --git a/templates/footer.html b/templates/footer.html
diff --git a/templates/header.html b/templates/header.html
@@ -0,0 +1,33 @@
+<nav class="navbar navbar-default" ng-controller="KirraRepositoryCtrl">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            </button>
+            <div ng-if="canChangeTheme" class="btn-group-vertical navbar-btn" dropdown role="group">
+                <button type="button" class="btn btn-default btn-sm  btn-block" dropdown-toggle ng-disabled="disabled">
+                Theme
+                <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                    <li ng-repeat="theme in ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'lumen', 'paper', 'readable', 'sandstone', 'simplex', 'slate', 'solar', 'spacelab', 'superhero', 'united', 'yeti']" role="menuitem"><a ng-click="changeTheme(theme)">{{theme}}</a></li>
+                </ul>
+            </div>
+
+            <a ng-if="!applicationLogo" class="navbar-brand" href="{{applicationUrl}}">{{applicationLabel}}</a>
+            <a ng-if="applicationLogo" class="navbar-brand" href="{{applicationUrl}}">
+                <img data-ng-src="data:image/png;base64,{{applicationLogo}}" height="35"/>
+            </a>
+        </div>
+        <div class="navbar-collapse collapse" id="navbar-collapse-1">
+            <div ng-include src="getTemplateUrl('menu')">
+            </div>
+            <div ng-include src="getTemplateUrl('account-menu')">
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/templates/instance-list.html b/templates/instance-list.html
@@ -1,13 +1,16 @@
-<div class="container-fluid" ng-if="instances != undefined">
-    <div ng-include src="getTemplateUrl('header', [ entity.name ])"></div>
+<div class="container" ng-if="instances != undefined">
+    <div ng-include src="getTemplateUrl('entity-header', [ entity.name ])"></div>
     <div class="row">
         <div class="col-sm-10">
             <legend>{{entity.label}}: {{finder ? finder.label : 'All'}}</legend>
         </div>
 	</div>
     <div class="row">
-    	<div class="col-sm-5">
-    		<div class="row"  ng-if="queries.length">    	
+    	<div class="col-sm-10">
+    		<div class="row" >    	
+                <div class="btn-group" role="group">
+                    <button ng-if="entity.instantiable && entityCapabilities.entity.indexOf('Create') >= 0" type="button" class="btn btn-default" ng-click="create()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create</button>
+                </div>
 	            <div class="btn-group" role="group">
 	                <button ng-if="entityCapabilities.entity.indexOf('List') >= 0" type="button" class="btn {{finder ? 'btn-default' : 'btn-primary'}}" ng-click="unfiltered()">
 	                All
@@ -16,28 +19,20 @@
 	                {{query.label}}
 	                </button>
 	            </div>
-			</div>
-		    <div class="row">
-		    	<p></p>
-		    </div>
-    		<div class="row" ng-if="entityActions.length">    	
 	            <div class="btn-group" role="group">
-	                <button ng-if="entity.instantiable && entityCapabilities.entity.indexOf('Create') >= 0" type="button" class="btn btn-default" ng-click="create()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create</button>
 	                <button ng-repeat="action in entityActions" ng-if="entityCapabilities.actions[action.name].indexOf('StaticCall') >= 0" type="button" class="btn btn-default" ng-click="performEntityAction(action)">
 	                {{action.label}}
 	                </button>
 	            </div>
-	        </div>
-        </div>
-        <div class="col-sm-5">
-			<div class="row">        
 	            <div class="btn-group" role="group" ng-if="queries.length">    
 	                <button ng-repeat="query in queries" ng-if="query.parameters.length > 0 && entityCapabilities.queries[query.name].indexOf('StaticCall') >= 0" type="button" class="btn {{finder == query ? 'btn-primary' : 'btn-default'}}" ng-click="performQuery(query)">
 	                {{query.label}}
 	                </button>
 	            </div>
 			</div>	            
-			<div class="row" ng-if="finder && finder.parameters.length">        
+        </div>        
+        <div class="col-sm-12 col-md-4" ng-if="finder && finder.parameters.length">
+			<div class="row">        
 	    	    <div ng-include src="getTemplateUrl('operation-form', [ entity.name, finder.name ])"></div>
 	    	    <button type="button" class="btn btn-default" ng-click="applyFilter()">Apply</button>
 			</div>    	    

diff --git a/templates/instance-table-desktop.html b/templates/instance-table-desktop.html
@@ -25,21 +25,21 @@
                         <span ng-if="row.actionEnablement.useDropdown" class="caret"></span>
                         </button>
                         <ul ng-if="row.actionEnablement.useDropdown" class="dropdown-menu" role="menu">
-                            <li ng-repeat="action in row.actionEnablement.enabledActions" role="menuitem"><a ng-click="performInstanceActionOnRow(row, action)">{{action.label}}</a></li>
+                            <li ng-repeat="action in row.actionEnablement.enabledActions" role="menuitem"><a ng-click="performInstanceActionOnRow(row.raw, action)">{{action.label}}</a></li>
                         </ul>
                     </div>
                     <!--
                     <div class="visible-md visible-sm visible-xs">
                         <a ng-if="!row.actionEnablement.enabledActions.length" ng-click="updateActionEnablement(row)">Actions</a>
                         <div ng-repeat="action in row.actionEnablement.enabledActions" >
-                            <a ng-click="performInstanceActionOnRow(row, action)">{{action.label}}</a>
+                            <a ng-click="performInstanceActionOnRow(row.raw, action)">{{action.label}}</a>
                         </div>
                     </div>
                     -->
                 </td>
                 <td ng-if="actions.length > 0 && (inlineActions || actions.length < 2)"s>
                     <div ng-repeat="action in actions" >
-                        <button class="btn-sm btn-default" ng-click="performInstanceActionOnRow(row, action)">{{action.label}}</button>
+                        <button class="btn-sm btn-default" ng-click="performInstanceActionOnRow(row.raw, action)">{{action.label}}</button>
                     </div>
                 </td>
 

diff --git a/templates/instance-table-mobile.html b/templates/instance-table-mobile.html
@@ -31,14 +31,14 @@
                             <span ng-if="row.actionEnablement.useDropdown" class="caret"></span>
                             </button>
                             <ul ng-if="row.actionEnablement.useDropdown" class="dropdown-menu" role="menu">
-                                <li ng-repeat="action in row.actionEnablement.enabledActions" role="menuitem"><a ng-click="performInstanceActionOnRow(row, action)">{{action.label}}</a></li>
+                                <li ng-repeat="action in row.actionEnablement.enabledActions" role="menuitem"><a ng-click="performInstanceActionOnRow(row.raw, action)">{{action.label}}</a></li>
                             </ul>
                         </div>
                     </td>
                 </tr>
                 <tr ng-if="actions.length > 0 && actions.length <= 3">
                     <td ng-repeat="action in actions">
-                        <button class="btn-sm btn-default" ng-click="performInstanceActionOnRow(row, action)">{{action.label}}</button>
+                        <button class="btn-sm btn-default" ng-click="performInstanceActionOnRow(row.raw, action)">{{action.label}}</button>
                     </td>
                 </tr>
 

diff --git a/templates/instance-table-with-image.html b/templates/instance-table-with-image.html
@@ -15,7 +15,7 @@ <h3 ng-repeat="mnemonicProperty in tableProperties | filter: !{ essential: false
                 </p>
                 <div class="row">
                     <div class="col-md-6 col-sm-6" ng-repeat="action in actions">
-                        <button class="btn btn-success right" ng-click="performInstanceActionOnRow(row, action)">{{action.label}}</button>
+                        <button class="btn btn-success right" ng-click="performInstanceActionOnRow(row.raw, action)">{{action.label}}</button>
                     </div>
                 </div>
             </span>

diff --git a/templates/ka-data-missing-slot.html b/templates/ka-data-missing-slot.html
@@ -0,0 +1 @@
+<div>?</div>
diff --git a/templates/ka-data.html b/templates/ka-data.html
@@ -7,7 +7,7 @@
 	</div>
 </div>
 
-<div ng-if="!slot.mnemonic && slotData !== undefined" >
+<div ng-if="!slot.mnemonic && slotData !== undefined && slotTypeName">
 	<div ng-if="slotTypeName != 'Double' && slotTypeName != 'Boolean' && slotTypeName != 'Time' && slotTypeName != 'Date' && slotTypeName != 'DateTime' && slotTypeName != 'Geolocation' && slotTypeKind != 'Entity'  && slotTypeKind != 'Blob' && slotTypeKind != 'Enumeration'">
 	    {{slotData}}
 	</div>
@@ -35,22 +35,20 @@
 	<div ng-if="slotTypeKind == 'Enumeration'">
 		{{slot.enumerationLiterals[slotData]}}
 	</div>
-	<!--
-	<div ng-if="slotTypeName == 'Geolocation'">
-    	<iframe
-          width="400"
-          height="300"
-          frameborder="0" style="border:0"
-          src="{{generateMapURL(slot, slotData)}}" allowfullscreen>
-        </iframe>
-	</div>
-	-->
 	<div ng-if="slotTypeKind == 'Blob' && (table || (grid && slotTypeName != 'Picture'))">
     	<span ng-if="slotTypeName != 'Picture' || !slot.required" class="glyphicon glyphicon-ok" aria-hidden="true"></span>
     	<img ng-if="slot.required && slotTypeName == 'Picture'" ng-src="{{getAttachmentDownloadUri(slot, slotData)}}" class="img-thumbnail">
     </div>
     <div ng-if="slotTypeName == 'Picture' && grid">
-        <img style="max-width: 320px; min-width: 320px; max-height: 280px; min-height: 280px;" ng-src="{{getAttachmentDownloadUri(slot, slotData)}}" class="img-thumbnail">
+        <img ng-if="!size|| size == 'default'" 
+            style="max-width: 320px; min-width: 320px; max-height: 280px; min-height: 280px;" 
+            ng-src="{{getAttachmentDownloadUri(slot, slotData)}}" class="img-thumbnail">
+        <img ng-if="size == 'small'" 
+            style="max-width: 160px; min-width: 160px; max-height: 140px; min-height: 140px;" 
+            ng-src="{{getAttachmentDownloadUri(slot, slotData)}}" class="img-thumbnail">
+        <img ng-if="size == 'tiny'" 
+            style="max-width: 80px; min-width: 80px; max-height: 70px; min-height: 70px;" 
+            ng-src="{{getAttachmentDownloadUri(slot, slotData)}}" class="img-thumbnail">
     </div>
     <div ng-if="slotTypeKind == 'Blob' && !table && !grid">
         <div  class="col-sm-12">
@@ -77,20 +75,8 @@
     <img src="https://placeholdit.imgix.net/~text?txtsize=32&txt=Missing%20picture" height="150">
 </div>
 
-
-
-
 <div ng-if="slotTypeName == 'Geolocation' && !table" id="{{slot.name}}" class="panel panel-default">
   <div class="panel-body">
-    <!--
-    <img 
-        id="{{slot.name}}StaticMap"
-        class="img-thumbnail"
-        ng-if="slotData"
-        ng-src="{{getMapAsImageURL(slot,slotData)}}" 
-        width="300"
-        height="300">
-    -->    
     <input id="{{slot.name}}MapInput" class="form-control" type="text" placeholder="Search Box">
     <div id="{{slot.name}}LiveMap" style="height: 400px; width: 100%;"></div>
     <div id="{{slot.name}}MapInfoPane">

diff --git a/templates/ka-edit.html b/templates/ka-edit.html
@@ -20,12 +20,14 @@
         off="No">
     </toggle>                    
     <div id="{{slot.name}}" 
-        ng-if="slotTypeKind == 'Primitive' && slotTypeName == 'Date'" 
+        ng-if="slotTypeKind == 'Primitive' && (slotTypeName == 'Date' || slotTypeName == 'DateTime')" 
         ng-init="slot.pickerStatus = { opened: true }">
         <p class="input-group">
             <input type="text" class="form-control" is-open="pickerStatus[slot.name]" datepicker-popup="yyyy/MM/dd" id="{{slot.name}}" ng-model="values[slot.name]">
             <span class="input-group-btn">
-                <button type="button" class="btn btn-default" ng-click="togglePickerStatus($event, slot.name)"><i class="glyphicon glyphicon-calendar"></i></button>
+                <button type="button" class="btn btn-default" ng-click="togglePickerStatus($event)">
+                    <i class="glyphicon glyphicon-calendar"></i>
+                </button>
             </span>
         </p>
     </div>

diff --git a/templates/login.html b/templates/login.html
@@ -1,15 +1,15 @@
-<div class="container" ng-controller="KirraRepositoryCtrl">
-    <div class="row"><div class="col-sm-3"><p></p></div></div>
+<div class="container-fluid" ng-controller="KirraRepositoryCtrl">
+    <div class="row"><div class="col-sm-8 col-sm-offset-2"><p></p></div></div>
 	<div class="row">
-	   <div class="col-sm-3" align="center">
+	   <div class="col-sm-8 col-sm-offset-2" align="center">
             <h2 ng-if="!applicationLogo">{{applicationLabel}}</h2>
             <img ng-if="applicationLogo" data-ng-src="data:image/png;base64,{{applicationLogo}}" height="35"/>
        </div>
     </div>
-    <div class="row"><div class="col-sm-3"><p></p></div></div>
+    <div class="row"><div class="col-sm-8 col-sm-offset-2"><p></p></div></div>
     <div class="row">
 
-		<div class="col-sm-3">
+		<div class="col-sm-8 col-sm-offset-2">
 
         <legend>Please sign in</legend>
 
@@ -25,14 +25,14 @@ <h2 ng-if="!applicationLogo">{{applicationLabel}}</h2>
 		</div>
 	</div>
 
-    <div class="row"><div class="col-sm-3"><p></p></div></div>
+    <div class="row"><div class="col-sm-8 col-sm-offset-2"><p></p></div></div>
 
     <div class="row" ng-repeat="entity in selfServiceRoleEntities">
-        <div class="col-sm-3">
+        <div class="col-sm-8 col-sm-offset-2">
             <p>Register as <a ng-click="registerAs(entity)">{{entity.label}}    </a></p>
         </div>
     </div>
 
-	<div class="row"><div class="col-sm-3"><p></p></div></div>
+	<div class="row"><div class="col-sm-8 col-sm-offset-2"><p></p></div></div>
 
 </div>      
diff --git a/templates/main.html b/templates/main.html
@@ -1,13 +1,18 @@
     <div>
-        <div ng-include src="getTemplateUrl('nav-bar')"></div>
+        <div ng-include src="getTemplateUrl('header')"></div>
     </div>
-    
+
     <alert ng-repeat="alert in alerts" type="{{alert.type || 'error'}}" close="closeAlert($index)" dismiss-on-timeout="5000" ng-cloak>
     {{alert.msg}}
     </alert>
 
 
     <div ui-view>
     </div>
+
+    <div>
+        <div ng-include src="getTemplateUrl('footer')"></div>
+    </div>
+
 
 
diff --git a/templates/menu.html b/templates/menu.html
@@ -0,0 +1,5 @@
+<ul class="nav navbar-nav">
+    <li ng-repeat="entity in entities" ng-if="!entity.forbidden && entity.concrete && entity.topLevel" class="divider-vertical">
+        <a ui-sref="{{kirraNG.toState(entity.fullName, 'list')}}">{{entity.label}}</a>
+    </li>
+</ul>