change fos+sdg selection arrays into FormArrays (to detect changes on connect admin - subjects)
This commit is contained in:
parent
cdd59b68ab
commit
e0a8127353
|
|
@ -22,7 +22,7 @@
|
|||
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
|
||||
<li *ngFor="let item of viewResults; index as i"
|
||||
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
<a (click)="scrollToId(item.id)">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -59,10 +59,6 @@
|
|||
<div [class.uk-padding-small]="i !== 0" class="uk-text-capitalize uk-padding-remove-horizontal uk-padding-remove-bottom">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
{{item.id}}
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text">
|
||||
{{item.id}}
|
||||
</a> -->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
|
||||
|
|
@ -70,21 +66,13 @@
|
|||
<div class="uk-text-capitalize">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
{{child.id}}
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
||||
class="uk-link-text">
|
||||
{{child.id}}
|
||||
</a> -->
|
||||
</h3>
|
||||
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom uk-text-truncate">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
|
||||
<input [ngModel]="fosOptions.get(subChild.id)" (ngModelChange)="fosOptions.set(subChild.id, $event)"
|
||||
<input [formControl]="getControl(subChild.id).get('checked')"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span [title]="subChild.id">{{subChild.id}}</span>
|
||||
</label>
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
|
||||
class="uk-link-text">
|
||||
{{subChild.id}}
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,27 +85,18 @@
|
|||
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
|
||||
<h2 class="uk-h4 uk-margin-remove"
|
||||
[innerHTML]="highlightKeyword(item.id)">
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
|
||||
</a> -->
|
||||
</h2>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let subItem of item.children">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom"
|
||||
[innerHTML]="highlightKeyword(subItem.id)">
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
||||
</a> -->
|
||||
</h3>
|
||||
<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom uk-text-truncate">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(subSubItem.id)">
|
||||
<input [ngModel]="fosOptions.get(subSubItem.id)" (ngModelChange)="fosOptions.set(subSubItem.id, $event)"
|
||||
<input [formControl]="getControl(subSubItem.id).get('checked')"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="subSubItem.id"></span>
|
||||
</label>
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {HttpClient} from "@angular/common/http";
|
||||
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
|
||||
import {FormBuilder, FormControl} from "@angular/forms";
|
||||
import {FormBuilder, FormControl, UntypedFormArray} from "@angular/forms";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {Subscription} from "rxjs";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
|
|
@ -13,116 +13,116 @@ import Timeout = NodeJS.Timeout;
|
|||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'fos-selection',
|
||||
templateUrl: 'fos-selection.component.html',
|
||||
styleUrls: ['fos-selection.component.less']
|
||||
selector: 'fos-selection',
|
||||
templateUrl: 'fos-selection.component.html',
|
||||
styleUrls: ['fos-selection.component.less']
|
||||
})
|
||||
export class FosSelectionComponent {
|
||||
public properties: EnvProperties = properties;
|
||||
@Input() subjects: string[];
|
||||
public properties: EnvProperties = properties;
|
||||
@Input() subjects: string[];
|
||||
@Input() inModal: boolean = false;
|
||||
@Input() contentHeight: number = 0;
|
||||
@ViewChild("searchElement") searchElement: ElementRef;
|
||||
@Input() contentHeight: number = 0;
|
||||
@ViewChild("searchElement") searchElement: ElementRef;
|
||||
|
||||
public loading: boolean;
|
||||
public fos: any[] = [];
|
||||
public fosOptions: Map<string, boolean>;
|
||||
public activeSection: string;
|
||||
public loading: boolean;
|
||||
public fos: any[] = [];
|
||||
// public fosOptions: Map<string, boolean>;
|
||||
public fosOptions: UntypedFormArray;
|
||||
public activeSection: string;
|
||||
|
||||
public keywordControl: FormControl;
|
||||
public keyword: string;
|
||||
public keywordControl: FormControl;
|
||||
public keyword: string;
|
||||
|
||||
public viewResults = [];
|
||||
public viewResults = [];
|
||||
|
||||
public result = [];
|
||||
public result = [];
|
||||
|
||||
private subscriptions: Subscription[] = [];
|
||||
private observer: IntersectionObserver;
|
||||
private timeout: Timeout;
|
||||
@ViewChild('tabs') tabs: ElementRef;
|
||||
public sliderInit: boolean = false;
|
||||
private subscriptions: Subscription[] = [];
|
||||
private observer: IntersectionObserver;
|
||||
private timeout: Timeout;
|
||||
@ViewChild('tabs') tabs: ElementRef;
|
||||
public sliderInit: boolean = false;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private fb: FormBuilder,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router
|
||||
) {}
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
private fb: FormBuilder,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private route: ActivatedRoute,
|
||||
private _router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
|
||||
this.fos = data['fos'];
|
||||
this.convertFosToOptions();
|
||||
this.convertFosToOptions();
|
||||
if (typeof document !== 'undefined') {
|
||||
setTimeout(()=> {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
slider.clsActive = 'uk-slider-active';
|
||||
slider.updateActiveClasses();
|
||||
this.sliderInit = true;
|
||||
slider.slides.forEach(item => {
|
||||
item.classList.remove('uk-active');
|
||||
});
|
||||
if (this.route.snapshot.fragment) {
|
||||
this.activeSection = this.route.snapshot.fragment;
|
||||
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
|
||||
slider.show(i);
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
|
||||
this.fos = data['fos'];
|
||||
this.convertFosToOptions();
|
||||
if (typeof document !== 'undefined') {
|
||||
setTimeout(()=> {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
slider.clsActive = 'uk-slider-active';
|
||||
slider.updateActiveClasses();
|
||||
this.sliderInit = true;
|
||||
slider.slides.forEach(item => {
|
||||
item.classList.remove('uk-active');
|
||||
});
|
||||
if (this.route.snapshot.fragment) {
|
||||
this.activeSection = this.route.snapshot.fragment;
|
||||
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
|
||||
slider.show(i);
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
|
||||
this.setObserver();
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
}
|
||||
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
|
||||
if(fragment) {
|
||||
this.activeSection = fragment;
|
||||
if(this.tabs) {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
let i = this.fos.findIndex(item => item.id == fragment);
|
||||
slider.show(i);
|
||||
}
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
}));
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
this.keyword = value;
|
||||
this.findMatches(this.keyword);
|
||||
if (typeof document !== 'undefined') {
|
||||
setTimeout(() => {
|
||||
this.setObserver();
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
}
|
||||
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
|
||||
if(fragment) {
|
||||
this.activeSection = fragment;
|
||||
if(this.tabs) {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
let i = this.fos.findIndex(item => item.id == fragment);
|
||||
slider.show(i);
|
||||
}
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
}));
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
this.keyword = value;
|
||||
this.findMatches(this.keyword);
|
||||
if (typeof document !== 'undefined') {
|
||||
setTimeout(() => {
|
||||
this.setObserver();
|
||||
});
|
||||
}
|
||||
}));
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
ngOnDestroy() {
|
||||
for (let sub of this.subscriptions) {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
private setObserver() {
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
if(this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
this.timeout = setTimeout(() => {
|
||||
private setObserver() {
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
this.observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
if(this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
this.timeout = setTimeout(() => {
|
||||
if(!this.inModal) {
|
||||
this._router.navigate(['./'], {
|
||||
fragment: entry.target.id,
|
||||
|
|
@ -132,86 +132,112 @@ export class FosSelectionComponent {
|
|||
} else {
|
||||
this.activeSection = entry.target.id;
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}, {threshold: 0.1, rootMargin: '-100px'});
|
||||
this.fos.forEach(fos => {
|
||||
let element = document.getElementById(fos.id);
|
||||
if(element) {
|
||||
this.observer.observe(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}, {threshold: 0.1, rootMargin: '-100px'});
|
||||
this.fos.forEach(fos => {
|
||||
let element = document.getElementById(fos.id);
|
||||
if(element) {
|
||||
this.observer.observe(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
convertFosToOptions() {
|
||||
this.fosOptions = new Map<string, boolean>();
|
||||
this.fos.forEach(fos => {
|
||||
this.fosOptions.set(fos.id, false);
|
||||
if(fos.children) {
|
||||
fos.children.forEach(child => {
|
||||
this.fosOptions.set(child.id, false);
|
||||
convertFosToOptions() {
|
||||
this.fosOptions = this.fb.array([]);
|
||||
this.fos.forEach(fos => {
|
||||
this.fosOptions.push(this.fb.group({
|
||||
id: this.fb.control(fos.id),
|
||||
checked: this.fb.control(false)
|
||||
}));
|
||||
if(fos.children) {
|
||||
fos.children.forEach(child => {
|
||||
this.fosOptions.push(this.fb.group({
|
||||
id: this.fb.control(fos.id),
|
||||
checked: this.fb.control(false)
|
||||
}));
|
||||
if(child.children) {
|
||||
child.children.forEach(child2 => {
|
||||
this.fosOptions.set(child2.id, this.subjects?.includes(child2.id));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
child.children.forEach(child2 => {
|
||||
this.fosOptions.push(this.fb.group({
|
||||
id: this.fb.control(child2.id),
|
||||
checked: this.fb.control(this.subjects?.includes(child2.id))
|
||||
}));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
findMatches(value: string) {
|
||||
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
||||
let matchLevel1: boolean = false;
|
||||
let matchLevel2: boolean = false;
|
||||
// 1st level search
|
||||
if(this.viewResults.length) {
|
||||
this.viewResults = this.viewResults.filter(item => {
|
||||
matchLevel1 = !!item.id.includes(value?.toLowerCase());
|
||||
// // 2nd level search
|
||||
if(item.children?.length && !matchLevel1) {
|
||||
item.children = item.children.filter(subItem => {
|
||||
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
|
||||
// 3rd level search
|
||||
if(subItem.children?.length && !matchLevel2) {
|
||||
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
||||
}
|
||||
return subItem.children?.length > 0 || matchLevel2;
|
||||
});
|
||||
}
|
||||
return item.children?.length > 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
highlightKeyword(name) {
|
||||
if(name.includes(this.keyword.toLowerCase())) {
|
||||
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.fosOptions.controls.forEach(control => {
|
||||
control.get('checked').setValue(this.subjects?.includes(control.value.id));
|
||||
});
|
||||
}
|
||||
|
||||
findMatches(value: string) {
|
||||
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
||||
let matchLevel1: boolean = false;
|
||||
let matchLevel2: boolean = false;
|
||||
// 1st level search
|
||||
if(this.viewResults.length) {
|
||||
this.viewResults = this.viewResults.filter(item => {
|
||||
matchLevel1 = !!item.id.includes(value?.toLowerCase());
|
||||
// // 2nd level search
|
||||
if(item.children?.length && !matchLevel1) {
|
||||
item.children = item.children.filter(subItem => {
|
||||
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
|
||||
// 3rd level search
|
||||
if(subItem.children?.length && !matchLevel2) {
|
||||
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
||||
}
|
||||
return subItem.children?.length > 0 || matchLevel2;
|
||||
});
|
||||
}
|
||||
return item.children?.length > 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
highlightKeyword(name) {
|
||||
if(name.includes(this.keyword.toLowerCase())) {
|
||||
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
public urlEncodeAndQuote(str: string): string {
|
||||
return StringUtils.quote(StringUtils.URIEncode(str));
|
||||
}
|
||||
|
||||
public scrollToId(value: string) {
|
||||
HelperFunctions.scrollToId(value);
|
||||
this.activeSection = value;
|
||||
}
|
||||
|
||||
public getSelectedSubjects() {
|
||||
let checked = Array.from(this.fosOptions, function (entry) {
|
||||
return {id: entry[0], checked: entry[1]};
|
||||
});
|
||||
return checked.filter(sub => sub.checked == true);
|
||||
public scrollToId(value: string) {
|
||||
HelperFunctions.scrollToId(value);
|
||||
this.activeSection = value;
|
||||
}
|
||||
|
||||
get calculatedHeight(): number {
|
||||
if(this.contentHeight && this.searchElement) {
|
||||
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
|
||||
}
|
||||
public getSelectedSubjects() {
|
||||
if(this.fosOptions) {
|
||||
return this.fosOptions.value.filter(sub => sub.checked == true);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
public getControl(id: string) {
|
||||
if(this.fosOptions?.controls) {
|
||||
return this.fosOptions.controls.find(control => control.value.id === id);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public get hasChanges() {
|
||||
return !!this.fosOptions && this.fosOptions.dirty;
|
||||
}
|
||||
|
||||
get calculatedHeight(): number {
|
||||
if(this.contentHeight && this.searchElement) {
|
||||
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {NgModule} from "@angular/core";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
|
@ -8,7 +8,7 @@ import {FosSelectionComponent} from './fos-selection.component';
|
|||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
|
||||
CommonModule, ReactiveFormsModule, LoadingModule, InputModule, SearchInputModule
|
||||
],
|
||||
declarations: [
|
||||
FosSelectionComponent
|
||||
|
|
|
|||
|
|
@ -4,25 +4,25 @@
|
|||
<div *ngIf="!loading">
|
||||
<div class="uk-flex uk-flex-around">
|
||||
<div>
|
||||
<div *ngFor="let item of firstColumn; let i = index"
|
||||
<div *ngFor="let control of firstColumn; let i = index"
|
||||
class="uk-margin-bottom">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
|
||||
<input [(ngModel)]="item.checked"
|
||||
<label [class.uk-text-bolder]="subjects?.includes(control.value.id)">
|
||||
<input [formControl]="control.get('checked')"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span *ngIf="isFeedback" class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
|
||||
<span>{{item.id}}</span>
|
||||
<span>{{control.value.id}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngFor="let item of secondColumn; let i = index"
|
||||
<div *ngFor="let control of secondColumn; let i = index"
|
||||
class="uk-margin-bottom">
|
||||
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
|
||||
<input [(ngModel)]="item.checked"
|
||||
<label [class.uk-text-bolder]="subjects?.includes(control.value.id)">
|
||||
<input [formControl]="control.get('checked')"
|
||||
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
||||
<span *ngIf="i !== secondColumn.length - 1 && isFeedback"
|
||||
class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
|
||||
<span>{{item.id}}</span>
|
||||
<span>{{control.value.id}}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {HttpClient} from "@angular/common/http";
|
||||
import {Component, Input} from "@angular/core";
|
||||
import {UntypedFormArray, UntypedFormBuilder} from "@angular/forms";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {EnvProperties} from "../../utils/properties/env-properties";
|
||||
import {StringUtils} from "../../utils/string-utils.class";
|
||||
|
|
@ -16,37 +17,66 @@ export class SdgSelectionComponent {
|
|||
@Input() isFeedback: boolean = true;
|
||||
|
||||
public loading: boolean;
|
||||
public sdgs: any = [];
|
||||
public sdgs: UntypedFormArray;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient
|
||||
private httpClient: HttpClient,
|
||||
private fb: UntypedFormBuilder
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loading = true;
|
||||
this.sdgs = this.fb.array([]);
|
||||
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/sdg.json').subscribe(data => {
|
||||
data['sdg'].forEach(element => {
|
||||
this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
|
||||
// this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
|
||||
this.sdgs.push(this.fb.group({
|
||||
code: this.fb.control(element.code),
|
||||
id: this.fb.control(element.id),
|
||||
label: this.fb.control(element.label),
|
||||
html: this.fb.control(element.html),
|
||||
checked: this.fb.control(this.subjects?.includes(element.id))
|
||||
}));
|
||||
});
|
||||
if(this.isFeedback) {
|
||||
this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
|
||||
// // this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
|
||||
this.sdgs.push(this.fb.group({
|
||||
code: this.fb.control('18'),
|
||||
id: this.fb.control('No SDGs are relevant for this ' + this.getEntityName(this.entityType)),
|
||||
label: this.fb.control('Not relevant'),
|
||||
html: this.fb.control('Not relevant'),
|
||||
checked: this.fb.control(false)
|
||||
}));
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.sdgs.controls.forEach(control => {
|
||||
control.get('checked').setValue(this.subjects?.includes(control.value.id));
|
||||
});
|
||||
}
|
||||
|
||||
public get firstColumn() {
|
||||
return this.sdgs.slice(0, Math.ceil(this.sdgs.length/2));
|
||||
return this.sdgs.controls.slice(0, Math.ceil(this.sdgs.length/2));
|
||||
}
|
||||
|
||||
public get secondColumn() {
|
||||
return this.sdgs.slice(Math.ceil(this.sdgs.length/2), this.sdgs.length);
|
||||
return this.sdgs.controls.slice(Math.ceil(this.sdgs.length/2), this.sdgs.length);
|
||||
}
|
||||
|
||||
public getSelectedSubjects() {
|
||||
return this.sdgs.filter(sub => sub.checked == true);
|
||||
if(this.sdgs) {
|
||||
return this.sdgs.value.filter(sub => sub.checked == true);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
public get hasChanges() {
|
||||
return !!this.sdgs && this.sdgs.dirty;
|
||||
}
|
||||
|
||||
private getEntityName (entityType:string) {
|
||||
return StringUtils.getEntityName(entityType, false);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {NgModule} from "@angular/core";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {ReactiveFormsModule} from "@angular/forms";
|
||||
import {InputModule} from "../../sharedComponents/input/input.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
import {SdgSelectionComponent} from "./sdg-selection.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, LoadingModule, InputModule
|
||||
CommonModule, ReactiveFormsModule, LoadingModule, InputModule
|
||||
],
|
||||
declarations: [
|
||||
SdgSelectionComponent
|
||||
|
|
|
|||
Loading…
Reference in New Issue