cat-qw-lib 1.0.67 → 1.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/cat-qw-lib.mjs +45 -18
- package/fesm2022/cat-qw-lib.mjs.map +1 -1
- package/lib/queue/components/queue-container/queue-container.component.d.ts +5 -2
- package/lib/queue/components/queue-record-table/queue-record-table.component.d.ts +7 -3
- package/lib/shared/table-secondary/components/table-secondary.component.d.ts +1 -1
- package/package.json +1 -1
package/fesm2022/cat-qw-lib.mjs
CHANGED
|
@@ -2541,11 +2541,11 @@ class TableSecondaryComponent {
|
|
|
2541
2541
|
}
|
|
2542
2542
|
}
|
|
2543
2543
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TableSecondaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: i3$4.ActivatedRoute }, { token: BaseQuery }, { token: BaseStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
2544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: " <p-table\r\n *ngIf=\"table && table.headers\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n col.headerAlign === 'center' ? 'justify-content-center' : \r\n (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n {{ col.name }}\r\n @if(table.isSortingAllow){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n \r\n <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n Select <span *ngIf=\"selection?.length\">\r\n ({{ selection.length }})\r\n </span>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n <ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n <div\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\"\r\n style=\"width: 100%; height: 80px;\"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"true\">\r\n <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </div>\r\n <div [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.postCode }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <div\r\n class=\"table-text-wrapper p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n col.align === 'center' ? 'justify-content-center' : \r\n (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\r\n >\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi pr-2\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials\">\r\n <div class=\"flex items-center\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <div \r\n [ngClass]=\"[\r\n col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, bubble) : '',\r\n 'border-2 border-white',\r\n bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? 'bubble-seperator-wrapper' : '')\r\n ]\"\r\n [ngStyle]=\"col.containerNgStyleExpression ? evaluateNgStyle(col.containerNgStyleExpression, bubble) : null\"\r\n >\r\n <span [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">{{ bubble.initials }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name] }}\r\n </p>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Checkbox at end -->\r\n <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n <!-- Actions -->\r\n <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\" \r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }] });
|
|
2544
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: " <p-table\r\n *ngIf=\"table && table.headers\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n col.headerAlign === 'center' ? 'justify-content-center' : \r\n (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n {{ col.name }}\r\n @if(table.isSortingAllow){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n \r\n <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n Select <span *ngIf=\"selection?.length\">\r\n ({{ selection.length }})\r\n </span>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n <ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n <div\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\"\r\n style=\"width: 100%; height: 80px;\"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"true\">\r\n <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </div>\r\n <div [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.postCode }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <div\r\n class=\"table-text-wrapper p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n col.align === 'center' ? 'justify-content-center' : \r\n (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\r\n >\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi pr-2\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials\">\r\n <div class=\"flex items-center\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <div \r\n [ngClass]=\"[\r\n col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, bubble) : '',\r\n 'border-2 border-white',\r\n bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? 'bubble-seperator-wrapper' : '')\r\n ]\"\r\n [ngStyle]=\"col.containerNgStyleExpression ? evaluateNgStyle(col.containerNgStyleExpression, bubble) : null\"\r\n >\r\n <span [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">{{ bubble.initials }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name] }}\r\n </p>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Checkbox at end -->\r\n <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n <!-- Actions -->\r\n <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\" \r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }] });
|
|
2545
2545
|
}
|
|
2546
2546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: TableSecondaryComponent, decorators: [{
|
|
2547
2547
|
type: Component,
|
|
2548
|
-
args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule], template: " <p-table\r\n *ngIf=\"table && table.headers\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n col.headerAlign === 'center' ? 'justify-content-center' : \r\n (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n {{ col.name }}\r\n @if(table.isSortingAllow){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n \r\n <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n Select <span *ngIf=\"selection?.length\">\r\n ({{ selection.length }})\r\n </span>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n <ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n <div\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\"\r\n style=\"width: 100%; height: 80px;\"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"true\">\r\n <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </div>\r\n <div [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.postCode }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <div\r\n class=\"table-text-wrapper p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n col.align === 'center' ? 'justify-content-center' : \r\n (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\r\n >\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi pr-2\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials\">\r\n <div class=\"flex items-center\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <div \r\n [ngClass]=\"[\r\n col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, bubble) : '',\r\n 'border-2 border-white',\r\n bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? 'bubble-seperator-wrapper' : '')\r\n ]\"\r\n [ngStyle]=\"col.containerNgStyleExpression ? evaluateNgStyle(col.containerNgStyleExpression, bubble) : null\"\r\n >\r\n <span [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">{{ bubble.initials }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name] }}\r\n </p>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Checkbox at end -->\r\n <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n <!-- Actions -->\r\n <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\" \r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}\n"] }]
|
|
2548
|
+
args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule], template: " <p-table\r\n *ngIf=\"table && table.headers\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n col.headerAlign === 'center' ? 'justify-content-center' : \r\n (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n {{ col.name }}\r\n @if(table.isSortingAllow){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n \r\n <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n Select <span *ngIf=\"selection?.length\">\r\n ({{ selection.length }})\r\n </span>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n <ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n <div\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\"\r\n style=\"width: 100%; height: 80px;\"\r\n >\r\n <div class=\"flex align-items-center\">\r\n <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"true\">\r\n <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </div>\r\n <div [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name]?.postCode }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <div\r\n class=\"table-text-wrapper p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n col.align === 'center' ? 'justify-content-center' : \r\n (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\r\n >\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi pr-2\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials\">\r\n <div class=\"flex items-center\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <div \r\n [ngClass]=\"[\r\n col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, bubble) : '',\r\n 'border-2 border-white',\r\n bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? 'bubble-seperator-wrapper' : '')\r\n ]\"\r\n [ngStyle]=\"col.containerNgStyleExpression ? evaluateNgStyle(col.containerNgStyleExpression, bubble) : null\"\r\n >\r\n <span [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">{{ bubble.initials }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n {{ rowData[col.name] }}\r\n </p>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Checkbox at end -->\r\n <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n <!-- Actions -->\r\n <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\" \r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}\n"] }]
|
|
2549
2549
|
}], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: i3$4.ActivatedRoute }, { type: BaseQuery }, { type: BaseStore }], propDecorators: { table: [{
|
|
2550
2550
|
type: Input
|
|
2551
2551
|
}], metaData: [{
|
|
@@ -2586,6 +2586,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
2586
2586
|
type: Input
|
|
2587
2587
|
}], noRecordsMessage: [{
|
|
2588
2588
|
type: Input
|
|
2589
|
+
}], sortField: [{
|
|
2590
|
+
type: Input
|
|
2591
|
+
}], sortOrder: [{
|
|
2592
|
+
type: Input
|
|
2589
2593
|
}], paginator: [{
|
|
2590
2594
|
type: ViewChild,
|
|
2591
2595
|
args: ['paginator']
|
|
@@ -5985,11 +5989,11 @@ class QueueSearchComponent {
|
|
|
5985
5989
|
return !!this.searchText;
|
|
5986
5990
|
}
|
|
5987
5991
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: QueueSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5988
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: QueueSearchComponent, isStandalone: false, selector: "queue-search", inputs: { searchText: "searchText", placeholder: "placeholder", debounceTime: "debounceTime" }, outputs: { searchInputChanged: "searchInputChanged", searchRequested: "searchRequested", searchCleared: "searchCleared" }, ngImport: i0, template: "<div class=\"flex
|
|
5992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: QueueSearchComponent, isStandalone: false, selector: "queue-search", inputs: { searchText: "searchText", placeholder: "placeholder", debounceTime: "debounceTime" }, outputs: { searchInputChanged: "searchInputChanged", searchRequested: "searchRequested", searchCleared: "searchCleared" }, ngImport: i0, template: "<div class=\"flex xl:mt-0 xl:justify-content-between align-items-center bg-white\" style=\"border: 1px solid #e0e4ea; border-radius: 8px; height: 44px;\">\r\n <div class=\"p-field m-0 p-0 w-full bg-white border-round\" >\r\n <div class=\"p-inputgroup border-round bg-white\" style=\"height: 100%;\">\r\n <span class=\"p-inputgroup-addon bg-white\" style=\"height: 100%; display: flex; align-items: center;\">\r\n <i class=\"pi pi-search\"></i>\r\n </span>\r\n <input \r\n type=\"text\" \r\n [(ngModel)]=\"searchText\" \r\n class=\"border-none p-0 border-noround-right bg-white w-full outline-none\" \r\n style=\"height: 100%;\" \r\n pInputText \r\n [placeholder]=\"placeholder\" \r\n (input)=\"onSearchInputChange()\"\r\n (keydown.enter)=\"onSearch()\" \r\n />\r\n <button \r\n *ngIf=\"hasSearchText\" \r\n type=\"button\" \r\n class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \r\n (click)=\"onClearSearch()\"\r\n pButton \r\n icon=\"pi pi-times\"\r\n [text]=\"true\"\r\n style=\"height: 100%; display: flex; align-items: center; border-radius: 8px;\"\r\n ></button>\r\n </div>\r\n </div>\r\n </div>\r\n ", styles: [".p-inputgroup{width:100%;display:flex;align-items:center;height:44px}.p-inputgroup-addon{display:flex;align-items:center;height:100%}input[type=text],input.p-inputtext{height:100%;display:flex;align-items:center;padding-top:0;padding-bottom:0;box-sizing:border-box}button.p-inputgroup-addon{display:flex;align-items:center;height:100%}.bg-primary{background-color:#d9d9d9}::ng-deep .left-arrow-dropdown .p-dropdown{direction:rtl;width:100%;height:44px;border-top-left-radius:0;border-bottom-left-radius:0}::ng-deep .left-arrow-dropdown .p-dropdown-label{display:flex;align-items:center}.h-44{height:44px}@media screen and (min-width: 1200px){.vh-100{height:calc(100vh - 170px)}}.bg-while{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5989
5993
|
}
|
|
5990
5994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: QueueSearchComponent, decorators: [{
|
|
5991
5995
|
type: Component,
|
|
5992
|
-
args: [{ selector: 'queue-search', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex
|
|
5996
|
+
args: [{ selector: 'queue-search', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex xl:mt-0 xl:justify-content-between align-items-center bg-white\" style=\"border: 1px solid #e0e4ea; border-radius: 8px; height: 44px;\">\r\n <div class=\"p-field m-0 p-0 w-full bg-white border-round\" >\r\n <div class=\"p-inputgroup border-round bg-white\" style=\"height: 100%;\">\r\n <span class=\"p-inputgroup-addon bg-white\" style=\"height: 100%; display: flex; align-items: center;\">\r\n <i class=\"pi pi-search\"></i>\r\n </span>\r\n <input \r\n type=\"text\" \r\n [(ngModel)]=\"searchText\" \r\n class=\"border-none p-0 border-noround-right bg-white w-full outline-none\" \r\n style=\"height: 100%;\" \r\n pInputText \r\n [placeholder]=\"placeholder\" \r\n (input)=\"onSearchInputChange()\"\r\n (keydown.enter)=\"onSearch()\" \r\n />\r\n <button \r\n *ngIf=\"hasSearchText\" \r\n type=\"button\" \r\n class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \r\n (click)=\"onClearSearch()\"\r\n pButton \r\n icon=\"pi pi-times\"\r\n [text]=\"true\"\r\n style=\"height: 100%; display: flex; align-items: center; border-radius: 8px;\"\r\n ></button>\r\n </div>\r\n </div>\r\n </div>\r\n ", styles: [".p-inputgroup{width:100%;display:flex;align-items:center;height:44px}.p-inputgroup-addon{display:flex;align-items:center;height:100%}input[type=text],input.p-inputtext{height:100%;display:flex;align-items:center;padding-top:0;padding-bottom:0;box-sizing:border-box}button.p-inputgroup-addon{display:flex;align-items:center;height:100%}.bg-primary{background-color:#d9d9d9}::ng-deep .left-arrow-dropdown .p-dropdown{direction:rtl;width:100%;height:44px;border-top-left-radius:0;border-bottom-left-radius:0}::ng-deep .left-arrow-dropdown .p-dropdown-label{display:flex;align-items:center}.h-44{height:44px}@media screen and (min-width: 1200px){.vh-100{height:calc(100vh - 170px)}}.bg-while{background-color:#fff}\n"] }]
|
|
5993
5997
|
}], propDecorators: { searchText: [{
|
|
5994
5998
|
type: Input
|
|
5995
5999
|
}], placeholder: [{
|
|
@@ -6095,10 +6099,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
6095
6099
|
}] } });
|
|
6096
6100
|
|
|
6097
6101
|
class QueueRecordTableComponent {
|
|
6102
|
+
sortField = '';
|
|
6103
|
+
sortOrder = 1;
|
|
6098
6104
|
table;
|
|
6099
6105
|
metaData;
|
|
6100
6106
|
loading = false;
|
|
6101
6107
|
selectedRows = [];
|
|
6108
|
+
resetSort;
|
|
6102
6109
|
selectionChange = new EventEmitter();
|
|
6103
6110
|
selectedRowsData = new EventEmitter();
|
|
6104
6111
|
assignmentDataReady = new EventEmitter();
|
|
@@ -6110,6 +6117,12 @@ class QueueRecordTableComponent {
|
|
|
6110
6117
|
this.selectionChange.emit(selection);
|
|
6111
6118
|
this.selectedRowsData.emit(selection);
|
|
6112
6119
|
}
|
|
6120
|
+
ngOnChanges(changes) {
|
|
6121
|
+
if (changes['resetSort']) {
|
|
6122
|
+
this.sortField = '';
|
|
6123
|
+
this.sortOrder = 1;
|
|
6124
|
+
}
|
|
6125
|
+
}
|
|
6113
6126
|
onRowClick(record) {
|
|
6114
6127
|
this.rowClick.emit(record);
|
|
6115
6128
|
}
|
|
@@ -6120,6 +6133,8 @@ class QueueRecordTableComponent {
|
|
|
6120
6133
|
this.filterApplied.emit(record);
|
|
6121
6134
|
}
|
|
6122
6135
|
onSort(event) {
|
|
6136
|
+
this.sortField = event.field;
|
|
6137
|
+
this.sortOrder = event.order;
|
|
6123
6138
|
this.sortApplied.emit(event);
|
|
6124
6139
|
}
|
|
6125
6140
|
get hasData() {
|
|
@@ -6129,11 +6144,11 @@ class QueueRecordTableComponent {
|
|
|
6129
6144
|
return this.selectedRows?.length || 0;
|
|
6130
6145
|
}
|
|
6131
6146
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: QueueRecordTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: QueueRecordTableComponent, isStandalone: false, selector: "app-queue-record-table", inputs: { table: "table", metaData: "metaData", loading: "loading", selectedRows: "selectedRows" }, outputs: { selectionChange: "selectionChange", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", paginationChanged: "paginationChanged", filterApplied: "filterApplied", sortApplied: "sortApplied" }, ngImport: i0, template: "<div class=\"bg-white p-4 border-round-xl\">\r\n
|
|
6147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: QueueRecordTableComponent, isStandalone: false, selector: "app-queue-record-table", inputs: { table: "table", metaData: "metaData", loading: "loading", selectedRows: "selectedRows", resetSort: "resetSort" }, outputs: { selectionChange: "selectionChange", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", paginationChanged: "paginationChanged", filterApplied: "filterApplied", sortApplied: "sortApplied" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-white p-4 border-round-xl\">\r\n <lib-table-secondary \r\n *ngIf=\"table && table.headers\"\r\n [table]=\"table\" \r\n [metaData]=\"metaData\"\r\n [enableSelection]=\"true\"\r\n [selectionMode]=\"'multiple'\"\r\n [selection]=\"selectedRows\"\r\n [showActions]=\"false\"\r\n [noRecordsMessage]=\"'No Records Found'\"\r\n (onPage)=\"onPaginationChange($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (rowSelectionChange)=\"onRowClick($event)\"\r\n (sortChanged)=\"onSort($event)\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\">\r\n </lib-table-secondary>\r\n</div>", styles: [".queue-record-table-wrapper{height:100%;display:flex;flex-direction:column}.queue-record-table-wrapper .table-container{flex:1;overflow:hidden}.queue-record-table-wrapper .pagination-container{margin-top:1rem;padding:.5rem}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}@media screen and (max-width: 768px){.queue-record-table-wrapper .pagination-container{flex-direction:column;gap:.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableSecondaryComponent, selector: "lib-table-secondary", inputs: ["table", "metaData", "title", "builder", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "pathName", "selectionMode", "selection", "usePagination", "scrollHeight", "rowSelection", "enableSelection", "noRecordsMessage", "sortField", "sortOrder", "searchTerm", "filterQuery"], outputs: ["selectionChange", "rowSelectionChange", "sortChanged", "onDeleteRow", "onPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6133
6148
|
}
|
|
6134
6149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: QueueRecordTableComponent, decorators: [{
|
|
6135
6150
|
type: Component,
|
|
6136
|
-
args: [{ selector: 'app-queue-record-table', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-white p-4 border-round-xl\">\r\n
|
|
6151
|
+
args: [{ selector: 'app-queue-record-table', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-white p-4 border-round-xl\">\r\n <lib-table-secondary \r\n *ngIf=\"table && table.headers\"\r\n [table]=\"table\" \r\n [metaData]=\"metaData\"\r\n [enableSelection]=\"true\"\r\n [selectionMode]=\"'multiple'\"\r\n [selection]=\"selectedRows\"\r\n [showActions]=\"false\"\r\n [noRecordsMessage]=\"'No Records Found'\"\r\n (onPage)=\"onPaginationChange($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (rowSelectionChange)=\"onRowClick($event)\"\r\n (sortChanged)=\"onSort($event)\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\">\r\n </lib-table-secondary>\r\n</div>", styles: [".queue-record-table-wrapper{height:100%;display:flex;flex-direction:column}.queue-record-table-wrapper .table-container{flex:1;overflow:hidden}.queue-record-table-wrapper .pagination-container{margin-top:1rem;padding:.5rem}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}@media screen and (max-width: 768px){.queue-record-table-wrapper .pagination-container{flex-direction:column;gap:.5rem}}\n"] }]
|
|
6137
6152
|
}], propDecorators: { table: [{
|
|
6138
6153
|
type: Input
|
|
6139
6154
|
}], metaData: [{
|
|
@@ -6142,6 +6157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
6142
6157
|
type: Input
|
|
6143
6158
|
}], selectedRows: [{
|
|
6144
6159
|
type: Input
|
|
6160
|
+
}], resetSort: [{
|
|
6161
|
+
type: Input
|
|
6145
6162
|
}], selectionChange: [{
|
|
6146
6163
|
type: Output
|
|
6147
6164
|
}], selectedRowsData: [{
|
|
@@ -6312,7 +6329,8 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6312
6329
|
queryString = SHARED.EMPTY;
|
|
6313
6330
|
searchText = SHARED.EMPTY;
|
|
6314
6331
|
sortBy = SHARED.EMPTY;
|
|
6315
|
-
sortOrder =
|
|
6332
|
+
sortOrder = 1;
|
|
6333
|
+
resetSort = false;
|
|
6316
6334
|
appliedFilters = {};
|
|
6317
6335
|
placeholder = '';
|
|
6318
6336
|
filterDropdown;
|
|
@@ -6387,6 +6405,9 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6387
6405
|
this.getQueueRecordsData();
|
|
6388
6406
|
this.clearSelection();
|
|
6389
6407
|
}
|
|
6408
|
+
get hasActiveFilters() {
|
|
6409
|
+
return this.appliedFilters && Object.values(this.appliedFilters).some(val => val !== null && val !== '' && val !== undefined);
|
|
6410
|
+
}
|
|
6390
6411
|
onTableRowClick(record) {
|
|
6391
6412
|
this.queueBusinessService.storeApplicationData(record);
|
|
6392
6413
|
this.rowClick.emit(record);
|
|
@@ -6405,7 +6426,7 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6405
6426
|
}
|
|
6406
6427
|
onSortApplied(event) {
|
|
6407
6428
|
this.sortBy = event.field;
|
|
6408
|
-
this.sortOrder = event.order
|
|
6429
|
+
this.sortOrder = event.order;
|
|
6409
6430
|
this.getQueueRecordsData();
|
|
6410
6431
|
}
|
|
6411
6432
|
onFilterDropdownApplied(filterData) {
|
|
@@ -6467,14 +6488,13 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6467
6488
|
handleQueueId(queueId) {
|
|
6468
6489
|
const newQueue = this.queueList.find((i) => i._id == queueId);
|
|
6469
6490
|
if (newQueue) {
|
|
6470
|
-
this.resetSearchState();
|
|
6471
6491
|
this.selectedQueue = Object.assign({}, newQueue);
|
|
6472
6492
|
this.selectedQueueId = queueId;
|
|
6473
6493
|
this.queueBusinessService.storeSelectedQueue(queueId);
|
|
6474
6494
|
sessionStorage.setItem(SHARED.selectedQueue, JSON.stringify(this.selectedQueue));
|
|
6475
6495
|
this.clearSelection();
|
|
6476
|
-
this.clearFilters();
|
|
6477
6496
|
this.resetPaginationState();
|
|
6497
|
+
this.resetSorting();
|
|
6478
6498
|
this.getQueueRecordsData();
|
|
6479
6499
|
this.syncFilterDropdown();
|
|
6480
6500
|
}
|
|
@@ -6482,6 +6502,11 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6482
6502
|
console.warn(ERROR.NO_QUEUE_FOUND_WITH_ID);
|
|
6483
6503
|
}
|
|
6484
6504
|
}
|
|
6505
|
+
resetSorting() {
|
|
6506
|
+
this.sortBy = SHARED.EMPTY;
|
|
6507
|
+
this.sortOrder = 1;
|
|
6508
|
+
this.resetSort = !this.resetSort;
|
|
6509
|
+
}
|
|
6485
6510
|
filterQueues(preferredQueueId) {
|
|
6486
6511
|
this.filteredQueueData = this.queueBusinessService.filterQueuesByStatus(this.queueList, this.selectedStatus);
|
|
6487
6512
|
let queueIdToSelect = preferredQueueId;
|
|
@@ -6516,7 +6541,7 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6516
6541
|
});
|
|
6517
6542
|
filterQueryString = existingParams.toString();
|
|
6518
6543
|
}
|
|
6519
|
-
this.queueService.getPaginatedQueueRecords(this.selectedQueue.apiConfig, this.currentSearchTerm, targetPage, targetLimit, filterQueryString, this.sortBy, this.sortOrder).subscribe({
|
|
6544
|
+
this.queueService.getPaginatedQueueRecords(this.selectedQueue.apiConfig, this.currentSearchTerm, targetPage, targetLimit, filterQueryString, this.sortBy, this.getSortOrderString(this.sortOrder)).subscribe({
|
|
6520
6545
|
next: (res) => {
|
|
6521
6546
|
const apiData = res?.data || res?.paginatedResults || res || [];
|
|
6522
6547
|
if (apiData && apiData.length > 0) {
|
|
@@ -6549,6 +6574,13 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6549
6574
|
}
|
|
6550
6575
|
});
|
|
6551
6576
|
}
|
|
6577
|
+
getSortOrderString(order) {
|
|
6578
|
+
if (order === 1)
|
|
6579
|
+
return 'asc';
|
|
6580
|
+
if (order === -1)
|
|
6581
|
+
return 'desc';
|
|
6582
|
+
return '';
|
|
6583
|
+
}
|
|
6552
6584
|
resetPaginationState() {
|
|
6553
6585
|
this.currentPage = 1;
|
|
6554
6586
|
this.currentLimit = 10;
|
|
@@ -6556,11 +6588,6 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6556
6588
|
resetPage() {
|
|
6557
6589
|
this.currentPage = 1;
|
|
6558
6590
|
}
|
|
6559
|
-
resetSearchState() {
|
|
6560
|
-
this.currentSearchTerm = '';
|
|
6561
|
-
this.searchText = '';
|
|
6562
|
-
this.appliedFilters = {};
|
|
6563
|
-
}
|
|
6564
6591
|
clearSelection() {
|
|
6565
6592
|
this.selectedRows = [];
|
|
6566
6593
|
}
|
|
@@ -6595,11 +6622,11 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
6595
6622
|
}
|
|
6596
6623
|
}
|
|
6597
6624
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: QueueContainerComponent, deps: [{ token: QueueStore }, { token: QueueService }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueRecordTableBuilderService }, { token: QueueFilterDropdownService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { placeholder: "placeholder", selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\r\n <div class=\"col-12 xl:col-2 md:col-12 py-0 h-full\">\r\n <app-queue-list\r\n [queueData]=\"filteredQueueData\"\r\n [selectedQueueId]=\"selectedQueueId\"\r\n [selectedStatus]=\"selectedStatus\"\r\n [userRole]=\"userRole\"\r\n [showQueueDataForm]=\"true\"\r\n (queueSelected)=\"onQueueSelected($event)\"\r\n (statusChanged)=\"onStatusChanged($event)\"\r\n (insertQueueRequested)=\"onInsertQueueRequested()\"\r\n ></app-queue-list>\r\n </div>\r\n <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n \r\n @if(selectedQueue){\r\n <div class=\"flex justify-content-between align-items-center mb-3\">\r\n <div class=\"col-8 p-0 flex align-items-center \" >\r\n <div class=\"col-6 p-0 mr-3\">\r\n <queue-search \r\n [placeholder]=\"placeholder\"\r\n [searchText]=\"searchText\"\r\n (searchInputChanged)=\"onSearchInputChanged($event)\"\r\n (searchRequested)=\"onSearchRequested($event)\"\r\n (searchCleared)=\"onSearchCleared()\">\r\n </queue-search>\r\n </div>\r\n <div>\r\n <lib-queue-filter-dropdown \r\n #filterDropdown\r\n [appliedFilters]=\"appliedFilters\"\r\n (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n (filtersCleared)=\"onFiltersCleared()\">\r\n </lib-queue-filter-dropdown>\r\n </div>\r\n <div>\r\n <button \r\n class=\"clear-filters-btn\"\r\n type=\"button\"\r\n (click)=\"onClearAllFilters()\">\r\n Clear <i class=\"pi pi-times ml-2\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-3 justify-content-end\">\r\n <ng-content select=\"[user-dropdown]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"animation-duration-500 associated-list
|
|
6625
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { placeholder: "placeholder", selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\r\n <div class=\"col-12 xl:col-2 md:col-12 py-0 h-full\">\r\n <app-queue-list\r\n [queueData]=\"filteredQueueData\"\r\n [selectedQueueId]=\"selectedQueueId\"\r\n [selectedStatus]=\"selectedStatus\"\r\n [userRole]=\"userRole\"\r\n [showQueueDataForm]=\"true\"\r\n (queueSelected)=\"onQueueSelected($event)\"\r\n (statusChanged)=\"onStatusChanged($event)\"\r\n (insertQueueRequested)=\"onInsertQueueRequested()\"\r\n ></app-queue-list>\r\n </div>\r\n <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n \r\n @if(selectedQueue){\r\n <div class=\"flex justify-content-between align-items-center mb-3\">\r\n <div class=\"col-8 p-0 flex align-items-center \" >\r\n <div class=\"col-6 p-0 mr-3\">\r\n <queue-search \r\n [placeholder]=\"placeholder\"\r\n [searchText]=\"searchText\"\r\n (searchInputChanged)=\"onSearchInputChanged($event)\"\r\n (searchRequested)=\"onSearchRequested($event)\"\r\n (searchCleared)=\"onSearchCleared()\">\r\n </queue-search>\r\n </div>\r\n <div>\r\n <lib-queue-filter-dropdown \r\n #filterDropdown\r\n [appliedFilters]=\"appliedFilters\"\r\n (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n (filtersCleared)=\"onFiltersCleared()\">\r\n </lib-queue-filter-dropdown>\r\n </div>\r\n <div *ngIf=\"hasActiveFilters\">\r\n <button \r\n class=\"clear-filters-btn\"\r\n type=\"button\"\r\n (click)=\"onClearAllFilters()\">\r\n Clear <i class=\"pi pi-times ml-2\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-3 justify-content-end\">\r\n <ng-content select=\"[user-dropdown]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"animation-duration-500 associated-list queue-table-container-wrapper custom-scroll mb-0 p-0\">\r\n <app-queue-record-table\r\n [table]=\"table\"\r\n [metaData]=\"metaData\"\r\n [loading]=\"loading\"\r\n [selectedRows]=\"selectedRows\"\r\n [resetSort]=\"resetSort\"\r\n (selectionChange)=\"onTableSelectionChange($event)\"\r\n (selectedRowsData)=\"onTableSelectionChange($event)\"\r\n (assignmentDataReady)=\"onAssignmentDataReady($event)\"\r\n (rowClick)=\"onTableRowClick($event)\"\r\n (paginationChanged)=\"onPaginationChanged($event)\"\r\n (filterApplied)=\"onFilterApplied($event)\"\r\n (sortApplied)=\"onSortApplied($event)\">\r\n </app-queue-record-table>\r\n </div>\r\n\r\n }\r\n </div>\r\n\r\n </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QueueSearchComponent, selector: "queue-search", inputs: ["searchText", "placeholder", "debounceTime"], outputs: ["searchInputChanged", "searchRequested", "searchCleared"] }, { kind: "component", type: QueueListComponent, selector: "app-queue-list", inputs: ["queueData", "selectedQueueId", "selectedStatus", "userRole", "showQueueDataForm"], outputs: ["queueSelected", "statusChanged", "insertQueueRequested"] }, { kind: "component", type: QueueRecordTableComponent, selector: "app-queue-record-table", inputs: ["table", "metaData", "loading", "selectedRows", "resetSort"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }, { kind: "component", type: QueueFilterDropdownComponent, selector: "lib-queue-filter-dropdown", inputs: ["appliedFilters"], outputs: ["filterApplied", "filtersCleared"] }] });
|
|
6599
6626
|
}
|
|
6600
6627
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: QueueContainerComponent, decorators: [{
|
|
6601
6628
|
type: Component,
|
|
6602
|
-
args: [{ selector: 'lib-queue-container', standalone: false, template: "<div class=\"container grid m-0 h-full\">\r\n <div class=\"col-12 xl:col-2 md:col-12 py-0 h-full\">\r\n <app-queue-list\r\n [queueData]=\"filteredQueueData\"\r\n [selectedQueueId]=\"selectedQueueId\"\r\n [selectedStatus]=\"selectedStatus\"\r\n [userRole]=\"userRole\"\r\n [showQueueDataForm]=\"true\"\r\n (queueSelected)=\"onQueueSelected($event)\"\r\n (statusChanged)=\"onStatusChanged($event)\"\r\n (insertQueueRequested)=\"onInsertQueueRequested()\"\r\n ></app-queue-list>\r\n </div>\r\n <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n \r\n @if(selectedQueue){\r\n <div class=\"flex justify-content-between align-items-center mb-3\">\r\n <div class=\"col-8 p-0 flex align-items-center \" >\r\n <div class=\"col-6 p-0 mr-3\">\r\n <queue-search \r\n [placeholder]=\"placeholder\"\r\n [searchText]=\"searchText\"\r\n (searchInputChanged)=\"onSearchInputChanged($event)\"\r\n (searchRequested)=\"onSearchRequested($event)\"\r\n (searchCleared)=\"onSearchCleared()\">\r\n </queue-search>\r\n </div>\r\n <div>\r\n <lib-queue-filter-dropdown \r\n #filterDropdown\r\n [appliedFilters]=\"appliedFilters\"\r\n (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n (filtersCleared)=\"onFiltersCleared()\">\r\n </lib-queue-filter-dropdown>\r\n </div>\r\n <div>\r\n <button \r\n class=\"clear-filters-btn\"\r\n type=\"button\"\r\n (click)=\"onClearAllFilters()\">\r\n Clear <i class=\"pi pi-times ml-2\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-3 justify-content-end\">\r\n <ng-content select=\"[user-dropdown]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"animation-duration-500 associated-list
|
|
6629
|
+
args: [{ selector: 'lib-queue-container', standalone: false, template: "<div class=\"container grid m-0 h-full\">\r\n <div class=\"col-12 xl:col-2 md:col-12 py-0 h-full\">\r\n <app-queue-list\r\n [queueData]=\"filteredQueueData\"\r\n [selectedQueueId]=\"selectedQueueId\"\r\n [selectedStatus]=\"selectedStatus\"\r\n [userRole]=\"userRole\"\r\n [showQueueDataForm]=\"true\"\r\n (queueSelected)=\"onQueueSelected($event)\"\r\n (statusChanged)=\"onStatusChanged($event)\"\r\n (insertQueueRequested)=\"onInsertQueueRequested()\"\r\n ></app-queue-list>\r\n </div>\r\n <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n \r\n @if(selectedQueue){\r\n <div class=\"flex justify-content-between align-items-center mb-3\">\r\n <div class=\"col-8 p-0 flex align-items-center \" >\r\n <div class=\"col-6 p-0 mr-3\">\r\n <queue-search \r\n [placeholder]=\"placeholder\"\r\n [searchText]=\"searchText\"\r\n (searchInputChanged)=\"onSearchInputChanged($event)\"\r\n (searchRequested)=\"onSearchRequested($event)\"\r\n (searchCleared)=\"onSearchCleared()\">\r\n </queue-search>\r\n </div>\r\n <div>\r\n <lib-queue-filter-dropdown \r\n #filterDropdown\r\n [appliedFilters]=\"appliedFilters\"\r\n (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n (filtersCleared)=\"onFiltersCleared()\">\r\n </lib-queue-filter-dropdown>\r\n </div>\r\n <div *ngIf=\"hasActiveFilters\">\r\n <button \r\n class=\"clear-filters-btn\"\r\n type=\"button\"\r\n (click)=\"onClearAllFilters()\">\r\n Clear <i class=\"pi pi-times ml-2\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-3 justify-content-end\">\r\n <ng-content select=\"[user-dropdown]\"></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"animation-duration-500 associated-list queue-table-container-wrapper custom-scroll mb-0 p-0\">\r\n <app-queue-record-table\r\n [table]=\"table\"\r\n [metaData]=\"metaData\"\r\n [loading]=\"loading\"\r\n [selectedRows]=\"selectedRows\"\r\n [resetSort]=\"resetSort\"\r\n (selectionChange)=\"onTableSelectionChange($event)\"\r\n (selectedRowsData)=\"onTableSelectionChange($event)\"\r\n (assignmentDataReady)=\"onAssignmentDataReady($event)\"\r\n (rowClick)=\"onTableRowClick($event)\"\r\n (paginationChanged)=\"onPaginationChanged($event)\"\r\n (filterApplied)=\"onFilterApplied($event)\"\r\n (sortApplied)=\"onSortApplied($event)\">\r\n </app-queue-record-table>\r\n </div>\r\n\r\n }\r\n </div>\r\n\r\n </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"] }]
|
|
6603
6630
|
}], ctorParameters: () => [{ type: QueueStore }, { type: QueueService }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueRecordTableBuilderService }, { type: QueueFilterDropdownService }], propDecorators: { placeholder: [{
|
|
6604
6631
|
type: Input
|
|
6605
6632
|
}], filterDropdown: [{
|