release v0.2.0

Author: kikkomep

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "lifemonitor",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "scripts": {
     "start": "node server.js",
     "dev:start": "ng serve",
@@ -32,7 +32,7 @@
     "@angular/platform-browser": "11.2.5",
     "@angular/platform-browser-dynamic": "11.2.5",
     "@angular/router": "11.2.5",
-    "@bity/oauth2-auth-code-pkce": "^2.12.0",
+    "@bity/oauth2-auth-code-pkce": "^2.13.0",
     "@ng-bootstrap/ng-bootstrap": "9.0.2",
     "ansi-html": "~0.0.7",
     "bootstrap": "4.6.0",
@@ -65,7 +65,7 @@
     "husky": "5.1.3",
     "jasmine-core": "~3.9.0",
     "jasmine-spec-reporter": "~6.0.0",
-    "karma": "6.2.0",
+    "karma": "^6.3.17",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "~4.0.1",

package.json

@@ -11,8 +11,15 @@ export class AppComponent {
   title = 'LifeMonitor';
 
   ngAfterViewInit() {
-    $(document).on('mouseover', '[data-toggle="tooltip"]', function () {
-      $(this).tooltip('show');
-    });
+    $(document)
+      .on('mouseover', '[data-toggle="tooltip"]', function () {
+        $(this).tooltip('show');
+      })
+      .on('mouseout', '[data-toggle="tooltip"]', function () {
+        $(this).tooltip('hide');
+      })
+      .on('click', '[data-toggle="tooltip"]', function () {
+        $(this).tooltip('hide');
+      });
   }
 }

src/app/app.component.ts

@@ -42,6 +42,8 @@ import { BlankComponent } from './views/blank/blank.component';
 import { DashboardComponent } from './views/dashboard/dashboard.component';
 import { SuiteComponent } from './views/suite/suite.component';
 import { WorkflowComponent } from './views/workflow/workflow.component';
+import { WorkflowVersionSelectorComponent } from './components/workflow-version-selector/workflow-version-selector.component';
+import { TrimPipe } from './utils/filters/trim.pipe';
 
 
 
@@ -81,11 +83,13 @@ export function initConfigService(appConfig: AppConfigService) {
     ArraySizeFilterPipe,
     SortingFilterPipe,
     SearchBarComponent,
+    TrimPipe,
     LoaderComponent,
     RocrateLogoComponent,
     WorkflowHeaderComponent,
     InputDialogComponent,
     WorkflowUploaderComponent,
+    WorkflowVersionSelectorComponent,
   ],
   imports: [
     FormsModule,
@@ -119,4 +123,4 @@ export function initConfigService(appConfig: AppConfigService) {
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

src/app/app.module.ts

@@ -11,10 +11,14 @@ <h5 class="modal-title" [innerHTML]="title"></h5>
           <span aria-hidden="true">&times;</span>
         </button>
 
-        <div class="text-center p-5 text-primary">
+        <div *ngIf="!iconImage" class="text-center p-5 text-primary">
           <i class="{{iconClass}} {{iconClassSize}}"></i>
         </div>
 
+        <div *ngIf="iconImage" class="text-center p-5 text-primary">
+          <img src="{{iconImage}}" width="{{iconImageSize}}">
+        </div>
+
         <div class="text-center">
           <h2 clas="font-weight-light" [innerHTML]="question"></h2>
           <h6 class="text-muted" [innerHTML]="description"></h6>

src/app/components/input-dialog/input-dialog.component.html

@@ -16,6 +16,8 @@ export class InputDialogComponent implements OnInit {
   @Input() title = null;
   @Input() iconClass = 'far fa-question-circle';
   @Input() iconClassSize = 'fa-7x';
+  @Input() iconImage = null;
+  @Input() iconImageSize = '100px';
   @Input() question = 'Are you sure?';
   @Input() description = 'Would you like to confirm?';
   @Input() confirmText = 'Confirm';
@@ -27,7 +29,7 @@ export class InputDialogComponent implements OnInit {
   // initialize logger
   private logger: Logger = LoggerManager.create('InputDialogComponent');
 
-  constructor(private service: InputDialogService) { }
+  constructor(private service: InputDialogService) {}
 
   ngOnInit(): void {
     $('#' + this.name).on('hide.bs.modal', () => {
@@ -39,6 +41,8 @@ export class InputDialogComponent implements OnInit {
       this.title = config.title || this.title;
       this.iconClass = config.iconClass || this.iconClass;
       this.iconClassSize = config.iconClassSize || this.iconClassSize;
+      this.iconImage = config.iconImage || this.iconImage;
+      this.iconImageSize = config.iconImageSize || this.iconImageSize;
       this.question = config.question || this.question;
       this.description = config.description || this.description;
       this.confirmText = config.confirmText || this.confirmText;

src/app/components/input-dialog/input-dialog.component.ts

@@ -1,17 +1,5 @@
-/* Spinner */
 #loader {
-  bottom: 0;
-  height: 175px;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 175px;
-}
-
-#loader {
-  bottom: 0;
+  bottom: 400px;
   height: 175px;
   left: 0;
   margin: auto;

src/app/components/loader/loader.component.scss

@@ -1,4 +1,4 @@
-<div *ngIf="availableForDownload === true">
+<div *ngIf="availableForDownload === true" style="margin-top: 40%;">
   <div class="d-none d-sm-none d-md-none d-lg-block">
     <a [routerLink]="" (click)="downloadROCrate()" class="hvr-float-shadow" data-toggle="tooltip" data-placement="left"
       data-html="true"
@@ -20,7 +20,7 @@
   </div>
 </div>
 
-<div *ngIf="availableForDownload === false">
+<div *ngIf="availableForDownload === false" style="margin-top: 40%;">
   <div class="d-none d-sm-none d-md-none d-lg-block">
     <div class="text-muted text-center disabled" data-toggle="tooltip" data-html="true" data-placement="left"
       title="Download not available" style="min-width: 175px; max-width: 175px;">

src/app/components/rocrate-logo/rocrate-logo.component.html

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Workflow } from 'src/app/models/workflow.model';
+import { WorkflowVersion } from 'src/app/models/workflow.model';
 import { Logger, LoggerManager } from 'src/app/utils/logging';
 import { AppService } from 'src/app/utils/services/app.service';
 
@@ -11,7 +11,7 @@ declare var $: any;
   styleUrls: ['./rocrate-logo.component.scss'],
 })
 export class RocrateLogoComponent implements OnInit {
-  @Input() workflow: Workflow;
+  @Input() workflow: WorkflowVersion;
 
   private _availableForDownload: boolean;
 

src/app/components/rocrate-logo/rocrate-logo.component.ts

@@ -4,17 +4,25 @@
   </div>
   <input #searchInputText (keyup.enter)="onKeyUpEnter()"
     type="text" [(ngModel)]="actualFilterValue" class="form-control font-weight-light"
-    placeholder="Press ENTER to list all {{elementType}} or search by UUID or Name" aria-label="Username" aria-describedby="basic-addon1" />
+    placeholder="Search for {{elementType}}" aria-label="search" aria-describedby="basic-addon1" 
+    data-toggle="tooltip" data-placement="bottom" data-html="true"
+    title="Press ENTER to list all {{elementType}} or search {{elementType}} by UUID or Name"/>
 
   <div class="input-group-append">
     <button *ngIf="actualFilterValue || searchAll" class="btn btn-outline-secondary border-right-0" type="button" (click)="reset()"
-      aria-haspopup="true" aria-expanded="false">
+      aria-haspopup="true" aria-expanded="false"
+      data-toggle="tooltip" data-placement="top" data-html="true"
+      title="Clear search for {{elementType}}">
       <i class="fas fa-window-close"></i>
     </button>
     <button class="btn btn-outline-secondary border-left-0" type="button" (click)="changeSortingOrder()"
       aria-haspopup="true" aria-expanded="false">
-      <i *ngIf="actualSortingOrder == 'asc'" class="fas fa-sort-amount-up"></i>
-      <i *ngIf="actualSortingOrder == 'desc'" class="fas fa-sort-amount-down"></i>
+      <i *ngIf="actualSortingOrder == 'asc'" class="fas fa-sort-amount-up"
+         data-toggle="tooltip" data-placement="top" data-html="true"
+         title="Sort {{elementType}} in ascending order"></i>
+      <i *ngIf="actualSortingOrder == 'desc'" class="fas fa-sort-amount-down"
+         data-toggle="tooltip" data-placement="top" data-html="true"
+         title="Sort {{elementType}} in descending order"></i>
     </button>
     <!-- <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="false">