componet.ts file code Gropuing Data and display in view
import { Component, OnInit } from ‘@angular/core’;
import { CommonServiceService } from ‘src/app/services/common-service.service’;
import { FormBuilder, FormGroup, Validators, FormControl } from ‘@angular/forms’;
import { Router } from ‘@angular/router’;
@Component({
selector: ‘app-publications’,
templateUrl: ‘./publications.component.html’,
styleUrls: [‘./publications.component.scss’]
})
export class PublicationsComponent implements OnInit {
public publicationData = [];
publicationForm!: FormGroup;
showIcon: boolean = false;
articleArray = [];
ChapterNumValue = “”;
totalparagraphArray: any[];
totalRegulationContentArray: any[];
ParagraphArray: any[];
totalArray = [];
totalRcArrays = [];
userData = [];
tempArray = [];
totalArticals = [];
isExpand: boolean;
selectedChapter = “Tab1”;
selectedArticle = “Tab2”;
selectedPara = “Tab3”;
articleNameSelected=””
selectedParaName=””;
constructor(private commonService: CommonServiceService, private fb: FormBuilder,private route: Router) {
this.publicationForm = fb.group({
publicationForm: new FormControl()
})
}
ngOnInit(): void {
this.commonService.getPublicatonsdata().subscribe((item) => {
console.log(item)
this.publicationData = item[‘results’][0];
this.getChapterGroup();
this.selectedRow(“Chapter 1 “,this.publicationData,0)
})
}
getChapterGroup() {
this.tempArray = [];
this.userData = [];
this.userData = this.publicationData;
const groupedData = this.userData.reduce((acc, obj) => {
const key = obj.chapter_num;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
for (let x in groupedData) {
let dataArrays = groupedData[x];
let dataJson = {
“chapter_num”: x,
“chapterData”: dataArrays
}
this.tempArray.push(dataJson);
// console.log(this.tempArray)
}
}
activeChapter(tab: string) {
this.selectedChapter = tab;
}
activeArticle(tab: string) {
this.selectedArticle = tab;
}
activePara(tab: string) {
this.selectedPara = tab;
}
selectedRow(selectedValue, item, index) {
this.totalArray = [];
this.totalArticals = [];
this.totalRcArrays = [];
this.totalRegulationContentArray = []
this.ParagraphArray = [];
this.totalparagraphArray = [];
this.userData =[];
// this.tempArray =[];
// this.isExpand = true;
this.getGroupArtical(selectedValue, item, index);
}
getGroupArtical(selectedValue, item, index) {
this.userData = item;
this.totalArray = Object.values(this.userData.reduce((acc, { index, chapter_num, article_name }) => {
const key = index + ‘_’ + article_name;
acc[key] = acc[key] || { chapter_num, article_name };
return acc;
}, {}));
this.totalArticals = this.totalArray.filter(s => s.chapter_num === selectedValue);
// console.log(“totalArticals data:”, this.totalArticals);
}
getArticals(chapter_num) {
return this.totalArray.filter(s => s.chapter_num === chapter_num);
}
selectedArticalName = “”;
selectedChapterNum = “”;
selectedRowParagrah(selectedValue, item, index) {
this.articleNameSelected=selectedValue;
// console.log(“item”,item);
this.isExpand = true;
this.getGroupPara(selectedValue, item, index);
}
async getGroupPara(selectedValue, item, index) {
this.totalRcArrays = [];
this.totalRegulationContentArray = []
this.ParagraphArray = [];
this.totalparagraphArray = [];
this.userData = await item;
// this.selectedArticalName = selectedValue;
// this.selectedChapterNum = chapter_num;
this.ParagraphArray = Object.values(this.userData.reduce((acc, { index, chapter_num, article_name, paragraphs, regulatory_id, regulation_content }) => {
const key = index + ‘_’ + paragraphs;
acc[key] = acc[key] || { chapter_num, article_name, paragraphs, regulatory_id, regulation_content };
return acc;
}, {}));
this.totalparagraphArray = this.ParagraphArray.filter(s => s.article_name === selectedValue);
console.log(“totalparagraphArray data:”, this.totalparagraphArray);
}
getParagrahs(article_name) {
return this.ParagraphArray.filter(s => s.article_name === article_name);
}
selectedRowRegulationContent(selectedValue, item, selectedparagraphs,index) {
//this.totalRcArrays = this.totalRegulationContentArray.filter(s => s.article_name === selectedValue && s.paragraphs==selectedPara);
this.selectedParaName = selectedparagraphs;
this.getGroupRc(selectedValue, item, selectedparagraphs,index);
}
async getGroupRc(selectedValue, item,selectedparagraphs, index) {
this.totalRcArrays = [];
this.totalRegulationContentArray = []
this.userData = await item;
// console.log(“userData”, this.userData)
this.totalRegulationContentArray = Object.values(this.userData.reduce((acc, { index, article_name, paragraphs,regulation_content, regulatory_id }) => {
const key = index + ‘_’ + regulation_content;
acc[key] = acc[key] || { article_name,paragraphs, regulation_content, regulatory_id };
return acc;
}, {}));
this.totalRcArrays = this.totalRegulationContentArray.filter(s => s.article_name === selectedValue);
}
getRegulations(paragraphs) {
return this.totalRcArrays.filter(s => s.paragraphs === paragraphs);
}
getNavigate(rid) {
this.route.navigate([‘/overview-details’], { queryParams: { regID: rid } })
}
}
component .html file
<div class=”main”>
<div class=”header”>
<ul>
<ng-container>
<li>Chapter</li>
<li>Artical</li>
<li>Paragrahs</li>
<li>Regulation content</li>
</ng-container>
</ul>
</div>
<div class=”content”>
<ul>
<li>
<div class=”inner-content” *ngFor=”let obj of tempArray;let i= index” [ngClass]=”{‘active’: (selectedChapter == obj.chapter_num) }” (click)=”activeChapter(obj.chapter_num)”>
<div (click)=”obj.isExpand = !obj.isExpand”>
<label (click)=”selectedRow(obj.chapter_num,obj.chapterData,i)”>{{obj.chapter_num}}</label>
</div>
</div>
</li>
<li >
<div *ngFor=”let obj of tempArray;let i= index”>
<ng-container *ngFor=”let item of getArticals(obj.chapter_num)”>
<div class=”inner-content” id=”{{i}}” *ngIf=”obj.isExpand” [ngClass]=”{‘active’: (selectedArticle == item.article_name) }” (click)=”activeArticle(item.article_name)”>
<label id=”{{i}}” (click)=”selectedRowParagrah(item.article_name,obj.chapterData,i)”>{{item.article_name}}</label>
</div>
</ng-container>
</div>
</li>
<li >
<div >
<ng-container *ngFor=”let par of getParagrahs(articleNameSelected)”>
<div id=”{{i}}” class=”inner-content” *ngIf=”isExpand” [ngClass]=”{‘active’: (selectedPara == par.paragraphs) }” (click)=”activePara(par.paragraphs)”>
<label id=”{{i}}” (click)=”selectedRowRegulationContent(par.article_name,ParagraphArray,par.paragraphs,i)”>{{par.paragraphs}}</label>
</div>
</ng-container>
</div>
</li>
<li >
<div>
<div class=”inner-content” *ngFor=”let rc of getRegulations(selectedParaName)”>
<span>{{rc.regulation_content}}</span>
<span class=”reqDetail”><a class=”regNav” (click)=”getNavigate(rc.regulatory_id)”>{{rc.regulatory_id}}</a></span>
</div>
</div>
</li>
</ul>
</div>
component.scss
.main{
position: relative;
border: 1px solid #ccc;
min-height: 300px;
font-family: ‘Saira’;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-transform: capitalize;
color: #262E40;
width: 96%;
left: 0;
right: 0;
margin: 20px auto;
}
*, *:hover {
transition: all 0.3s;
}
/* Main Tabs */
.chapters{
display: inline-block;
position: absolute;
top: 0;
width: 20%;
border-right: 1.5px solid #d2d1d1;
min-height: 300px;
}
.title{
font-weight: 700;
background: #F9F9F9;
padding: 10px;
display: block;
}
label {
display: inline-block;
cursor: pointer;
width: 100%;
position: relative;
}
label::after{
content: ‘’;
position: absolute;
display: inline-block;
top: 0;
right: -6px;
border-left: 6px solid #CADCF8;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
clear: both;
}
// label:hover {
// background-color: #2e536e;
// color: #fff;
// }
label:hover::after {
border-left: 6px solid #2B6FD6;
}
.content ul li .inner-content.active {
background: #EEF5FF;
}
/* Just to give indication that it’s being clicked */
.content ul li .inner-content.active label::after {
border-left: 6px solid #2B6FD6;
}
.tab-radio {
display: none;
}
.para-radio {
display: none;
}
/* Tabs behaviour, hidden if not checked/clicked */
.sub-tab-content,
.tab-content,
.para-content {
display: none;
}
.tab-radio:checked + .tab-content,
.tab-radio:checked + .sub-tab-content,
.tab-radio:checked + .para-tab
{
display: inline-block;
}
.para-radio:checked + .para-content{
display: block;
}
span{
display: block;
}
/* Sub-tabs */
// .sub-tabs-container label:active {
// color: #37474f;
// box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.3);
// }
// .sub-tabs-container label:first-child {
// background-color: #cddc39;
// }
// .sub-tabs-container label:hover {
// background-color: #ffccbc;
// }
// .sub-tabs-container label:first-child:hover {
// background-color: #e6ee9c;
// }
/* Tabs Content */
.tab-content {
position: absolute;
left: 20%;
width: 20%;
border-right: 1.5px solid #d2d1d1;
min-height: 300px;
}
.sub-tab-content{
position: absolute;
left: 101%;
width: 50%;
top: 0;
border-right: 1.5px solid #d2d1d1;
min-height: 300px;
}
.para-content{
position: absolute;
left: 102%;
top: 0;
width: 500%;
min-height: 300px;
}
table, th {
border: 1px solid rgb(234, 229, 229);
border-collapse: collapse;
}
.bi-chevron-right{
color: red;
}
table tr th:first-child,table tr th:nth-child(3),table tr td:first-child,table tr td:nth-child(3){
width: 15%;
border-right: 1px solid #cccccc;
}
table tr th:nth-child(2),table tr td:nth-child(2){
width: 20%;
border-right: 1px solid #cccccc;
}
table tr th:last-child,table tr td:last-child{
width: 50%;
}
.main ul{
display: flex;
margin-bottom: 0;
padding: 0;
}
.main ul li{
list-style-type: none;
display: inline-block;
}
.header ul li:first-child,.header ul li:nth-child(2),.content ul li:first-child,.content ul li:nth-child(2){
width: 20%;
border-right: 1.5px solid #d2d1d1;
}
.header ul li:nth-child(3),.content ul li:nth-child(3){
width: 10%;
border-right: 1.5px solid #d2d1d1;
}
.header ul li:last-child,.content ul li:last-child{
width: 50%;
}
.header ul li{
border-bottom: 1px solid #d2d1d1;
font-weight: 700;
background: #F9F9F9;
padding: 10px;
}
.inner-content{
padding: 20px 16px;
}
.content ul li:last-child .inner-content{
background: #EEF5FF;
padding-bottom: 10px;
}
.reqDetail{
margin-top: 12px;
}
.regNav {
color: var( — bs-link-color);
text-decoration: underline;
padding-left: 4px;
}
.regNav:hover {
color: var( — bs-link-hover-color);
cursor: pointer;
}