Skip to content

Commit 7e34f1e

Browse files
0x41head0x41head
authored
Merge pull request #135 from 0x41head/angular-ui
Added sort functionality
2 parents cc7b1a2 + 0e89954 commit 7e34f1e

4 files changed

Lines changed: 288 additions & 69 deletions

File tree

‎src/app/component/mapping/mapping.component.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
.mat-form-field{
77
margin: 20px;
88
width: 50%;
9+
background-color: coral;
10+
911
}
1012

1113
.matrix-table{
@@ -26,4 +28,15 @@
2628
word-wrap: break-word;
2729
font-size: 16px;
2830
font-weight: bold;
31+
}
32+
33+
.sortSection{
34+
margin: 30px;
35+
margin-right: 60px;
36+
background-color: mediumorchid;
37+
float: right;
38+
}
39+
40+
.filterandsort{
41+
background-color: brown;
2942
}

‎src/app/component/mapping/mapping.component.html‎

Lines changed: 64 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,42 @@
11
<div class="content">
22

33
<app-top-header section="Mappings"></app-top-header>
4+
<div class="filterandsort">
5+
<mat-form-field class="filterSection" appearance="fill">
6+
<mat-label>Filter</mat-label>
7+
<mat-chip-list #chipList aria-label="Filter" color="primary">
8+
<mat-chip
9+
*ngFor="let chip of currentChip"
10+
(removed)="remove(chip)">
11+
{{chip}}
12+
<button matChipRemove>
13+
<mat-icon>cancel</mat-icon>
14+
</button>
15+
</mat-chip>
16+
<input
17+
#chipInput
18+
[formControl]="FilterCtrl"
19+
[matAutocomplete]="auto"
20+
[matChipInputFor]="chipList"
21+
[matChipInputSeparatorKeyCodes]="separatorKeysCodes">
22+
</mat-chip-list>
23+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
24+
<mat-option *ngFor="let filter of filteredChips | async" [value]="filter">
25+
{{filter}}
26+
</mat-option>
27+
</mat-autocomplete>
28+
</mat-form-field>
429

5-
<mat-form-field class="example-chip-list" appearance="fill">
6-
<mat-label>Filter</mat-label>
7-
<mat-chip-list #chipList aria-label="Filter" color="primary">
8-
<mat-chip
9-
*ngFor="let chip of currentChip"
10-
(removed)="remove(chip)">
11-
{{chip}}
12-
<button matChipRemove>
13-
<mat-icon>cancel</mat-icon>
14-
</button>
15-
</mat-chip>
16-
<input
17-
#chipInput
18-
[formControl]="chipCtrl"
19-
[matAutocomplete]="auto"
20-
[matChipInputFor]="chipList"
21-
[matChipInputSeparatorKeyCodes]="separatorKeysCodes">
22-
</mat-chip-list>
23-
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
24-
<mat-option *ngFor="let fruit of filteredChips | async" [value]="fruit">
25-
{{fruit}}
26-
</mat-option>
27-
</mat-autocomplete>
28-
</mat-form-field>
30+
31+
<section class="sortSection">
32+
<mat-button-toggle-group [formControl]="SortCtrl" aria-label="Sort By">
33+
<mat-button-toggle value="sortByTask" (click)="changeTableBasedOnCurrentSort()">Tasks</mat-button-toggle>
34+
<mat-button-toggle value="sortBySAMM" (click)="changeTableBasedOnCurrentSort()">SAMM</mat-button-toggle>
35+
<mat-button-toggle value="sortByISO" (click)="changeTableBasedOnCurrentSort()">ISO</mat-button-toggle>
36+
</mat-button-toggle-group>
37+
</section>
38+
</div>
39+
2940

3041

3142
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 matrix-table" >
@@ -46,25 +57,38 @@
4657
</ng-container>
4758

4859
<ng-container matColumnDef="samm2">
49-
<th mat-header-cell *matHeaderCellDef> SAMM </th>
50-
<td mat-cell *matCellDef="let element">
51-
<ul>
52-
<li *ngFor="let sammElement of element.samm2">
53-
{{sammElement}}
54-
</li>
55-
</ul>
56-
</td>
60+
<ng-container *ngIf="currentlySortingBySAMM">
61+
<th mat-header-cell *matHeaderCellDef> SAMM </th>
62+
<td mat-cell *matCellDef="let element"> {{element.samm2}} </td>
63+
</ng-container>
64+
<ng-container *ngIf="currentlySortingByTask || currentlySortingByISO">
65+
<th mat-header-cell *matHeaderCellDef> SAMM </th>
66+
<td mat-cell *matCellDef="let element">
67+
<ul>
68+
<li *ngFor="let sammElement of element.samm2">
69+
{{sammElement}}
70+
</li>
71+
</ul>
72+
</td>
73+
</ng-container>
5774
</ng-container>
5875

5976
<ng-container matColumnDef="ISO">
60-
<th mat-header-cell *matHeaderCellDef> ISO </th>
61-
<td mat-cell *matCellDef="let element">
62-
<ul>
63-
<li *ngFor="let ISOElement of element.ISO">
64-
{{ISOElement}}
65-
</li>
66-
</ul>
67-
</td>
77+
<ng-container *ngIf="currentlySortingByISO">
78+
<th mat-header-cell *matHeaderCellDef> ISO </th>
79+
<td mat-cell *matCellDef="let element"> {{element.ISO}} </td>
80+
</ng-container>
81+
82+
<ng-container *ngIf="currentlySortingByTask || currentlySortingBySAMM">
83+
<th mat-header-cell *matHeaderCellDef> ISO </th>
84+
<td mat-cell *matCellDef="let element">
85+
<ul>
86+
<li *ngFor="let ISOElement of element.ISO">
87+
{{ISOElement}}
88+
</li>
89+
</ul>
90+
</td>
91+
</ng-container>
6892
</ng-container>
6993

7094
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

0 commit comments

Comments
 (0)