#1890 directions table update (#2028)

* #1890 added directions column, and delete/edit buttons * #1890 corrected styles for direction button * #1890 fixed formatting issues, deleted useless function and comment --------- Co-authored-by: Nazarii Ivasyshyn <nivasy@softserveinc.com>
ita-social-projects · Mar 6, 2023 · 4e97103 · 4e97103
1 parent a2e654f
commit 4e97103
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/...tions-institution-hierarchies-list/directions-institution-hierarchies-list.component.html b/...tions-institution-hierarchies-list/directions-institution-hierarchies-list.component.html
@@ -1,17 +1,38 @@
 <div class="wrapper">
   <div [hidden]="!dataSource" *ngIf="isLoaded" class="table-container mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort appStretchTable>
-      <ng-container *ngFor="let column of displayedColumns; index as i">
+      <ng-container *ngFor="let column of columns; index as i">
         <ng-container matColumnDef="{{column}}" sticky>
-          <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by {{column}}">
             {{column}}
           </th>
           <td mat-cell *matCellDef="let element" class="tab">
-            <div class="tab-text"> {{ element[i] }}
+            <div class="tab-text"> {{ element.name[i] }}
             </div>
           </td>
         </ng-container>
       </ng-container>
+      <ng-container matColumnDef="Напрямок для користувача">
+        <th mat-header-cell *matHeaderCellDef >Напрямок для користувача</th>
+        <td mat-cell *matCellDef="let element" >
+          <a target="_blank" rel="noreferrer" (click)="selectDirection(element.directions[0])">
+            <img class="min-logo" src="../../assets/icons/icon_painting.svg" alt="Link" />
+            <span>{{element.directions[0].description}}</span>  
+          </a>
+        </td>
+      </ng-container>
+      <ng-container class="actions-column" matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef ></th>
+        <td mat-cell *matCellDef="let element" >
+          <button mat-button>
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-button>
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>

diff --git a/...tions-institution-hierarchies-list/directions-institution-hierarchies-list.component.scss b/...tions-institution-hierarchies-list/directions-institution-hierarchies-list.component.scss
@@ -1 +1,22 @@
-@import "src/app/shared/styles/tables.scss";
+@import "src/app/shared/styles/tables.scss";
+
+table {
+  width: 100%;
+  height: 20px;
+  td, th {
+    border-style: none;
+  }
+
+  img {
+    width: 30px;
+    height: 30px;
+  }
+
+  a {
+    cursor: pointer;
+    span {
+      margin-left: 5px;
+      vertical-align: top;
+    }
+  }
+}
diff --git a/...ections-institution-hierarchies-list/directions-institution-hierarchies-list.component.ts b/...ections-institution-hierarchies-list/directions-institution-hierarchies-list.component.ts
@@ -1,10 +1,16 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { Router } from '@angular/router';
 import { Select, Store } from '@ngxs/store';
 import { distinctUntilChanged, filter, map, Observable, Subject, takeUntil } from 'rxjs';
+import { Direction } from '../../../../../shared/models/category.model';
+import { DefaultFilterState } from '../../../../../shared/models/defaultFilterState.model';
 import { Institution, InstituitionHierarchy, InstitutionFieldDescription } from '../../../../../shared/models/institution.model';
+import { SetDirections } from '../../../../../shared/store/filter.actions';
 import { GetFieldDescriptionByInstitutionId, GetAllInstitutionsHierarchy } from '../../../../../shared/store/meta-data.actions';
 import { MetaDataState } from '../../../../../shared/store/meta-data.state';
