@hmcts/ccd-case-ui-toolkit 6.16.0-query-management-query-list-v3 → 6.16.0-query-management-sorting

package/fesm2015/hmcts-ccd-case-ui-toolkit.js

@@ -17023,22 +17023,31 @@ QueryDetailComponent.ɵcmp = i0.ɵɵdefineComponent({ type: QueryDetailComponent
             }]
     }], function () { return []; }, null); })();
 
-var QueryListResponseStatus;
-(function (QueryListResponseStatus) {
-    QueryListResponseStatus["NEW"] = "New";
-    QueryListResponseStatus["RESPONDED"] = "Responded";
-})(QueryListResponseStatus || (QueryListResponseStatus = {}));
+var SortOrder;
+(function (SortOrder) {
+    SortOrder[SortOrder["ASCENDING"] = 0] = "ASCENDING";
+    SortOrder[SortOrder["DESCENDING"] = 1] = "DESCENDING";
+    SortOrder[SortOrder["UNSORTED"] = 2] = "UNSORTED";
+})(SortOrder || (SortOrder = {}));
 
 class QueryListItem {
+    constructor() {
+        this.children = [];
+    }
     get lastSubmittedMessage() {
-        if (this.children && this.children.length > 0) {
-            return this.children.reduce((prev, current) => {
-                return (prev.createdOn > current.createdOn) ? prev : current;
-            });
-        }
-        else {
-            return this;
-        }
+        const getLastSubmittedMessage = (item) => {
+            let lastSubmittedMessage = item;
+            if (item.children && item.children.length > 0) {
+                for (const child of item.children) {
+                    const childLastSubmittedMessage = getLastSubmittedMessage(child);
+                    if (childLastSubmittedMessage.createdOn > lastSubmittedMessage.createdOn) {
+                        lastSubmittedMessage = childLastSubmittedMessage;
+                    }
+                }
+            }
+            return lastSubmittedMessage;
+        };
+        return getLastSubmittedMessage(this);
     }
     get lastSubmittedBy() {
         return this.lastSubmittedMessage.name;
@@ -17054,10 +17063,6 @@ class QueryListItem {
         var _a;
         return ((_a = this.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? new Date(this.lastSubmittedMessage.createdOn) : null;
     }
-    get responseStatus() {
-        var _a;
-        return ((_a = this.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? QueryListResponseStatus.RESPONDED : QueryListResponseStatus.NEW;
-    }
 }
 
 class QueryListData {
@@ -17066,49 +17071,74 @@ class QueryListData {
         this.roleOnCase = partyMessagesGroup.roleOnCase;
         // get the parent messages (messages without parentId) and add the children to them
         const parentMessages = partyMessagesGroup.partyMessages.filter((message) => !message.parentId);
-        this.partyMessages = parentMessages.map((message) => {
-            const parentMessage = new QueryListItem();
-            Object.assign(parentMessage, Object.assign(Object.assign({}, message), { children: partyMessagesGroup.partyMessages
-                    .filter((childMessage) => childMessage.parentId === message.id) }));
-            return parentMessage;
-        });
+        this.partyMessages = parentMessages.map((message) => this.buildQueryListItem(message, partyMessagesGroup.partyMessages));
+    }
+    buildQueryListItem(message, allMessages) {
+        const queryListItem = new QueryListItem();
+        Object.assign(queryListItem, Object.assign(Object.assign({}, message), { children: allMessages
+                .filter((childMessage) => childMessage.parentId === message.id)
+                .map((childMessage) => this.buildQueryListItem(childMessage, allMessages)) }));
+        return queryListItem;
     }
 }
 
-function QueryListComponent_ng_container_0_tr_23_Template(rf, ctx) { if (rf & 1) {
+var QueryListResponseStatus;
+(function (QueryListResponseStatus) {
+    QueryListResponseStatus["NEW"] = "New";
+    QueryListResponseStatus["RESPONDED"] = "Responded";
+})(QueryListResponseStatus || (QueryListResponseStatus = {}));
+
+function QueryListComponent_ng_container_0_th_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 8);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "rpxTranslate");
+    i0.ɵɵelementStart(3, "a", 9);
+    i0.ɵɵlistener("click", function QueryListComponent_ng_container_0_th_7_Template_a_click_3_listener() { i0.ɵɵrestoreView(_r5); const col_r3 = ctx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return ctx_r4.sortTable(col_r3); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, col_r3.displayName), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("innerHTML", ctx_r1.sortWidget(col_r3), i0.ɵɵsanitizeHtml);
+} }
+function QueryListComponent_ng_container_0_tr_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr", 4);
-    i0.ɵɵelementStart(1, "td", 8);
-    i0.ɵɵelementStart(2, "a", 9);
+    i0.ɵɵelementStart(1, "td", 10);
+    i0.ɵɵelementStart(2, "a", 11);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "td", 10);
+    i0.ɵɵelementStart(4, "td", 12);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "td", 10);
+    i0.ɵɵelementStart(6, "td", 12);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td", 10);
+    i0.ɵɵelementStart(9, "td", 12);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "td", 10);
+    i0.ɵɵelementStart(12, "td", 12);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const message_r2 = ctx.$implicit;
+    const message_r6 = ctx.$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(message_r2.subject);
+    i0.ɵɵtextInterpolate(message_r6.subject);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(message_r2.lastSubmittedBy);
+    i0.ɵɵtextInterpolate(message_r6.lastSubmittedBy);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 5, message_r2.lastSubmittedDate, "dd MMM YYYY"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 5, message_r6.lastSubmittedDate, "dd MMM YYYY"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 8, message_r2.lastResponseDate, "dd MMM YYYY"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(11, 8, message_r6.lastResponseDate, "dd MMM YYYY"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(message_r2.lastResponseBy);
+    i0.ɵɵtextInterpolate(message_r6.lastResponseBy);
 } }
 function QueryListComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -17120,30 +17150,11 @@ function QueryListComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "thead", 3);
     i0.ɵɵelementStart(6, "tr", 4);
