ng-kinintel 0.0.317

package/src/lib/components/dashboard-editor/configure-item/table-cell-formatter/table-cell-formatter.component.spec.ts

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

package/src/lib/components/dashboard-editor/configure-item/table-cell-formatter/table-cell-formatter.component.ts

@@ -0,0 +1,149 @@
+import {Component, Input, OnInit} from '@angular/core';
+import moment from 'moment';
+import {DashboardService} from '../../../../services/dashboard.service';
+import * as lodash from 'lodash';
+const _ = lodash.default;
+
+@Component({
+    selector: 'ki-table-cell-formatter',
+    templateUrl: './table-cell-formatter.component.html',
+    styleUrls: ['./table-cell-formatter.component.sass']
+})
+export class TableCellFormatterComponent implements OnInit {
+
+    @Input() type: string;
+    @Input() data: any = {};
+    @Input() currencies: any = [];
+    @Input() openSide: any;
+    @Input() dataset: any;
+    @Input() dashboards: any = [];
+    @Input() sharedDashboards: any = [];
+    @Input() privateDashboards: any = [];
+    @Input() dashboardParameters: any = [];
+    @Input() actionEvents: any = [];
+
+    public dateFormats: any = [
+        {
+            title: 'None',
+            value: null
+        },
+        {
+            title: moment().format('dddd, D MMMM YYYY'),
+            value: 'dddd, D MMMM YYYY'
+        },
+        {
+            title: moment().format('ddd, D MMM YYYY'),
+            value: 'ddd, D MMM YYYY'
+        },
+        {
+            title: moment().format('D MMMM YYYY'),
+            value: 'D MMMM YYYY'
+        },
+        {
+            title: moment().format('D MMM YYYY'),
+            value: 'D MMM YYYY'
+        },
+        {
+            title: moment().format('D MMMM'),
+            value: 'D MMMM'
+        },
+        {
+            title: moment().format('MMM D'),
+            value: 'MMM D'
+        },
+        {
+            title: moment().format('MMMM YYYY'),
+            value: 'MMMM YYYY'
+        },
+        {
+            title: moment().format('MMMM'),
+            value: 'MMMM'
+        },
+        {
+            title: moment().format('YYYY'),
+            value: 'YYYY'
+        },
+        {
+            title: moment().format('D/M/YYYY'),
+            value: 'D/M/YYYY'
+        },
+        {
+            title: moment().format('DD/MM/YYYY'),
+            value: 'DD/MM/YYYY'
+        },
+        {
+            title: moment().format('YYYY-MM-DD'),
+            value: 'YYYY-MM-DD'
+        }
+    ];
+    public timeFormats: any = [
+        {
+            title: 'None',
+            value: null
+        },
+        {
+            title: moment().format('h a'),
+            value: 'ha'
+        },
+        {
+            title: moment().format('h:mm a'),
+            value: 'h:mm a'
+        },
+        {
+            title: moment().format('h:mm:ss a'),
+            value: 'h:mm:ss a'
+        },
+        {
+            title: moment().format('HH:mm'),
+            value: 'HH:mm'
+        },
+        {
+            title: moment().format('HH:mm:ss'),
+            value: 'HH:mm:ss'
+        }
+    ];
+
+    constructor(private dashboardService: DashboardService) {
+    }
+
+    ngOnInit(): void {
+        if (this.data.linkType === 'dashboard' && this.data.dashboardLink) {
+            this.dashboardParamUpdate(this.data.dashboardLink);
+        }
+    }
+
+    public selectOption(c1: any, c2: any) {
+        if (!c2) {
+            return true;
+        }
+        return c1.value === c2.value;
+    }
+
+    public ctaSelectOption(c1: any, c2: any) {
+        return c1 === c2;
+    }
+
+    public setDecimalValue(value) {
+        if (value === 'undefined') {
+            delete this.data.decimal;
+        }
+    }
+
+    public async dashboardParamUpdate(selection) {
+        if (!this.data.dashboardLinkParams || Array.isArray(this.data.dashboardLinkParams)) {
+            this.data.dashboardLinkParams = {};
+        }
+        const dashboard: any = await this.dashboardService.getDashboard(selection.value);
+        if (dashboard.layoutSettings.parameters) {
+            this.dashboardParameters = _.values(dashboard.layoutSettings.parameters);
+
+            setTimeout(() => {
+                const el = document.getElementsByClassName('dashboard-param-pick').item(0);
+                if (el) {
+                    el.scrollIntoView();
+                }
+            }, 0);
+        }
+    }
+
+}

