ng-kinintel 0.0.317

package/README.md

@@ -0,0 +1,24 @@
+# NgKinintel
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.11.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ng-kinintel` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-kinintel`.
+> Note: Don't forget to add `--project ng-kinintel` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ng-kinintel` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ng-kinintel`, go to the dist folder `cd dist/ng-kinintel` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ng-kinintel` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ng-kinintel'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-kinintel",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "ng-kinintel",
+  "version": "0.0.317",
+  "peerDependencies": {
+    "@angular/common": "^11.2.11",
+    "@angular/core": "^11.2.11"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

package/src/lib/components/alert-groups/alert-groups.component.html

@@ -0,0 +1,140 @@
+<div class="p-6 bg-white border-b border-gray-200">
+    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+        <div class="flex items-start flex-1">
+            <div class="pt-1.5">
+                <h1 class="text-2xl font-bold text-gray-900">Alert Groups</h1>
+                <p class="text-sm font-medium text-gray-500">
+                    A list of all the alert groups currently available.
+                </p>
+            </div>
+        </div>
+        <div class="mt-6 flex flex-col-reverse justify-stretch">
+            <button type="button" [routerLink]="['/alert-groups', 0]"
+                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary focus:outline-none">
+                Create Alert Group
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="p-4" *ngIf="!alertGroups.length && !loading">
+    <button type="button" [routerLink]="['/alert-groups', 0]"
+            class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none">
+
+        <div class="relative inline-block">
+            <span class="material-symbols-outlined mx-auto text-6xl h-14 w-20 text-gray-300">campaign</span>
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 class="right-0 bottom-0 absolute h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24"
+                 stroke="currentColor" stroke-width="4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+            </svg>
+        </div>
+
+        <span class="mt-2 block text-sm font-medium text-gray-900">Create Alert Group</span>
+    </button>
+</div>
+
+<div class="px-4 sm:px-6 lg:px-8 mt-0">
+    <div class="flex flex-col">
+        <div class="-my-2 -mx-4 sm:-mx-6 lg:-mx-8">
+            <div class="inline-block min-w-full py-2 align-middle">
+                <div class="mt-3 sm:mt-0 flex-1" *ngIf="alertGroups.length">
+                    <label for="mobile-search-candidate" class="sr-only">Search</label>
+                    <div class="flex">
+                        <div class="relative flex-grow focus-within:z-10">
+                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
+                                     viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                    <path fill-rule="evenodd"
+                                          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                                          clip-rule="evenodd"/>
+                                </svg>
+                            </div>
+                            <input type="text" name="mobile-search-candidate" id="mobile-search-candidate"
+                                   class="block w-full rounded-none pl-10 border-t-0 border-l-0 border-gray-300"
+                                   placeholder="Search alert groups"
+                                   (keyup)="searchText.next($event.target.value)">
+                        </div>
+                    </div>
+                </div>
+                <table class="min-w-full border-separate" style="border-spacing: 0" *ngIf="alertGroups.length">
+                    <thead class="bg-gray-100">
+                    <tr>
+                        <th scope="col"
+                            class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                            Name
+                        </th>
+                        <th scope="col"
+                            class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                            Status
+                        </th>
+                        <th scope="col"
+                            class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                            Next Run
+                        </th>
+                        <th scope="col"
+                            class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 backdrop-blur backdrop-filter">
+                            <span class="sr-only">Edit</span>
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody class="bg-white">
+                    <tr *ngFor="let element of alertGroups; let i = index" class="cursor-pointer hover:bg-gray-50">
+                        <td [ngClass]="{'border-b-0': i === alertGroups.length - 1, 'border-b': i !== alertGroups.length - 1}"
+                            class="whitespace-nowrap border-gray-200 py-2 px-4 text-sm font-medium text-gray-900">
+                            {{element.title}}
+                        </td>
+                        <td [ngClass]="{'border-b-0': i === alertGroups.length - 1, 'border-b': i !== alertGroups.length - 1}"
+                            class="whitespace-nowrap border-gray-200 py-2 px-4 text-sm text-gray-900">
+                            {{element.taskStatus}}
+                        </td>
+                        <td [ngClass]="{'border-b-0': i === alertGroups.length - 1, 'border-b': i !== alertGroups.length - 1}"
+                            class="whitespace-nowrap border-gray-200 py-2 px-4 text-sm text-gray-900">
+                            {{moment.unix(element.taskNextStartTime.timestamp).format('DD/MM/YYYY HH:mm')}}
+                        </td>
+                        <td class="relative whitespace-nowrap border-gray-200 py-2 px-4 text-right text-sm"
+                            [ngClass]="{'border-b-0': i === alertGroups.length - 1, 'border-b': i !== alertGroups.length - 1}">
+                            <div class="align-center justify-end">
+                                <button mat-button color="primary" [routerLink]="['/alert-groups', element.id]"> Edit
+                                </button>
+                                <div class="divider"></div>
+                                <div class="divider"></div>
+                                <button color="primary" mat-icon-button [matMenuTriggerFor]="itemMenu">
+                                    <mat-icon>more_vert</mat-icon>
+                                </button>
+                                <mat-menu #itemMenu="matMenu">
+                                    <button mat-menu-item (click)="delete(element.id)">Delete Alert Group</button>
+                                </mat-menu>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="5"
+                            class="border-t bg-gray-50 whitespace-nowrap border-b border-gray-200 py-1 px-4 text-sm font-medium text-gray-900">
+                            <div class="paging-toolbar flex align-center justify-end">
+                                <select [value]="limit.getValue()" (change)="pageSizeChange($event.target.value)"
+                                        class="mr-8 p-1.5">
+                                    <option [value]="1">1</option>
+                                    <option [value]="5">5</option>
+                                    <option [value]="10">10</option>
+                                    <option [value]="25">25</option>
+                                    <option [value]="50">50</option>
+                                    <option [value]="100">100</option>
+                                    <option [value]="250">250</option>
+                                    <option [value]="1000">1000</option>
+                                </select>
+                                <button mat-icon-button class="mr-4" (click)="decreaseOffset()" [disabled]="page <= 1">
+                                    <mat-icon>chevron_left</mat-icon>
+                                </button>
+                                <button mat-icon-button (click)="increaseOffset()" [disabled]="endOfResults">
+                                    <mat-icon>chevron_right</mat-icon>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/alert-groups/alert-groups.component.sass

@@ -0,0 +1,4 @@
+.divider
+    width: 1px
+    height: 17px
+    background-color: #cecece

package/src/lib/components/alert-groups/alert-groups.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertGroupsComponent } from './alert-groups.component';
+
+describe('AlertGroupsComponent', () => {
+  let component: AlertGroupsComponent;
+  let fixture: ComponentFixture<AlertGroupsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlertGroupsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertGroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/alert-groups/alert-groups.component.ts

@@ -0,0 +1,86 @@
+import {Component, OnInit} from '@angular/core';
+import {BehaviorSubject, merge, Subject} from 'rxjs';
+import {debounceTime, map, switchMap} from 'rxjs/operators';
+import {ProjectService} from '../../../lib/services/project.service';
+import {AlertService} from '../../../lib/services/alert.service';
+import moment from 'moment';
+
+@Component({
+    selector: 'ki-alert-groups',
+    templateUrl: './alert-groups.component.html',
+    styleUrls: ['./alert-groups.component.sass']
+})
+export class AlertGroupsComponent implements OnInit {
+
+    public alertGroups: any = [];
+    public searchText = new BehaviorSubject('');
+    public limit = new BehaviorSubject(10);
+    public offset = new BehaviorSubject(0);
+    public projectSub = new Subject();
+    public moment = moment;
+    public page = 1;
+    public endOfResults = false;
+    public loading = true;
+
+    private reload = new Subject();
+
+    constructor(private projectService: ProjectService,
+                private alertService: AlertService) {
+
+    }
+
+    ngOnInit(): void {
+        if (this.projectService) {
+            this.projectSub = this.projectService.activeProject;
+        }
+
+        merge(this.searchText, this.limit, this.offset, this.projectSub, this.reload)
+            .pipe(
+                debounceTime(300),
+                // distinctUntilChanged(),
+                switchMap(() =>
+                    this.getAlertGroups()
+                )
+            ).subscribe((alertGroups: any) => {
+            this.endOfResults = alertGroups.length < this.limit.getValue();
+            this.alertGroups = alertGroups;
+            this.loading = false;
+        });
+
+    }
+
+    public increaseOffset() {
+        this.page = this.page + 1;
+        this.offset.next((this.limit.getValue() * this.page) - this.limit.getValue());
+    }
+
+    public decreaseOffset() {
+        this.page = this.page <= 1 ? 1 : this.page - 1;
+        this.offset.next((this.limit.getValue() * this.page) - this.limit.getValue());
+    }
+
+    public pageSizeChange(value) {
+        this.limit.next(value);
+    }
+
+    public delete(id) {
+        const message = 'Are you sure you would like to delete this Alert Group?';
+        if (window.confirm(message)) {
+            this.alertService.deleteAlertGroup(id).then(() => {
+                this.reload.next(Date.now());
+            });
+        }
+    }
+
+    private getAlertGroups() {
+        return this.alertService.getAlertGroups(
+            this.searchText.getValue() || '',
+            this.limit.getValue().toString(),
+            this.offset.getValue().toString()
+        ).pipe(map((alertGroups: any) => {
+                return alertGroups;
+            })
+        );
+    }
+
+}

package/src/lib/components/alert-groups/edit-alert-group/edit-alert-group.component.html

@@ -0,0 +1,91 @@
+<div class="p-6 bg-white border-b border-gray-200">
+    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+        <div class="flex items-start flex-1">
+            <div class="pt-1.5">
+                <h1 class="text-2xl font-bold text-gray-900 mb-0">Alert Group</h1>
+                <p class="text-sm font-medium text-gray-500">
+                    These details will be used to schedule alerts with the system.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="space-y-8 divide-y divide-gray-200 p-6">
+    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+        <div>
+            <div class="space-y-6 sm:space-y-5">
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                        Name <span class="text-red-500">*</span>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <input type="text" name="title" [(ngModel)]="alertGroup.title"
+                               class="max-w-lg block w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
+                    </div>
+                </div>
+
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                        Time Periods <span class="text-red-500">*</span>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <ki-task-time-periods [showTitle]="false" [(taskTimePeriods)]="alertGroup.taskTimePeriods"></ki-task-time-periods>
+                    </div>
+                </div>
+
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                        Notification Groups <span class="text-red-500">*</span>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <mat-select [(ngModel)]="alertGroup.notificationGroups" multiple [compareWith]="notificationGroupDisplay">
+                            <mat-option [value]="group" *ngFor="let group of notificationGroups">{{group.name}}</mat-option>
+                        </mat-select>
+                        <button mat-button color="primary" (click)="createNotificationGroup()">
+                            <mat-icon>group_add</mat-icon>&nbsp;Create new notification group
+                        </button>
+                    </div>
+                </div>
+
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Notification Title </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <input type="text" name="notificationTitle" [(ngModel)]="alertGroup.notificationTitle"
+                               class="max-w-lg block w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
+                        <p class="mt-2 text-sm text-gray-500">Will be used as the subject for the notification</p>
+                    </div>
+                </div>
+
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Notification Prefix Text </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <textarea name="notificationPrefixText" rows="3" [(ngModel)]="alertGroup.notificationPrefixText"
+                                  class="max-w-lg shadow-sm block w-full sm:text-sm border border-gray-300 rounded-md"></textarea>
+                        <p class="mt-2 text-sm text-gray-500">Text to include at the beginning of the notification</p>
+                    </div>
+                </div>
+
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"> Notification Suffix Text </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <textarea name="notificationSuffixText" rows="3" [(ngModel)]="alertGroup.notificationSuffixText"
+                                  class="max-w-lg shadow-sm block w-full sm:text-sm border border-gray-300 rounded-md"></textarea>
+                        <p class="mt-2 text-sm text-gray-500">Text to include at the end of the notification</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="pt-5">
+        <div class="flex justify-end">
+            <button type="button" [routerLink]="['/alert-groups']"
+                    class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none">Cancel</button>
+            <button type="button" (click)="save()" [disabled]="!alertGroup.title || (!alertGroup.taskTimePeriods || !alertGroup.taskTimePeriods.length) || (!alertGroup.notificationGroups || !alertGroup.notificationGroups.length)"
+                    class="disabled:opacity-50 ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary focus:outline-none">
+                Save Changes</button>
+        </div>
+    </div>
+</div>

package/src/lib/components/alert-groups/edit-alert-group/edit-alert-group.component.sass

@@ -0,0 +1,2 @@
+input, select, textarea, mat-select
+    max-width: 500px

package/src/lib/components/alert-groups/edit-alert-group/edit-alert-group.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditAlertGroupComponent } from './edit-alert-group.component';
+
+describe('EditAlertGroupComponent', () => {
+  let component: EditAlertGroupComponent;
+  let fixture: ComponentFixture<EditAlertGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EditAlertGroupComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditAlertGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/alert-groups/edit-alert-group/edit-alert-group.component.ts

@@ -0,0 +1,78 @@
+import {Component, OnInit} from '@angular/core';
+import {NotificationService} from '../../../../lib/services/notification.service';
+import {AlertService} from '../../../../lib/services/alert.service';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {EditNotificationGroupComponent} from '../../notification-groups/edit-notification-group/edit-notification-group.component';
+import * as lodash from 'lodash';
+const _ = lodash.default;
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+    selector: 'ki-edit-alert-group',
+    templateUrl: './edit-alert-group.component.html',
+    styleUrls: ['./edit-alert-group.component.sass']
+})
+export class EditAlertGroupComponent implements OnInit {
+
+    public alertGroup: any = {};
+    public notificationGroups: any = [];
+    public showNewTaskTimePeriod = false;
+    public newTaskTimePeriod: any = {};
+    public _ = _;
+    public Object = Object;
+
+    constructor(private notificationService: NotificationService,
+                private alertService: AlertService,
+                private matDialog: MatDialog,
+                private router: Router,
+                private route: ActivatedRoute) {
+    }
+
+    ngOnInit(): void {
+        const id = this.route.snapshot.params.id;
+        this.alertService.getAlertGroup(id).then(alertGroup => {
+            if (alertGroup) {
+                this.alertGroup = alertGroup;
+            }
+            if (!this.alertGroup.taskTimePeriods || !this.alertGroup.taskTimePeriods.length) {
+                if (!this.alertGroup.taskTimePeriods) {
+                    this.alertGroup.taskTimePeriods = [];
+                }
+                this.showNewTaskTimePeriod = true;
+            }
+        });
+        this.loadNotificationGroups();
+    }
+
+    public notificationGroupDisplay(v1, v2) {
+        return v1 && v2 && (v2.id === v2.id);
+    }
+
+    public createNotificationGroup() {
+        const dialogRef = this.matDialog.open(EditNotificationGroupComponent, {
+            width: '800px',
+            height: '575px',
+            data: {
+                groupId: 0
+            }
+        });
+
+        dialogRef.afterClosed().subscribe(res => {
+            if (res) {
+                this.loadNotificationGroups();
+            }
+        });
+    }
+
+    public save() {
+        this.alertService.saveAlertGroup(this.alertGroup).then(() => {
+            this.router.navigate(['/alert-groups']);
+        });
+    }
+
+    private loadNotificationGroups() {
+        this.notificationService.getNotificationGroups().toPromise().then(groups => {
+            this.notificationGroups = groups;
+        });
+    }
+}