-    i0.ɵɵelementStart(7, "th", 5);
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "rpxTranslate");
+    i0.ɵɵtemplate(7, QueryListComponent_ng_container_0_th_7_Template, 4, 4, "th", 5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 5);
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "th", 5);
-    i0.ɵɵtext(14);
-    i0.ɵɵpipe(15, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "th", 5);
-    i0.ɵɵtext(17);
-    i0.ɵɵpipe(18, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "th", 5);
-    i0.ɵɵtext(20);
-    i0.ɵɵpipe(21, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "tbody", 6);
-    i0.ɵɵtemplate(23, QueryListComponent_ng_container_0_tr_23_Template, 14, 11, "tr", 7);
+    i0.ɵɵelementStart(8, "tbody", 6);
+    i0.ɵɵtemplate(9, QueryListComponent_ng_container_0_tr_9_Template, 14, 11, "tr", 7);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -17151,20 +17162,21 @@ function QueryListComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.queryListData.partyName);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 7, "Queries"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 9, "Last submitted by"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 11, "Last submission date"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 13, "Last response date"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(21, 15, "Response by"));
     i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r0.displayedColumns);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r0.queryListData.partyMessages);
 } }
 class QueryListComponent {
+    constructor() {
+        this.displayedColumns = [
+            { name: 'subject', displayName: 'Queries', sortOrder: SortOrder.UNSORTED },
+            { name: 'lastSubmittedBy', displayName: 'Last submitted by', sortOrder: SortOrder.UNSORTED },
+            { name: 'lastSubmittedDate', displayName: 'Last submission date', sortOrder: SortOrder.UNSORTED },
+            { name: 'lastResponseDate', displayName: 'Last response date', sortOrder: SortOrder.UNSORTED },
+            { name: 'lastResponseBy', displayName: 'Response by', sortOrder: SortOrder.UNSORTED }
+        ];
+    }
     ngOnChanges(simpleChanges) {
         var _a;
         const currentPartyMessageGroup = (_a = simpleChanges.partyMessageGroup) === null || _a === void 0 ? void 0 : _a.currentValue;
@@ -17172,13 +17184,74 @@ class QueryListComponent {
             this.queryListData = new QueryListData(currentPartyMessageGroup);
         }
     }
+    sortTable(col) {
+        switch (col.displayName) {
+            case 'Queries': {
+                this.sort(col);
+                break;
+            }
+            case 'Last submitted by': {
+                this.sort(col);
+                break;
+            }
+            case 'Last submission date': {
+                this.sortDate(col);
+                break;
+            }
+            case 'Last response date': {
+                this.sortDate(col);
+                break;
+            }
+            case 'Response by': {
+                this.sort(col);
+                break;
+            }
+        }
+    }
+    sortWidget(col) {
+        switch (col.sortOrder) {
+            case SortOrder.DESCENDING: {
+                return '▲';
+            }
+            case SortOrder.ASCENDING: {
+                return '▼';
+            }
+            default: {
+                return '⬧';
+            }
+        }
+    }
+    sort(col) {
+        if (col.sortOrder && col.sortOrder === SortOrder.DESCENDING) {
+            this.queryListData.partyMessages.sort((a, b) => (a[col.name] < b[col.name]) ? 1 : -1);
+            this.displayedColumns.forEach((c) => c.sortOrder = SortOrder.UNSORTED);
+            col.sortOrder = SortOrder.ASCENDING;
+        }
+        else {
+            this.queryListData.partyMessages.sort((a, b) => (a[col.name] > b[col.name]) ? 1 : -1);
+            this.displayedColumns.forEach((c) => c.sortOrder = SortOrder.UNSORTED);
+            col.sortOrder = SortOrder.DESCENDING;
+        }
+    }
+    sortDate(col) {
+        if (col.sortOrder && col.sortOrder === SortOrder.DESCENDING) {
+            this.queryListData.partyMessages.sort((a, b) => b[col.name] - a[col.name]);
+            this.displayedColumns.forEach((c) => c.sortOrder = SortOrder.UNSORTED);
+            col.sortOrder = SortOrder.ASCENDING;
+        }
+        else {
+            this.queryListData.partyMessages.sort((a, b) => a[col.name] - b[col.name]);
+            this.displayedColumns.forEach((c) => c.sortOrder = SortOrder.UNSORTED);
+            col.sortOrder = SortOrder.DESCENDING;
+        }
+    }
 }
 QueryListComponent.ɵfac = function QueryListComponent_Factory(t) { return new (t || QueryListComponent)(); };
