ng-kinintel 0.0.317

package/src/lib/components/datasource/create-datasource/api-access/api-access.component.html

@@ -0,0 +1,257 @@
+<div class="dialog" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+
+    <div class="dialog-title" cdkDragHandle>
+        <h2 mat-dialog-title>API Access</h2>
+
+        <button mat-icon-button mat-dialog-close>
+            <mat-icon>clear</mat-icon>
+        </button>
+    </div>
+
+    <div class="dialog-content">
+
+        <div class="text-lg font-semibold mb-4">
+            Import Key
+        </div>
+
+        <div class="mb-4">
+            <input class="mt-2 w-full" type="text" [(ngModel)]="datasourceUpdate.instanceImportKey"
+                   placeholder="Enter import key">
+            <small class="font-normal">This will be used as part of the API request</small>
+        </div>
+
+        <ng-template [ngIf]="showExample">
+
+            <div class="text-lg font-semibold mb-4">
+                Example API Usage
+            </div>
+
+            <div class="relative w-full mb-8">
+                <div class="text-base font-semibold">List</div>
+                <div class="text-sm mb-2">
+                    Return the data for this datasource.
+                    <br><br>
+                    Filtering of the returned data can be effected by supplying parameters of the format <b>filter_COLUMNNAME</b>.  The parameter value can either be
+                    simply a value for exact match filtering or a value followed by a | and a match type which should be one of the following values:
+                    <br><br>
+                    <table>
+                        <tr>
+                            <td>eq</td>
+                            <td>for an equals match</td>
+                        </tr>
+                        <tr>
+                            <td>neq</td>
+                            <td>for a not equals match</td>
+                        </tr>
+                        <tr>
+                            <td>null</td>
+                            <td>for a null match</td>
+                        </tr>
+                        <tr>
+                            <td>notnull</td>
+                            <td>for a not null match</td>
+                        </tr>
+                        <tr>
+                            <td>gt</td>
+                            <td>for a greater than match</td>
+                        </tr>
+                        <tr>
+                            <td>lt</td>
+                            <td>for a less than match</td>
+                        </tr>
+                        <tr>
+                            <td>gte</td>
+                            <td>for a greater than or equals match</td>
+                        </tr>
+                        <tr>
+                            <td>lte</td>
+                            <td>for a less than or equals match</td>
+                        </tr>
+                        <tr>
+                            <td>startswith</td>
+                            <td>for a string starts with match</td>
+                        </tr>
+                        <tr>
+                            <td>endswith</td>
+                            <td>for a string ends with match</td>
+                        </tr>
+                        <tr>
+                            <td>contains</td>
+                            <td>or a string contains match</td>
+                        </tr>
+                    </table>
+                    <br><br>
+                    Results can be sorted by supplying a <b>sort</b> parameter which identifies columns to sort and directions (either asc or desc) using pipe separation
+                    <br><br>
+                    By default the first 100 rows will be returned.  Paging can be achieved by supplying
+                    <b>limit</b> and <b>offset</b> parameters.
+                </div>
+                <div #list class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-cta">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-cta">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>GET</b> <span class="text-cta">{{backendURL}}/api/tabularData/{{datasourceUpdate.instanceImportKey}}?{{listQueryString}}&limit=50&offset=10</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="list.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Create</div>
+                <div class="text-sm mb-2">
+                    Insert a set of new rows to the data source identified by the passed import key
+                </div>
+                <div #create class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+            <pre class="whitespace-normal">curl -H <span class="text-cta">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-cta">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>POST</b> <span class="text-cta">{{backendURL}}/api/tabularData/{{datasourceUpdate.instanceImportKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="create.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal" [innerHTML]="createExample"></pre>
+            </div>
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Replace</div>
+                <div class="text-sm mb-2">
+                    Replace a set of rows to the data source identified by the passed import key.  This will perform
+                    an insert or update depending on whether the row already exists according to the unique key.
+                </div>
+                <div #replace class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+            <pre class="whitespace-normal">curl -H <span class="text-cta">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-cta">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>PATCH</b> <span class="text-cta">{{backendURL}}/api/tabularData/{{datasourceUpdate.instanceImportKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="replace.textContent"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal" [innerHTML]="updateExample"></pre>
+            </div>
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Update</div>
+                <div class="text-sm mb-2">
+                    Update a set of rows to the data source identified by the passed import key.  This will perform
+                    an update based upon the unique key and will not add any new rows if they don't already exist.
+                </div>
+                <div #update class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+            <pre class="whitespace-normal">curl -H <span class="text-cta">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-cta">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>PUT</b> <span class="text-cta">{{backendURL}}/api/tabularData/{{datasourceUpdate.instanceImportKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="update.textContent"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal" [innerHTML]="updateExample"></pre>
+            </div>
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Delete</div>
+                <div class="text-sm mb-2">
+                    Delete a set of rows explicitly by unique key for the data source identified by the passed import key.
+                </div>
+                <div #delete class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+            <pre class="whitespace-normal">curl -H <span class="text-cta">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-cta">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>DELETE</b> <span class="text-cta">{{backendURL}}/api/tabularData/{{datasourceUpdate.instanceImportKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="delete.textContent"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+            <pre class="whitespace-normal" [innerHTML]="deleteExample">
+            </pre>
+            </div>
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Filtered Delete</div>
+                <div class="text-sm mb-2">
+                    Delete a set of rows using one or more filter expressions additively to identify the rows for deletion for the data source identified by the passed import key.
+                    <br><br>
+                    Filters are supplied as objects containing a column name supplied as the <b>column</b> property, a match value supplied as the <b>value</b> property and a match type supplied as
+                    the <b>matchType</b> property.
+                    <br><br>
+                    Possible values for the <b>matchType</b> are:<br><br>
+                    <table>
+                        <tr>
+                            <td>eq</td>
+                            <td>for an equals match</td>
+                        </tr>
+                        <tr>
+                            <td>neq</td>
+                            <td>for a not equals match</td>
+                        </tr>
+                        <tr>
+                            <td>null</td>
+                            <td>for a null match</td>
+                        </tr>
+                        <tr>
+                            <td>notnull</td>
+                            <td>for a not null match</td>
+                        </tr>
+                        <tr>
+                            <td>gt</td>
+                            <td>for a greater than match</td>
+                        </tr>
+                        <tr>
+                            <td>lt</td>
+                            <td>for a less than match</td>
+                        </tr>
+                        <tr>
+                            <td>gte</td>
+                            <td>for a greater than or equals match</td>
+                        </tr>
+                        <tr>
+                            <td>lte</td>
+                            <td>for a less than or equals match</td>
+                        </tr>
+                        <tr>
+                            <td>startswith</td>
+                            <td>for a string starts with match</td>
+                        </tr>
+                        <tr>
+                            <td>endswith</td>
+                            <td>for a string ends with match</td>
+                        </tr>
+                        <tr>
+                            <td>contains</td>
+                            <td>or a string contains match</td>
+                        </tr>
+                    </table>
+
+
+                </div>
+                <div #deleteFiltered class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-cta">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-cta">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>DELETE</b> <span class="text-cta">{{backendURL}}/api/tabularData/filtered/{{datasourceUpdate.instanceImportKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="deleteFiltered.textContent"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal" [innerHTML]="deleteFilteredExample"></pre>
+            </div>
+
+
+        </ng-template>
+    </div>
+
+    <div class="dialog-footer">
+        <button mat-button mat-dialog-close mat-stroked-button type="button">Close</button>
+        <button mat-button mat-flat-button color="primary" type="button" (click)="saveApiAccess()">Save</button>
+    </div>
+
+</div>
+
+