package/src/lib/components/dashboard-editor/configure-item/vis-network-options.json

@@ -0,0 +1,135 @@
+{
+    "nodes": {
+        "borderWidth": {
+            "type": "number"
+        },
+        "borderWidthSelected": {
+            "type": "number"
+        },
+        "brokenImage": {
+            "type": "text"
+        },
+        "chosen": {
+            "type": "boolean"
+        },
+        "color": {
+            "type": "text"
+        },
+        "opacity": {
+            "type": "number"
+        },
+        "fixed": {
+            "type": "boolean"
+        },
+        "font": {
+            "type": "text"
+        },
+        "group": {
+            "type": "text"
+        },
+        "heightConstraint": {
+            "type": "boolean"
+        },
+        "hidden": {
+            "type": "boolean"
+        },
+        "labelHighlightBold": {
+            "type": "boolean"
+        },
+        "level": {
+            "type": "number"
+        },
+        "mass": {
+            "type": "number"
+        },
+        "physics": {
+            "type": "boolean"
+        },
+        "shadow": {
+            "type": "boolean"
+        },
+        "shape": {
+            "type": "text"
+        },
+        "size": {
+            "type": "number"
+        },
+        "title": {
+            "type": "text"
+        },
+        "value": {
+            "type": "number"
+        },
+        "widthConstraint": {
+            "type": "boolean"
+        },
+        "x": {
+            "type": "number"
+        },
+        "y": {
+            "type": "number"
+        }
+    },
+    "edges": {
+        "arrows": {
+            "type": "text"
+        },
+        "arrowStrikethrough": {
+            "type": "boolean"
+        },
+        "chosen": {
+            "type": "boolean"
+        },
+        "color": {
+            "type": "text"
+        },
+        "dashes": {
+            "type": "boolean"
+        },
+        "font": {
+            "type": "text"
+        },
+        "hidden": {
+            "type": "boolean"
+        },
+        "hoverWidth": {
+            "type": "number"
+        },
+        "label": {
+            "type": "text"
+        },
+        "labelHighlightBold": {
+            "type": "boolean"
+        },
+        "length": {
+            "type": "number"
+        },
+        "physics": {
+            "type": "boolean"
+        },
+        "selectionWidth": {
+            "type": "number"
+        },
+        "selfReferenceSize": {
+            "type": "number"
+        },
+        "shadow": {
+            "type": "boolean"
+        },
+        "smooth": {
+            "type": "boolean"
+        },
+        "title": {
+            "type": "text"
+        },
+        "value": {
+            "type": "number"
+        },
+        "width": {
+            "type": "number"
+        },
+        "widthConstraint": {
+            "type": "boolean"
+        }
+    }
+}

package/src/lib/components/dashboard-editor/dashboard-editor.component.html

