@tuki-io/tuki-widgets 0.0.219-dev.0 → 0.0.220

package/projects/tuki/widgets/contact-center/cc-readiness/widgets/summary-grid/summary-grid.component.ts

@@ -1,59 +0,0 @@
-import { Component, inject, Input, OnInit } from "@angular/core";
-import { CcReadinessService } from "../../cc-readiness.service";
-import { map, Observable } from "rxjs";
-import { EntityType, UccxServerEntityStats } from "../../types/cc-readiness";
-
-interface SummaryGridCount {
-    name: string;
-    value: number;
-}
-
-interface SummaryGridItem {
-    uccxIp: string;
-    counts: SummaryGridCount[];
-}
-
-const ENTITY_CONFIG: { [key: string]: { label: string } } = {
-    applications: { label: 'Applications' },
-    triggers: { label: 'Triggers' },
-    contactServiceQueues: { label: 'CSQs' },
-    resources: { label: 'Resources' },
-    resourceGroups: { label: 'Resource Groups' },
-    skills: { label: 'Skills' },
-    xml: { label: 'XML' },
-    scripts: { label: 'Scripts' },
-    audioPrompts: { label: 'Audio Prompts' },
-    teams: { label: 'Teams' },
-    wrapUpCodes: { label: 'Wrap-Up Codes' },
-    phonebooks: { label: 'Phonebooks' }
-};
-
-@Component({
-    selector: 'cc-summary-grid',
-    templateUrl: 'summary-grid.component.html',
-    styleUrls: ['summary-grid.component.scss']
-})
-export class SummaryGridComponent implements OnInit {
-    @Input() customerId!: number;
-    @Input() host!: string;
-    @Input() token!: string;
-
-    private readonly ccReadinessService = inject(CcReadinessService);
-
-    readonly ENTITY_CONFIG = ENTITY_CONFIG;
-
-    data$!: Observable<SummaryGridItem[]>;
-
-    ngOnInit(): void {
-        this.ccReadinessService.setToken(this.token);
-        this.ccReadinessService.setHost(this.host);
-
-        this.data$ = this.ccReadinessService.fetchUccxServerEntityStats(this.customerId)
-            .pipe(map(items => {
-                return items.map(item => ({
-                    uccxIp: item.uccxIp,
-                    counts: Object.entries(item.counts).map(([name, value]) => ({ name, value }))
-                }));
-            }));
-    }
-}

package/projects/tuki/widgets/contact-center/cc-script-editor/cc-script-editor.component.html

@@ -1,36 +0,0 @@
-<div class="wxcc-flowchart-wrapper">
-    <header class="wxcc-flowchart-header">
-        <wxcc-file-selection-bar
-            *ngIf="state.fileNames && state.fileNames.length"
-            [fileNames]="state.fileNames"
-            [selectedHost]="state.uccxIp"
-            [selectedFileName]="state.selectedFileName"
-            (fileNameSelectionChange)="onFileNameSelectionChange($event)">
-        </wxcc-file-selection-bar>
-        <wxcc-actions-bar
-            *ngIf="state.flowchart"
-            (save)="onSave()"
-            (reset)="onReset()"
-            (exportNonIr)="onExportNonIr()"
-            (complete)="onComplete()">
-        </wxcc-actions-bar>
-    </header>
-    <ng-container *ngIf="!state.loading; else loadingTemplate">
-        <wxcc-flowchart
-            *ngIf="state.flowchart; else errorTemplate"
-            [flowchart]="state.flowchart">
-        </wxcc-flowchart>
-    </ng-container>
-</div>
-
-<ng-template #loadingTemplate>
-    <div class="placeholder-wrapper">
-        <mat-spinner diameter="40"></mat-spinner>
-    </div>
-</ng-template>
-
-<ng-template #errorTemplate>
-    <div class="placeholder-wrapper">
-        Error loading script
-    </div>
-</ng-template>

package/projects/tuki/widgets/contact-center/cc-script-editor/cc-script-editor.component.scss

@@ -1,28 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.wxcc-flowchart-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-
-  .wxcc-flowchart-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-  }
-
-  .placeholder-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-}

package/projects/tuki/widgets/contact-center/cc-script-editor/cc-script-editor.component.ts

