Fix a race condition caused by async template loading (#1160)

designsafe/static/scripts/ng-designsafe/components/index.js

@@ -1,7 +1,9 @@
 import './modals';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import { NotificationBadgeComponent } from './notification-badge/notification-badge.component';
 
 let designsafeComponents = angular.module('designsafe.components', ['designsafe.components.modals']);
 designsafeComponents.component('breadcrumb', BreadcrumbComponent);
+designsafeComponents.component('notificationBadge', NotificationBadgeComponent)
 
 export default designsafeComponents;

designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.html

@@ -0,0 +1,57 @@
+<div id="notification-container" class="dropdown btn btn-link" uib-dropdown auto-close="outsideClick">
+    <a id="dLabel" class="dropdown-toggle" role="button" uib-dropdown-toggle ng-click="list()">
+      <i id="notification_bell" role="none" class="fa fa-bell fa-2x"></i>
+      <span id="notification_badge" class="label label-as-badge" ng-class="data.unread > 0 ? 'label-info' : 'label-default'" title="Notifications">
+        {{data.unread}}
+      </span>
+    </a>
+    <div class="arrow-up"></div>
+    <ul uib-dropdown-menu class="dropdown-menu notifications" aria-labelledby="dLabel">
+      <div class="notification-heading">
+          <h3 class="menu-title">Notifications</h3>
+          <a href="{{data.notificationsurl}}">
+            <h3 class="menu-title pull-right">
+              View all
+              <i class="glyphicon glyphicon-circle-arrow-right"></i>
+            </h3>
+          </a>
+      </div>
+      <li class="divider"></li>
+      <div class="notifications-wrapper">
+        <li ng-repeat="x in data.notifications">
+          <div class="notification-item">
+            <a class="content" href="{{x.action_link}}" ng-attr-target="{{ x.operation === 'web_link' ? '_blank' : undefined }}">
+                <dl class="dl-horizontal">
+                  <dt>{{x.datetime| date:'MMM dd, yyyy'}}<br>
+                      {{x.datetime| date:'h:mm a'}}
+                  </dt>
+                  <dd class="item-info">
+                    <span>{{x.message}}</span>
+                    <div ng-if="x.extra.path" uib-tooltip="{{x.extra.path}}" tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[x.extra.path.length > 44]}}">
+                      <div id="notif-path">
+                        <bdi>{{x.extra.path}}</bdi>
+                      </div>
+                    </div>
+                  </dd>
+                </dl>
+            </a>
+            <div class="notif-close-wrapper">
+              <button type="button" class="notif-close close" aria-label="Close" ng-click="delete(x.pk)">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+        </li>
+        <li ng-if="data.notifications.length == 0">
+          <div class="notification-item">You have no notifications.</div>
+        </li>
+      </div>
+      <div ng-if="data.notifications.length > 0">
+        <li class="divider"></li>
+        <h3 class="clear-notifs" ng-click="delete('all')">
+          Clear all notifications
+        </h3>
+      </div>
+    </ul>
+  </div>
+

designsafe/static/scripts/ng-designsafe/components/notification-badge/notification-badge.component.js

@@ -0,0 +1,7 @@
+import { NotificationBadgeCtrl } from '../../controllers/notifications';
+import NotificationBadgeTemplate from './notification-badge.component.html';
+
+export const NotificationBadgeComponent = {
+    controller: NotificationBadgeCtrl,
+    template: NotificationBadgeTemplate,
+};

designsafe/templates/includes/header.html

@@ -45,9 +45,7 @@
           class="sr-only">API Session Not Available. Click for details.</span></a>
       {% endif %}
     </span>
-    <span ng-controller="NotificationBadgeCtrl" id="id_user_notify"
-      ng-include="'{% static 'scripts/notifications/html/badge.html' %}'">
-    </span>
+   <notification-badge></notification-badge> 
     <div class="btn-group">
       <a href="{% url 'designsafe_dashboard:index' %}" class="btn btn-link-alt">Welcome, {{ user.first_name }}!</a>
       <button type="button" class="btn btn-link-alt dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"