Skip to content

Commit

Permalink
#1704 create directions table general look 2 (#1813)
Browse files Browse the repository at this point in the history
* #1704 added pulling of institution descriptions, deleted hardcoded columns, fixed comments in pr

* #1704 code formatting, added check on loading

* #1704 added again action for GetAllInstitutionsHierarchy

* #1704 comments after review

Co-authored-by: Nazarii Ivasyshyn <nivasy@softserveinc.com>
Co-authored-by: Oleksandra Lytvynets <alitvinets7@gmail.com>
  • Loading branch information
3 people authored Nov 9, 2022
1 parent ba5e2b0 commit 707fc3a
Show file tree
Hide file tree
Showing 11 changed files with 202 additions and 12 deletions.
4 changes: 4 additions & 0 deletions src/app/shared/services/institutions/institutions.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ export class InstitutionsService {
return this.http.get<Institution[]>('/api/v1/Institution/GetAll');
}

getAllInstitutionHierarchies(): Observable<InstituitionHierarchy[]> {
return this.http.get<InstituitionHierarchy[]> ('/api/v1/InstitutionHierarchy/GetAll');
}

getAllByInstitutionAndLevel(institutionsId: string, hierarchyLevel: number): Observable<InstituitionHierarchy[]> {
let params = new HttpParams();
params = params.set('institutionId', institutionsId);
Expand Down
5 changes: 5 additions & 0 deletions src/app/shared/store/meta-data.actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ export class GetAllInstitutions {
constructor() {}
}

export class GetAllInstitutionsHierarchy {
static readonly type = '[meta-data] Get All Institutions Hierarchy';
constructor() {}
}

export class GetAchievementsType {
static readonly type = '[meta-data] Get All Achievement Types';
constructor() {}
Expand Down
28 changes: 26 additions & 2 deletions src/app/shared/store/meta-data.state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
GetAchievementsType,
GetAllByInstitutionAndLevel,
GetAllInstitutions,
GetAllInstitutionsHierarchy,
GetCodeficatorById,
GetCodeficatorSearch,
GetFeaturesList,
Expand All @@ -49,6 +50,7 @@ export interface MetaDataStateModel {
featuresList: FeaturesList;
institutions: Institution[];
institutionFieldDesc: InstitutionFieldDescription[];
instituitionsHierarchyAll: InstituitionHierarchy[];
instituitionsHierarchy: InstituitionHierarchy[];
editInstituitionsHierarchy: InstituitionHierarchy[];
codeficatorSearch: Codeficator[];
Expand All @@ -67,6 +69,7 @@ export interface MetaDataStateModel {
featuresList: { release1: true, release2: true, release3: false },
institutions: null,
institutionFieldDesc: null,
instituitionsHierarchyAll: null,
instituitionsHierarchy: null,
editInstituitionsHierarchy: null,
codeficatorSearch: [],
Expand Down Expand Up @@ -111,7 +114,8 @@ export class MetaDataState {
}

@Selector()
static institutions(state: MetaDataStateModel): Institution[] {
static institutions(
state: MetaDataStateModel): Institution[] {
return state.institutions;
}

Expand All @@ -121,7 +125,16 @@ export class MetaDataState {
}

@Selector()
static instituitionsHierarchy(state: MetaDataStateModel): InstituitionHierarchy[] {
static instituitionsHierarchyAll(
state: MetaDataStateModel
): InstituitionHierarchy[] {
return state.instituitionsHierarchyAll;
}

@Selector()
static instituitionsHierarchy(
state: MetaDataStateModel
): InstituitionHierarchy[] {
return state.instituitionsHierarchy;
}

Expand Down Expand Up @@ -209,6 +222,17 @@ export class MetaDataState {
.pipe(tap((institutions: Institution[]) => patchState({ institutions: institutions, isLoading: false })));
}

@Action(GetAllInstitutionsHierarchy)
getAllInstitutionsHierarchy(
{ patchState }: StateContext<MetaDataStateModel>,
{}: GetAllInstitutionsHierarchy
): Observable<InstituitionHierarchy[]> {
patchState({ isLoading: true });
return this.institutionsService
.getAllInstitutionHierarchies()
.pipe(tap((instituitionsHierarchyAll: InstituitionHierarchy[]) => patchState({ instituitionsHierarchyAll: instituitionsHierarchyAll, isLoading: false })));
}

@Action(GetAchievementsType)
getAchievementType({ patchState }: StateContext<MetaDataStateModel>, {}: GetAchievementsType): Observable<AchievementType[]> {
patchState({ isLoading: true });
Expand Down
4 changes: 3 additions & 1 deletion src/app/shell/admin-tools/data/data.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { MaterialModule } from '../../../shared/modules/material.module';
import { DirectionsComponent } from './directions-wrapper/directions/directions.component';
import { CreateDirectionComponent } from './directions-wrapper/directions/create-direction/create-direction.component';
import { DirectionsWrapperComponent } from './directions-wrapper/directions-wrapper.component';
import { DirectionsInstitutionHierarchiesListComponent } from './directions-wrapper/directions-institution-hierarchies-list/directions-institution-hierarchies-list.component';

@NgModule({
declarations: [
Expand All @@ -28,7 +29,8 @@ import { DirectionsWrapperComponent } from './directions-wrapper/directions-wrap
HistoryLogFiltersComponent,
DirectionsComponent,
CreateDirectionComponent,
DirectionsWrapperComponent
DirectionsWrapperComponent,
DirectionsInstitutionHierarchiesListComponent
],
imports: [CommonModule, DataRoutingModule, SharedModule, MaterialModule, FlexLayoutModule],
exports: [DataComponent]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<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 matColumnDef="{{column}}" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{column}}
</th>
<td mat-cell *matCellDef="let element" class="tab">
<div class="tab-text"> {{ element[i] }}
</div>
</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "src/app/shared/styles/tables.scss";
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatTableModule } from '@angular/material/table';
import { NgxsModule } from '@ngxs/store';
import { DirectionsInstitutionHierarchiesListComponent } from './directions-institution-hierarchies-list.component';

describe('DirectionsInstitutionHierarchiesListComponent', () => {
let component: DirectionsInstitutionHierarchiesListComponent;
let fixture: ComponentFixture<DirectionsInstitutionHierarchiesListComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NgxsModule.forRoot([]), MatTableModule],
declarations: [DirectionsInstitutionHierarchiesListComponent]
})
.compileComponents();

fixture = TestBed.createComponent(DirectionsInstitutionHierarchiesListComponent);
component = fixture.componentInstance;
component.institution = {
id: "id",
title: 'title',
numberOfHierarchyLevels: 2
};
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Select, Store } from '@ngxs/store';
import { distinctUntilChanged, filter, map, Observable, Subject, takeUntil } from 'rxjs';
import { Institution, InstituitionHierarchy, InstitutionFieldDescription } from '../../../../../shared/models/institution.model';
import { GetFieldDescriptionByInstitutionId, GetAllInstitutionsHierarchy } from '../../../../../shared/store/meta-data.actions';
import { MetaDataState } from '../../../../../shared/store/meta-data.state';


@Component({
selector: 'app-directions-institution-hierarchies-list',
templateUrl: './directions-institution-hierarchies-list.component.html',
styleUrls: ['./directions-institution-hierarchies-list.component.scss']
})
export class DirectionsInstitutionHierarchiesListComponent implements OnInit, OnDestroy {
@Input() institution: Institution;

@Select(MetaDataState.instituitionsHierarchyAll)
institutionsHierarchies$: Observable<InstituitionHierarchy[]>;
@Select(MetaDataState.institutionFieldDesc)
institutionFieldDesc$: Observable<InstitutionFieldDescription[]>;

destroy$: Subject<boolean> = new Subject<boolean>();
displayedColumns: string[];
institutionalHierarchies: InstituitionHierarchy[];
records: string[][];
isLoaded: boolean = false;
dataSource: MatTableDataSource<object> = new MatTableDataSource([{}]);

constructor(private store: Store) {
}

ngOnInit(): void {
this.loadDirectionInstitutionHierarchiesData();
}

private loadDirectionInstitutionHierarchiesData() {
this.store.dispatch([new GetFieldDescriptionByInstitutionId(this.institution.id),
new GetAllInstitutionsHierarchy()]);

this.institutionFieldDesc$.pipe(
filter((institutionFieldDesc: InstitutionFieldDescription[]) => !!institutionFieldDesc),
distinctUntilChanged(),
takeUntil(this.destroy$)
).subscribe((institutionFieldDesc: InstitutionFieldDescription[]) => {
this.displayedColumns = institutionFieldDesc.map((ins: InstitutionFieldDescription) => ins.title);
});
this.institutionsHierarchies$.pipe(
filter((institutiionHierarchies: InstituitionHierarchy[]) => !!institutiionHierarchies),
distinctUntilChanged(),
map((institutionHierarchies: InstituitionHierarchy[]) =>
this.createDirectionTableRecords(institutionHierarchies.filter(ins => ins.institution.title === this.institution.title))
),
takeUntil(this.destroy$)
).subscribe(() => {
this.isLoaded = true;
this.dataSource = new MatTableDataSource(this.records)
});
}

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]);
});
}
}

