import { Component, input, Input } from '@angular/core';
import { columns } from './my-queue.columns';
import { BaseDataViewComponent } from '../../shared/components/base-data-view.component';
import { DataType } from '../../models/DataType';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "./my-queue.facade";
import * as i2 from "@angular/common";
import * as i3 from "verben-ng-ui";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/router";
import * as i6 from "../form-control/form-control.component";
export class MyQueueComponent extends BaseDataViewComponent {
    cdr;
    facade;
    isGeneral = input(false);
    user;
    config = {
        dataSource: [], // Populate from service
        columns: columns, // Your existing column definitions
        cardDataMapper: (task) => ({
            selected: false,
            title: task.Name,
            data: task,
            body: [
                { title: 'Name', value: task.Name },
                { title: 'Status', value: task.Status },
            ],
            children: [],
        }),
        onDetailView: (task) => {
            // Custom detail view logic
        },
    };
    selectedTaskCode = null;
    activeActionType = null;
    comment = '';
    isModalVisible = false;
    tableRowActions = [
        // { label: 'Pick Task', action: (data: Task) => {}, divider: false },
        // { label: 'Release Task', action: (data: Task) => {}, divider: false },
        // { label: 'Follow Task', action: (data: Task) => {}, divider: true },
        {
            label: 'Pass On',
            action: (data) => {
                // console.log(data);
                this.activeActionType = ActionType.PassOn;
                this.selectedTaskCode = data.Code;
                this.facade.loadNextActions(data.Code);
                // .then((actions) => {
                //   if (actions.length === 1) {
                //     this.selectedAction = actions[0];
                //     this.facade
                //       .loadNextActors(data.Code, this.selectedAction?.Code)
                //       .then((actors) => {});
                //   }
                // });
                this.facade.loadTaskForms(data.Code);
                // console.log(this.selectedTaskCode);
            },
            divider: false,
        },
        {
            label: 'Pass Back',
            action: (data) => {
                this.activeActionType = ActionType.PassBack;
                this.selectedTaskCode = data.Code;
                this.facade.loadPreviousActions(data.Code);
            },
            divider: false,
        },
        {
            label: 'Skip To',
            action: (data) => {
                this.activeActionType = ActionType.SkipTo;
                this.selectedTaskCode = data.Code;
                this.facade.loadAllPreviousActions(data.Code);
            },
            divider: false,
        },
        {
            label: 'Re-Assign',
            action: (data) => {
                this.activeActionType = ActionType.ReAssign;
                this.selectedTaskCode = data.Code;
            },
            divider: true,
        },
        // { label: 'View Operation', action: (data: Task) => {}, divider: false },
    ];
    nextActions = [];
    nextActors = [];
    stageForm = null;
    active = 0;
    dataType = DataType.Text;
    recipientCode = null;
    selectedAction = new BehaviorSubject(null);
    currentTask = null;
    constructor(cdr, facade) {
        super();
        this.cdr = cdr;
        this.facade = facade;
        this.facade.getRequests$().subscribe((data) => {
            this.data.set(data);
        });
        this.facade.getNextActions$().subscribe((data) => {
            this.nextActions = data;
        });
        this.facade.getNextActors$().subscribe((data) => {
            this.nextActors = data;
        });
        this.facade.getTaskForms$().subscribe((data) => {
            this.stageForm = data?.[0] || null;
        });
    }
    loadInitialData() {
        this.facade.updateQueryParams({ user: this.user });
        try {
            this.facade.loadRequests();
        }
        catch (error) {
            // Handle error
        }
    }
    getCardDataByIdentifier(mailAddress) {
        return this.cardData().find(({ data }) => data.MailAddress === mailAddress);
    }
    async loadMore() {
        try {
            await this.facade.loadMore();
        }
        catch (error) {
            // Handle error
        }
    }
    getTableActions(task) {
        if (task.FullStages?.[0]?.IsEntryPoint) {
            return this.tableRowActions.filter(({ label }) => label !== 'Pass Back' && label !== 'Skip To');
        }
        else {
            return this.tableRowActions;
        }
    }
    groupByWorkflowCode(task) {
        return `Workflow: ${task.WorkflowCode}`;
    }
    handlePopupClose(event) {
        if (event) {
            this.selectedTaskCode = null;
        }
    }
    checkForFormThenPassOn(task) {
        this.currentTask = task;
        // if (this.stageForm) {
        //   this.isModalVisible = true;
        // } else {
        //   this.passOn();
        // }
        this.passOn();
    }
    handleAction(task) {
        const action = this.activeActionType;
        switch (action) {
            case ActionType.PassOn:
                console.log('Pass On Action', task);
                this.checkForFormThenPassOn(task);
                break;
            case ActionType.ReAssign:
                this.facade.reAssign(task, this.comment).then(() => {
                    this.comment = '';
                    this.nextActions = [];
                    this.recipientCode = null;
                    this.selectedAction.next(null);
                });
                break;
            case ActionType.PassBack:
                if (this.selectedAction) {
                    const selectedAction = this.selectedAction.getValue();
                    if (selectedAction) {
                        this.facade
                            .passBack(selectedAction, task, this.comment, this.recipientCode)
                            .then(() => {
                            this.comment = '';
                            this.nextActions = [];
                            this.recipientCode = null;
                            this.selectedAction.next(null);
                        });
                    }
                }
                break;
            case ActionType.SkipTo:
                const selectedAction = this.selectedAction.getValue();
                if (selectedAction) {
                    this.facade
                        .skipTo(selectedAction, task, this.comment, this.recipientCode)
                        .then(() => {
                        this.comment = '';
                        this.nextActions = [];
                        this.recipientCode = null;
                        this.selectedAction.next(null);
                    });
                }
                break;
            default:
                break;
        }
    }
    submitForm() {
        const form = this.stageForm;
        if (form && this.currentTask) {
            this.facade
                .fillForm(form, this.currentTask.Code)
                .then((filledForm) => {
                this.stageForm = null;
                this.isModalVisible = false;
                this.passOn();
            })
                .catch((error) => {
                console.error('Error filling form:', error);
                // Handle error (e.g., show a notification)
            });
        }
    }
    passOn() {
        const nextAction = this.nextActions[0];
        // console.log(JSON.stringify(this.currentTask, null, 2));
        const selectedAction = this.selectedAction.getValue();
        console.log('Selected Action:', selectedAction);
        console.log('Current Task:', this.currentTask);
        console.log('Comment:', this.comment);
        console.log('Recipient Code:', this.recipientCode);
        if (selectedAction && this.currentTask && this.comment) {
            this.facade
                .passOn(selectedAction, this.currentTask, this.comment, this.recipientCode)
                .then(() => {
                this.comment = '';
                this.nextActions = [];
                this.recipientCode = null;
                this.selectedAction.next(null);
            });
        }
    }
    areRequiredPropertiesFilled() {
        const properties = this.stageForm?.Entities[this.active].Properties || [];
        // Check if all required properties have valid values
        // return properties.every((property: any) => {
        //   console.log(property);
        //   return (
        //     !property.isRequired ||
        //     (property.Value !== undefined &&
        //       property.Value !== null &&
        //       property.Value !== '')
        //   );
        // });
        return true;
    }
    onActionDropDownChange(event) {
        const selectedAction = event;
        if (selectedAction) {
            console.log('Selected Action:', selectedAction);
            // this.selectedAction = selectedAction;
            this.facade
                .loadNextActors(this.selectedTaskCode, selectedAction.Code)
                .then((actors) => { });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyQueueComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MyQueueFacade }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MyQueueComponent, selector: "lib-my-queue", inputs: { isGeneral: { classPropertyName: "isGeneral", publicName: "isGeneral", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: false,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"config.columns\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [groupBy]=\"groupByWorkflowCode\"\n      >\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value let-deleteRow>\n            <a\n              [routerLink]=\"['/workflow/task-history', value]\"\n              routerLinkActive=\"router-link-active\"\n              class=\"underline text-[#0000FF]\"\n              >view history</a\n            >\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\">\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n              [customStyles]=\"{\n                border: '1px solid #d4a10780',\n                borderRadius: '5px',\n                backgroundColor: 'white'\n              }\"\n              (dropdownOpenChange)=\"handlePopupClose($event)\"\n            >\n              <verben-svg\n                dropdown-trigger\n                icon=\"dots\"\n                [width]=\"4\"\n                [height]=\"24\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <div class=\"bg-white rounded-sm\" dropdown-content>\n                @if (selectedTaskCode && activeActionType) {\n                <div style=\"width: 16rem\">\n                  <div\n                    class=\"flex items-center gap-4 justify-between h-12 px-2 pt-4\"\n                  >\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 16 16\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <g opacity=\"0.6\">\n                        <path\n                          d=\"M6.74649 8.00338C6.91483 8.1347 7.0252 8.20455 7.11531 8.29396C7.98846 9.16222 8.85742 10.0347 9.72917 10.905C9.87167 11.0475 9.99391 11.1921 9.99321 11.4129C9.99251 11.6462 9.89472 11.8152 9.69564 11.9256C9.49307 12.038 9.2926 12.0206 9.10469 11.8899C9.03833 11.8438 8.98175 11.7845 8.92378 11.7272C7.85574 10.6592 6.79678 9.58203 5.71477 8.52867C5.3711 8.19407 5.38437 7.79173 5.70779 7.47599C6.7884 6.42123 7.84875 5.34551 8.91539 4.27607C9.11377 4.07769 9.32054 3.92262 9.623 4.04137C9.97924 4.18107 10.112 4.58901 9.89472 4.90335C9.82976 4.99765 9.74174 5.07728 9.66002 5.1597C8.80642 6.01469 7.95283 6.86968 7.09645 7.72257C7.01472 7.8043 6.91553 7.86856 6.74579 8.00408L6.74649 8.00338Z\"\n                          fill=\"black\"\n                        />\n                      </g>\n                    </svg>\n\n                    <h3 class=\"text-sm font-medium\">Select Assignee</h3>\n                  </div>\n\n                  <div class=\"grid gap-2 max-h-96 overflow-y-auto p-2\">\n                    <verben-drop-down\n                      label=\"Action\"\n                      styleClass=\"w-full\"\n                      width=\"100%\"\n                      [multiselect]=\"false\"\n                      [filter]=\"true\"\n                      [showClear]=\"true\"\n                      placeholder=\"Select Action\"\n                      [(options)]=\"nextActions\"\n                      id=\"actions\"\n                      optionLabel=\"Name\"\n                      [ngModel]=\"selectedAction | async\"\n                      (ngModelChange)=\"selectedAction.next($event)\"\n                      class=\"form-control\"\n                    >\n                    </verben-drop-down>\n\n                    <verben-drop-down\n                      label=\"Actors\"\n                      styleClass=\"w-full\"\n                      width=\"100%\"\n                      [multiselect]=\"false\"\n                      [filter]=\"true\"\n                      [showClear]=\"true\"\n                      placeholder=\"Select Actor\"\n                      [(options)]=\"nextActors\"\n                      id=\"actors\"\n                      optionLabel=\"Name\"\n                      optionValue=\"Code\"\n                      [(ngModel)]=\"recipientCode\"\n                      class=\"form-control\"\n                    >\n                    </verben-drop-down>\n\n                    <textarea\n                      [(ngModel)]=\"comment\"\n                      placeholder=\"Enter Comment\"\n                      class=\"w-full p-1 text-xs border border-primary rounded-md\"\n                      style=\"height: 8rem\"\n                      [cols]=\"8\"\n                    ></textarea>\n\n                    <verbena-button\n                      [disable]=\"!comment\"\n                      [text]=\"activeActionType\"\n                      (click)=\"handleAction(row)\"\n                      class=\"text-xs w-full\"\n                      bgColor=\"#FFE681\"\n                      textColor=\"#404040\"\n                      borderRadius=\"10px\"\n                      fontSize=\"14px\"\n                      pd=\"10px 20px\"\n                      width=\"100%\"\n                      height=\"32px\"\n                    >\n                      {{ activeActionType }}\n                    </verbena-button>\n                  </div>\n                </div>\n                } @else { @for (item of getTableActions(row); track item.label)\n                {\n                <div\n                  (click)=\"item.action(row)\"\n                  class=\"cursor-pointer py-2 px-3 text-sm hover:bg-primary\"\n                >\n                  {{ item.label }}\n                </div>\n                @if (item.divider) {\n                <hr class=\"bg-[#FFE681] h-1 rounded-xl border-0\" />\n                } } }\n              </div>\n            </verben-pop-Up>\n          </ng-template>\n          <ng-template #header>\n            <strong class=\"text-center\">Actions</strong>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"Id\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[#404040]\">{{\n                          item.title\n                        }}</span>\n                        <p class=\"flex items-center\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Status:</label\n                          >\n                          <span id=\"phone\" class=\"text-sm\">{{\n                            item.data.Status\n                          }}</span>\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <span for=\"role\" class=\"font-light\">{{\n                          item.data.WorkflowCode\n                        }}</span>\n                        <a\n                          [routerLink]=\"[\n                            '/workflow/task-history',\n                            item.data.Code\n                          ]\"\n                          routerLinkActive=\"router-link-active\"\n                          class=\"underline text-[#0000FF] text-xs\"\n                          >view history</a\n                        >\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <!-- <lib-user-request-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form> -->\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-between': true,\n              'justify-end': vdcv.hasCurrentItem()\n            }\"\n          >\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData().length }} records loaded</span\n              >\n              <button\n                (click)=\"loadMore()\"\n                class=\"load-more view-links text-[#3479E9] underline\"\n              >\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <lib-data-columns\n        [columns]=\"config.columns\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n      ></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <lib-data-sort\n        [columns]=\"config.columns\"\n        [data]=\"data()\"\n        (sortApplied)=\"onSortUpdated($event)\"\n      ></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button\n        (click)=\"loadMore()\"\n        class=\"load-more view-links text-[#3479E9] underline\"\n      >\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [mode]=\"'drawer'\"\n  [padding]=\"'0px'\"\n  [drawerWidth]=\"'400px'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"isModalVisible\"\n  [modalData]=\"stageForm\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [showCloseIcon]=\"false\"\n>\n</verben-dialogue>\n<ng-template #headerTemplate>\n  <div class=\"bg-[#FFE681] px-6 py-4 flex justify-between items-center\">\n    <h1>Form</h1>\n    <verben-svg\n      class=\"cursor-pointer\"\n      [icon]=\"'close-circle'\"\n      (click)=\"isModalVisible = false\"\n      [width]=\"15\"\n      [height]=\"15\"\n      [stroke]=\"'#fff'\"\n    ></verben-svg>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div *ngIf=\"stageForm?.Entities?.[active]; else emptyState\" class=\"mt-4\">\n      <form-control\n        [dataType]=\"dataType\"\n        [formProperties]=\"stageForm?.Entities?.[active]?.Properties ?? []\"\n      ></form-control>\n\n      <div class=\"flex gap-3 justify-end\">\n        <verbena-button\n          class=\"verben-primary-button\"\n          (click)=\"submitForm()\"\n          [disable]=\"!areRequiredPropertiesFilled()\"\n          text=\"Save\"\n        ></verbena-button>\n      </div>\n    </div>\n\n    <!-- Empty state template -->\n    <ng-template #emptyState>\n      <p class=\"mt-4 p-4 text-gray-600 text-center\">\n        No entries available for the selected form group.\n      </p>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i3.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i3.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i3.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i3.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i3.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "component", type: i3.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i3.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: i3.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i3.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "component", type: i3.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.FormControlComponent, selector: "form-control", inputs: ["dataType", "value", "boolInputType", "formProperties"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyQueueComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-my-queue', template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: false,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"config.columns\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        [groupBy]=\"groupByWorkflowCode\"\n      >\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value let-deleteRow>\n            <a\n              [routerLink]=\"['/workflow/task-history', value]\"\n              routerLinkActive=\"router-link-active\"\n              class=\"underline text-[#0000FF]\"\n              >view history</a\n            >\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-row=\"row\">\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n              [customStyles]=\"{\n                border: '1px solid #d4a10780',\n                borderRadius: '5px',\n                backgroundColor: 'white'\n              }\"\n              (dropdownOpenChange)=\"handlePopupClose($event)\"\n            >\n              <verben-svg\n                dropdown-trigger\n                icon=\"dots\"\n                [width]=\"4\"\n                [height]=\"24\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <div class=\"bg-white rounded-sm\" dropdown-content>\n                @if (selectedTaskCode && activeActionType) {\n                <div style=\"width: 16rem\">\n                  <div\n                    class=\"flex items-center gap-4 justify-between h-12 px-2 pt-4\"\n                  >\n                    <svg\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 16 16\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <g opacity=\"0.6\">\n                        <path\n                          d=\"M6.74649 8.00338C6.91483 8.1347 7.0252 8.20455 7.11531 8.29396C7.98846 9.16222 8.85742 10.0347 9.72917 10.905C9.87167 11.0475 9.99391 11.1921 9.99321 11.4129C9.99251 11.6462 9.89472 11.8152 9.69564 11.9256C9.49307 12.038 9.2926 12.0206 9.10469 11.8899C9.03833 11.8438 8.98175 11.7845 8.92378 11.7272C7.85574 10.6592 6.79678 9.58203 5.71477 8.52867C5.3711 8.19407 5.38437 7.79173 5.70779 7.47599C6.7884 6.42123 7.84875 5.34551 8.91539 4.27607C9.11377 4.07769 9.32054 3.92262 9.623 4.04137C9.97924 4.18107 10.112 4.58901 9.89472 4.90335C9.82976 4.99765 9.74174 5.07728 9.66002 5.1597C8.80642 6.01469 7.95283 6.86968 7.09645 7.72257C7.01472 7.8043 6.91553 7.86856 6.74579 8.00408L6.74649 8.00338Z\"\n                          fill=\"black\"\n                        />\n                      </g>\n                    </svg>\n\n                    <h3 class=\"text-sm font-medium\">Select Assignee</h3>\n                  </div>\n\n                  <div class=\"grid gap-2 max-h-96 overflow-y-auto p-2\">\n                    <verben-drop-down\n                      label=\"Action\"\n                      styleClass=\"w-full\"\n                      width=\"100%\"\n                      [multiselect]=\"false\"\n                      [filter]=\"true\"\n                      [showClear]=\"true\"\n                      placeholder=\"Select Action\"\n                      [(options)]=\"nextActions\"\n                      id=\"actions\"\n                      optionLabel=\"Name\"\n                      [ngModel]=\"selectedAction | async\"\n                      (ngModelChange)=\"selectedAction.next($event)\"\n                      class=\"form-control\"\n                    >\n                    </verben-drop-down>\n\n                    <verben-drop-down\n                      label=\"Actors\"\n                      styleClass=\"w-full\"\n                      width=\"100%\"\n                      [multiselect]=\"false\"\n                      [filter]=\"true\"\n                      [showClear]=\"true\"\n                      placeholder=\"Select Actor\"\n                      [(options)]=\"nextActors\"\n                      id=\"actors\"\n                      optionLabel=\"Name\"\n                      optionValue=\"Code\"\n                      [(ngModel)]=\"recipientCode\"\n                      class=\"form-control\"\n                    >\n                    </verben-drop-down>\n\n                    <textarea\n                      [(ngModel)]=\"comment\"\n                      placeholder=\"Enter Comment\"\n                      class=\"w-full p-1 text-xs border border-primary rounded-md\"\n                      style=\"height: 8rem\"\n                      [cols]=\"8\"\n                    ></textarea>\n\n                    <verbena-button\n                      [disable]=\"!comment\"\n                      [text]=\"activeActionType\"\n                      (click)=\"handleAction(row)\"\n                      class=\"text-xs w-full\"\n                      bgColor=\"#FFE681\"\n                      textColor=\"#404040\"\n                      borderRadius=\"10px\"\n                      fontSize=\"14px\"\n                      pd=\"10px 20px\"\n                      width=\"100%\"\n                      height=\"32px\"\n                    >\n                      {{ activeActionType }}\n                    </verbena-button>\n                  </div>\n                </div>\n                } @else { @for (item of getTableActions(row); track item.label)\n                {\n                <div\n                  (click)=\"item.action(row)\"\n                  class=\"cursor-pointer py-2 px-3 text-sm hover:bg-primary\"\n                >\n                  {{ item.label }}\n                </div>\n                @if (item.divider) {\n                <hr class=\"bg-[#FFE681] h-1 rounded-xl border-0\" />\n                } } }\n              </div>\n            </verben-pop-Up>\n          </ng-template>\n          <ng-template #header>\n            <strong class=\"text-center\">Actions</strong>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"Id\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[#404040]\">{{\n                          item.title\n                        }}</span>\n                        <p class=\"flex items-center\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Status:</label\n                          >\n                          <span id=\"phone\" class=\"text-sm\">{{\n                            item.data.Status\n                          }}</span>\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <span for=\"role\" class=\"font-light\">{{\n                          item.data.WorkflowCode\n                        }}</span>\n                        <a\n                          [routerLink]=\"[\n                            '/workflow/task-history',\n                            item.data.Code\n                          ]\"\n                          routerLinkActive=\"router-link-active\"\n                          class=\"underline text-[#0000FF] text-xs\"\n                          >view history</a\n                        >\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <!-- <lib-user-request-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form> -->\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-between': true,\n              'justify-end': vdcv.hasCurrentItem()\n            }\"\n          >\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData().length }} records loaded</span\n              >\n              <button\n                (click)=\"loadMore()\"\n                class=\"load-more view-links text-[#3479E9] underline\"\n              >\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <lib-data-columns\n        [columns]=\"config.columns\"\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n      ></lib-data-columns>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <lib-data-sort\n        [columns]=\"config.columns\"\n        [data]=\"data()\"\n        (sortApplied)=\"onSortUpdated($event)\"\n      ></lib-data-sort>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button\n        (click)=\"loadMore()\"\n        class=\"load-more view-links text-[#3479E9] underline\"\n      >\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [mode]=\"'drawer'\"\n  [padding]=\"'0px'\"\n  [drawerWidth]=\"'400px'\"\n  [disableFooter]=\"false\"\n  [isVisible]=\"isModalVisible\"\n  [modalData]=\"stageForm\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [showCloseIcon]=\"false\"\n>\n</verben-dialogue>\n<ng-template #headerTemplate>\n  <div class=\"bg-[#FFE681] px-6 py-4 flex justify-between items-center\">\n    <h1>Form</h1>\n    <verben-svg\n      class=\"cursor-pointer\"\n      [icon]=\"'close-circle'\"\n      (click)=\"isModalVisible = false\"\n      [width]=\"15\"\n      [height]=\"15\"\n      [stroke]=\"'#fff'\"\n    ></verben-svg>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div>\n    <div *ngIf=\"stageForm?.Entities?.[active]; else emptyState\" class=\"mt-4\">\n      <form-control\n        [dataType]=\"dataType\"\n        [formProperties]=\"stageForm?.Entities?.[active]?.Properties ?? []\"\n      ></form-control>\n\n      <div class=\"flex gap-3 justify-end\">\n        <verbena-button\n          class=\"verben-primary-button\"\n          (click)=\"submitForm()\"\n          [disable]=\"!areRequiredPropertiesFilled()\"\n          text=\"Save\"\n        ></verbena-button>\n      </div>\n    </div>\n\n    <!-- Empty state template -->\n    <ng-template #emptyState>\n      <p class=\"mt-4 p-4 text-gray-600 text-center\">\n        No entries available for the selected form group.\n      </p>\n    </ng-template>\n  </div>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MyQueueFacade }], propDecorators: { user: [{
                type: Input
            }] } });
var ActionType;
(function (ActionType) {
    ActionType["PickTask"] = "PickTask";
    ActionType["UnPickTask"] = "UnPickTask";
    ActionType["ReAssign"] = "ReAssign";
    ActionType["PassOn"] = "PassOn";
    ActionType["PassBack"] = "PassBack";
    ActionType["FollowTask"] = "FollowTask";
    ActionType["UnfollowTask"] = "UnfollowTask";
    ActionType["SkipTo"] = "SkipTo";
})(ActionType || (ActionType = {}));
//# sourceMappingURL=data:application/json;base64, 