Merge pull request #74 from IgniteUI/sstoychev/add-summaries

improvements to app, fixing error when dropping columns
IgniteUI · Apr 1, 2024 · 5a780b1 · 5a780b1
2 parents 495dd0e + 08e61b1
commit 5a780b1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/src/app/taskplanner/taskplanner.component.html b/src/app/taskplanner/taskplanner.component.html
@@ -124,7 +124,8 @@
                     [dataType]="c.dataType"
                     [pinned]="c.pinned"
                     [hidden]="c.hidden"
-                    [hasSummary]="c.hasSummary">
+                    [hasSummary]="c.hasSummary"
+                    [summaries]="c.summaries">
 
                     <!-- Status Column -->
                     <ng-template *ngIf="c.field === 'labels'" igxCell let-cell="cell" let-value>
@@ -187,6 +188,14 @@
                       </div>
                     </ng-template>
 
+                    <ng-template *ngIf="c.field === 'labels'" igxSummary let-summaryResults>
+                        <div class="summary-temp">
+                            <span><strong>{{ summaryResults[0].label }}</strong><span>{{ summaryResults[0].summaryResult }}</span></span>
+                            <span><strong>{{ summaryResults[1].label }}</strong><span>{{ summaryResults[1].summaryResult }}</span></span>
+                            <span><strong>{{ summaryResults[2].label }}</strong><span>{{ summaryResults[2].summaryResult }}</span></span>
+                        </div>
+                      </ng-template>
+
                     <!-- Deadline -->
                     <ng-template *ngIf="c.field === 'deadline'" igxCell let-cell="cell" let-value>
                         {{ value | placeholder }}

diff --git a/src/app/taskplanner/taskplanner.component.ts b/src/app/taskplanner/taskplanner.component.ts
@@ -20,7 +20,9 @@ import {
     CellType,
     SortingDirection,
     ISortingOptions,
-    IgxIconButtonDirective
+    IgxIconButtonDirective,
+    IgxSummaryOperand,
+    IgxSummaryResult
 } from 'igniteui-angular';
 import { TasksDataService } from '../services/tasks.service';
 import { MEMBERS, GITHUB_TASKS } from '../services/tasksData';
@@ -236,9 +238,9 @@ export class TaskPlannerComponent implements OnInit {
         { field: 'number', header: 'ID', width: '120px', dataType: 'number', formatter: this.formatID, sortable: false, sortStrategy: this.defaultSort },
         { field: 'title', header: 'Issue', width: '380px', dataType: 'string', filterable: true, editable: true, sortStrategy: this.defaultSort, required: true, minlength: 4 },
         { field: 'milestone', header: 'Milestone', width: '120px', dataType: 'string', editable: true, sortable: true, sortStrategy: this.milestoneSort, hidden: true, },
-        { field: 'labels', header: 'Status', width: '130px', dataType: 'string', sortable: true, filterable: true, editable: true, cellClasses: this.statusClasses, sortStrategy: this.statusSort },
+        { field: 'labels', header: 'Status', width: '200px', dataType: 'string', sortable: true, filterable: true, editable: true, summaries: StatusSummary, cellClasses: this.statusClasses, hasSummary: true, sortStrategy: this.statusSort },
         { field: 'assignee.login', header: 'Assignee', width: '180px', dataType: 'string', editable: true, filterable: true, sortable: true, sortStrategy: this.defaultSort },
-        { field: 'createdAt', header: 'Created', width: '130px', dataType: 'date', sortable: true, filterable: true, editable: false, sortStrategy: this.defaultSort, hasSummary: true  },
+        { field: 'createdAt', header: 'Created', width: '220px', dataType: 'date', sortable: true, filterable: true, editable: false, sortStrategy: this.defaultSort, hasSummary: true  },
         { field: 'deadline', header: 'Deadline', width: '130px', dataType: 'date', sortable: true, filterable: true, editable: true, sortStrategy: this.defaultSort },
         { field: 'estimation', header: 'Estimation', width: '120px', dataType: 'number', editable: true, cellClasses: this.delayedClasses, sortStrategy: this.defaultSort },
         { field: 'hours_spent', header: 'Hours Spent', width: '120px', dataType: 'number', editable: true, cellClasses: this.delayedClasses, sortStrategy: this.defaultSort },
@@ -540,8 +542,10 @@ export class TaskPlannerComponent implements OnInit {
     }
 
     public onItemDropped(ev) {
-        this.toggleGridBodyHighlight();
-        this.addBacklogItem(this.editTaskForm);
+        if (Object.keys(this.editTaskForm).length) {
+            this.toggleGridBodyHighlight();
+            this.addBacklogItem(this.editTaskForm);
+        }
     }
 
     public addBacklogItem(item: ITask) {
@@ -739,6 +743,29 @@ export class LabelsFilteringStrategy extends FilteringStrategy {
     }
 }
 
+/**  */
+export class StatusSummary extends IgxSummaryOperand {
+    constructor () {
+        super();
+    }
+
+    operate(data?: any[]): IgxSummaryResult[] {
+        const result = super.operate(data);
+        const sl = new StatusLabelPipe();
+        result.push({
+            key: 'in-progress',
+            label: 'in-development',
+            summaryResult: data.filter(rec => sl.transform(rec) === 'in-development').length
+        });
+        result.push({
+            key: 'resolved',
+            label: 'resolved',
+            summaryResult: data.filter(rec => sl.transform(rec) === 'resolved').length
+        })
+        return result;
+    }
+}
+
 
 /** Calculates task progress. */
 export function calcProgress(task: ITask) {