private createDirectionTableRecord(parent: InstituitionHierarchy, records: string[]) {
records.push(parent.title);
let children = this.institutionalHierarchies.filter((ins: InstituitionHierarchy) => ins.parentId === parent.id);
if (!children.length) {
this.records.push(records);
}
else {
children.forEach((child: InstituitionHierarchy) => {
this.createDirectionTableRecord(child, [...records]);
})
}
}

ngOnDestroy(): void {
this.destroy$.next(true);
this.destroy$.unsubscribe();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@
<mat-tab label="Напрямки для користувача">
<app-directions></app-directions>
</mat-tab>
<mat-tab label="МОН"> </mat-tab>
<mat-tab label="МКІП"> </mat-tab>
<mat-tab label="Мінспорт"> </mat-tab>
<mat-tab label="Інші"> </mat-tab>
<ng-container *ngFor="let institution of (institutions$ | async)">
<mat-tab label="{{institution.title}}">
<ng-template matTabContent>
<app-directions-institution-hierarchies-list [institution]="institution">
</app-directions-institution-hierarchies-list>
</ng-template>
</mat-tab>
</ng-container>
</mat-tab-group>
</div>
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxsModule } from '@ngxs/store';
import { DirectionsWrapperComponent } from './directions-wrapper.component';
import { DirectionsComponent } from './directions/directions.component';