package/src/lib/components/datasource/create-datasource/api-access/api-access.component.spec.ts

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

package/src/lib/components/datasource/create-datasource/api-access/api-access.component.ts

@@ -0,0 +1,148 @@
+import {Component, Inject, Input, 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 {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar';
+import {HttpClient} from '@angular/common/http';
+
+@Component({
+    selector: 'ki-api-access',
+    templateUrl: './api-access.component.html',
+    styleUrls: ['./api-access.component.sass'],
+    host: {class: 'dialog-wrapper'}
+})
+export class ApiAccessComponent implements OnInit {
+
+    @Input() apiKeys: any;
+
+    public backendURL: string;
+    public datasourceUpdate: any;
+    public datasourceInstanceKey: any;
+    public columns: any;
+    public listQueryString: string = '';
+    public createExample: string;
+    public updateExample: string;
+    public deleteExample: string;
+    public deleteFilteredExample: string;
+    public showExample = false;
+
+    constructor(public dialogRef: MatDialogRef<ApiAccessComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any,
+                private datasourceService: DatasourceService,
+                private snackBar: MatSnackBar,
+                private http: HttpClient) {
+    }
+
+    async ngOnInit() {
+        this.backendURL = this.data.backendURL;
+        this.datasourceUpdate = this.data.datasourceUpdate;
+        this.datasourceInstanceKey = this.data.datasourceInstanceKey;
+        this.columns = this.data.columns;
+
+        this.showExample = !!this.datasourceUpdate.instanceImportKey;
+
+        const example = ['[{'];
+
+        this.columns.forEach((column, index) => {
+            if (column.type !== 'id') {
+                example.push('<span class="text-cta">"' + column.name + '":</span> ' + this.getColumnTypeDisplayString(column.type));
+                if (index !== this.columns.length - 1) {
+                    example.push(', ');
+                }
+            }
+            this.listQueryString += 'filter_' + column.name + '=VALUE&';
+            if (index == this.columns.length - 1)
+                this.listQueryString += 'sort=' + column.name + '|desc';
+        });
+        example.push('}]');
+        this.createExample = example.join('');
+
+        const update = ['[{'];
+        this.columns.forEach((column, index) => {
+            update.push('<span class="text-cta">"' + column.name + '":</span> ' + this.getColumnTypeDisplayString(column.type));
+            if (index !== this.columns.length - 1) {
+                update.push(', ');
+            }
+        });
+        update.push('}]');
+        this.updateExample = update.join('');
+
+        const deleteString: string[] = ['[{'];
+        this.columns.forEach((column, index) => {
+            if (column.type === 'id' || column.keyField) {
+                if (index > 0) {
+                    deleteString.push(', ');
+                }
+                deleteString.push('<span class="text-cta">"' + column.name + '":</span> ' + this.getColumnTypeDisplayString(column.type));
+            }
+        });
+
+        deleteString.push('}]');
+        this.deleteExample = deleteString.join('');
+
+        const deleteFiltered: string[] = ['[{'];
+        if (this.columns.length > 0) {
+            deleteFiltered.push('<span class="text-cta">"column":</span> "' + this.columns[0].name + '", <span class="text-cta">"value:</span> "25", <span class="text-cta">"matchType:</span> "eq"');
+        }
+        deleteFiltered.push('}]');
+        this.deleteFilteredExample = deleteFiltered.join('');
+
+        this.apiKeys = await this.http.get('/account/apikey/first/customdatasourceupdate').toPromise();
+    }
+
+
+    private getColumnTypeDisplayString(columnType) {
+        let exampleValue = null;
+        switch (columnType) {
+            case "integer":
+                exampleValue = 10;
+                break;
+            case "id":
+                exampleValue = 1;
+                break;
+            case "float":
+                exampleValue = "1.5";
+                break;
+            case "date":
+                exampleValue= "2025-01-01";
+                break;
+            case "datetime":
+                exampleValue = "2025-01-01 10:00:00";
+                break;
+            case "boolean":
+                exampleValue = "true";
+                break;
+            default:
+                exampleValue = "string value";
+                break;
+        }
+        return columnType === "id" || columnType === "integer" || columnType === "float" || columnType === "boolean" ? exampleValue : '"' + exampleValue + '"';
+    }
+
+    public copied() {
+        this.snackBar.open('Copied to Clipboard', null, {
+            duration: 2000,
+            verticalPosition: 'top'
+        });
+    }
+
+    public async saveApiAccess() {
+        await this.datasourceService.updateCustomDatasource(this.datasourceInstanceKey, {
+            title: this.datasourceUpdate.title,
+            importKey: this.datasourceUpdate.instanceImportKey,
+            fields: this.datasourceUpdate.fields,
+            adds: [],
+            updates: [],
+            deletes: [],
+            replaces: []
+        });
+
+        if (this.showExample) {
+            this.dialogRef.close();
+        }
+
+        this.showExample = !!this.datasourceUpdate.instanceImportKey;
+    }
+}