OK-333 Adjustments to search result list: Show result in groups (separator) implemented in HTML
diff --git a/src/app/lists/abstract-list/abstract-list.component.ts b/src/app/lists/abstract-list/abstract-list.component.ts
index df340ac..cd55c43 100644
--- a/src/app/lists/abstract-list/abstract-list.component.ts
+++ b/src/app/lists/abstract-list/abstract-list.component.ts
@@ -37,7 +37,7 @@
@Input() withDatePicker = true;
@Input() withEditButtons = true;
@Input() isCollapsible = true;
- @Input() stayHidden = true;
+ @Input() stayHidden = true;
@Input() gridId: string;
showSpinner = false;
globals = Globals;
@@ -52,15 +52,11 @@
startDate: Date;
user: User = null;
collapseStateId: string;
- pager: any = {};
- page: any = {};
+
sortingState: SortingState = new SortingState();
subscription: any;
- pagedItems: any[];
- private notificationHistoryExpansionStates: NotificationHistoryExpansionState[] = new Array<NotificationHistoryExpansionState>();
private subscriptions: Array<any>;
-
constructor(
protected messageService: MessageService,
protected notificationService: NotificationService,
@@ -84,15 +80,6 @@
ngOnInit() {
this.init();
- }
- setPage(page: number) {
- if (page < 1 || page > this.pager.totalPages) {
- return;
- }
-
- this.pager = this.notificationService.getPager(this.notifications.length, page);
-
- this.pagedItems = this.notifications.slice(this.pager.startIndex, this.pager.endIndex + 1);
}
protected init() {
@@ -104,7 +91,7 @@
if (oldStayHiddenVal != null) {
this.stayHidden = oldStayHiddenVal;
}
-
+
//Subscriptions
let subscription: any;
this.subscriptions = new Array<any>();
@@ -123,7 +110,7 @@
this.subscriptions.push(subscription);
subscription = this.reminderService.itemChanged$.subscribe(item => this.onItemChanged(item));
- this.subscriptions.push(subscription);
+ this.subscriptions.push(subscription);
//Daterangepicker Config
this.daterangepickerConfig.settings = {
@@ -174,20 +161,15 @@
protected setNotifications(newNotifications: Notification[]) {
this.notifications = newNotifications;
this.defaultList = Object.assign(new Array<Notification>(), newNotifications);
-
- this.setPage(1);
newNotifications.forEach(notification => {
notification.historyOpen = this.sessionContext.getNotificationHistoryExpansionStateById(notification.incidentId);
if (notification.historyOpen) {
this.retrieveNotificationVersions(notification);
}
});
-
-
const sortingState = this.sessionContext.getSortingState(this.gridId);
- if (!sortingState) {
+ if (!sortingState)
return;
- }
this.sortingState = sortingState;
this.sort(undefined);
@@ -282,7 +264,7 @@
if (column) {
this.sortingState.isDesc = !this.sortingState.isDesc;
- if (this.sortingState.column !== undefined && this.sortingState.column !== column) {
+ if (this.sortingState.column !== undefined && this.sortingState.column != column) {
this.sortingState.counter = 1;
this.sortingState.isDesc = true;
} else {
@@ -292,32 +274,36 @@
}
- const direction = this.sortingState.isDesc ? 1 : -1;
+ let direction = this.sortingState.isDesc ? 1 : -1;
- if (this.sortingState.defaultState && !column || this.sortingState.counter > 0 && this.sortingState.counter % 3 === 0) {
+ if (this.sortingState.defaultState && !column || this.sortingState.counter > 0 && this.sortingState.counter % 3 == 0) {
this.sortingState.counter = 0;
this.notifications = Object.assign(new Array<Notification>(), this.defaultList);
this.sortingState.defaultState = true;
this.sortingState.isDesc = false;
- } else {
+ }
+ else {
this.sortingState.defaultState = false;
this.notifications.sort((a, b) => {
- const a1 = this.getColumnValue(this.sortingState.column, a);
- const b1 = this.getColumnValue(this.sortingState.column, b);
+ var a1 = this.getColumnValue(this.sortingState.column, a);
+ var b1 = this.getColumnValue(this.sortingState.column, b);
- if (a1 == null) {
+ if ( a1 == null) {
return 1 * direction;
}
if (b1 == null) {
return -1 * direction;
- } else if (a1 < b1) {
+ }
+ else if (a1 < b1) {
return -1 * direction;
- } else if (a1 > b1) {
+ }
+ else if (a1 > b1) {
return 1 * direction;
- } else {
+ }
+ else {
return 0;
}
});
@@ -329,17 +315,15 @@
switch (columnName) {
case 'fkRefBranch':
- return this.sessionContext.getBrancheById(notification.fkRefBranch) ?
- this.sessionContext.getBrancheById(notification.fkRefBranch).name.toLowerCase() : null;
+ return this.sessionContext.getBrancheById(notification.fkRefBranch) ? this.sessionContext.getBrancheById(notification.fkRefBranch).name.toLowerCase() : null;
case 'fkRefNotificationStatus':
- return this.sessionContext.getStatusById(notification.fkRefNotificationStatus) ?
- this.sessionContext.getStatusById(notification.fkRefNotificationStatus).name.toLowerCase() : null;
+ return this.sessionContext.getStatusById(notification.fkRefNotificationStatus) ? this.sessionContext.getStatusById(notification.fkRefNotificationStatus).name.toLowerCase() : null;
case 'fkRefGridTerritory':
- return this.sessionContext.getGridTerritoryById(notification.fkRefGridTerritory) ?
- this.sessionContext.getGridTerritoryById(notification.fkRefGridTerritory).name.toLowerCase() : null;
+ return this.sessionContext.getGridTerritoryById(notification.fkRefGridTerritory) ? this.sessionContext.getGridTerritoryById(notification.fkRefGridTerritory).name.toLowerCase() : null;
default:
- return notification[columnName] ? notification[columnName].toLowerCase() : null;
+ return notification[columnName] ? notification[columnName].toLowerCase(): null;
}
}
}
+
diff --git a/src/app/lists/search-result-list/search-result-list.component.html b/src/app/lists/search-result-list/search-result-list.component.html
index cbfc941..86b93aa 100644
--- a/src/app/lists/search-result-list/search-result-list.component.html
+++ b/src/app/lists/search-result-list/search-result-list.component.html
@@ -1,121 +1,103 @@
<div class="panel panel-default">
- <div class="panel-heading">
- <h4 class="panel-title">
- <a *ngIf="isCollapsible" data-toggle="collapse" href="#collapse4">Suchergebnisse</a>
- <div *ngIf="!isCollapsible">Suchergebnisse</div>
- </h4>
-
- </div>
- <div id="collapse4" class="panel-collapse collapse in">
- <div class="panel-body">
- <table class="table table-striped table-bordered" *ngIf="!showSpinner">
- <thead>
- <tr>
- <th *ngIf="withCheckboxes" class="notification-check-col">
- <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
- </th>
- <th class="search-result-tab-first-col">
- <app-sorting [initColumnName]="'beginDate'" (click)="sort('beginDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
- </th>
- <th class="search-result-tab-version-col">Version</th>
- <th class="notification-tab-branch">
- <app-sorting [initColumnName]="'fkRefBranch'" (click)="sort('fkRefBranch')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"></app-sorting>
+ <div class="panel-heading">
+ <h4 class="panel-title">
+ <a *ngIf="isCollapsible" data-toggle="collapse" href="#collapse4">Suchergebnisse</a>
+ <div *ngIf="!isCollapsible">Suchergebnisse</div>
+ </h4>
+ </div>
+ <div id="collapse4" class="panel-collapse collapse in">
+ <div class="panel-body">
+ <table class="table table-striped table-bordered" *ngIf="!showSpinner">
+ <thead>
+ <tr>
+ <th *ngIf="withCheckboxes" class="notification-check-col">
+ <input type="checkbox" [(ngModel)]="selectAll" (change)="changeAllSelection()">
</th>
- <th class="notification-tab-grid-territory">
- <app-sorting [initColumnName]="'fkRefGridTerritory'" (click)="sort('fkRefGridTerritory')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"> </app-sorting>
+ <th class="search-result-tab-first-col">
+ <app-sorting [initColumnName]="'beginDate'" (click)="sort('beginDate')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Beginnt am</app-sorting>
</th>
- <th class="notification-tab-description">
- <app-sorting [initColumnName]="'notificationText'" (click)="sort('notificationText')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Kurztext </app-sorting>
+ <th class="search-result-tab-version-col">Version</th>
+ <th class="notification-tab-branch">
+ <app-sorting [initColumnName]="'fkRefBranch'" (click)="sort('fkRefBranch')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"></app-sorting>
</th>
- <th class="notification-tab-status">
- <app-sorting [initColumnName]="'fkRefNotificationStatus'" (click)="sort('fkRefNotificationStatus')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Status</app-sorting>
- </th>
- <th class="notification-tab-moduser">
- <app-sorting [initColumnName]="'responsibilityControlPoint'" (click)="sort('responsibilityControlPoint')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Letzter Bearbeiter</app-sorting>
- </th>
- <th class="notification-tab-responsibility-forwarding">
- <app-sorting [initColumnName]="'responsibilityForwarding'" (click)="sort('responsibilityForwarding')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Zuständigkeit / weitergeleitet an</app-sorting>
- </th>
- <th class="notification-tab-edit-buttons"></th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let notification of pagedItems">
- <td colspan="9" style="padding:0px;" border=3>
- <table style="width:100%">
- <tbody>
- <tr [ngClass]="{'sameIncident' : isIncidentIdChange(notification)}">
- <tr>
- <td *ngIf="withCheckboxes" class="notification-check-col" [ngClass]="{'incident-id-change' : incidentIdChange}">
- <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
- </td>
- <td class="search-result-tab-first-col" [ngClass]="{'incident-id-change' : incidentIdChange}">{{ notification.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
- </td>
- <td class="search-result-tab-version-col" [ngClass]="{'incident-id-change' : incidentIdChange}">{{notification.version}}</td>
- <td class="notification-tab-branch" [ngClass]="{'incident-id-change' : incidentIdChange,
- 'gas' : isBranchGas(notification.fkRefBranch), 'power' : isBranchPower(notification.fkRefBranch),
- 'water' : isBranchWater(notification.fkRefBranch), 'heating' : isBranchHeating(notification.fkRefBranch)}">
- <span>
- {{ sessionContext.getBrancheById(notification.fkRefBranch)?.name }}
+ <th class="notification-tab-grid-territory">
+ <app-sorting [initColumnName]="'fkRefGridTerritory'" (click)="sort('fkRefGridTerritory')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column"> </app-sorting>
+ </th>
+ <th class="notification-tab-description">
+ <app-sorting [initColumnName]="'notificationText'" (click)="sort('notificationText')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Kurztext </app-sorting>
+ </th>
+ <th class="notification-tab-status">
+ <app-sorting [initColumnName]="'fkRefNotificationStatus'" (click)="sort('fkRefNotificationStatus')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Status</app-sorting>
+ </th>
+ <th class="notification-tab-moduser">
+ <app-sorting [initColumnName]="'responsibilityControlPoint'" (click)="sort('responsibilityControlPoint')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Letzter Bearbeiter</app-sorting>
+ </th>
+ <th class="notification-tab-responsibility-forwarding">
+ <app-sorting [initColumnName]="'responsibilityForwarding'" (click)="sort('responsibilityForwarding')" [isDesc]="sortingState?.isDesc" [defaultState]="sortingState?.defaultState" [columnName]="sortingState?.column">Zuständigkeit / weitergeleitet an</app-sorting>
+ </th>
+ <th class="notification-tab-edit-buttons"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let notification of notifications; let i = index">
+ <td colspan="9" style="padding:0px;" border=3>
+ <table style="width:100%">
+ <tbody>
+ <tr [ngClass]="{'incident-id-change' : notifications[i] && notifications[i+1] && notifications[i].incidentId !== notifications[i+1].incidentId}">
+ <td *ngIf="withCheckboxes" class="notification-check-col" >
+ <input type="checkbox" [(ngModel)]="notification.selected" (change)="selectionChanged()">
+ </td>
+ <td class="search-result-tab-first-col" >{{ notification.beginDate | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}
+ </td>
+ <td class="search-result-tab-version-col" >{{notification.version}}</td>
+ <td class="notification-tab-branch" [ngClass]="{
+ 'gas' : isBranchGas(notification.fkRefBranch), 'power' : isBranchPower(notification.fkRefBranch),
+ 'water' : isBranchWater(notification.fkRefBranch), 'heating' : isBranchHeating(notification.fkRefBranch)}">
+ <span>
+ {{ sessionContext.getBrancheById(notification.fkRefBranch)?.name }}
+ </span>
+ </td>
+ <td class="notification-tab-grid-territory" >
+ <span>
+ {{ sessionContext.getGridTerritoryById(notification.fkRefGridTerritory)?.name }}
+ </span>
+ </td>
+ <td class="notification-tab-description" data-toggle="tooltip" [attr.data-original-title]="notification.notificationText"
+ style="overflow:hidden;text-overflow: ellipsis;">
+ <span>
+ {{ notification.notificationText }}
</span>
- </td>
- <td class="notification-tab-grid-territory" [ngClass]="{'incident-id-change' : incidentIdChange}">
- <span>
- {{ sessionContext.getGridTerritoryById(notification.fkRefGridTerritory)?.name }}
- </span>
- </td>
- <td class="notification-tab-description" [ngClass]="{'incident-id-change' : incidentIdChange}" data-toggle="tooltip" [attr.data-original-title]="notification.notificationText"
- style="overflow:hidden;text-overflow: ellipsis;">
- <span>
- {{ notification.notificationText }}
- </span>
- </td>
- <td class="notification-tab-status" [ngClass]="{'finished' : isStatusClassFinished(notification.fkRefNotificationStatus), 'incident-id-change' : idx!==0 && incidentIdChange}">
- <span>
- {{ sessionContext.getStatusById(notification.fkRefNotificationStatus)?.name }}
- </span>
- </td>
- <td class="notification-tab-moduser" [ngClass]="{'incident-id-change' : incidentIdChange}">
- <span>
- {{ notification.responsibilityControlPoint }}
- </span>
- </td>
- <td class="notification-tab-responsibility-forwarding" [ngClass]="{'incident-id-change' : incidentIdChange}">
- <span>
- {{ notification.responsibilityForwarding }}
- </span>
- </td>
- <td class="notification-tab-edit-buttons" [ngClass]="{'incident-id-change' : incidentIdChange}">
- <button type="button" class="btn btn-default btn-sm" (click)="lookUpNotification(notification)">
- <span class="glyphicon glyphicon-eye-open"></span>
- </button>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
-
- </table>
- <app-loading-spinner *ngIf="showSpinner"></app-loading-spinner> </div>
- <div class="panel-footer">
- <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
- <li [ngClass]="{disabled:pager.currentPage === 1}">
- <a (click)="setPage(1)"><<</a>
- </li>
- <li [ngClass]="{disabled:pager.currentPage === 1}">
- <a (click)="setPage(pager.currentPage - 1)"><</a>
- </li>
- <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
- <a (click)="setPage(page)">{{page}}</a>
- </li>
- <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
- <a (click)="setPage(pager.currentPage + 1)">></a>
- </li>
- <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
- <a (click)="setPage(pager.totalPages)">>></a>
- </li>
- </ul></div>
+ </td>
+ <td class="notification-tab-status" [ngClass]="{'finished' : isStatusClassFinished(notification.fkRefNotificationStatus)}">
+ <span>
+ {{ sessionContext.getStatusById(notification.fkRefNotificationStatus)?.name }}
+ </span>
+ </td>
+ <td class="notification-tab-moduser" >
+ <span>
+ {{ notification.responsibilityControlPoint }}
+ </span>
+ </td>
+ <td class="notification-tab-responsibility-forwarding" >
+ <span>
+ {{ notification.responsibilityForwarding }}
+ </span>
+ </td>
+ <td class="notification-tab-edit-buttons" >
+ <button type="button" class="btn btn-default btn-sm" (click)="lookUpNotification(notification)">
+ <span class="glyphicon glyphicon-eye-open"></span>
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <app-loading-spinner *ngIf="showSpinner"></app-loading-spinner>
+ </div>
+ </div>
</div>
-</div>
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/app/lists/search-result-list/search-result-list.component.ts b/src/app/lists/search-result-list/search-result-list.component.ts
index 0adc5d0..e184d4c 100644
--- a/src/app/lists/search-result-list/search-result-list.component.ts
+++ b/src/app/lists/search-result-list/search-result-list.component.ts
@@ -11,6 +11,7 @@
import { ReminderService } from '../../services/reminder.service'; //TODO remove this from abstract list
import { DaterangepickerConfig } from 'ng2-daterangepicker'; //TODO remove this from abstract list
import { SessionContext } from '../../common/session-context';
+import { LoadingSpinnerComponent } from '../../dialogs/loading-spinner/loading-spinner.component';
@Component({
selector: 'app-search-result-list',
@@ -18,6 +19,7 @@
styleUrls: ['./search-result-list.component.css', '../abstract-list/abstract-list.component.css'],
})
export class SearchResultListComponent extends AbstractListComponent implements OnChanges {
+ column: string;
@Input()
globalSearchFilter: GlobalSearchFilter;
@@ -31,7 +33,7 @@
protected notificationService: NotificationService, protected reminderService: ReminderService,
protected sessionContext: SessionContext,
protected daterangepickerConfig: DaterangepickerConfig) {
- super(messageService, notificationService, reminderService, sessionContext, daterangepickerConfig)
+ super(messageService, notificationService, reminderService, sessionContext, daterangepickerConfig);
}
public isStatusClassFinished(fkRefStatus: number): boolean {
@@ -80,15 +82,5 @@
isBranchHeating(branchId: number): boolean {
return this.sessionContext.getBranchClassById(branchId) == 'heating';
}
-
- isIncidentIdChange(actualNotification: Notification): boolean {
- if (this.oldNotification == null || this.oldNotification == undefined || this.oldNotification.incidentId != actualNotification.incidentId) {
- this.oldNotification = actualNotification;
- this.incidentIdChange = true;
- }
- else {
- this.incidentIdChange = false;
- }
- return this.incidentIdChange;
- }
}
+
diff --git a/src/app/model/sorting-state.ts b/src/app/model/sorting-state.ts
new file mode 100644
index 0000000..ed49827
--- /dev/null
+++ b/src/app/model/sorting-state.ts
@@ -0,0 +1,6 @@
+export class SortingState {
+ column: string = '';
+ counter: number;
+ defaultState: boolean;
+ isDesc: boolean;
+}
\ No newline at end of file
diff --git a/src/app/services/notification.service.ts b/src/app/services/notification.service.ts
index 282ce68..52cc6e6 100644
--- a/src/app/services/notification.service.ts
+++ b/src/app/services/notification.service.ts
@@ -13,7 +13,6 @@
import { FilterSelection } from '../model/filter-selection';
import { TerritoryResponsibility } from '../model/territory-responsibility';
-
@Injectable()
export class NotificationService extends BaseHttpService {
public static ALL = 'active';
@@ -34,53 +33,7 @@
this.itemChanged$ = new EventEmitter();
}
- public getPager(totalItems: number, currentPage: number = 1, pageSize: number = 20) {
- let totalPages = Math.ceil(totalItems / pageSize);
-
- let startPage: number, endPage: number;
- if (totalPages <= 20) {
- // less than 10 total pages so show all
- startPage = 1;
- endPage = totalPages;
- } else {
- // more than 10 total pages so calculate start and end pages
- if (currentPage <= 6) {
- startPage = 1;
- endPage = 20;
- } else if (currentPage + 4 >= totalPages) {
- startPage = totalPages - 9;
- endPage = totalPages;
- } else {
- startPage = currentPage - 5;
- endPage = currentPage + 4;
- }
- }
-
- // calculate start and end item indexes
- let startIndex = (currentPage - 1) * pageSize;
- let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
-
- // create an array of pages to ng-repeat in the pager control
- let pages = this.range(startPage, endPage);
-
- // return object with all pager properties required by the view
- return {
- totalItems: totalItems,
- currentPage: currentPage,
- pageSize: pageSize,
- totalPages: totalPages,
- startPage: startPage,
- endPage: endPage,
- startIndex: startIndex,
- endIndex: endIndex,
- pages: pages
- };
-}
-private range(j, k) {
- return Array
- .apply(null, Array((k - j) + 1))
- .map(function(discard, n){ return n + j; });
-}
+
public getNotifications(notificationType: string, notificationSearchFilter?: NotificationSearchFilter): Observable<Notification[]> {
const headers = new Headers();
const url = super.getBaseUrl() + '/notifications/' + notificationType;
@@ -163,4 +116,3 @@
}
}
-