describe('DirectionsWrapperComponent', () => {
let component: DirectionsWrapperComponent;
let fixture: ComponentFixture<DirectionsWrapperComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NgxsModule.forRoot([])],
declarations: [DirectionsWrapperComponent]
imports: [NgxsModule.forRoot([]), MatTabsModule, MatDialogModule, BrowserAnimationsModule],
declarations: [DirectionsWrapperComponent, DirectionsComponent],
}).compileComponents();

fixture = TestBed.createComponent(DirectionsWrapperComponent);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,31 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngxs/store';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { NavBarName } from '../../../../shared/enum/navigation-bar';
import { PopNavPath, PushNavPath } from '../../../../shared/store/navigation.actions';
import { MetaDataState } from '../../../../shared/store/meta-data.state';
import { Institution } from '../../../../shared/models/institution.model';
import { GetAllInstitutions } from '../../../../shared/store/meta-data.actions';

@Component({
selector: 'app-directions-wrapper',
templateUrl: './directions-wrapper.component.html',
styleUrls: ['./directions-wrapper.component.scss']
})
export class DirectionsWrapperComponent implements OnInit, OnDestroy {
@Select(MetaDataState.institutions)
institutions$: Observable<Institution[]>;

constructor(private store: Store) {}

ngOnInit(): void {
this.store.dispatch(
this.store.dispatch([new GetAllInstitutions(),
new PushNavPath({
name: NavBarName.Directions,
isActive: false,
disable: true
})
);
]);
}

ngOnDestroy(): void {
Expand Down

0 comments on commit 707fc3a

Please sign in to comment.