import { Component } from '@angular/core';
import { BaseDataViewComponent } from '../../shared/components/base-data-view.component';
import { columns } from './tasks.columns';
import { TaskModel } from './tasks.models';
import { TaskStatus } from '../../models/TaskStatus';
import { ObjectState } from '../../models/object-state';
import * as i0 from "@angular/core";
import * as i1 from "./tasks.facade";
import * as i2 from "@angular/common";
import * as i3 from "verben-ng-ui";
import * as i4 from "@angular/router";
import * as i5 from "./tasks.form.component";
export class TasksComponent extends BaseDataViewComponent {
    cdr;
    taskFacade;
    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
        },
    };
    tableRowActions = [
        { label: 'Pick Task', action: (data) => { }, divider: false },
        { label: 'Release Task', action: (data) => { }, divider: false },
        { label: 'Follow Task', action: (data) => { }, divider: true },
        { label: 'Pass On', action: (data) => { }, divider: false },
        { label: 'Pass Back', action: (data) => { }, divider: false },
        { label: 'Re-Assign', action: (data) => { }, divider: true },
        { label: 'View Operation', action: (data) => { }, divider: false },
    ];
    constructor(cdr, taskFacade) {
        super();
        this.cdr = cdr;
        this.taskFacade = taskFacade;
    }
    loadInitialData() {
        // this.userService.getRequests().subscribe(
        //   tasks => this.data.set(tasks)
        // );
        // this.data.set(generateWorkflows(5));
        super.loadInitialData();
        // this.data = this.service.getMockUserRequests();
        this.taskFacade.getRequests$().subscribe((data) => {
            this.data.set(data);
        });
        // this.userAccessRequestFacade.getRoles$().subscribe((data) => {
        //   this.roles.set(data);
        // });
        try {
            this.taskFacade.loadRequests();
        }
        catch (error) {
            // Handle error
        }
    }
    onStateChange(event) {
        switch (event.key) {
            case 'create':
                var newItem = new TaskModel({
                    WorkflowCode: '',
                    Status: TaskStatus.Active,
                    Flowable: '',
                    FlowableData: null,
                    FlowablePath: '',
                    CurrentActors: [],
                    DataState: ObjectState.New,
                });
                this.taskFacade.addNewRequest(newItem);
                // const cardData: CardData = {
                //   selected: false,
                //   title: ,
                //   data: newGroup,
                //   body: [],
                //   children: [],
                // };
                // this.data = this.data.concat([newGroup]);
                // this.cardData.push(cardData);
                // this.userCardClicked(cardData);
                this.dataView.isTableView = false;
                break;
            // case 'filter':
            //   this.showFilter = event.value;
            //   break;
            // case 'sort':
            //   this.showSort = event.value;
            //   break;
            // case 'column':
            //   this.showColumn = event.value;
            //   break;
            default:
                break;
        }
    }
    getCardDataByIdentifier(code) {
        return this.cardData()?.find(({ data }) => data.data.Code === code);
    }
    loadMore() {
        // this.cardData = this.cardData.concat(this.cardData);
    }
    async onSave(data) {
        const payload = {
            ...this.currentData?.data,
            ...data,
        };
        await this.taskFacade.addRequest(payload);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TaskFacade }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TasksComponent, selector: "lib-tasks", 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: true,\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      >\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value>\n            <a\n              [routerLink]=\"['/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>\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            >\n              <verben-svg\n                dropdown-trigger\n                icon=\"dots\"\n                [width]=\"2\"\n                [height]=\"12\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <div class=\"bg-white rounded-sm\" dropdown-content>\n                @for (item of tableRowActions; track item.label) {\n                <div\n                  (click)=\"item.action(row); popup.toggleDropdown()\"\n                  class=\"cursor-pointer py-2 px-2.5 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>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]=\"['/history']\"\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            <tasks-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"\n            ></tasks-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ data().length }} records loaded</span\n            > -->\n            <span></span>\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.TasksFormComponent, selector: "tasks-form", inputs: ["currentData"], outputs: ["onTaskFormSave", "onSave"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TasksComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-tasks', 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: true,\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      >\n        <ng-container libColumn=\"history\">\n          <ng-template #cell let-value>\n            <a\n              [routerLink]=\"['/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>\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            >\n              <verben-svg\n                dropdown-trigger\n                icon=\"dots\"\n                [width]=\"2\"\n                [height]=\"12\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <div class=\"bg-white rounded-sm\" dropdown-content>\n                @for (item of tableRowActions; track item.label) {\n                <div\n                  (click)=\"item.action(row); popup.toggleDropdown()\"\n                  class=\"cursor-pointer py-2 px-2.5 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>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]=\"['/history']\"\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            <tasks-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onSave)=\"onSave($event)\"\n            ></tasks-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ data().length }} records loaded</span\n            > -->\n            <span></span>\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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</div>\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.TaskFacade }] });
//# sourceMappingURL=data:application/json;base64, 