ng-kinintel 0.0.317

package/src/lib/components/dataset/create-dataset/create-dataset.component.ts

@@ -0,0 +1,44 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {DatasourceService} from '../../../services/datasource.service';
+import {DatasetService} from '../../../services/dataset.service';
+
+@Component({
+    selector: 'ki-create-dataset',
+    templateUrl: './create-dataset.component.html',
+    styleUrls: ['./create-dataset.component.sass'],
+    host: {class: 'dialog-wrapper'}
+})
+export class CreateDatasetComponent implements OnInit {
+
+    public admin: boolean;
+
+    constructor(public dialogRef: MatDialogRef<CreateDatasetComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any,
+                private datasourceService: DatasourceService,
+                private datasetService: DatasetService) {
+    }
+
+    ngOnInit(): void {
+        this.admin = !!this.data.admin;
+    }
+
+    public async select(action) {
+        let selectedSource;
+
+        if (action.datasourceKey) {
+            selectedSource = {
+                datasetInstanceId: null,
+                datasourceInstanceKey: action.datasourceKey,
+                transformationInstances: [],
+                parameterValues: {},
+                parameters: []
+            };
+        } else if (action.datasetId) {
+            selectedSource = await this.datasetService.getExtendedDataset(action.datasetId);
+        }
+
+        this.dialogRef.close(selectedSource);
+    }
+
+}

package/src/lib/components/dataset/dataset-editor/available-columns/available-columns.component.html

@@ -0,0 +1,28 @@
+<div class="dialog" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+
+    <div class="dialog-title" cdkDragHandle>
+        <h2 mat-dialog-title>Column Expressions</h2>
+
+        <button mat-icon-button mat-dialog-close>
+            <mat-icon>clear</mat-icon>
+        </button>
+    </div>
+
+    <div class="dialog-content">
+
+        <p>Use columns by wrapping the column name in double square brackets. Available columns are outlined
+            below...</p>
+
+        <div class="pr-4" *ngFor="let column of columns">
+            {{column.title}} <b>[[{{column.name}}]]</b>
+        </div>
+
+    </div>
+
+    <div class="dialog-footer">
+        <button mat-button mat-dialog-close>Close</button>
+    </div>
+
+</div>
+
+

package/src/lib/components/dataset/dataset-editor/available-columns/available-columns.component.spec.ts

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

package/src/lib/components/dataset/dataset-editor/available-columns/available-columns.component.ts

@@ -0,0 +1,22 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+
+@Component({
+    selector: 'ki-available-columns',
+    templateUrl: './available-columns.component.html',
+    styleUrls: ['./available-columns.component.sass'],
+    host: {class: 'dialog-wrapper'}
+})
+export class AvailableColumnsComponent implements OnInit {
+
+    public columns: any = [];
+
+    constructor(public dialogRef: MatDialogRef<AvailableColumnsComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any) {
+    }
+
+    ngOnInit(): void {
+        this.columns = this.data.columns;
+    }
+
+}

package/src/lib/components/dataset/dataset-editor/dataset-add-join/dataset-add-join.component.html