-QueryListComponent.ɵcmp = i0.ɵɵdefineComponent({ type: QueryListComponent, selectors: [["ccd-query-list"]], inputs: { partyMessageGroup: "partyMessageGroup" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "govuk-table", "query-list__table"], [1, "govuk-table__cell", "query-list__caption", "query-list__row"], [1, "govuk-table__head"], [1, "govuk-table__row", "query-list__row"], ["scope", "col", 1, "govuk-table__header"], [1, "govuk-table__body"], ["class", "govuk-table__row query-list__row", 4, "ngFor", "ngForOf"], [1, "govuk-table__cell", "query-list__cell", "query-list__cell--first"], ["href", "javascript:void(0)"], [1, "govuk-table__cell", "query-list__cell"]], template: function QueryListComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, QueryListComponent_ng_container_0_Template, 24, 17, "ng-container", 0);
+QueryListComponent.ɵcmp = i0.ɵɵdefineComponent({ type: QueryListComponent, selectors: [["ccd-query-list"]], inputs: { partyMessageGroup: "partyMessageGroup" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "govuk-table", "query-list__table"], [1, "govuk-table__cell", "query-list__caption", "query-list__row"], [1, "govuk-table__head"], [1, "govuk-table__row", "query-list__row"], ["class", "govuk-table__header", 4, "ngFor", "ngForOf"], [1, "govuk-table__body"], ["class", "govuk-table__row query-list__row", 4, "ngFor", "ngForOf"], [1, "govuk-table__header"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "innerHTML", "click"], [1, "govuk-table__cell", "query-list__cell", "query-list__cell--first"], ["href", "javascript:void(0)"], [1, "govuk-table__cell", "query-list__cell"]], template: function QueryListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, QueryListComponent_ng_container_0_Template, 10, 3, "ng-container", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.queryListData);
-    } }, directives: [i1.NgIf, i1.NgForOf], pipes: [i2$1.RpxTranslatePipe, i1.DatePipe], styles: [".query-list__caption[_ngcontent-%COMP%], .query-list__table[_ngcontent-%COMP%]{border:1px solid #b1b4b6}.query-list__caption[_ngcontent-%COMP%]{background:#f3f2f1;border-bottom:0;font-weight:700}.query-list__row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child{padding-left:10px}.query-list__row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:last-child{padding-right:10px}.query-list__cell--first[_ngcontent-%COMP%]{width:33%}"] });
+    } }, directives: [i1.NgIf, i1.NgForOf], pipes: [i2$1.RpxTranslatePipe, i1.DatePipe], styles: [".query-list__caption[_ngcontent-%COMP%], .query-list__table[_ngcontent-%COMP%]{border:1px solid #b1b4b6}.query-list__caption[_ngcontent-%COMP%]{background:#f3f2f1;border-bottom:0;font-weight:700}.query-list__row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:first-child{padding-left:10px}.query-list__row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:last-child{padding-right:10px}.query-list__cell--first[_ngcontent-%COMP%]{width:33%}.sort-widget[_ngcontent-%COMP%]{cursor:pointer;text-decoration:none;color:#000}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryListComponent, [{
         type: Component,
         args: [{
@@ -20440,13 +20513,6 @@ const ɵReadComplexFieldTableComponent_BaseFactory = /*@__PURE__*/ i0.ɵɵgetInh
             type: Input
         }] }); })();
 
-var SortOrder;
-(function (SortOrder) {
-    SortOrder[SortOrder["ASCENDING"] = 0] = "ASCENDING";
-    SortOrder[SortOrder["DESCENDING"] = 1] = "DESCENDING";
-    SortOrder[SortOrder["UNSORTED"] = 2] = "UNSORTED";
-})(SortOrder || (SortOrder = {}));
-
 function ReadComplexFieldCollectionTableComponent_th_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "th", 6);