ng-kinintel 0.0.317

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

@@ -0,0 +1,320 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {BehaviorSubject, merge, Subject, Subscription} from 'rxjs';
+import {debounceTime, distinctUntilChanged, map, switchMap} from 'rxjs/operators';
+import {DataExplorerComponent} from '../data-explorer/data-explorer.component';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {TagService} from '../../services/tag.service';
+import {ProjectService} from '../../services/project.service';
+import {DatasetService} from '../../services/dataset.service';
+import {KinintelModuleConfig} from '../../ng-kinintel.module';
+import * as lodash from 'lodash';
+const _ = lodash.default;
+import {MetadataComponent} from '../metadata/metadata.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import {CreateDatasetComponent} from './create-dataset/create-dataset.component';
+import {Location} from '@angular/common';
+
+@Component({
+    selector: 'ki-dataset',
+    templateUrl: './dataset.component.html',
+    styleUrls: ['./dataset.component.sass']
+})
+export class DatasetComponent implements OnInit, OnDestroy {
+
+    @Input() headingLabel: string;
+    @Input() headingDescription: string;
+    @Input() backendUrl: string;
+    @Input() newTitle: string;
+    @Input() newDescription: string;
+    @Input() hideCreate: boolean;
+    @Input() shared: boolean;
+    @Input() admin: boolean;
+    @Input() reload: Subject<any>;
+    @Input() url: string;
+    @Input() accountId: any;
+    @Input() contactUs: string;
+    @Input() tableHeading: string;
+    @Input() listStyle = 'LIST';
+
+    public datasets: any = [];
+    public searchText = new BehaviorSubject('');
+    public limit = 10;
+    public offset = 0;
+    public page = 1;
+    public endOfResults = false;
+    public categories: any = [];
+    public filteredCategories: any = [];
+    public Date = Date;
+    public activeTagSub = new Subject();
+    public projectSub = new Subject();
+    public activeTag: any;
+    public loading = true;
+    public gridItems: any = {};
+    public projectSettings: any = {};
+
+    private tagSub: Subscription;
+    private activeProject: any;
+    private activeProjectSub: Subscription;
+
+    constructor(private dialog: MatDialog,
+                private tagService: TagService,
+                private projectService: ProjectService,
+                private datasetService: DatasetService,
+                private router: Router,
+                private route: ActivatedRoute,
+                public config: KinintelModuleConfig,
+                private location: Location) {
+    }
+
+    async ngOnInit() {
+        this.activeProject = this.projectService.activeProject.getValue();
+
+        this.activeProjectSub = this.projectService.activeProject.subscribe(activeProject => {
+            this.activeProject = activeProject;
+
+            this.projectSettings = (this.activeProject && this.activeProject.settings) ? (Array.isArray(this.activeProject.settings) ? {
+                hideExisting: false, shortcutPosition: 'after', homeDashboard: {}, shortcutsMenu: []
+            } : this.activeProject.settings) : {
+                hideExisting: false, shortcutPosition: 'after', homeDashboard: {}, shortcutsMenu: []
+            };
+
+            const listKey = this.getCurrentPathListKey();
+            if (this.projectSettings[listKey]) {
+                this.listStyle = this.projectSettings[listKey];
+            }
+        });
+
+        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.route.params.subscribe(param => {
+            if (param.id) {
+                this.view(param.id);
+            }
+        });
+
+        if (!this.reload) {
+            this.reload = new Subject();
+        }
+
+        if (this.tagService) {
+            this.activeTagSub = this.tagService.activeTag;
+            this.tagSub = this.tagService.activeTag.subscribe(tag => this.activeTag = tag);
+        }
+
+        if (this.projectService) {
+            this.projectSub = this.projectService.activeProject;
+        }
+
+        this.getCategories();
+
+        merge(this.searchText, this.activeTagSub, this.projectSub, this.reload)
+            .pipe(
+                debounceTime(300),
+                // distinctUntilChanged(),
+                switchMap(() =>
+                    this.getDatasets()
+                )
+            ).subscribe((datasets: any) => {
+            this.datasets = datasets;
+
+            if (this.categories.length) {
+                this.gridItems = {};
+                this.categories.forEach(category => {
+                    const items = _.filter(datasets, dataset => {
+                        return !!_.find(dataset.categories, {key: category.key});
+                    });
+                    this.gridItems[category.key] = {
+                        key: category.key,
+                        title: category.category,
+                        list: items
+                    };
+                });
+
+                const otherItems = _.filter(datasets, dataset => {
+                    return !dataset.categories || !dataset.categories.length;
+                });
+                this.gridItems.other = {
+                    key: 'other',
+                    title: 'Other',
+                    list: otherItems
+                };
+            } else {
+                this.listStyle = 'LIST';
+            }
+            this.loading = false;
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.tagSub) {
+            this.tagSub.unsubscribe();
+        }
+    }
+
+    public view(datasetId) {
+        this.datasetService.getDataset(datasetId).then(datasetInstanceSummary => {
+            this.viewDataset(datasetInstanceSummary);
+        });
+    }
+
+    public extend(id) {
+        this.datasetService.getExtendedDataset(id).then(datasetInstanceSummary => {
+            this.viewDataset(datasetInstanceSummary);
+        });
+    }
+
+    public removeActiveTag() {
+        this.tagService.resetActiveTag();
+    }
+
+    public updateListStyle() {
+        if (!this.admin) {
+            this.datasets = [];
+            const listKey = this.getCurrentPathListKey();
+            this.projectSettings[listKey] = this.listStyle;
+            this.projectService.updateProjectSettings(this.activeProject.projectKey, this.projectSettings);
+        }
+    }
+
+    public toggleCategory(event, category) {
+        event.stopPropagation();
+        category.checked = !category.checked;
+        this.updateCategoryFilters();
+    }
+
+    public updateCategoryFilters() {
+        this.offset = 0;
+        this.page = 1;
+        this.reload.next(Date.now());
+    }
+
+    public delete(datasetId) {
+        const message = 'Are you sure you would like to remove this Dataset?';
+        if (window.confirm(message)) {
+            this.datasetService.removeDataset(datasetId).then(() => {
+                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());
+    }
+
+    public editMetadata(searchResult) {
+        const dialogRef = this.dialog.open(MetadataComponent, {
+            width: '700px',
+            height: '900px',
+            data: {
+                metadata: _.clone(searchResult),
+                service: this.datasetService
+            }
+        });
+        dialogRef.afterClosed().subscribe(res => {
+            if (res) {
+                this.reload.next(Date.now());
+                this.getCategories();
+            }
+        });
+    }
+
+    public create() {
+        const dialogRef = this.dialog.open(CreateDatasetComponent, {
+            width: '1200px',
+            height: '800px',
+            data: {
+                admin: this.admin,
+                accountId: this.accountId
+            }
+        });
+        dialogRef.afterClosed().subscribe(res => {
+            if (res) {
+                this.viewDataset(res);
+            }
+        });
+    }
+
+    private viewDataset(datasetInstanceSummary) {
+        this.router.navigate([this.url || '/dataset'], {fragment: _.kebabCase(datasetInstanceSummary.title)});
+        const dialogRef = this.dialog.open(DataExplorerComponent, {
+            width: '100vw',
+            height: '100vh',
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            hasBackdrop: false,
+            closeOnNavigation: true,
+            data: {
+                datasetInstanceSummary,
+                backendUrl: this.backendUrl,
+                showChart: false,
+                admin: this.admin,
+                newTitle: this.newTitle ? this.newTitle + ' Name' : null,
+                newDescription: this.newDescription || null,
+                accountId: this.accountId,
+                breadcrumb: this.headingLabel || 'Datasets',
+                url: this.url
+            }
+        });
+        dialogRef.afterClosed().subscribe(res => {
+            if (res) {
+                if (res.breadcrumb) {
+                    return this.router.navigate([res.breadcrumb], {fragment: null});
+                }
+                this.router.navigate([this.url || '/dataset'], {fragment: null});
+                this.reload.next(Date.now());
+            }
+        });
+    }
+
+    private getDatasets() {
+        this.projectService.setDataItemPagingValue(this.limit, this.offset, this.page);
+
+        const checkedCategories = _.filter(this.categories, 'checked');
+        return this.datasetService.getDatasets(
+            this.searchText.getValue() || '',
+            this.listStyle === 'GRID' ? '1000' : this.limit.toString(),
+            this.listStyle === 'GRID' ? '0' : this.offset.toString(),
+            this.shared ? null : (!_.isNil(this.accountId) ? this.accountId : ''),
+            '',
+            _.map(checkedCategories, 'key')
+        ).pipe(map((datasets: any) => {
+                this.endOfResults = datasets.length < this.limit;
+                return datasets;
+            })
+        );
+    }
+
+    private getCategories() {
+        return this.datasetService.getDatasetCategories(this.shared).then(categories => this.categories = categories);
+    }
+
+    private getCurrentPathListKey() {
+        const currentPath = this.location.path().replace('/', '-');
+        return _.camelCase('listStyle' + currentPath);
+    }
+
+    protected readonly Object = Object;
+}

package/src/lib/components/datasource/create-datasource/advanced-settings/advanced-settings.component.html

@@ -0,0 +1,133 @@
+<div class="dialog" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+
+    <div class="dialog-title" cdkDragHandle>
+        <h2 mat-dialog-title>Advanced Settings</h2>
+
+        <button mat-icon-button mat-dialog-close>
+            <mat-icon>clear</mat-icon>
+        </button>
+    </div>
+
+    <div class="dialog-content">
+
+        <div class="rounded-md bg-red-50 p-4 mb-4" *ngIf="errorMessage">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-800">There was an issue saving your datasource.</h3>
+                    <div class="mt-2 text-sm text-red-700">
+                        <ul role="list" class="list-disc space-y-1 pl-5">
+                            <li>{{errorMessage}}</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <mat-checkbox class="mb-0" [(ngModel)]="advancedSettings.showAutoIncrement"
+                      [disabled]="advancedSettings.primaryKeys.length">
+            Show Auto Increment Column
+        </mat-checkbox>
+        <div class="text-xs text-gray-500 mb-8">By default, datasources are created with an auto increment ID primary
+            key
+            column. Show this column using the toggle above.
+        </div>
+
+        <hr>
+
+        <div class="font-medium text-base mt-6">Create custom primary key</div>
+        <div class="text-gray-500 text-sm mb-6">Drag column(s) to make up the primary key for this datasource</div>
+
+        <div class="flex justify-between">
+            <div class="example-container">
+                <div class="font-medium">Available Columns</div>
+
+                <div
+                    cdkDropList
+                    #columnList="cdkDropList"
+                    [cdkDropListData]="columns"
+                    [cdkDropListConnectedTo]="[pkList]"
+                    class="example-list"
+                    (cdkDropListDropped)="drop($event)">
+                    <div class="example-box" *ngFor="let item of columns" cdkDrag>{{ item.title }}</div>
+                </div>
+            </div>
+
+            <div class="example-container">
+                <div class="font-medium">Primary Key(s)</div>
+
+                <div
+                    cdkDropList
+                    #pkList="cdkDropList"
+                    [cdkDropListData]="advancedSettings.primaryKeys"
+                    [cdkDropListConnectedTo]="[columnList]"
+                    class="example-list"
+                    (cdkDropListDropped)="drop($event)">
+                    <div class="example-box" *ngFor="let item of advancedSettings.primaryKeys" cdkDrag>
+                        {{ item.title }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <hr>
+
+        <div class="font-medium text-base mt-6">Datasource Indexes</div>
+        <div class="text-gray-500 text-sm mb-6">Select the columns to be indexed and drag to reorder if required.</div>
+
+        <ng-template ngFor let-aIndex [ngForOf]="advancedSettings.indexes" let-i=index>
+            <div class="flex justify-between p-3 mb-3 bg-gray-50">
+                <div class="example-container">
+                    <div class="font-medium">Available Columns</div>
+
+                    <mat-select [(ngModel)]="aIndex.indexCols" (ngModelChange)="updateIndexes(aIndex)" [multiple]="true">
+                        <mat-option *ngFor="let column of columns2" [value]="column">
+                            {{column.title}}
+                        </mat-option>
+                    </mat-select>
+
+                </div>
+
+                <div class="example-container">
+                    <div class="font-medium">Indexes</div>
+
+                    <div
+                        cdkDropList
+                        class="example-list"
+                        (cdkDropListDropped)="dropIndex($event, aIndex.fieldNames)">
+                        <div class="example-box" *ngFor="let item of aIndex.fieldNames" cdkDrag>
+                            {{ aIndex.indexCols.length ? _.find(aIndex.indexCols, {name: item})?.title : '' }}
+                        </div>
+                    </div>
+                </div>
+
+                <button mat-icon-button color="warn" class="self-center" type="button"
+                        (click)="advancedSettings.indexes.splice(i, 1)">
+                    <mat-icon>remove_circle_outline</mat-icon>
+                </button>
+            </div>
+        </ng-template>
+        <div class="flex justify-between">
+            <div></div>
+            <button mat-stroked-button color="primary" type="button"
+                (click)="advancedSettings.indexes.push({fieldNames: []})">
+                Create additional index
+            </button>
+        </div>
+
+    </div>
+
+    <div class="dialog-footer">
+        <div></div>
+        <button mat-flat-button color="primary" type="button"
+                (click)="saveChanges()">Save Changes
+        </button>
+    </div>
+
+</div>
+
+

package/src/lib/components/datasource/create-datasource/advanced-settings/advanced-settings.component.sass

@@ -0,0 +1,51 @@
+.example-container
+    width: 400px
+    max-width: 100%
+    margin: 0 25px 25px 0
+    display: inline-block
+    vertical-align: top
+
+
+.example-list
+    border: solid 1px #ccc
+    min-height: 60px
+    background: white
+    border-radius: 4px
+    overflow: hidden
+    display: block
+
+
+.example-box
+    padding: 10px
+    border-bottom: solid 1px #ccc
+    color: rgba(0, 0, 0, 0.87)
+    display: flex
+    flex-direction: row
+    align-items: center
+    justify-content: space-between
+    box-sizing: border-box
+    cursor: move
+    background: white
+    font-size: 14px
+
+
+.cdk-drag-preview
+    box-sizing: border-box
+    border-radius: 4px
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)
+
+
+.cdk-drag-placeholder
+    opacity: 0
+
+
+.cdk-drag-animating
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
+
+
+.example-box:last-child
+    border: none
+
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder)
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)

package/src/lib/components/datasource/create-datasource/advanced-settings/advanced-settings.component.spec.ts

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

package/src/lib/components/datasource/create-datasource/advanced-settings/advanced-settings.component.ts

@@ -0,0 +1,140 @@
+import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
+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 * as lodash from 'lodash';
+import {DatasourceService} from '../../../../services/datasource.service';
+
+const _ = lodash.default;
+
+@Component({
+    selector: 'ki-advanced-settings',
+    templateUrl: './advanced-settings.component.html',
+    styleUrls: ['./advanced-settings.component.sass'],
+    host: {class: 'dialog-wrapper'}
+})
+export class AdvancedSettingsComponent implements OnInit {
+
+    public _ = _;
+    public columns: any = [];
+    public columns2: any = [];
+    public advancedSettings: any = {
+        showAutoIncrement: false,
+        primaryKeys: [],
+        indexes: [{fieldNames: []}]
+    };
+    public datasourceUpdate: any;
+    public errorMessage = '';
+
+    private datasourceInstanceKey: string;
+    private allColumns: any;
+
+    constructor(public dialogRef: MatDialogRef<AdvancedSettingsComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any,
+                private datasourceService: DatasourceService) {
+    }
+
+    ngOnInit() {
+        this.datasourceUpdate = this.data.datasourceUpdate;
+        this.datasourceInstanceKey = this.data.datasourceInstanceKey;
+
+        this.advancedSettings.showAutoIncrement = this.data.showAutoIncrement || false;
+        this.advancedSettings.primaryKeys = _.clone(_.filter(this.data.columns, {keyField: true}));
+        this.allColumns = _.clone(this.data.columns);
+        this.columns = _.clone(_.filter(this.data.columns, col => {
+            return !col.keyField;
+        }));
+        this.columns2 = _.clone(_.filter(this.data.columns, col => {
+            return true;
+        }));
+
+        if (this.datasourceUpdate.indexes && this.datasourceUpdate.indexes.length) {
+            this.advancedSettings.indexes = this.datasourceUpdate.indexes;
+            this.advancedSettings.indexes.forEach(indexObj => {
+                indexObj.indexCols = _.clone(_.filter(this.data.columns, col => {
+                    return indexObj.fieldNames.indexOf(col.name) > -1;
+                }));
+            });
+        }
+    }
+
+    public drop(event: CdkDragDrop<string[]>) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        } else {
+            transferArrayItem(
+                event.previousContainer.data,
+                event.container.data,
+                event.previousIndex,
+                event.currentIndex,
+            );
+        }
+    }
+
+    public dropIndex(event: CdkDragDrop<string[]>, data?: any) {
+        moveItemInArray(data || event.container.data, event.previousIndex, event.currentIndex);
+    }
+
+    public updateIndexes(index: any) {
+        index.indexCols.forEach(col => {
+            if (index.fieldNames.indexOf(col.name) === -1) {
+                index.fieldNames.push(col.name);
+            }
+        });
+        index.fieldNames.forEach((fieldName: string, nameIndex: number) => {
+            if (_.findIndex(index.indexCols, {name: fieldName}) === -1) {
+                index.fieldNames.splice(nameIndex, 1);
+            }
+        });
+    }
+
+    public async saveChanges() {
+        this.errorMessage = '';
+        this.datasourceUpdate.indexes = _.filter(this.advancedSettings.indexes, index => {
+            return index.fieldNames.length;
+        });
+        let showAutoIncrement = this.advancedSettings.showAutoIncrement;
+
+        if (this.advancedSettings.primaryKeys.length) {
+            showAutoIncrement = false;
+            _.remove(this.allColumns, {type: 'id'});
+
+            this.allColumns.map(column => {
+                column.keyField = !!_.find(this.advancedSettings.primaryKeys, {name: column.name});
+                return column;
+            });
+
+        } else {
+            if (!_.find(this.allColumns, {type: 'id'})) {
+                this.allColumns.map(column => {
+                    column.keyField = false;
+                    return column;
+                });
+
+                this.allColumns.unshift({
+                    title: 'ID',
+                    name: 'id',
+                    type: 'id'
+                });
+            }
+        }
+
+        this.datasourceUpdate.fields = this.allColumns.map(column => {
+            if (column.name === column.previousName) {
+                delete column.previousName;
+            }
+            return column;
+        });
+
+        try {
+            await this.datasourceService.updateCustomDatasource(this.datasourceInstanceKey, this.datasourceUpdate);
+            this.dialogRef.close({datasourceUpdate: this.datasourceUpdate, columns: this.allColumns, showAutoIncrement});
+        } catch (e) {
+            const error = e.error;
+            this.errorMessage = error.message || 'There was a problem updating this datasource. Please check your settings and try again.';
+        }
+    }
+
+}