Merge pull request primefaces#487 from Nanitor/issue-filter-snooze

Use checkboxes to remove issue filters.
Nanitor · Mar 19, 2020 · 808d585 · 808d585
2 parents 93d7c32 + 3023de9
commit 808d585
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/src/organization/issue/issue_filter.service.ts b/src/organization/issue/issue_filter.service.ts
@@ -17,6 +17,10 @@ export class IssueFilterService extends BaseListService {
         return this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/issue_filter_remove`, { filter_id: filterId });
     }
 
+    removeFilters(filterIds: Array<number>) {
+        return this.accountService.executePost(`/organization/${this.accountService.getOrganizationId()}/issue_filter_remove`, { filter_ids: filterIds });
+    }
+
     getCsv(limit: number) {
         let data = {
             filters: this.getFilters(),

diff --git a/src/organization/issue/issue_filter_list.component.html b/src/organization/issue/issue_filter_list.component.html
@@ -18,6 +18,12 @@ <h1 class="panel-title">Issue Exclusions
                     <button class="btn btn-sm btn-primary pull-right" (click)="chooseLimitParams()" id="export-button" title="Export as CSV">
                         <i class="fa fa-upload"></i>
                     </button>
+                    <button class="btn btn-sm btn-primary pull-right"
+                            [class.nanitor-disable]="!selectedItems || selectedItems.length < 1"
+                            (click)="removeFilters($event)"
+                            id="remove-exception-button" title="Remove Exclusions">
+                        <i class="fa fa-ban"></i>
+                    </button>
                     <span class="label label-black pull-right m-r-15" style="color:white; width: auto;">Total: {{ totalRecords }}</span>
                 </h1>
             </div>
@@ -33,11 +39,17 @@ <h1 class="panel-title">Issue Exclusions
                         (sortFunction)="sortingChanged($event)" (onPage)="onPage()">
                         <ng-template pTemplate="colgroup" let-columns>
                             <colgroup>
+                                <col *ngIf="isCurrentOrgAdmin()" style="width: 50px">
                                 <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
                             </colgroup>
                         </ng-template>
                         <ng-template pTemplate="header" let-columns>
                             <tr valign="top" class="defence" width="100%">
+                                <th *ngIf="isCurrentOrgAdmin()" class="table-header-cell" style="text-align: center;">
+                                    <div>
+                                        <input #selectAllCheckbox type="checkbox" (click)="markAllItemsSelected($event)" />
+                                    </div>
+                                </th>
                                 <th *ngFor="let col of columns" class="table-header-cell" [pSortableColumn]="col.field"  [pSortableColumnDisabled]="col.disabled" [ngStyle]="{'width': col.width}">
                                     {{col.header}}
                                     <p-sortIcon *ngIf="!col.disabled" [field]="col.field"></p-sortIcon>
@@ -46,6 +58,11 @@ <h1 class="panel-title">Issue Exclusions
                         </ng-template>
                         <ng-template pTemplate="body" let-rowData let-columns="columns">
                             <tr #row id="item-{{ rowData.id }}" class="table-row" [ngClass]="{'disabled': rowData.archived, 'flash-row': flashRow && row.id === 'item-' + selectedId }">
+                                <td *ngIf="isCurrentOrgAdmin()" class="table-cell text-center">
+                                    <input type="checkbox" [id]="'check'+rowData.id" 
+                                    (click)="markItemSelected($event, rowData)"
+                                    [checked]="checkIfSelected(rowData)"/>
+                                </td>
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('created_at')}">{{ rowData.created_at*1000 | moment:"MMM Do YYYY HH:mm" }}</td>
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('created_by')}">{{ rowData.created_by }}</td>
                                 <td class="table-cell" [ngStyle]="{'width': getColumnWidth('issue_scope')}">
@@ -74,9 +91,6 @@ <h1 class="panel-title">Issue Exclusions
                                     <span *ngIf="rowData.expires_at">{{ rowData.expires_at*1000 | moment:"MMM Do YYYY HH:mm" }}</span>
                                     <span *ngIf="!rowData.expires_at">(never)</span>
                                 </td>
-                                <td class="table-cell text-center" [ngStyle]="{'width': getColumnWidth('remove')}">
-                                    <a href="#" (click)="removeFilter($event, rowData.id)"><i class="fa fa-ban"></i></a>
-                                </td>
                             </tr>
                         </ng-template>
                     </p-table>

diff --git a/src/organization/issue/issue_filter_list.component.ts b/src/organization/issue/issue_filter_list.component.ts
@@ -46,8 +46,7 @@ export class IssueFilterListComponent extends BaseList {
             { field: 'issue_scope', header: 'Issue Scope', order: 0, width: '420px', disabled: true },
             { field: 'asset_scope', header: 'Asset Scope', order: 0, width: '140px', disabled: true },
             { field: 'comment', header: 'Comment', order: 0, width: '180px', disabled: false },
-            { field: 'expires_at', header: 'Expires at', order: 0, width: '180px', disabled: false },
-            { field: 'remove', header: 'Remove', order: 0, width: '80px', disabled: true }
+            { field: 'expires_at', header: 'Expires at', order: 0, width: '180px', disabled: false }
         ];
     }
 
@@ -127,6 +126,37 @@ export class IssueFilterListComponent extends BaseList {
         }
     }
 
+    removeFilters(event) {
+        event.preventDefault();
+        if (window.confirm("Are you sure you wish to remove these exclusions?")) {
+            this.service.spinnerService.setState(true);
+            this.service.removeFilters(this.selectedItems.map(item => item.id)).subscribe(
+                (p: any) => {
+                    this.service.spinnerService.setState(false);
+                    this.refresh();
+                },
+                err => {
+                    this.service.spinnerService.setState(false);
+                    this.service.accountService.handleError(err);
+                }
+            );
+        }
+    }
+
+    markAllItemsSelected(event) {
+        if (event.target.checked) {
+            let allItems = this.service.pagesToArray(1, Math.ceil(this.totalRecords / this.ROWS));
+            this.selectedItems = [];
+            if (allItems) {
+                for (let item of allItems) {
+                    this.selectedItems.push(item);
+                }
+            }
+        } else {
+            this.selectedItems = [];
+        }
+    }
+
     chooseLimitParams(isUpgrade: boolean = false) {
         this.itemExportForm = {
             limit: 200