+import { InsHierarchyTableRecord } from './ins-hierarchy-table-record';
 
 
 @Component({
@@ -20,14 +26,18 @@ export class DirectionsInstitutionHierarchiesListComponent implements OnInit, On
   @Select(MetaDataState.institutionFieldDesc)
   institutionFieldDesc$: Observable<InstitutionFieldDescription[]>;
 
+  @ViewChild(MatSort) sort: MatSort;
+
   destroy$: Subject<boolean> = new Subject<boolean>();
+  staticColumns: string[] = ['Напрямок для користувача','actions'];
+  columns: string[];
   displayedColumns: string[];
   institutionalHierarchies: InstituitionHierarchy[];
-  records: string[][];
+  records: InsHierarchyTableRecord[] = [];
   isLoaded: boolean = false;
   dataSource: MatTableDataSource<object> = new MatTableDataSource([{}]);
 
-  constructor(private store: Store) {
+  constructor(private store: Store, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -43,8 +53,9 @@ export class DirectionsInstitutionHierarchiesListComponent implements OnInit, On
       distinctUntilChanged(),
       takeUntil(this.destroy$)
     ).subscribe((institutionFieldDesc: InstitutionFieldDescription[]) => {
-        this.displayedColumns = institutionFieldDesc.map((ins: InstitutionFieldDescription) => ins.title);
-      });
+      this.columns = institutionFieldDesc.map((ins: InstitutionFieldDescription) => ins.title);
+      this.displayedColumns = [...this.columns, ...this.staticColumns];
+    });
     this.institutionsHierarchies$.pipe(
       filter((institutiionHierarchies: InstituitionHierarchy[]) => !!institutiionHierarchies),
       distinctUntilChanged(),
@@ -54,35 +65,41 @@ export class DirectionsInstitutionHierarchiesListComponent implements OnInit, On
       takeUntil(this.destroy$)
     ).subscribe(() => {
       this.isLoaded = true;
-      this.dataSource = new MatTableDataSource(this.records)
+      this.dataSource = new MatTableDataSource(this.records);
+      this.dataSource.sort = this.sort;
     });
   }
 
   private createDirectionTableRecords(institutionalHierarchies: InstituitionHierarchy[]) {
     if (institutionalHierarchies) {
       this.institutionalHierarchies = institutionalHierarchies;
-      this.records = [];
       const firstLevelInstitutions = this.institutionalHierarchies.filter((ins: InstituitionHierarchy) => ins.hierarchyLevel === 1);
       firstLevelInstitutions.forEach((ins: InstituitionHierarchy) => {
-        let records: string[] = [];
-        this.createDirectionTableRecord(ins, [...records]);
+        let insHierarchyName: string[] = [];
+        this.createDirectionTableRecord(ins, [...insHierarchyName]);
       });
     }
   }
 
-  private createDirectionTableRecord(parent: InstituitionHierarchy, records: string[]) {
-    records.push(parent.title);
+  private createDirectionTableRecord(parent: InstituitionHierarchy, insHierarchyName: string[]) {
+    insHierarchyName.push(parent.title);
     let children = this.institutionalHierarchies.filter((ins: InstituitionHierarchy) => ins.parentId === parent.id);
     if (!children.length) {
-      this.records.push(records);
+      this.records.push({name: insHierarchyName, directions: parent.directions});
     }
     else {
       children.forEach((child: InstituitionHierarchy) => {
-        this.createDirectionTableRecord(child, [...records]);
+        this.createDirectionTableRecord(child, [...insHierarchyName]);
       })
     }
   }
 
+  public selectDirection(direction: Direction): void {
+    this.store.dispatch(new SetDirections([direction.id]));
+    const filterQueryParams: Partial<DefaultFilterState> = { directionIds: [direction.id] };
+    this.router.navigate(['result/list'], { queryParams: { filter: filterQueryParams }, replaceUrl: true });
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();

diff --git a/.../directions-wrapper/directions-institution-hierarchies-list/ins-hierarchy-table-record.ts b/.../directions-wrapper/directions-institution-hierarchies-list/ins-hierarchy-table-record.ts
@@ -0,0 +1,6 @@
+import { Direction } from "../../../../../shared/models/category.model";
+
+export interface InsHierarchyTableRecord {
+  name: string[];
+  directions: Direction[]
+}