import { Component, OnInit, Input, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { PublicationService } from 'src/app/core/services/publication-service/publication.service';
import { DataResolverService } from 'src/app/core/services/data-resolver/data-resolver.service';
import { Router, ActivatedRoute } from '@angular/router';
interface HierarchyCard {
title: string;
links: Link[];
}
interface Link {
linkObject: any;
linkTitle: string;
newWindow: boolean;
}
type Level = 'parent' | 'sibling' | 'child';
@Component({
selector: 'div[hierarchy-cards-horizontal]',
templateUrl: './hierarchy-cards-horizontal.component.html',
styleUrls: ['./hierarchy-cards-horizontal.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HierarchyCardsHorizontalComponent implements OnInit {
@Input() entity: any;
public cards: HierarchyCard[] = [];
@HostBinding('class') class = 'col-md-12 space-between';
constructor(private linkService: ComponentLinkService,
private util: UtilService,
private pubService: PublicationService,
private dataService: DataResolverService,
private router: Router,
private changeDetector: ChangeDetectorRef,
private activatedRoute: ActivatedRoute
) { }
ngOnInit() {
this.setupCards();
}
async setupCards() {
await this.parseHierarchyCard(this.util.extract(this.entity, 'HierarchyCardBoxOne'), 'parent').then(card => this.cards[0] = card);
await this.parseHierarchyCard(this.util.extract(this.entity, 'HierarchyCardBoxTwo'), 'sibling').then(card => this.cards[1] = card);
await this.parseHierarchyCard(this.util.extract(this.entity, 'HierarchyCardBoxThree'), 'child').then(card => this.cards[2] = card);
this.changeDetector.detectChanges();
}
public parseHierarchyCard(jsonCard: any, level: Level): Promise<HierarchyCard> {
// remove elements where there is no component linked to
const linkTargets = (this.util.extract(jsonCard, 'LinkTarget') || []).filter(linkObj => this.linkService.getUrl(linkObj));
const hierarchyCard: HierarchyCard = {
title: this.util.extract(jsonCard, 'TitleContentBox'),
links: linkTargets.map(link => this.linkService.parseLink(link))
};
const fetchSiteStructure = this.util.extract(jsonCard, 'FetchSiteStructureItems') === 'Yes';
return new Promise(resolve => {
if (fetchSiteStructure) {
this.dataService.getNavigationData().then(navigation => {
const url = `/${this.activatedRoute.snapshot.url.join('/')}`;
const automaticLinks = this.getAutomaticLinks(navigation, level, url);
// Unshift since we want automaticlinks to be first in the list
hierarchyCard.links.unshift(...automaticLinks);
}
);
}
resolve(hierarchyCard);
});
}
public getAutomaticLinks(navigation: any, level: Level, url: string): Link[] {
let SGs = [];
switch (level) {
case 'parent': {
SGs = this.pubService.directParent(navigation, url);
break;
}
case 'sibling': {
SGs = this.pubService.allSiblings(navigation, url);
break;
}
case 'child': {
SGs = this.pubService.allChildren(navigation, url);
break;
}
}
return (SGs || []).map(e => this.SGtoLink(e));
}
public SGtoLink(SG: any): Link {
// This is needed since the link is using the component link component and it expects a link object
const linkObjectMock = {
LinkTarget: this.util.extract(SG, 'Url')
};
const LinkTemplate = {
linkObject: linkObjectMock,
linkTitle: this.util.extract(SG, 'TitleOverride') || this.util.extract(SG, 'Title'),
newWindow: false
};
return LinkTemplate;
}
}
<div class="row">
<ng-container *ngFor="let card of cards; let i = index">
<div class="col-sm-12 col-lg-4" *ngIf="card.links.length !== 0" [ngClass]="i === 2 ? 'col-md-12' : 'col-md-6 mb-4 mb-lg-0'">
<div class="card">
<div class="card-body">
<div class="card-title">
{{card.title}}
</div>
<ul class="list-group list-unstyled">
<li *ngFor="let link of card.links">
<a component-link [linkObject]="link.linkObject">
<i class="icon-chevronLarge-next"></i>
<span>
{{link.title || link.linkTitle}}
<i *ngIf="link.newWindow" class="icon-link-openNewWindow"> </i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</ng-container>
</div>
@import "src/app/styles/helpers";
.card {
background-color: $light-green;
border-color: $light-green;
height: 100%;
padding: calc-rem(30);
@include media-breakpoint-up(md) {
padding: calc-rem(40) calc-rem(30);
}
&-title {
@include font-scale(24, light);
}
&-body {
ul {
li {
i {
@include font-size(12);
margin-top: calc-rem(4);
&:before {
margin-left: 0px;
}
}
}
}
}
}