File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
stateChange
|
Type : EventEmitter<any>
|
|
|
Methods
|
getAllDiscussions
|
getAllDiscussions(tag: literal type)
|
|
|
Parameters :
| Name |
Type |
Optional |
| tag |
literal type
|
No
|
|
|
ngOnChanges
|
ngOnChanges(data: SimpleChanges)
|
|
|
Parameters :
| Name |
Type |
Optional |
| data |
SimpleChanges
|
No
|
|
|
max
|
Type : number
|
Default value : 0
|
|
|
|
Public
router
|
Type : Router
|
|
|
import { Component, Input, OnChanges, OnInit, SimpleChanges, EventEmitter, Output } from '@angular/core';
import { NSDiscussData } from '../../models/discuss.model';
/* tslint:disable */
import _ from 'lodash'
import { Router } from '@angular/router';
import { ConfigService } from '../../services/config.service';
import * as CONSTANTS from './../../common/constants.json';
import { NavigationServiceService } from '../../navigation-service.service'
/* tslint:enable */
@Component({
selector: 'lib-discuss-trending-tags',
templateUrl: './trending-tags.component.html',
styleUrls: ['./trending-tags.component.scss'],
})
export class TrendingTagsComponent implements OnInit, OnChanges {
@Input() tags!: NSDiscussData.ITag[];
@Output() stateChange: EventEmitter<any> = new EventEmitter();
max = 0;
trandingTags!: NSDiscussData.ITag[];
queryParam: any;
constructor(
public router: Router,
private configService: ConfigService,
private navigationService: NavigationServiceService
) {
}
ngOnInit(): void {
// debugger
this.max = _.get(_.maxBy(this.tags, 'score'), 'score') || 0;
this.trandingTags = _.chain(this.tags).orderBy('score', 'desc').take(5).value();
}
ngOnChanges(data: SimpleChanges) {
// debugger
// this.tableData!.columns = data.tableData.currentValue.columns
this.tags = _.get(data, 'tags.currentValue')
this.max = _.get(_.maxBy(this.tags, 'score'), 'score') || 0;
this.trandingTags = _.chain(this.tags).orderBy('score', 'desc').take(5).value();
}
// TODO: To enable trending tags click and navigate to tags detals page
getAllDiscussions(tag: { value: any }) {
// debugger
this.queryParam = tag.value;
const tagdata = {
tagname: ''
};
tagdata.tagname = tag.value;
this.queryParam = tagdata;
const routerSlug = this.configService.getConfig().routerSlug ? this.configService.getConfig().routerSlug : '';
const input = { data: { url: `${routerSlug}${CONSTANTS.ROUTES.TAG}tag-discussions`,
queryParams: this.queryParam, tagName: this.queryParam.tagName }, action: 'tagsAll'};
this.navigationService.navigate(input);
this.stateChange.emit({ action: CONSTANTS.TAG_ALL_DISCUSS, title: tag.value, tid: 'sd' });
// tslint:disable-next-line: max-line-length
// this.router.navigate([`${this.configService.getRouterSlug()}${CONSTANTS.ROUTES.TAG}tag-discussions`], { queryParams: this.queryParam });
}
css() {
// return 'linear - gradient(to left, #00ff00 " + 80 + " %, #ff0000 20 %)"
}
}
<div class="margin-left-l right_tag_inner_box">
<span class="mat-subheading-2" role="link" tabindex="0" aria-label="Trending tags">Trending tags</span>
<ng-container *ngIf="trandingTags && trandingTags.length > 0">
<div *ngFor="let tag of trandingTags" class="tag ws-mat-primary-lite-background-important cursor-pointer" role="link" tabindex="0"
[attr.aria-label]="tag.value"
[ngStyle]="{'background-image':'linear-gradient(to right, #ECECEC, #ECECEC ' + ((tag.score / max) *100 ) + '%, #FFF 24px)'}" (click)="getAllDiscussions(tag)">
<span class="margin-left-m mat-caption">{{tag.value}}</span>
<span class="custom-margin margin-right-m mat-subheading-2">{{tag.score}}</span>
</div>
</ng-container>
</div>
<div class="update_box margin-left-l">
<span class="mat-subheading-2" role="link" tabindex="0" aria-label="Updates">Updates</span>
<div class="update_inner_box flex flex-col items-center justify-center">
<div class="mat-card flex flex-col update_card margin-bottom-s">
<div class="flex fex-1 items-center justify-start card_head">
<p class="mat-subheading-1 blue_heading">1 Upvote on your question</p>
</div>
<div class="flex fex-1 items-center justify-start card_body">
<p class="mat-body-2">What is the most reliable and useful source for COVID related ..</p>
</div>
</div>
<div class="mat-card flex flex-col update_card margin-bottom-s">
<div class="flex fex-1 items-center justify-start card_head">
<p class="mat-subheading-1 blue_heading">@sundaramraj answered your question</p>
</div>
<div class="flex fex-1 items-center justify-start card_body">
<p class="mat-body-2">I think the solution to such a problem would be to extensively..</p>
</div>
</div>
<div class="mat-card flex flex-col update_card margin-bottom-s">
<div class="flex fex-1 items-center justify-start card_head">
<p class="mat-subheading-1 blue_heading">1 Upvote on your question</p>
</div>
<div class="flex fex-1 items-center justify-start card_body">
<p class="mat-body-2">What is the most reliable and useful source for COVID related ..</p>
</div>
</div>
<div class="flex flex-col items-center update_btn_box">
<a class="all_update_link flex mat-subheading-2 justify-center">ALL UPDATES</a>
</div>
</div>
</div>
@import '../../../../assets/styles/global.scss';
.tag {
display: flex;
width: 17.25rem;
height: 2rem;
border-radius: 0.25rem;
justify-content: space-between;
// margin: $size-m 0;
margin:0.5rem 0;
// background-color: red;
align-items: center;
box-sizing: border-box;
// @include breakpoint-xs {
// width: auto;
// }
// @include breakpoint-s {
// width: auto;
// }
}
.custom-margin {
margin-top: auto !important;
margin-bottom: auto !important;
}
// .progress {
// background: #000000;
// border-radius: 13px;
// /* (height of inner div) / 2 + padding */
// // padding: 3px;
// }
// .progress::after {
// content: '';
// position: fixed;
// height: 100%;
// width: 50%;
// left: 50%;
// background: #116699
// }
@media (max-width: 768px) {
.right_tag_inner_box {
width: 100%;
margin-left: 0!important;
}
}
.update_box {
box-sizing: border-box;
margin-top: 2rem;
display: none;
.update_inner_box {
box-sizing: border-box;
margin-top: 1rem;
.update_card {
box-sizing: border-box;
.card_head {
p.blue_heading {
color: var(--primary);
margin-bottom: 0.5rem;
}
}
// .card_body {
// width: 100%;
// }
}
.update_btn_box {
width: 100%;
margin-top: 0.5rem;
a.all_update_link {
width: 100%;
padding: 0.5rem 0;
text-align: center;
color: var(--primary);
border-radius: 0.25rem;
border: 0.0625rem solid var(--black);
}
}
}
}
Legend
Html element with directive