File

app/dxa/dxa-entity/views/hierarchy-cards/hierarchy-cards-horizontal/hierarchy-cards-horizontal.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector div[hierarchy-cards-horizontal]
styleUrls ./hierarchy-cards-horizontal.component.scss
templateUrl ./hierarchy-cards-horizontal.component.html

Index

Properties
Methods
Inputs
HostBindings

Constructor

constructor(linkService: ComponentLinkService, util: UtilService, pubService: PublicationService, dataService: DataResolverService, router: Router, changeDetector: ChangeDetectorRef, activatedRoute: ActivatedRoute)
Parameters :
Name Type Optional
linkService ComponentLinkService No
util UtilService No
pubService PublicationService No
dataService DataResolverService No
router Router No
changeDetector ChangeDetectorRef No
activatedRoute ActivatedRoute No

Inputs

entity
Type : any

HostBindings

class
Default value : 'col-md-12 space-between'

Methods

Public getAutomaticLinks
getAutomaticLinks(navigation: any, level: Level, url: string)
Parameters :
Name Type Optional
navigation any No
level Level No
url string No
Returns : Link[]
ngOnInit
ngOnInit()
Returns : void
Public parseHierarchyCard
parseHierarchyCard(jsonCard: any, level: Level)
Parameters :
Name Type Optional
jsonCard any No
level Level No
Returns : Promise<HierarchyCard>
Async setupCards
setupCards()
Returns : any
Public SGtoLink
SGtoLink(SG: any)
Parameters :
Name Type Optional
SG any No
Returns : Link

Properties

Public cards
Type : HierarchyCard[]
Default value : []
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>

./hierarchy-cards-horizontal.component.scss

@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;
					}
				}
			}
		}
	}
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""