ing

@overflow/shared/ui/component/block-progressbar.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="pending">
+    <p-progressBar mode="indeterminate"></p-progressBar>
+    <p-blockUI [target]="target" [blocked]="pending">
+    </p-blockUI>
+</div>

@overflow/shared/ui/component/block-progressbar.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-block-progressbar',
+  templateUrl: './block-progressbar.component.html',
+})
+export class BlockProgressbarComponent implements OnInit {
+
+  @Input() target: any;
+  @Input() pending: boolean;
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+  }
+}

@overflow/shared/ui/component/error-message.component.html

@@ -0,0 +1 @@
+<p-messages [(value)]="msgs" [closable]="closable"></p-messages>

@overflow/shared/ui/component/error-message.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Message } from 'primeng/primeng';
+
+@Component({
+  selector: 'of-error-message',
+  templateUrl: './error-message.component.html',
+})
+export class ErrorMessageComponent implements OnInit, OnChanges {
+
+  @Input() error: any;
+  @Input() closeAfter: number;
+  @Input() closable: boolean;
+  msgs: Message[] = [];
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['error'].currentValue) {
+      const detail = ' (' + this.error.response.code + ')';
+      this.msgs = [];
+      this.msgs.push({ severity: 'error', summary: 'Sorry. An Error has occurred.', detail: detail });
+      if (this.closeAfter) {
+        setTimeout(() => {
+          this.msgs = [];
+        }, this.closeAfter * 1000);
+      }
+    }
+  }
+}

@overflow/shared/ui/component/index.ts

@@ -0,0 +1,11 @@
+import { BlockProgressbarComponent } from './block-progressbar.component';
+import { KeyValueComponent } from './key-value.component';
+import { ErrorMessageComponent } from './error-message.component';
+import { MessageComponent } from './message.component';
+
+export const COMPONENTS = [
+  BlockProgressbarComponent,
+  KeyValueComponent,
+  MessageComponent,
+  ErrorMessageComponent,
+];

@overflow/shared/ui/component/key-value.component.html

@@ -0,0 +1,7 @@
+<div>
+    <span>{{key}}</span>
+    <a *ngIf="clickable" href="javascript:void(0)" (click)="onClick()">
+        <span>{{value}}</span>
+    </a>
+    <span *ngIf="!clickable">{{value}}</span>
+</div>

@overflow/shared/ui/component/key-value.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'of-key-value',
+  templateUrl: './key-value.component.html'
+})
+export class KeyValueComponent implements OnInit {
+
+  @Input() key: string;
+  @Input() value: string;
+  @Input() clickable = false;
+  @Output() click = new EventEmitter<string>();
+
+  constructor(
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onClick() {
+    this.click.emit(this.value);
+  }
+}

@overflow/shared/ui/component/message.component.html

@@ -0,0 +1 @@
+<p-messages [(value)]="msgs" [closable]="closable"></p-messages>

@overflow/shared/ui/component/message.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Message } from 'primeng/primeng';
+
+@Component({
+  selector: 'of-message',
+  templateUrl: './message.component.html',
+})
+export class MessageComponent implements OnInit, OnChanges {
+
+  @Input() error: any;
+  @Input() closeAfter: number;
+  @Input() closable: boolean;
+  msgs: Message[] = [];
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['error'].currentValue) {
+      const detail = ' (' + this.error.response.code + ')';
+      this.msgs = [];
+      this.msgs.push({ severity: 'error', summary: 'Sorry. An Error has occurred.', detail: detail });
+      if (this.closeAfter) {
+        setTimeout(() => {
+          this.msgs = [];
+        }, this.closeAfter * 1000);
+      }
+    }
+  }
+}