Commit 5443e76c authored by MAGHOUZ's avatar MAGHOUZ
Browse files

Sort monitored items: Done

parent 17424512
......@@ -10,16 +10,6 @@ import {Apollo, gql} from 'apollo-angular';
})
export class Monitored_itemsService {
// Observable string sources
private updatedMonitoredItemsSource = new Subject<MonitoredItem>();
// Observable string streams
updatedMonitoredItems = this.updatedMonitoredItemsSource.asObservable();
// Observable string sources
private deletedMonitoredItemsSource = new Subject<MonitoredItem>();
// Observable string streams
deletedMonitoredItems = this.deletedMonitoredItemsSource.asObservable();
// Observable string sources
private monitoredItemDetailsSource = new Subject<MonitoredItem>();
// Observable string streams
......
......@@ -6,7 +6,13 @@
position: relative;
min-height: 200px;
}
.spinner-container {
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.example-table-container {
position: relative;
overflow: auto;
......@@ -57,29 +63,9 @@ th.mat-header-cell{
max-width: 124px;
}
.mat-column-tickets a{
background-color: #c178ce;
box-shadow: 0 2px 0 #550f61;
color: black;
padding: 2px 3px;
margin-right: 5px;
position: relative;
text-decoration: none;
text-transform: uppercase;
border-radius: 50%;
}
.mat-column-tickets a:hover{
background-color: #9c28b0;
}
.mat-column-tickets a:active{
box-shadow: none;
top: 5px;
}
.mat-column-logicalPath{
.mat-column-LOGICAL_PATH{
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
\ No newline at end of file
}
......@@ -21,7 +21,7 @@
<div class="example-table-container">
<table mat-table [dataSource]="dataSource" class="example-table" matSort
matSortActive="updateDate" matSortDirection="desc">
matSortActive="UPDATE_DATE" matSortDirection="desc" matSortDisableClear="true">
<!-- Selection column -->
<ng-container matColumnDef="select">
......@@ -44,16 +44,16 @@
</ng-container>
<!-- Creation date Column -->
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef>Creation date</th>
<ng-container matColumnDef="CREATION_DATE">
<th mat-header-cell *matHeaderCellDef mat-sort-header start="desc">Creation date</th>
<td mat-cell *matCellDef="let row">
{{row.node.creationDate | date:"yyyy-MM-ddTHH:mm:ss.SSSSSS"}}
</td>
</ng-container>
<!-- Title Column -->
<ng-container matColumnDef="logicalPath">
<th mat-header-cell *matHeaderCellDef>Element</th>
<ng-container matColumnDef="LOGICAL_PATH">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Element</th>
<td mat-cell *matCellDef="let row">
<a [routerLink]="" (click)="goToMonitoredItemDetails(row.node.id)">
{{row.node.logicalPath}}&nbsp;&nbsp;
......@@ -63,19 +63,19 @@
</ng-container>
<!-- Type Column -->
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>Type</th>
<ng-container matColumnDef="TYPE">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
<td mat-cell *matCellDef="let row">{{row.node.type}}</td>
</ng-container>
<!-- Group Column -->
<ng-container matColumnDef="groupPath">
<th mat-header-cell *matHeaderCellDef>Group</th>
<ng-container matColumnDef="LOGICAL_GROUP">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Group</th>
<td mat-cell *matCellDef="let row">{{row.node.logicalGroup}}</td>
</ng-container>
<!-- Tickets Column -->
<ng-container matColumnDef="tickets">
<ng-container matColumnDef="TICKETS">
<th mat-header-cell *matHeaderCellDef>Tickets</th>
<td mat-cell *matCellDef="let row">
<mat-chip-list aria-label="Tickets">
......@@ -85,13 +85,13 @@
</ng-container>
<!-- State Column -->
<ng-container matColumnDef="statusFk">
<th mat-header-cell *matHeaderCellDef>State</th>
<ng-container matColumnDef="STATUS_FK">
<th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
<td mat-cell *matCellDef="let row">{{row.node.statusFk}}</td>
</ng-container>
<!-- Update date Column -->
<ng-container matColumnDef="updateDate">
<ng-container matColumnDef="UPDATE_DATE" start="desc">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Update date
</th>
......
......@@ -26,8 +26,8 @@ export class Monitored_items_listComponent implements OnInit {
public monitored_itemsService: Monitored_itemsService;
messageType = '1';
public sort_gql : string[] = ["UPDATE_DATE_DESC"]
public page_size : number = 10;
public sort_gql : string = "UPDATE_DATE_DESC";
public page_size : number = 20;
private pageIndex : number = 0;
selectedRows: string[];
......@@ -35,7 +35,8 @@ export class Monitored_items_listComponent implements OnInit {
visibility_unlock_button = "hidden";
dataSource: MonitoredItemsDataSource;
displayedColumns: string[] = ['select','type','logicalPath','groupPath','statusFk','creationDate', 'updateDate','tickets','actions'];
displayedColumns: string[] = ['select','TYPE','LOGICAL_PATH','LOGICAL_GROUP','STATUS_FK',
'CREATION_DATE', 'UPDATE_DATE','TICKETS','actions'];
selection = new SelectionModel<MonitoredItem>(true, []);
constructor(private router: Router, public monitoreditemsService: Monitored_itemsService,public dialog: MatDialog) {
......@@ -47,55 +48,25 @@ export class Monitored_items_listComponent implements OnInit {
}
ngOnInit(): void {
//this.rowData$ = this.monitoreditemsService.searchMessages("").pipe(shareReplay())
//
// this.updateOneSubscription = this.monitoreditemsService.updatedMonitoredItems.subscribe(
// monitored_item => {
// console.log(monitored_item)
// var node = this.agGrid.api.getRowNode(monitored_item.id)
// var data = node.data;
//
// data.tickets = monitored_item.tickets;
// data.updateDate = monitored_item.updateDate;
// }
// );
// this.deleteTicketsSubscription = this.monitoreditemsService.deletedMonitoredItems.subscribe(
// monitored_item => {
// var node = this.agGrid.api.getRowNode(monitored_item.id)
// var data = node.data;
//
// data.tickets = monitored_item.tickets;
// data.updateDate = monitored_item.updateDate;
//
// this.agGrid.api.applyTransactionAsync({ update: [data] })
// this.agGrid.api.redrawRows({ rowNodes: [node] })
// }
// );
//this.monitored_itemsService.searchMessages(this.messageType);
this.dataSource = new MonitoredItemsDataSource(this.monitoreditemsService);
this.dataSource.loadMonitoredItems(this.sort_gql,this.page_size);
}
ngAfterViewInit() {
this.paginator.page
.pipe(
tap(() => {console.log("paginatorChange")})
)
.subscribe();
this.sort.sortChange.subscribe(() => {this.paginator.pageIndex = 0; console.log("sortChange")});
this.sort.sortChange.subscribe(() => {
this.paginator.pageIndex = 0;
this.sort_gql = this.sort.active+'_'+this.sort.direction.toUpperCase()
});
merge(this.sort.sortChange, this.paginator.page)
.pipe(
tap(() => {this.loadMonitoredItemsPage(); console.log("merge")})
tap(() => this.loadMonitoredItemsPage())
)
.subscribe();
}
loadMonitoredItemsPage() {
console.log(this.paginator.pageIndex, this.pageIndex)
if(this.paginator.pageIndex == 0){
this.dataSource.loadMonitoredItems(
this.sort_gql,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment