src/app/modules/report/components/solution-listing/solution-listing.component.ts
OnInit
selector | app-solution-listing |
styleUrls | ./solution-listing.component.scss |
templateUrl | ./solution-listing.component.html |
Properties |
|
Methods |
constructor(resourceService: ResourceService, layoutService: LayoutService, observationService: ObservationService, config: ConfigService, observationUtilService: ObservationUtilService, userService: UserService, router: Router, paginationService: PaginationService, configService: ConfigService, tncService: TncService, location: Location)
|
||||||||||||||||||||||||||||||||||||
Parameters :
|
changeLimit | ||||
changeLimit(e)
|
||||
Parameters :
Returns :
void
|
getDataByEntity | ||||
getDataByEntity(e)
|
||||
Parameters :
Returns :
void
|
getProfileData |
getProfileData()
|
Returns :
void
|
getSolutions |
getSolutions()
|
Returns :
void
|
goBack |
goBack()
|
Returns :
void
|
goToEntityList | ||||
goToEntityList(data)
|
||||
Parameters :
Returns :
void
|
goToReports | ||||
goToReports(solution)
|
||||
Parameters :
Returns :
void
|
initLayout |
initLayout()
|
Returns :
void
|
modalClose | ||||
modalClose(event)
|
||||
Parameters :
Returns :
void
|
Public navigateToPage | ||||||
navigateToPage(page: number)
|
||||||
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
config |
Public configService |
Type : ConfigService
|
dtOptions |
Type : any
|
Default value : {}
|
entityType |
Type : string
|
Default value : ''
|
filters |
Type : []
|
Default value : []
|
layoutConfiguration |
Type : any
|
Public loaderMessage |
Type : ILoaderMessage
|
Public location |
Type : Location
|
noResult |
Default value : false
|
Public noResultFoundError |
Type : string
|
Public noResultMessage |
Type : INoResultMessage
|
Public observationUtilService |
Type : ObservationUtilService
|
pageNo |
Type : number
|
Default value : 1
|
pageSize |
Type : number
|
Default value : 10
|
Public paginationDetails |
Type : IPagination
|
Public paginationService |
Type : PaginationService
|
payload |
reportViewerTncUrl |
Type : string
|
reportViewerTncVersion |
Type : string
|
Public resourceService |
Type : ResourceService
|
selectedEntity |
Type : any
|
showLoader |
Default value : true
|
showLoadMore |
Default value : true
|
showModal |
Default value : false
|
showTncPopup |
Default value : false
|
solution |
Type : any
|
solutionList |
Type : []
|
Default value : []
|
Public tncService |
Type : TncService
|
Public userProfile |
Public userService |
Type : UserService
|
import { ConfigService, ResourceService, LayoutService, PaginationService, IPagination,
ILoaderMessage, INoResultMessage } from '@sunbird/shared';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import 'datatables.net';
import { ObservationService, UserService, TncService, ObservationUtilService } from '@sunbird/core';
import { first } from 'rxjs/operators';
import { Location } from '@angular/common';
@Component({
selector: 'app-solution-listing',
templateUrl: './solution-listing.component.html',
styleUrls: ['./solution-listing.component.scss'],
})
export class SolutionListingComponent implements OnInit {
public noResultFoundError: string;
layoutConfiguration: any;
config;
payload;
entityType = '';
pageSize = 10;
pageNo = 1;
solutionList = [];
showLoadMore = true;
filters = [];
selectedEntity: any;
dtOptions: any = {};
showModal = false;
solution: any;
public paginationDetails: IPagination;
public loaderMessage: ILoaderMessage;
public noResultMessage: INoResultMessage;
showLoader = true;
noResult = false;
reportViewerTncVersion: string;
reportViewerTncUrl: string;
showTncPopup = false;
public userProfile;
constructor(
public resourceService: ResourceService,
private layoutService: LayoutService,
private observationService: ObservationService,
config: ConfigService,
public observationUtilService: ObservationUtilService,
public userService: UserService,
private router: Router,
public paginationService: PaginationService,
public configService: ConfigService,
public tncService: TncService,
public location:Location
) {
this.config = config;
this.paginationDetails = this.paginationService.getPager(0, 1, this.pageSize);
this.noResultMessage = {
'messageText': 'messages.stmsg.m0131'
};
}
ngOnInit() {
this.dtOptions = {
autoWidth: true,
searching: false,
pageLength: this.pageSize,
info: false,
dom: '<"pull-right">rt'
};
this.selectedEntity = 'selected';
this.userService.userData$.pipe(first()).subscribe(async (user) => {
if (user && user.userProfile) {
this.userProfile = user.userProfile;
}
});
this.initLayout();
this.getProfileData();
}
getProfileData() {
this.observationUtilService.getProfileDataList().then(
(data) => {
this.payload = data;
this.getSolutions();
},
(error) => {}
);
}
goBack() {
this.location.back();
}
getSolutions() {
this.solutionList = [];
const paramOptions = {
url:
this.config.urlConFig.URLS.OBSERVATION
.OBSERVATION_REPORT_SOLUTION_LIST +
`limit=${this.pageSize}&page=${this.pageNo}&entityType=${this.entityType}`,
data: this.payload,
};
this.observationService.post(paramOptions).subscribe(
(data) => {
if (data.result) {
this.showLoader = false;
} else {
this.showLoader = false;
this.noResult = true;
}
this.solutionList =
data && data.result ? this.solutionList.concat(data.result.data) : [];
this.filters = data && data.result && !this.filters.length ? data.result.entityType : this.filters;
this.paginationDetails.currentPage = this.pageNo;
this.paginationDetails = this.paginationService.getPager(
data.result.count,
this.paginationDetails.currentPage,
this.pageSize
);
this.showLoadMore =
this.solutionList.length < data.result.count ? true : false;
if (this.solutionList.length > 0) {
this.showLoader = false;
} else {
this.showLoader = false;
this.noResult = true;
}
},
(error) => {
this.showLoader = false;
this.noResult = true;
}
);
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
}
public navigateToPage(page: number): void {
if (page < 1 || page > this.paginationDetails.totalPages) {
return;
}
this.pageNo = page;
this.getSolutions();
}
getDataByEntity(e) {
this.selectedEntity = e.target.value;
this.entityType = this.selectedEntity;
this.pageNo = 1;
this.solutionList = [];
const paramOptions = {
url:
this.config.urlConFig.URLS.OBSERVATION
.OBSERVATION_REPORT_SOLUTION_LIST +
`limit=${this.pageSize}&page=${this.pageNo}&entityType=${this.entityType}`,
data: this.payload,
};
this.observationService.post(paramOptions).subscribe(
(data) => {
this.solutionList =
data && data.result ? this.solutionList.concat(data.result.data) : [];
this.paginationDetails.currentPage = this.pageNo;
this.paginationDetails = this.paginationService.getPager(
data.result.count,
this.paginationDetails.currentPage,
this.pageSize
);
this.showLoadMore =
this.solutionList.length < data.result.count ? true : false;
},
(error) => {}
);
}
changeLimit(e) {
this.pageSize = e.target.value;
this.pageNo = 1;
this.dtOptions.pageLength = this.pageSize;
this.getSolutions();
}
goToEntityList(data) {
this.solution = data;
this.showModal = true;
}
goToReports(solution) {
this.showModal = false;
const state = {
scores: false,
observation: true,
entityId: solution.entities[0]._id,
entityType: solution.entityType,
observationId: solution.observationId,
solutionId: solution.solutionId,
// entity:solution.entities[0]
};
if (solution.isRubricDriven) {
state.scores = true;
}
if (!solution.criteriaLevelReport) {
state['filter'] = { questionId: [] };
state['criteriaWise'] = false;
}
this.router.navigate(['solution/report-view'], {
queryParams: state,
});
}
modalClose(event) {
this.showModal = false;
if (event.value) {
const entity = event.value.selectedEntity;
const solutionDetails = event.value.solutionDetail;
const state = {
scores: false,
observation: true,
entityId: entity._id,
entityType: solutionDetails.entityType,
observationId: solutionDetails.observationId,
solutionId: solutionDetails.solutionId,
// entity:entity
};
if (solutionDetails.isRubricDriven) {
state.scores = true;
}
if (!solutionDetails.criteriaLevelReport) {
state['filter'] = { questionId: [] };
state['criteriaWise'] = false;
}
this.router.navigate(['solution/report-view'], {
queryParams: state,
});
}
}
initLayout() {
this.layoutConfiguration = this.layoutService.initlayoutConfig();
this.layoutService.switchableLayout().subscribe((layoutConfig) => {
if (layoutConfig != null) {
this.layoutConfiguration = layoutConfig.layout;
}
});
}
}
<app-landing-section
[noTitle]="true"
[layoutConfiguration]="layoutConfiguration"
>
</app-landing-section>
<div
[ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-color-white back-btn-container cc-player__btn-back relative9'"
class="relative position mt-0">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="py-0 d-flex flex-ai-center w-100">
<!-- /* Back button */ -->
<button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<em class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></em>
<span>{{resourceService?.frmelmnts?.btn?.back}}</span>
</button>
<div class="textbook d-flex flex-ai-center flex-jc-space-between w-100 ml-16">
<!-- title -->
<h5 class="textbook__title sb-color-primary font-weight-bold mb-0" tabindex="0"></h5>
</div>
</div>
</div>
</div>
<div [ngClass]="layoutConfiguration ? 'sbt-inside-page-container' : 'pt-16'">
<div class="sb-pageSection my-24 ui container listallreports-section">
<ng-container>
<div class="sb-pageSection-content">
<ng-container *ngIf="solutionList.length">
<div>
<sui-tabset>
<div class="ui top attached tabular menu report-menu">
<a class="item" suiTabHeader="1"
><i class="icon chart line alternate"></i> {{resourceService.frmelmnts?.lnk?.report}}</a
>
</div>
<div class="ui bottom attached segment" suiTabContent="1">
<div class="ui bottom attached small p-0 b-0 no-bg py-24">
<div class="pull-left">
show <select [(ngModel)]="pageSize" class="dataTables_filter search-entries" (change)="changeLimit($event)">
<option value="10" selected>10</option>
<option value="20">20</option>
<option value="25">25</option>
</select> entries
</div>
<div class="pull-right">
<select [(ngModel)]="selectedEntity" class="dataTables_filter search-entity" (change)="getDataByEntity($event)">
<option value="selected" selected disabled hidden>Entity Filter</option>
<option value="{{entity}}" *ngFor="let entity of filters">{{entity}}</option>
</select>
</div>
<table datatable [dtOptions]="dtOptions"
class="
sb-table sb-table-hover sb-table-striped sb-table-sortable
width-100 table-bottom
"
>
<thead >
<tr>
<th class="header-section">{{resourceService?.frmelmnts?.lbl?.serialno}}</th>
<th class="header-section"></th>
<th>{{resourceService?.frmelmnts?.lbl?.title}}</th>
<th class="date-section">{{resourceService?.frmelmnts?.lbl?.latestSubmission}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let solution of solutionList;let i=index" (click)="(solution?.entities?.length >1) ? goToEntityList(solution) : goToReports(solution)">
<td tabindex="0" class="header-section">{{i+1}}</td>
<td tabindex="0"><button class="sb-btn sb-btn-link sb-btn-link-primary sb-btn-normal iconSize" aria-label="file-icon">
<i class="icon copy outline alternate large"></i></button></td>
<td tabindex="0"><div class="sb-media"><div class="sb-media-body"><h6 class="p-0">
{{solution.name}}</h6> <p class="media-description sb__ellipsis"> {{solution.programName}}</p></div></div></td>
<td tabindex="0" class="date-section">{{solution.completedDate| date: "yyyy/MM/dd"}}</td>
</tr>
</tbody>
</table>
<div class="content-grid relative9">
<div class="twelve wide column right aligned"
*ngIf="paginationDetails.totalItems > 5">
<div class="sb-pagination-container flex-jc-flex-end mt-16" *ngIf="paginationDetails.pages.length">
<div class="sb-pagination my-0">
<a role="button" title="{{resourceService?.frmelmnts?.lbl?.first}}" attr.aria-label="{{resourceService?.frmelmnts?.lbl?.first}}" [ngClass]="{disabled:paginationDetails.currentPage===1 }" class="sb-item "
(click)="navigateToPage(1) ">«</a>
<a role="button" title="{{resourceService?.frmelmnts?.lbl?.previous}}" attr.aria-label="{{resourceService?.frmelmnts?.lbl?.previous}}" [ngClass]="{disabled:paginationDetails.currentPage===1 }" class="sb-item "
(click)="navigateToPage(paginationDetails.currentPage - 1)"><</a>
<a role=“button” aria-current=“page” title="{{page}}" attr.aria-label="{{page}}" *ngFor="let page of paginationDetails.pages" [ngClass]="{active:paginationDetails.currentPage===page}"
(click)="navigateToPage(page)" class="sb-item">{{page}}</a>
<a title="{{resourceService?.frmelmnts?.lbl?.next}}" attr.aria-label="{{resourceService?.frmelmnts?.lbl?.next}}" role="button" [ngClass]="{disabled:paginationDetails.currentPage=== paginationDetails.totalPages}"
(click)="navigateToPage(paginationDetails.currentPage + 1)" class="sb-item">></a>
<a role="button" title="{{resourceService?.frmelmnts?.lbl?.last}}" attr.aria-label="{{resourceService?.frmelmnts?.lbl?.last}}" [ngClass]="{disabled:paginationDetails.currentPage=== paginationDetails.totalPages}"
(click)="navigateToPage(paginationDetails.totalPages)" class="sb-item ">»</a>
</div>
</div>
</div>
</div>
</div>
</div>
</sui-tabset>
</div>
</ng-container>
</div>
</ng-container>
<div class="twelve wide column" *ngIf="noResult">
<app-no-result [data]="noResultMessage"></app-no-result>
</div>
<div class="twelve wide column" *ngIf="showLoader">
<app-loader [data]='loaderMessage'></app-loader>
</div>
</div>
</div>
<div *ngIf="showModal">
<app-entity-list (closeEvent)="modalClose($event)" [solution]="solution"> </app-entity-list>
</div>
./solution-listing.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.main-container {
padding:0 1%;
}
.sbgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
grid-gap: 1rem;
}
@media screen and (max-width: 1024px) {
.sb__DesktopOnly {
display: none;
}
}
:host {
.ui.tabular.menu.report-menu .item {
width: 50%;
display: flex;
justify-content: center;
}
}
:host::ng-deep {
.listallreports-section {
.dataTables_wrapper .dataTables_filter input {
outline: 0;
}
}
}
.table-bottom {
border: 0.0625rem solid var(--gray-100);
}
.pull-right {
float: right !important;
width: calculateRem(120px);
}
.pull-left {
float:left;
font-size: 0.8125rem;
font-weight: bold;
margin-top:calculateRem(7px);
}
select.search-entity {
width: calculateRem(120px);
border: calculateRem(1px) solid var(--gray-200);
color: var(--gray-800);
border-radius: calculateRem(3px);
padding: calculateRem(4px);
font-size: 0.8125rem;
margin-bottom: calculateRem(5px);
font-weight: bold;
text-transform: capitalize;
}
select .select-entries{
border: calculateRem(1px) solid var(--gray-200);
border-radius: calculateRem(3px);
background-color: transparent;
padding: calculateRem(4px);
font-size: 0.8125rem;
}
.header-section {
width: calculateRem(70px);
text-align: center;
}
.date-section {
width: calculateRem(180px);
text-align: center;
}
label {
float: left;
}
.iconSize{
font-size: calculateRem(18px);
}