File
Implements
Metadata
| selector |
div[tools-collection-main] |
| styleUrls |
./tools-collection-main.component.scss |
| templateUrl |
./tools-collection-main.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
isRestricted
|
isRestricted(json: any, openOrRestricted: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| json |
any
|
No
|
| openOrRestricted |
string
|
No
|
|
|
parseRole
|
parseRole(role: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| role |
string
|
No
|
|
|
parseToolsCollection
|
parseToolsCollection(json: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| json |
any
|
No
|
|
|
userRoles
|
Type : String[]
|
Default value : []
|
|
|
import { Component, OnInit, Input } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { KeycloakService } from 'keycloak-angular';
import { Tool } from 'src/app/core/interfaces/interfaces.component';
interface ToolsCollection {
id: string;
title: string;
tools: Tool[];
restricted: boolean;
}
@Component({
selector: 'div[tools-collection-main]',
templateUrl: './tools-collection-main.component.html',
styleUrls: ['./tools-collection-main.component.scss']
})
export class ToolsCollectionMainComponent implements OnInit {
@Input() entity;
isLoggedIn: any;
userRoles: String[] = [];
data: ToolsCollection;
constructor(private util: UtilService, private keycloakService: KeycloakService, private labels: LabelService ) { }
ngOnInit() {
this.keycloakService.isLoggedIn().then(res => {
this.isLoggedIn = res;
if (this.isLoggedIn) {
this.keycloakService.getUserRoles(true).map(role => this.userRoles.push(role));
this.userRoles = this.userRoles.map(role => this.parseRole(role.toString()));
}
this.data = this.parseToolsCollection(this.entity);
});
}
parseToolsCollection(json: any): ToolsCollection {
return {
id: this.util.extract(json, 'Id'),
title: this.util.extract(json, 'Title'),
tools: this.util.extract(json, 'Tools') || [],
restricted: this.isRestricted(json, this.util.extract(json, 'OpenOrRestrictedToolCollection'))
};
}
parseRole(role: string): String {
if (role.includes('[')) {
role = role.slice(0, role.indexOf('['));
}
return role.trim();
}
isRestricted(json: any, openOrRestricted: string): boolean {
let restricted = false;
if (openOrRestricted && openOrRestricted.startsWith('Role based tool')) {
restricted = true;
const requiredRoles = this.util.extract(json, 'Roles') || [];
requiredRoles.forEach(requiredRole => {
if (this.userRoles.includes(requiredRole)) {
restricted = false;
}
});
}
else if (openOrRestricted && openOrRestricted.startsWith('Login required tool')) {
restricted = true;
if (this.isLoggedIn) {
restricted = false;
}
}
return restricted;
}
}
<div class="container" [id]="data.id" *ngIf="data && !data.restricted">
<h3 class="collectiom-header" *ngIf="data.title">
{{data.title}}
</h3>
<div class="card-deck">
<ng-container *ngFor="let tool of data.tools">
<div tools-document [entity]="tool"></div>
</ng-container>
</div>
</div>
@import "src/app/styles/helpers";
.collectiom-header {
@include font-scale(24, light);
margin-bottom: calc-rem(20);
}
.card-deck {
margin-bottom: calc-rem(10);
& .card {
border: none;
margin-bottom: calc-rem(20);
&.clickable {
cursor: pointer;
&:hover {
.card-title {
text-decoration: underline;
}
}
}
@include media-breakpoint-up(sm) {
align-self: flex-end;
flex: 0 0 calc(50% - 30px);
margin-bottom: calc-rem(50);
}
@include media-breakpoint-up(lg) {
flex: 0 0 calc(25% - 30px);
}
&-img-container {
@include aspect-ratio(16 9);
max-height: 180px;
.card-img-top {
object-fit: cover;
}
.card-item-lock {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 15%;
background-color: rgba($white, 0.8);
.lock-overlay {
display: flex;
background-color: white;
.textmargin {
margin-left: .5em;
word-break: break-all;
user-select: none;
}
}
}
}
&-body {
background-color: $off-white;
justify-content: space-between;
min-height: calc-rem(224);
::ng-deep .bg-off-white & {
background-color: white !important;
border-top: 1px solid $light-green;
}
}
&-title {
@include font-scale(20, light);
color: $blue;
margin-bottom: calc-rem(5);
}
}
}
Legend
Html element with directive