Merge pull request #153 from 0x41head/angular-ui

Angular UI

Author: 0x41head

.github/workflows/lint.yml

@@ -2,26 +2,25 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.6.
 
-## Development server
+### Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
-## Code scaffolding
+### Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
-## Build
+### Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+### Running unit tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running end-to-end tests
+## Coding Style Conventions
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+- We follow the coding style defined by [ESLint](https://eslint.org/). 
+- We also use [Prettier](https://prettier.io/docs/en/index.html) as our opinionated code formatter.
 
-## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

Development.md

@@ -4,7 +4,7 @@
     <mat-form-field class="filterSection" appearance="fill">
       <mat-label>Filter</mat-label>
       <mat-chip-list #chipList aria-label="Filter" color="primary">
-        <mat-chip *ngFor="let chip of currentChip" (removed)="remove(chip)">
+        <mat-chip *ngFor="let chip of currentChip" (removed)="removeChip(chip)">
           {{ chip }}
           <button matChipRemove>
             <mat-icon>cancel</mat-icon>
@@ -19,7 +19,7 @@
       </mat-chip-list>
       <mat-autocomplete
         #auto="matAutocomplete"
-        (optionSelected)="selected($event)">
+        (optionSelected)="addChip($event)">
         <mat-option
           *ngFor="let filter of filteredChips | async"
           [value]="filter">

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

@@ -320,18 +320,17 @@ export class MappingComponent implements OnInit {
     //console.log(this.temp)
   }
 
-  // remong filter chip
-  remove(chip: string): void {
+  // remove filter chip
+  removeChip(chip: string): void {
     const index = this.currentChip.indexOf(chip);
-    //console.log(fruit)
     if (index >= 0) {
       this.currentChip.splice(index, 1);
     }
     this.changeTableBasedOnCurrentFilter();
   }
 
   //adding filter chip
-  selected(event: MatAutocompleteSelectedEvent): void {
+  addChip(event: MatAutocompleteSelectedEvent): void {
     this.currentChip.push(event.option.viewValue);
     this.changeTableBasedOnCurrentFilter();
   }
@@ -344,38 +343,47 @@ export class MappingComponent implements OnInit {
     );
   }
 
+  //check sort value and change table data accordingly
+  checkSortValueAndChangeTableData(
+    taskData: any,
+    ISOData: any,
+    SAMMData: any
+  ): void {
+    if (this.currentlySortingByTask) {
+      this.dataSource = taskData;
+    } else if (this.currentlySortingByISO) {
+      this.dataSource = ISOData;
+    } else {
+      this.dataSource = SAMMData;
+    }
+  }
+
   changeTableBasedOnCurrentFilter() {
     if (this.currentChip.length > 1 || this.currentChip.length == 0) {
       // both planned and performed actvities are selected
 
       //Check current sort value
-      if (this.currentlySortingByTask) {
-        this.dataSource = this.allMappingDataSortedByTask;
-      } else if (this.currentlySortingByISO) {
-        this.dataSource = this.allMappingDataSortedByISO;
-      } else {
-        this.dataSource = this.allMappingDataSortedBySAMM;
-      }
+      this.checkSortValueAndChangeTableData(
+        this.allMappingDataSortedByTask,
+        this.allMappingDataSortedByISO,
+        this.allMappingDataSortedBySAMM
+      );
     } else if (this.currentChip[0] == 'Planned Activities') {
       // planned actvities shows planned data
 
       //Check current sort value
-      if (this.currentlySortingByTask) {
-        this.dataSource = this.plannedMappingDataSortedByTask;
-      } else if (this.currentlySortingByISO) {
-        this.dataSource = this.plannedMappingDataSortedByISO;
-      } else {
-        this.dataSource = this.plannedMappingDataSortedBySAMM;
-      }
+      this.checkSortValueAndChangeTableData(
+        this.plannedMappingDataSortedByTask,
+        this.plannedMappingDataSortedByISO,
+        this.plannedMappingDataSortedBySAMM
+      );
     } else {
       //Check current sort value
-      if (this.currentlySortingByTask) {
-        this.dataSource = this.performedMappingDataSortedByTask;
-      } else if (this.currentlySortingByISO) {
-        this.dataSource = this.performedMappingDataSortedByISO;
-      } else {
-        this.dataSource = this.performedMappingDataSortedBySAMM;
-      }
+      this.checkSortValueAndChangeTableData(
+        this.performedMappingDataSortedByTask,
+        this.performedMappingDataSortedByISO,
+        this.performedMappingDataSortedBySAMM
+      );
     }
 
     this.chipInput.nativeElement.value = '';