Abstract out an expiration status view into its own component

static/js/directives/ui/expiration-status-view/expiration-status-view.component.ts

@@ -0,0 +1,34 @@
+import { Input, Component, Inject } from 'ng-metadata/core';
+import * as moment from "moment";
+
+/**
+ * A component that displays expiration status.
+ */
+@Component({
+  selector: 'expiration-status-view',
+  templateUrl: '/static/js/directives/ui/expiration-status-view/expiration-status-view.component.html',
+})
+export class ExpirationStatusViewComponent {
+  @Input('<') public expirationDate: Date;
+
+  private getExpirationInfo(expirationDate): any {
+    if (!expirationDate) {
+      return '';
+    }
+
+    var expiration_date = moment(expirationDate);
+    if (moment().isAfter(expiration_date)) {
+      return {'className': 'expired', 'icon': 'fa-warning'};
+    }
+
+    if (moment().add(1, 'week').isAfter(expiration_date)) {
+      return {'className': 'critical', 'icon': 'fa-warning'};
+    }
+
+    if (moment().add(1, 'month').isAfter(expiration_date)) {
+      return {'className': 'warning', 'icon': 'fa-warning'};
+    }
+
+    return {'className': 'info', 'icon': 'fa-clock-o'};
+  }
+}