forms-angular · mchapman · Sep 8, 2019 · Aug 28, 2019 · Sep 8, 2019 · Sep 8, 2019
diff --git a/src/client/index.d.ts b/src/client/index.d.ts
@@ -283,6 +283,7 @@ declare module fng {
     formName: string;
     alertTitle: any;
     errorMessage: any;
+    errorHideTimer: number;
     save: any;
     newRecord: boolean;
     initialiseNewRecord?: any;
@@ -334,7 +335,8 @@ declare module fng {
     generateNewUrl: any;
     scrollTheList: any;
     getListData: any;
-    dismissError: any;
+    dismissError: () => void;
+    stickError: () => void;
     handleHttpError: (response: any) => void;
     dropConversionWatcher: () => void;
   }

diff --git a/src/client/js/controllers/nav.ts b/src/client/js/controllers/nav.ts
@@ -98,32 +98,36 @@ module fng.controllers {
     });
 
     $scope.doClick = function (index, event) {
-      var option = angular.element(event.target);
-      var item = $scope.items[index];
+      const option = angular.element(event.target);
+      const item = $scope.items[index];
       if (item.divider || option.parent().hasClass('disabled')) {
         event.preventDefault();
       } else if (item.broadcast) {
         $scope.$broadcast(item.broadcast);
       } else {
         // Performance optimization: http://jsperf.com/apply-vs-call-vs-invoke
-        var args = item.args || [],
-          fn = item.fn;
-        switch (args.length) {
-          case  0:
-            fn();
-            break;
-          case  1:
-            fn(args[0]);
-            break;
-          case  2:
-            fn(args[0], args[1]);
-            break;
-          case  3:
-            fn(args[0], args[1], args[2]);
-            break;
-          case  4:
-            fn(args[0], args[1], args[2], args[3]);
-            break;
+        const args = item.args || [];
+        const fn = item.fn;
+        if (typeof fn === "function") {
+          switch (args.length) {
+            case  0:
+              fn();
+              break;
+            case  1:
+              fn(args[0]);
+              break;
+            case  2:
+              fn(args[0], args[1]);
+              break;
+            case  3:
+              fn(args[0], args[1], args[2]);
+              break;
+            case  4:
+              fn(args[0], args[1], args[2], args[3]);
+              break;
+          }
+        } else if (fn) {
+          throw new Error("Incorrect menu setup")
         }
       }
     };

diff --git a/src/client/js/directives/dropdown.ts b/src/client/js/directives/dropdown.ts
@@ -13,7 +13,7 @@ module fng.directives {
         ' </a>' +
         ' <ul class="uib-dropdown-menu dropdown-menu">' +
         '  <li ng-repeat="choice in items" ng-hide="isHidden($index)" ng-class="dropdownClass($index)">' +
-        '   <a ng-show="choice.text" class="dropdown-option" ng-href="{{choice.url}}" ng-click="doClick($index, $event)">' +
+        '   <a ng-show="choice.text" class="dropdown-option" ng-href="{{choice.url || choice.urlFunc()}}" ng-click="doClick($index, $event)">' +
         '    {{choice.text}}' +
         '   </a>' +
         '  </li>' +

diff --git a/src/client/js/directives/error-display.ts b/src/client/js/directives/error-display.ts
@@ -3,16 +3,10 @@
 module fng.directives {
 
   /*@ngInject*/
-  export function errorDisplay() : angular.IDirective {
+  export function errorDisplay(cssFrameworkService) : angular.IDirective {
       return {
         restrict: 'E',
-        template: '<div id="display-error" ng-show="errorMessage" ng-class="css(\'rowFluid\')">' +
-                  '  <div class="alert alert-error col-lg-offset-3 offset3 col-lg-6 col-xs-12 span6 alert-warning alert-dismissable">' +
-                  '    <button type="button" class="close" ng-click="dismissError()">×</button>' +
-                  '    <h4>{{alertTitle}}</h4>' +
-                  '    <div ng-bind-html="errorMessage"></div>' +
-                  '  </div>' +
-                  '</div>'
+        templateUrl: 'error-display-' + cssFrameworkService.framework() + '.html'
       };
     }
 }
diff --git a/src/client/js/services/record-handler.ts b/src/client/js/services/record-handler.ts
@@ -905,13 +905,21 @@ module fng.services {
               $scope.errorMessage = error;
             }
           }
+          $scope.errorHideTimer = window.setTimeout(function() {
+            $scope.dismissError();
+            $scope.$digest();
+          }, 2000 + (1000 * ($scope.alertTitle + $scope.errorMessage).length / 40));
         };
 
-        $scope.dismissError = function () {
+        $scope.dismissError = function(fade = false) {
           delete $scope.errorMessage;
           delete $scope.alertTitle;
         };
 
+        $scope.stickError = function() {
+          clearTimeout($scope.errorHideTimer);
+        };
+
         $scope.prepareForSave = function(cb: (error: string, dataToSave?: any) => void): void {
           //Convert the lookup values into ids
           let dataToSave = recordHandlerInstance.convertToMongoModel($scope.formSchema, angular.copy($scope.record), 0, $scope);

diff --git a/src/client/less/forms-angular-bs-common.less b/src/client/less/forms-angular-bs-common.less
@@ -210,3 +210,16 @@ button#saveButton[disabled]:hover + #why-disabled.showwhy {
   font-weight: normal;
   top: 22px;
 }
+
+#display-error {
+  transition: opacity .5s ease-in-out;
+  position: fixed;
+  top: 60px;
+  width: 100%;
+}
+
+input[type="checkbox"].ng-invalid::after {
+  content: "Invalid";
+  color: rgba(255, 0, 0, 0.6);
+  padding-left: 1em;
+}
diff --git a/src/client/template/base-analysis.html b/src/client/template/base-analysis.html
@@ -1,4 +1,5 @@
 <div ng-controller="AnalysisCtrl">
+  <error-display></error-display>
   <div class="container-fluid page-header report-header">
     <div ng-class="css('rowFluid')">
       <div class="header-lhs col-xs-7 span7">
@@ -10,7 +11,6 @@ <h1>{{ reportSchema.title }}</h1>
     </div>
   </div>
   <div class="container-fluid page-body report-body">
-    <error-display></error-display>
     <div class="row-fluid">
       <div class="gridStyle" ui-grid="gridOptions" ui-grid-selection></div>
     </div>

diff --git a/src/client/template/base-edit.html b/src/client/template/base-edit.html
@@ -1,4 +1,5 @@
 <div ng-controller="BaseCtrl">
+    <error-display></error-display>
     <div ng-class="css('rowFluid')" class="page-header edit-header">
         <div class="header-lhs col-sm-8 span8">
             <h4>{{modelNameDisplay}} :
@@ -10,7 +11,6 @@ <h4>{{modelNameDisplay}} :
         </div>
     </div>
     <div class="container-fluid page-body edit-body">
-        <error-display></error-display>
         <form-input name="baseForm" schema="baseSchema()" formstyle="compact"></form-input>
     </div>
     <!--{{ formSchema | json }}-->

diff --git a/src/client/template/base-list-view.html b/src/client/template/base-list-view.html
@@ -1,11 +1,11 @@
 <div ng-controller="BaseCtrl">
+    <error-display></error-display>
     <div ng-class="css('rowFluid')" class="page-header list-header">
         <div class="header-lhs col-sm-8 span8">
             <h1>{{modelNameDisplay}}</h1>
         </div>
     </div>
     <div class="page-body list-body">
-        <error-display></error-display>
         <div ng-class="css('rowFluid')" infinite-scroll="scrollTheList()">
             <a ng-repeat="record in recordList" ng-href="{{generateViewUrl(record)}}">
                 <div class="list-item">

diff --git a/src/client/template/base-list.html b/src/client/template/base-list.html
@@ -1,4 +1,5 @@
 <div ng-controller="BaseCtrl">
+    <error-display></error-display>
     <div ng-class="css('rowFluid')" class="page-header list-header">
         <div class="header-lhs col-sm-8 span8">
             <h1>{{modelNameDisplay}}</h1>
@@ -8,7 +9,6 @@ <h1>{{modelNameDisplay}}</h1>
         </div>
     </div>
     <div class="page-body list-body">
-        <error-display></error-display>
         <div ng-class="css('rowFluid')" infinite-scroll="scrollTheList()">
             <a ng-repeat="record in recordList" ng-href="{{generateEditUrl(record)}}">
                 <div class="list-item">

diff --git a/src/client/template/base-view.html b/src/client/template/base-view.html
@@ -1,4 +1,5 @@
 <div ng-controller="BaseCtrl">
+    <error-display></error-display>
     <div ng-class="css('rowFluid')" class="page-header edit-header">
         <div class="header-lhs col-sm-8 span8">
             <h4>{{modelNameDisplay}} :
@@ -7,7 +8,6 @@ <h4>{{modelNameDisplay}} :
         </div>
     </div>
     <div class="container-fluid page-body edit-body">
-        <error-display></error-display>
         <form-input name="baseForm" schema="baseSchema()" formstyle="compact" viewform="true"></form-input>
     </div>
 </div>
diff --git a/src/client/template/error-display-bs2.html b/src/client/template/error-display-bs2.html
@@ -0,0 +1,8 @@
+<div id="display-error" ng-style="{opacity : errorMessage ? '1' : '0', 'z-index' : errorMessage ? '130' : '0'}"  class="row-fluid">
+    <div class="alert alert-error offset1 span10 alert-warning ">
+        <button type="button" class="close" ng-click="dismissError()"><i class="icon-remove"></i></button>
+        <button type="button" class="close" ng-click="stickError()"><i class="icon-stop"></i></button>
+          <h4>{{alertTitle}}</h4>
+          <div ng-bind-html="errorMessage"></div>
+        </div>
+</div>
diff --git a/src/client/template/error-display-bs3.html b/src/client/template/error-display-bs3.html
@@ -0,0 +1,8 @@
+<div id="display-error" ng-style="{opacity : errorMessage ? '1' : '0', 'z-index' : errorMessage ? '130' : '0'}" class="row">
+    <div class="alert col-md-offset-1 col-md-10 alert-warning ">
+        <button type="button" class="close" ng-click="dismissError()"><i class="glyphicon glyphicon-remove"></i></button>
+        <button type="button" class="close" ng-click="stickError()"><i class="glyphicon glyphicon-pushpin"></i></button>
+          <h4>{{alertTitle}}</h4>
+          <div ng-bind-html="errorMessage"></div>
+        </div>
+</div>
diff --git a/website/app/scripts/app.js b/website/app/scripts/app.js
@@ -81,6 +81,7 @@ formsAngular.config(['$locationProvider', 'cssFrameworkServiceProvider', 'routin
 /**
  * The rest of this file is all about testing different frameworks and will almost certainly be of no interest to
  * anyone not working on forms-angular itself
+ * to specify the framework for testing open a new browser tab and enter localhost:9000/#/bs3 (or whichever framework)
  **/
 
 websiteApp.css = {

diff --git a/website/package.json b/website/package.json
@@ -1,7 +1,7 @@
 {
   "name": "website",
   "author": "Mark Chapman <support@forms-angular.org>",
-  "version": "0.12.0-beta.43",
+  "version": "0.12.0-beta.45",
   "description": "The demonstration website for the forms-angular library",
   "repository": {
     "type": "git",
@@ -27,16 +27,16 @@
     "compression": "1.7.4",
     "errorhandler": "1.5.1",
     "express": "4.17.1",
-    "fng-audit": "0.12.0-beta.43",
-    "fng-bootstrap-date": "0.12.0-beta.43",
-    "fng-bootstrap-datetime": "0.12.0-beta.43",
-    "fng-ckeditor": "0.12.0-beta.43",
-    "fng-colour-picker": "^0.12.0-beta.43",
-    "fng-jq-upload": "0.12.0-beta.43",
-    "fng-reports": "^0.12.0-beta.43",
-    "fng-ui-date": "0.12.0-beta.43",
-    "fng-ui-select": "0.12.0-beta.43",
-    "forms-angular": "^0.12.0-beta.43",
+    "fng-audit": "0.12.0-beta.45",
+    "fng-bootstrap-date": "0.12.0-beta.45",
+    "fng-bootstrap-datetime": "0.12.0-beta.45",
+    "fng-ckeditor": "0.12.0-beta.45",
+    "fng-colour-picker": "^0.12.0-beta.45",
+    "fng-jq-upload": "0.12.0-beta.45",
+    "fng-reports": "^0.12.0-beta.45",
+    "fng-ui-date": "0.12.0-beta.45",
+    "fng-ui-select": "0.12.0-beta.45",
+    "forms-angular": "^0.12.0-beta.45",
     "jspdf-autotable": "^3.2.4",
     "lodash": "^4.17.15",
     "method-override": "3.0.0",