@@ -1,263 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { WxCCAPIService } from "./services/wxcc-flow-api.service";
-import { forkJoin, of, Subject, throwError } from "rxjs";
-import { IWxCCFlowchart, IWxCCJSON, IWxCCNonIRJSON } from "./types/wxcc";
-import { WxCC2GraphService } from "./services/wxcc2graph.service";
-import { filter, finalize, mergeMap, takeUntil, tap } from "rxjs/operators";
-import irData from "./mock/data/QWC_ir.json";
-// import { UCCXWorkflowAPIService } from "../../uccx-workflow/services/uccx-workflow-api.service";
-// import { CustomersService } from "../../../services/customers.service";
-// import { ContactCenterService } from "../contact-center.service";
-// import {
-//     CALL_FLOW_MIGRATION_STATUSES_TO_SCRIPT_STATUS,
-//     CallFlowMigrationStatus
-// } from "../interfaces/call-flow-migration-status.interface";
-import { FileState } from "./constants/wxcc-api.constants";
-
-type WxCCFlowchartState = {
-    fileNames: { fileName: string; host: string }[];
-    uccxIp: string;
-    selectedFileName: string;
-    selectedFileStatus: FileState;
-    loading: boolean;
-    flowchart: IWxCCFlowchart | null;
-    irDoc: IWxCCJSON;
-    nonIrDoc: IWxCCNonIRJSON;
-    errorMessage: string;
-    statuses: any[];
-};
-
-@Component({
-    selector: 'cc-script-editor',
-    templateUrl: './cc-script-editor.component.html',
-    styleUrls: ['./cc-script-editor.component.scss']
-})
-export class WxCCFlowchartPageComponent implements OnInit, OnDestroy {
-    @Input() customerId = 0;
-    @Input() host = "";
-    @Input() token = "";
-
-    private readonly destroy$ = new Subject<void>();
-
-    readonly state: WxCCFlowchartState = {
-        loading: true
-    } as any;
-
-    constructor(
-        private readonly api: WxCCAPIService,
-        private readonly wxcc2graph: WxCC2GraphService,
-        // private readonly customersService: CustomersService,
-        // private readonly uccxWorkflowApi: UCCXWorkflowAPIService,
-        // private readonly contactCenterService: ContactCenterService
-    ) { }
-
-    ngOnInit(): void {
-        this.subscribeToCustomerChanges();
-    }
-
-    ngOnDestroy(): void {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-
-    private init(): void {
-        this.loadMockFlowchart();
-    }
-
-    private subscribeToCustomerChanges(): void {
-        // if (!this.customer) {
-        // this.customersService.customer$
-        //     .pipe(takeUntil(this.destroy$))
-        //     .subscribe((customer) => {
-        //         if (customer) {
-        this.init();
-        // }
-        // });
-        // } else {
-        //     this.init();
-        // }
-    }
-
-    private loadMockFlowchart(): void {
-        const irDoc = irData as unknown as IWxCCJSON;
-        this.state.irDoc = irDoc;
-        this.state.flowchart = this.wxcc2graph.parseWxCC(irDoc);
-        this.setLoading(false);
-    }
-
-    private loadFileNames(): void {
-        // forkJoin([
-        //     this.uccxWorkflowApi.fetchFileNames(this.customerId)
-        //         .pipe(filter(fileNames => fileNames && fileNames.length > 0)),
-        //     this.contactCenterService.getCallFlowMigrationStatuses()
-        // ]).pipe(takeUntil(this.destroy$))
-        //     .subscribe(([fileNames, statuses]) => {
-        //         this.state.fileNames = fileNames;
-        //         this.state.uccxIp = fileNames[0].host;
-        //         this.state.selectedFileName = fileNames[0].fileName;
-
-        //         this.state.statuses = statuses.filter(status => status.uccxIp === this.state.uccxIp);
-        //         this.state.selectedFileStatus = this.getStatus(this.state.selectedFileName, this.state.uccxIp);
-
-        //         this.loadWxCCFlowData();
-        //     });
-    }
-
-    private loadWxCCFlowData(): void {
-        forkJoin([
-            this.api.fetchWxCCFlowData(this.baseParams, this.state.selectedFileStatus),
-            this.api.fetchWxCCFlowDataIR(this.baseParams, this.state.selectedFileStatus),
-        ]).pipe(
-            mergeMap(([nonIrDoc, irDoc]) =>
-                irDoc !== null ?
-                    of({ nonIrDoc, irDoc }) :
-                    throwError(() => new Error('No wxcc flow diagram available for this script'))
-            ),
-            takeUntil(this.destroy$),
-            finalize(() => this.setLoading(false))
-        ).subscribe({
-            next: ({ nonIrDoc, irDoc }) => {
-                this.wxcc2graph.setSourceDocuments(irDoc, nonIrDoc);
-                this.state.irDoc = irDoc;
-                this.state.nonIrDoc = nonIrDoc;
-                this.state.flowchart = this.wxcc2graph.parseWxCC(irDoc, nonIrDoc);
-            },
-            error: (error) => {
-                this.state.flowchart = null;
-                this.setError('No wxcc flow diagram available for this script');
-            }
-        });
-    }
-
-    onSave() {
-        this.setLoading(true);
-
-        forkJoin([
-            this.api.saveWxCCFlowData(this.baseParams, this.wxcc2graph.wxccNonIRJSON),
-            this.api.saveWxCCFlowDataIR(this.baseParams, this.wxcc2graph.wxccJSON)
-        ]).pipe(
-            takeUntil(this.destroy$),
-            finalize(() => this.setLoading(false)),
-            tap(() => {
-                this.state.flowchart = this.wxcc2graph.parseWxCC(
-                    this.wxcc2graph.wxccJSON,
-                    this.wxcc2graph.wxccNonIRJSON
-                );
-            })
-        ).subscribe({
-            next: ([regularResponse, irResponse]) => console.log('Flow data saved as DRAFT', regularResponse, irResponse),
-            error: (error) => console.error('Error while saving wxcc data: ', error)
-        });
-    }
-
-    onExportNonIr() {
-        if (!this.wxcc2graph.wxccNonIRJSON) {
-            console.error('Non-IR wxcc document is not loaded');
-            return;
-        }
-
-        const fileStem = (this.state.selectedFileName || 'wxcc-flow').replace(/\.[^/.]+$/, '');
-        const fileName = fileStem + '-non-ir.json';
-        const jsonContent = JSON.stringify(this.wxcc2graph.wxccNonIRJSON, null, 2);
-        const blob = new Blob([jsonContent], { type: 'application/json' });
-        const url = window.URL.createObjectURL(blob);
-
-        const anchor = document.createElement('a');
-        anchor.href = url;
-        anchor.download = fileName;
-        document.body.appendChild(anchor);
-        anchor.click();
-        document.body.removeChild(anchor);
-
-        window.URL.revokeObjectURL(url);
-    }
-
-    onReset() {
-        this.setLoading(true);
-        forkJoin([
-            this.api.resetWxCCFlowData(this.baseParams),
-            this.api.resetWxCCFlowDataIR(this.baseParams)
-        ]).pipe(
-            takeUntil(this.destroy$),
-            finalize(() => this.setLoading(false))
-        ).subscribe({
-            next: ([nonIrDoc, irDoc]) => {
-                this.wxcc2graph.setSourceDocuments(irDoc, nonIrDoc);
-                this.state.irDoc = irDoc;
-                this.state.nonIrDoc = nonIrDoc;
-                this.state.flowchart = this.wxcc2graph.parseWxCC(irDoc, nonIrDoc);
-                console.log('Flow data reset to original');
-            },
-            error: (error) => {
-                console.error('Error while resetting wxcc data: ', error);
-            }
-        });
-    }
-
-    onComplete() {
-        this.setLoading(true);
-
-        forkJoin([
-            this.api.completeWxCCFlowData(this.baseParams, this.wxcc2graph.wxccNonIRJSON),
-            this.api.completeWxCCFlowDataIR(this.baseParams, this.wxcc2graph.wxccJSON)
-        ]).pipe(
-            takeUntil(this.destroy$),
-            finalize(() => this.setLoading(false))
-        ).subscribe({
-            next: ([regularResponse, irResponse]) => {
-                console.log('Flow data saved as COMPLETED', regularResponse, irResponse);
-            },
-            error: (error) => {
-                console.error('Error while completing wxcc data: ', error);
-            }
-        });
-    }
-
-    onFileNameSelectionChange(item: { fileName: string, host: string }) {
-        const { fileName, host } = item;
-        this.state.selectedFileName = fileName;
-        this.state.uccxIp = host;
-
-        this.state.selectedFileStatus = this.getStatus(fileName, this.state.uccxIp);
-        this.setLoading(true);
-        this.loadWxCCFlowData();
-    }
-
-    getStatus(fileName: string, uccxIp: string): any {
-        if (!this.state.statuses) {
-            throw Error('File status array is undefined');
-        }
-
-        const callFlowMigrationStatus = this.state.statuses.find(
-            status => status.uccxIp === uccxIp && status.scriptName === fileName
-        );
-
-        // if (callFlowMigrationStatus && callFlowMigrationStatus.status) {
-        //     return CALL_FLOW_MIGRATION_STATUSES_TO_SCRIPT_STATUS[callFlowMigrationStatus.status];
-        // }
-    }
-
-    setLoading(loading: boolean): void {
-        this.state.loading = loading;
-    }
-
-    setError(error: string): void {
-        this.state.errorMessage = error;
-    }
-
-    private get baseParams() {
-        return {
-            customerId: this.customerId,
-            uccxIp: this.state.uccxIp || '',
-            fileName: this.state.selectedFileName || ''
-        };
-    }
-
-    // private get customer() {
-    //     return this.customersService.currentCustomer;
-    // }
-
-    // private get customerId() {
-    //     return this.customer.id;
-    // }
-}

package/projects/tuki/widgets/contact-center/cc-script-editor/cc-script-editor.module.ts

@@ -1,54 +0,0 @@
-import { NgModule } from "@angular/core";
-import { WxCCFlowchartComponent } from "./components/wxcc-flowchart/wxcc-flowchart.component";
-import { NodeDetailsSidebarComponent } from "./components/node-details-sidebar/node-details-sidebar.component";
-import { NodeActionToolbarComponent } from "./components/node-action-toolbar/node-action-toolbar.component";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-import { WxCCAPIService } from "./services/wxcc-flow-api.service";
-import { WxCC2GraphService } from "./services/wxcc2graph.service";
-import { WxCCActivityManageService } from "./services/wxcc-activity-manage.service";
-import { WxCCActivityCreationService } from "./services/wxcc-activity-creation.service";
-import { WxCCFileSelectionBarComponent } from "./components/wxcc-file-selection-bar/wxcc-file-selection-bar.component";
-import { WxCCActionsBarComponent } from "./components/wxcc-actions-bar/wxcc-actions-bar.component";
-import { AddNodeDialogComponent } from "./components/dialogs/add-node-dialog/add-node-dialog.component";
-import { LinkNodeDialogComponent } from "./components/dialogs/link-node-dialog/link-node-dialog.component";
-import { NodeSearchPanelComponent } from "./components/node-search-panel/node-search-panel.component";
-import { WxCCFlowchartPageComponent } from "./cc-script-editor.component";
-import { SharedModule } from "../shared/shared.module";
-import { MaterialModule } from "../shared/material.module";
-import { FloatingToolbarModule } from "./components/floating-toolbar/floating-toolbar.module";
-
-@NgModule({
-    declarations: [
-        WxCCFlowchartPageComponent,
-        WxCCFlowchartComponent,
-        NodeDetailsSidebarComponent,
-        NodeActionToolbarComponent,
-        LinkNodeDialogComponent,
-        WxCCFileSelectionBarComponent,
-        AddNodeDialogComponent,
-        WxCCActionsBarComponent,
-        NodeSearchPanelComponent
-    ],
-    imports: [
-        CommonModule,
-        FormsModule,
-        SharedModule,
-        MaterialModule,
-        FloatingToolbarModule
-    ],
-    exports: [
-        WxCCFlowchartPageComponent
-    ],
-    providers: [
-        WxCCAPIService,
-        WxCC2GraphService,
-        WxCCActivityManageService,
-        WxCCActivityCreationService
-    ],
-    entryComponents: [
-        AddNodeDialogComponent,
-        LinkNodeDialogComponent
-    ]
-})
-export class WxCCFlowchartModule { }

package/projects/tuki/widgets/contact-center/cc-script-editor/components/dialogs/add-node-dialog/add-node-dialog.component.scss

@@ -1,111 +0,0 @@
-.form-group {
-  margin-bottom: 1.25rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  .form-label {
-    display: block;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #24292e;
-    margin-bottom: 0.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  .form-control {
-    width: 100%;
-    padding: 0.625rem 0.875rem;
-    font-size: 0.875rem;
-    border: 1px solid #d1d5da;
-    border-radius: 6px;
-    background: white;
-    transition:
-      border-color 0.2s,
-      box-shadow 0.2s;
-    box-sizing: border-box;
-
-    &:focus {
-      outline: none;
-      border-color: #0366d6;
-      box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
-    }
-
-    &::placeholder {
-      color: #959da5;
-    }
-  }
-
-  textarea.form-control {
-    resize: vertical;
-    min-height: 80px;
-  }
-
-  .display-type-preview {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    background: #f6f8fa;
-    border-radius: 6px;
-    margin-bottom: 0.5rem;
-
-    .type-icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    .type-label {
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: #24292e;
-    }
-  }
-
-  .node-selection-list {
-    max-height: 150px;
-    overflow-y: auto;
-    border: 1px solid #d1d5da;
-    border-radius: 6px;
-    background: #fafbfc;
-
-    .node-selection-item {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 0.75rem;
-      cursor: pointer;
-      transition: background 0.15s;
-      border-bottom: 1px solid #e1e4e8;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      &:hover {
-        background: #f0f3f6;
-      }
-
-      &.selected {
-        background: rgba(3, 102, 214, 0.08);
-      }
-
-      .node-name {
-        font-size: 0.8125rem;
-        color: #24292e;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-    .empty-list {
-      padding: 1rem;
-      text-align: center;
-      color: #586069;
-      font-size: 0.8125rem;
-    }
-  }
-}

package/projects/tuki/widgets/contact-center/cc-script-editor/components/dialogs/add-node-dialog/add-node-dialog.component.ts

@@ -1,78 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
-import {
-    CREATABLE_ACTIVITY_DISPLAY_TYPES,
-    CreatableActivityDisplayType,
-    getCreatableActivityDisplayTypeByValue,
-} from '../../../utils/node-mappings';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ReadonlyExtendedActivity } from '../../../types/extended-activity';
-
-export interface NewNodeData {
-    activityTypeName: CreatableActivityDisplayType['activityName'];
-    name: string;
-    parentNodeIds: string[];
-    childNodeIds: string[];
-}
-
-@Component({
-    selector: 'add-node-dialog',
-    templateUrl: './add-node-dialog.component.html',
-    styleUrls: ['./add-node-dialog.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AddNodeDialogComponent implements OnInit {
-    readonly activityDisplayTypes = CREATABLE_ACTIVITY_DISPLAY_TYPES;
-
-    selectedActivityType: CreatableActivityDisplayType = CREATABLE_ACTIVITY_DISPLAY_TYPES[0];
-    nodeName = '';
-    selectedParentIds: string[] = [];
-    selectedChildIds: string[] = [];
-    availableNodes: ReadonlyExtendedActivity[] = [];
-
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: { availableNodes: ReadonlyExtendedActivity[] },
-        private dialogRef: MatDialogRef<AddNodeDialogComponent>
-    ) { }
-
-    ngOnInit(): void {
-        this.availableNodes = this.data.availableNodes;
-    }
-
-    private resetForm(): void {
-        this.selectedActivityType = CREATABLE_ACTIVITY_DISPLAY_TYPES[0];
-        this.nodeName = '';
-        this.selectedParentIds = [];
-        this.selectedChildIds = [];
-    }
-
-    onActivityTypeChange(value: string): void {
-        this.selectedActivityType = getCreatableActivityDisplayTypeByValue(value);
-    }
-
-    onClose(): void {
-        this.dialogRef.close();
-    }
-
-    onSubmit(): void {
-        if (!this.nodeName.trim()) {
-            return;
-        }
-
-        const newNodeData: NewNodeData = {
-            activityTypeName: this.selectedActivityType.activityName,
-            name: this.nodeName.trim(),
-            parentNodeIds: this.selectedParentIds,
-            childNodeIds: this.selectedChildIds
-        };
-
-        this.dialogRef.close(newNodeData);
-    }
-
-    trackByValue(index: number, type: CreatableActivityDisplayType): string {
-        return type.value;
-    }
-
-    trackByNodeId(index: number, node: ReadonlyExtendedActivity): string {
-        return node.id;
-    }
-}