ng-kinintel 0.0.317

package/src/lib/components/datasource/datasource.component.html

@@ -0,0 +1,165 @@
+<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 capitalize">{{title || 'Datasources'}}</h1>
+                <p class="text-sm font-medium text-gray-500">
+                    {{description || 'A list of all the datasources currently available.'}}
+                </p>
+            </div>
+        </div>
+        <div class="mt-6 flex flex-col-reverse justify-stretch" *ngIf="isProjectAdmin && !hideNew && canImportData">
+            <button mat-flat-button color="primary" [matMenuTriggerFor]="create">
+                Import Data
+                <mat-icon>expand_more</mat-icon>
+            </button>
+            <mat-menu #create="matMenu">
+                <button mat-menu-item [routerLink]="[newTabularURL]">
+                    New Tabular Datasource
+                </button>
+                <button mat-menu-item [routerLink]="[newDocumentURL]">
+                    New Document Datasource
+                </button>
+            </mat-menu>
+        </div>
+    </div>
+</div>
+
+<div class="px-4 sm:px-6 lg:px-8 mt-0">
+    <div class="flex flex-col">
+        <div *ngIf="!canImportData" class="mt-8 border-l-4 border-yellow-400 bg-yellow-50 p-4">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd"
+                              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                              clip-rule="evenodd"/>
+                    </svg>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-yellow-700 mb-0">
+                        Imported Data is reserved for our Accredited users. Please <a class="font-medium text-yellow-700 underline hover:text-yellow-600"
+                        href="https://dnsrf.org/joining-options/index.html">review our Tiers</a> to find out more.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="canImportData" 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">
+                    <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="text-sm block w-full rounded-none pl-10 border-t-0 border-l-0 border-r-0 border-gray-300"
+                                   placeholder="Search {{title || 'datasources'}}"
+                                   (keyup)="searchText.next($event.target.value)">
+                        </div>
+                    </div>
+                </div>
+                <table class="min-w-full border-separate" style="border-spacing: 0">
+                    <tbody class="bg-white">
+                    <ng-template [ngIf]="datasources.length">
+                        <tr class="border-t border-gray-200">
+                            <th colspan="2" scope="colgroup"
+                                class="sticky top-0 z-10 border-b border-gray-300 bg-gray-100 py-3.5 px-4 text-left text-xs font-semibold text-gray-900">
+                                <span *ngIf="!admin">Project&nbsp;</span>{{title || 'Datasources'}}
+                            </th>
+                        </tr>
+                        <tr *ngFor="let element of datasources; let i = index" class="hover:bg-gray-50">
+                            <td class="whitespace-nowrap border-gray-200 py-2 px-4 text-sm  text-gray-900"
+                                [ngClass]="{'border-b-0': i === datasources.length - 1, 'border-b': i !== datasources.length - 1}">
+                                <div class="flex flex-col">
+                                    <div
+                                        class="item-title-select flex items-center font-medium cursor-pointer hover:underline"
+                                        (click)="explore(element)">
+                                        {{element.title}}
+                                    </div>
+                                    <div (click)="element.viewDescription = !element.viewDescription"
+                                         class="text-gray-400 font-thin w-2/3 overflow-ellipsis overflow-hidden whitespace-nowrap cursor-pointer hover:underline">
+                                        {{element.summary}}
+                                    </div>
+                                    <div *ngIf="element.viewDescription && element.description" class="mt-4"
+                                         [innerHTML]="element.description"></div>
+                                </div>
+                            </td>
+                            <td class="relative whitespace-nowrap border-gray-200 py-2 px-4 text-right text-sm font-medium"
+                                [ngClass]="{'border-b-0': i === datasources.length - 1, 'border-b': i !== datasources.length - 1}">
+                                <div class="flex items-center justify-end">
+                                    <ng-template [ngIf]="isProjectAdmin">
+                                        <button mat-button color="primary" *ngIf="element.type === 'custom'"
+                                                [routerLink]="[newTabularURL, element.key]">
+                                            Edit
+                                        </button>
+                                        <button mat-button color="primary" *ngIf="element.type === 'document'"
+                                                [routerLink]="[newDocumentURL, element.key]">
+                                            Edit
+                                        </button>
+                                        <ng-template [ngIf]="element.type === 'document' || element.type === 'custom'">
+                                            <div class="divider"></div>
+                                        </ng-template>
+                                    </ng-template>
+
+                                    <button mat-button color="primary"
+                                            (click)="explore(element)"> {{exploreText || 'Explore'}}</button>
+
+                                    <ng-template [ngIf]="element.type === 'document' || element.type === 'custom'">
+                                        <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.key)">Delete</button>
+                                        </mat-menu>
+                                    </ng-template>
+
+
+                                </div>
+                            </td>
+                        </tr>
+                        <tr *ngIf="!filterResults">
+                            <td colspan="2"
+                                class="border-t bg-gray-50 whitespace-nowrap border-b border-gray-200 py-1 px-4 text-sm text-gray-900">
+                                <div class="paging-toolbar flex align-center justify-end">
+                                    <div class="flex items-center justify-center">
+                                        <div class="text-xs text-gray-400 mr-10">
+                                            Showing {{offset + 1}}
+                                            - {{(page * limit) - (limit - datasources.length)}}</div>
+                                        <select [value]="limit" (change)="pageSizeChange($event.target.value)"
+                                                class="p-1.5 mr-8">
+                                            <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>
+
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/datasource/datasource.component.sass

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

package/src/lib/components/datasource/datasource.component.spec.ts

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