@@ -0,0 +1,196 @@
+<div class="dialog" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+
+    <div class="dialog-title" cdkDragHandle>
+        <h2 mat-dialog-title>Join Data</h2>
+
+        <button mat-icon-button mat-dialog-close>
+            <mat-icon>clear</mat-icon>
+        </button>
+    </div>
+
+    <div class="dialog-content p-0">
+
+        <div class="border-t bg-blue-50 p-4">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <!-- Heroicon name: mini/information-circle -->
+                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                         fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd"
+                              d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z"
+                              clip-rule="evenodd"/>
+                    </svg>
+                </div>
+                <div class="ml-3 flex-1 md:flex md:justify-between">
+                    <p class="text-sm text-blue-700 mb-0">
+                        Join Data functionality allows you to merge data from another Data Feed, or Stored Query
+                        into this data feed. <b>Select</b> the data to merge and follow the on screen prompts to
+                        complete
+                        the join.
+                    </p>
+
+                </div>
+            </div>
+        </div>
+
+        <mat-horizontal-stepper [linear]="true" #stepper [animationDuration]="0">
+            <mat-step [completed]="selectedSource" label="Select data">
+
+                <ki-data-picker class="block" style="height: 547px" [admin]="admin"
+                                (selected)="select($event, stepper)"></ki-data-picker>
+
+            </mat-step>
+            <mat-step *ngIf="requiredParameters && requiredParameters.length"
+                      [completed]="joinTransformation.config.joinParameterMappings.length >= 1"
+                      label="Required parameters">
+                <div class="mx-4">
+                    <ng-template [ngIf]="!selectedSource">
+                        <p>Please select either a Datasource or Dataset to join to.</p>
+                    </ng-template>
+
+                    <ng-template [ngIf]="selectedSource">
+                        <p class="mb-4">
+                            <b *ngIf="!joinTransformation.config.joinedDataItemTitle">Selected
+                                source: {{ selectedSource.title || selectedSource.name }}</b>
+                            <b *ngIf="joinTransformation.config.joinedDataItemTitle">Selected
+                                source: {{ joinTransformation.config.joinedDataItemTitle }}</b>
+                        </p>
+
+                        <div class="mb-4" *ngIf="requiredParameters && requiredParameters.length">
+                            <ki-dataset-parameter-values [parameterValues]="requiredParameters" [hideNew]="true"
+                                                         [update]="updateParams"
+                                                         (changed)="setEvaluatedParameters($event, stepper)"></ki-dataset-parameter-values>
+                        </div>
+
+                        <div class="rounded-md bg-blue-50 p-4">
+                            <div class="flex">
+                                <div class="flex-shrink-0">
+                                    <!-- Heroicon name: solid/information-circle -->
+                                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg"
+                                         viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd"
+                                              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                                              clip-rule="evenodd"/>
+                                    </svg>
+                                </div>
+                                <div class="ml-3 flex-1 md:flex md:justify-between">
+                                    <p class="text-sm text-blue-600 mb-0">
+                                        The selected source requires a parameter to be set in order for the data
+                                        to be retrieved. Please choose the relevant column to use as the parameter or
+                                        choose an existing parameter value already defined in this query.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                    </ng-template>
+                </div>
+            </mat-step>
+            <mat-step *ngIf="!requiredParameters || !requiredParameters.length"
+                      [completed]="(!joinFilterFields || !joinFilterFields.length) ||
+                        (_.every(joinTransformation.config.joinFilters.filters, 'lhsExpression') &&
+                                   _.every(joinTransformation.config.joinFilters.filters, 'rhsExpression'))"
+                      label="Join criteria">
+                <div class="mx-4">
+                    <ng-template [ngIf]="!selectedSource">
+                        <p>Please select either a Datasource or Dataset to join to.</p>
+                    </ng-template>
+
+                    <ng-template [ngIf]="selectedSource">
+                        <p class="mb-4">
+                            <b *ngIf="!joinTransformation.config.joinedDataItemTitle">Selected
+                                source: {{ selectedSource.title || selectedSource.name }}</b>
+                            <b *ngIf="joinTransformation.config.joinedDataItemTitle">Selected
+                                source: {{ joinTransformation.config.joinedDataItemTitle }}</b>
+                        </p>
+                        <div class="my-4">
+                            <mat-checkbox [(ngModel)]="joinTransformation.config.strictJoin">Strict Join?</mat-checkbox>
+                            <p><small>If turned on, data will be pruned to only return rows that match.</small></p>
+                        </div>
+
+                        <ki-dataset-filters *ngIf="joinFilterFields" [filterFields]="filterFields"
+                                            [joinFilterFields]="joinFilterFields" [openSide]="openSide"
+                                            [joinFieldsName]="selectedSource.title || selectedSource.name"
+                                            [filterJunction]="joinTransformation.config.joinFilters"></ki-dataset-filters>
+
+                        <ng-template [ngIf]="openSide.getValue()">
+                            <ki-whitelisted-sql-functions [fields]="filterFields"></ki-whitelisted-sql-functions>
+                        </ng-template>
+
+                    </ng-template>
+                </div>
+            </mat-step>
+
+            <mat-step [completed]="false" label="Column definition">
+                <div class="mx-4">
+                    <ng-template [ngIf]="!selectedSource">
+                        <p>Please select either a Datasource or Dataset to join to.</p>
+                    </ng-template>
+
+                    <ng-template [ngIf]="selectedSource">
+                        <p class="mb-4">
+                            <b *ngIf="!joinTransformation.config.joinedDataItemTitle">Selected
+                                source: {{ selectedSource.title || selectedSource.name }}</b>
+                            <b *ngIf="joinTransformation.config.joinedDataItemTitle">Selected
+                                source: {{ joinTransformation.config.joinedDataItemTitle }}</b>
+                        </p>
+
+                        <p>Select the columns you would like to view, and set a new column name if required.</p>
+
+                        <div class="column-definition align-center">
+                            <mat-checkbox [(ngModel)]="allColumns" (change)="toggleAllColumns($event)"></mat-checkbox>
+                            <label class="mw">Column Name</label>
+                            <label class="mw">New Column Title</label>
+                        </div>
+
+                        <div class="column-definition align-center" *ngFor="let column of joinColumns">
+                            <mat-checkbox [(ngModel)]="column.selected" (ngModelChange)="allSelected()"></mat-checkbox>
+                            <label>
+                                <input type="text" [(ngModel)]="column.name" disabled>
+                            </label>
+                            <label>
+                                <input type="text" [(ngModel)]="column.title">
+                            </label>
+                            <span *ngIf="column.duplicate" class="primary">Duplicate column name</span>
+                        </div>
+                    </ng-template>
+                </div>
+            </mat-step>
+
+        </mat-horizontal-stepper>
+
+    </div>
+
+    <div class="dialog-footer">
+
+        <!-- BACK/CANCEL BUTTONS-->
+        <button *ngIf="stepper.selectedIndex === 0" mat-stroked-button color="primary" mat-dialog-close>Cancel</button>
+        <button *ngIf="stepper.selectedIndex > 0" mat-stroked-button color="primary" (click)="stepper.previous()">Back
+        </button>
+
+        <!-- MIDDLE NEXT BUTTONS -->
+        <ng-template [ngIf]="stepper.selectedIndex === 1">
+            <ng-template [ngIf]="!requiredParameters || !requiredParameters.length">
+                <button mat-flat-button color="primary" (click)="stepper.next()"
+                        [disabled]="(joinFilterFields && joinFilterFields.length) &&
+                                !(_.every(joinTransformation.config.joinFilters.filters, 'lhsExpression') &&
+                                   _.every(joinTransformation.config.joinFilters.filters, 'rhsExpression'))">
+                    Next
+                </button>
+            </ng-template>
+
+            <ng-template [ngIf]="requiredParameters && requiredParameters.length">
+                <button mat-flat-button color="primary" (click)="getParameterValues(stepper)">
+                    Next
+                </button>
+            </ng-template>
+        </ng-template>
+        <!-- FINAL BUTTON -->
+        <button mat-flat-button color="primary" *ngIf="stepper.selectedIndex === 2" (click)="join()">
+            Create Join
+        </button>
+    </div>
+
+</div>
+
+

package/src/lib/components/dataset/dataset-editor/dataset-add-join/dataset-add-join.component.sass

@@ -0,0 +1,17 @@
+table
+    th
+        background-color: whitesmoke
+
+.column-definition
+    border-bottom: 1px solid whitesmoke
+    padding: .5rem
+    margin-bottom: .5rem
+    label
+        margin-left: 1rem
+        &.mw
+            width: 300px
+        input
+            width: 300px
+    span
+        margin: 0 0 1rem 2rem
+        align-self: flex-end

package/src/lib/components/dataset/dataset-editor/dataset-add-join/dataset-add-join.component.spec.ts

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