@@ -0,0 +1,205 @@
+<ng-template [ngIf]="true">
+
+    <div class="align-center justify-between flex-wrap bg-white px-2 border-b border-gray-200">
+        <div *ngIf="editDashboardTitle" class="align-center ml-2">
+            <input type="text" class="title-input py-1.5" placeholder="Enter dashboard title" [(ngModel)]="dashboard.title"
+                [ngClass]="{'border-red-600': !dashboard.title || dashboard.title === 'New Dashboard'}">&nbsp;
+        </div>
+
+        <div *ngIf="!editDashboardTitle" class="align-center ml-2">
+            <h2 class="dashboard-title">{{dashboard.title}}</h2>&nbsp;
+            <button mat-icon-button (click)="editDashboardTitle = true;">
+                <span class="material-symbols-outlined">edit</span>
+            </button>
+        </div>
+
+        <div class="data-actions">
+            <mat-radio-group class="dashboard-operations flex items-center text-sm"
+                             *ngIf="admin" aria-label="Select a scope" [(ngModel)]="accountId">
+                <mat-radio-button class="mt-0" [value]="null">Shared</mat-radio-button>
+                <mat-radio-button class="mt-0 ml-2" [value]="0">Private</mat-radio-button>
+            </mat-radio-group>
+            <div class="divider" *ngIf="admin"></div>
+            <button matTooltip="Toggle setting to enable/remove results limit" (click)="togglePerformance()"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="text-xl material-symbols-outlined" *ngIf="optimise">check_circle</span>
+                <span class="text-xl material-symbols-outlined" *ngIf="!optimise">unpublished</span>
+                optimise
+            </button>
+            <button matTooltip="Edit dashboard settings" (click)="openSettings()"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl">tune</span>
+                settings
+            </button>
+            <button (click)="toggleNotifications()" matTooltip="Edit default notification group"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl" *ngIf="!dashboard.alertsEnabled"
+                          title="Notifications for this dashboard are now off. Press to toggle on.">notifications_off
+                </span>
+                <span class="material-symbols-outlined text-xl" *ngIf="dashboard.alertsEnabled"
+                          title="Notifications for this dashboard are on. Press to toggle off.">notifications_active
+                </span>
+                notifications
+            </button>
+            <button [matMenuTriggerFor]="spacingMenu" matTooltip="Set dashboard item spacing"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl">grid_view</span>
+                spacing
+            </button>
+            <mat-menu #spacingMenu="matMenu">
+                <button mat-menu-item *ngFor="let space of gridSpaces" (click)="updateGridSpacing(space.value)">
+                    {{space.label}}
+                </button>
+            </mat-menu>
+            <button (click)="openFullScreen()" matTooltip="View full screen"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl">fullscreen</span>
+                full screen
+            </button>
+            <button (click)="editDashboardItems()" matTooltip="Show/hide dashboard widget panel"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl">widgets</span>
+                widgets
+            </button>
+            <div class="divider"></div>
+            <button (click)="reloadDashboard()"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl">sync</span>
+                reload
+            </button>
+            <button (click)="save()"
+                    class="w-20 flex flex-col items-center justify-center py-1 px-2 text-xs text-gray-600 cursor-pointer hover:bg-gray-100">
+                <span class="material-symbols-outlined text-xl">save</span>
+                save
+            </button>
+        </div>
+    </div>
+
+
+    <div class="dashboard-parameters flex-wrap bg-gray-50 px-4 py-0.5 border-b border-gray-200" *ngIf="dashboard.layoutSettings">
+
+        <div class="list-title">
+            Parameters
+        </div>
+        <ng-template ngFor let-parameter [ngForOf]="_.values(dashboard.layoutSettings.parameters)" let-i=index>
+            <label>
+                {{parameter.title}}
+                <div class="parameter-input">
+                    <ng-template [ngIf]="parameter.type === 'text'">
+                        <input type="text" placeholder="Enter {{parameter.title}}" [(ngModel)]="parameter.value"
+                               (keyup.enter)="reloadDashboard()" required autofocus>
+                    </ng-template>
+                    <ng-template [ngIf]="parameter.type === 'numeric'">
+                        <input type="number" placeholder="Enter {{parameter.title}}" [(ngModel)]="parameter.value"
+                               (keyup.enter)="reloadDashboard()" required autofocus>
+                    </ng-template>
+                    <ng-template [ngIf]="parameter.type === 'list'">
+                        <select class="pr-8 py-1.5 pl-1" [(ngModel)]="parameter.value"
+                                (change)="reloadDashboard()" required autofocus>
+                            <option *ngFor="let item of parameter.list" [value]="item.value">{{item.label}}</option>
+                        </select>
+                    </ng-template>
+                    <ng-template [ngIf]="parameter.type === 'date' || parameter.type === 'datetime'">
+                        <ng-template [ngIf]="!parameter._dateType">
+                            <div class="flex items-center">
+                                <button (click)="changeDateType($event, parameter, 'picker')"
+                                        class="hover:bg-gray-50 text-gray-800 border border-gray-300 py-0.5 pr-2 rounded mr-2 bg-white flex items-center">
+                                    <span class="material-symbols-outlined text-base mx-1">calendar_month</span>
+                                    Date Picker
+                                </button>
+                                <button (click)="changeDateType($event, parameter, 'period')"
+                                        class="hover:bg-gray-50 text-gray-800 border border-gray-300 py-0.5 pr-2 rounded bg-white flex items-center">
+                                    <span class="material-symbols-outlined text-base mx-1">restore</span>
+                                    Time Period
+                                </button>
+                            </div>
+                        </ng-template>
+                        <ng-template [ngIf]="parameter._dateType === 'picker'">
+                            <input [type]="parameter.type === 'date' ? 'date' : 'datetime-local'" placeholder="Enter {{parameter.title}}" [(ngModel)]="parameter.value"
+                                   (keyup.enter)="reloadDashboard()" required autofocus>
+
+                            <a (click)="changeDateType($event, parameter, 'period')"
+                               matTooltip="Time Period"
+                               class="text-center ml-2 hover:bg-gray-50 text-gray-800 border border-gray-300 py-0.5 pr-0.5 rounded mr-2 bg-white flex items-center">
+                                <span class="material-symbols-outlined text-base ml-1.5 mr-1">restore</span>
+                            </a>
+                        </ng-template>
+                        <ng-template [ngIf]="parameter._dateType === 'period'">
+                            <div class="flex items-center">
+                                <input #periodValue type="number" placeholder="No." required autofocus
+                                       class="w-16 mr-2" min="0" [value]="parameter._periodValue || 1"
+                                       (change)="updatePeriodValue(periodValue.value, period.value, parameter)">
+
+                                <select class="param-period-picker mr-2" [value]="parameter._period || 'DAYS'"
+                                        #period (change)="updatePeriodValue(periodValue.value, period.value, parameter)">
+                                    <option value="DAYS">Days</option>
+                                    <option value="HOURS">Hours</option>
+                                </select>
+
+                                <div>Ago</div>
+                            </div>
+
+                            <a (click)="changeDateType($event, parameter, 'picker')"
+                               matTooltip="Date Picker"
+                               class="text-center ml-2 hover:bg-gray-50 text-gray-800 border border-gray-300 py-0.5 pr-0.5 rounded mr-2 bg-white flex items-center">
+                                <span class="material-symbols-outlined text-base">calendar_month</span>
+                            </a>
+                        </ng-template>
+
+                    </ng-template>
+                    <ng-template [ngIf]="parameter.type === 'boolean'">
+                        <mat-slide-toggle class="pr-4" color="primary"
+                                          [checked]="parameter.value" (change)="booleanUpdate($event, parameter)"
+                                          required></mat-slide-toggle>
+                    </ng-template>
+                    <ng-template [ngIf]="!parameter._locked">
+                        <button mat-icon-button [matMenuTriggerFor]="paramMenu">
+                            <span class="material-symbols-outlined">settings</span>
+                        </button>
+                        <mat-menu #paramMenu="matMenu">
+                            <button mat-menu-item (click)="addParameter(parameter, i)">Edit Parameter</button>
+                            <button mat-menu-item (click)="removeParameter(parameter)">Remove Parameter</button>
+                        </mat-menu>
+                    </ng-template>
+                </div>
+            </label>
+
+            <div class="divider ml-2" *ngIf="_.values(dashboard.layoutSettings.parameters).length"></div>
+        </ng-template>
+        <button mat-icon-button color="primary" class="mx-2" (click)="addParameter()">
+            <span class="material-symbols-outlined">add_circle</span>
+        </button>
+        <button mat-flat-button color="primary" class="mr-2 leading-8" *ngIf="_.values(dashboard.layoutSettings.parameters).length"
+                (click)="reloadDashboard()">
+            Apply Parameters
+        </button>
+    </div>
+
+</ng-template>
+<div class="grid-container flex justify-between">
+    <div class="grid-stack flex-1 h-full"></div>
+    <div class="right-panel bg-transparent" [ngClass]="{show: showEditPanel}">
+        <div class="flex items-center justify-between border-b mb-4">
+            <div class="pl-4 available-widgets">Available Widgets</div>
+            <button mat-icon-button color="primary" (click)="editDashboardItems()">
+                <span class="material-symbols-outlined">close</span>
+            </button>
+        </div>
+        <ng-template ngFor let-group [ngForOf]="itemTypeGroups" let-j=index>
+            <div class="pl-4 uppercase text-xs text-gray-600 tracking-wider">{{group}}</div>
+            <div class="draggable-toolbar">
+                <ng-template ngFor let-item [ngForOf]="itemTypesByGroup[group]" let-i=index>
+                    <div class="grid-stack-item ui-draggable" [attr.gs-w]="item.width"
+                         [attr.gs-h]="item.height" [attr.data-index]="i" [attr.data-group]="group">
+                        <div class="grid-stack-item-content shadow" draggable="true">
+                            <ki-item-component class="p-0 justify-center text-sm" [dragItem]="true"
+                                               [dashboardItemType]="item"></ki-item-component>
+                        </div>
+                    </div>
+                </ng-template>
+            </div>
+        </ng-template>
+
+    </div>
+</div>
+