package/src/lib/components/datasource/datasource.component.ts

@@ -0,0 +1,174 @@
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {BehaviorSubject, merge, Subject, Subscription} from 'rxjs';
+import {debounceTime, distinctUntilChanged, map, switchMap} from 'rxjs/operators';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {DataExplorerComponent} from '../data-explorer/data-explorer.component';
+import {DatasourceService} from '../../services/datasource.service';
+import {ProjectService} from '../../services/project.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import * as lodash from 'lodash';
+const _ = lodash.default;
+
+@Component({
+    selector: 'ki-datasource',
+    templateUrl: './datasource.component.html',
+    styleUrls: ['./datasource.component.sass']
+})
+export class DatasourceComponent implements OnInit, OnDestroy {
+
+    @Input() admin: boolean;
+    @Input() title: string;
+    @Input() description: string;
+    @Input() exploreText: string;
+    @Input() hideNew: boolean;
+    @Input() newDocumentURL = '/document-datasource';
+    @Input() newTabularURL = '/import-data';
+    @Input() datasourceURL = '/datasource';
+    @Input() noProject = false;
+    @Input() filterResults: any;
+
+
+    public datasources: any = [];
+    public searchText = new BehaviorSubject('');
+    public limit = 10;
+    public offset = 0;
+    public page = 1;
+    public endOfResults = false;
+    public reload = new Subject();
+    public isProjectAdmin = false;
+    public canImportData = false;
+
+    private projectSub: Subscription;
+
+    constructor(private dialog: MatDialog,
+                private datasourceService: DatasourceService,
+                private projectService: ProjectService,
+                private router: Router,
+                private route: ActivatedRoute) {
+    }
+
+    ngOnInit(): void {
+        this.searchText.subscribe(() => {
+            this.page = 1;
+            this.offset = 0;
+        });
+
+        const pagingValues = this.projectService.getDataItemPagingValues();
+        this.limit = pagingValues.limit || 10;
+        this.offset = pagingValues.offset || 0;
+        this.page = pagingValues.page || 1;
+
+        this.isProjectAdmin = this.projectService.isActiveProjectAdmin();
+        this.canImportData = this.projectService.doesActiveProjectHavePrivilege('customdatasourceaccess');
+
+        this.projectSub = this.projectService.activeProject.subscribe(() => {
+            this.isProjectAdmin = this.projectService.isActiveProjectAdmin();
+        });
+
+        if (this.canImportData) {
+            this.route.params.subscribe(async param => {
+                if (param.key) {
+                    const datasource = await this.datasourceService.getDatasource(param.key);
+                    this.explore(datasource);
+                }
+            });
+
+            merge(this.searchText, this.reload)
+                .pipe(
+                    debounceTime(300),
+                    distinctUntilChanged(),
+                    switchMap(() =>
+                        this.getDatasources()
+                    )
+                ).subscribe((sources: any) => {
+                if (this.filterResults) {
+                    this.datasources = _.filter(sources, this.filterResults);
+                } else {
+                    this.datasources = sources;
+                }
+            });
+        }
+    }
+
+    ngOnDestroy() {
+        this.projectSub.unsubscribe();
+    }
+
+    public createDatasource() {
+
+    }
+
+    public explore(datasource) {
+        this.router.navigate([this.datasourceURL], {fragment: datasource.key});
+        const datasetInstanceSummary = {
+            datasetInstanceId: null,
+            datasourceInstanceKey: datasource.key,
+            transformationInstances: [],
+            parameterValues: {},
+            parameters: [],
+            originDataItemTitle: datasource.title
+        };
+        const dialogRef = this.dialog.open(DataExplorerComponent, {
+            width: '100vw',
+            height: '100vh',
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            hasBackdrop: false,
+            data: {
+                datasetInstanceSummary,
+                showChart: false,
+                admin: this.admin,
+                breadcrumb: this.title || 'Datasources'
+            }
+        });
+        dialogRef.afterClosed().subscribe(res => {
+            if (res && res.breadcrumb) {
+                return this.router.navigate([res.breadcrumb], {fragment: null});
+            }
+            this.router.navigate([this.datasourceURL], {fragment: null});
+        });
+    }
+
+    public async delete(key) {
+        const message = 'Are you sure you would like to delete this item?';
+        if (window.confirm(message)) {
+            await this.datasourceService.deleteDatasource(key);
+            this.reload.next(Date.now());
+        }
+    }
+
+    public increaseOffset() {
+        this.page = this.page + 1;
+        this.offset = (this.limit * this.page) - this.limit;
+        this.reload.next(Date.now());
+    }
+
+    public decreaseOffset() {
+        this.page = this.page <= 1 ? 1 : this.page - 1;
+        this.offset = (this.limit * this.page) - this.limit;
+        this.reload.next(Date.now());
+    }
+
+    public pageSizeChange(value) {
+        this.page = 1;
+        this.offset = 0;
+        this.limit = value;
+        this.reload.next(Date.now());
+    }
+
+    private getDatasources() {
+        this.projectService.setDataItemPagingValue(this.limit, this.offset, this.page);
+
+        return this.datasourceService.getDatasources(
+            this.searchText.getValue() || '',
+            this.filterResults ? '1000' : this.limit.toString(),
+            this.filterResults ? '0' : this.offset.toString(),
+            this.noProject
+        ).pipe(map((sources: any) => {
+                this.endOfResults = sources.length < this.limit;
+                return sources;
+            })
+        );
+    }
+
+}