src/app/modules/report/components/report-view/report-view.component.ts
OnInit
| selector | app-report-view |
| styleUrls | ./report-view.component.scss |
| templateUrl | ./report-view.component.html |
Properties |
|
Methods |
constructor(dhitiService: DhitiService, config: ConfigService, layoutService: LayoutService, location: Location, resourceService: ResourceService, routerParam: ActivatedRoute, cdref: ChangeDetectorRef, toasterService: ToasterService, locations: LocationStrategy, navigationhelperService: NavigationHelperService)
|
|||||||||||||||||||||||||||||||||
|
Parameters :
|
| applyFilter |
applyFilter()
|
|
Returns :
void
|
| callApi |
callApi()
|
|
Returns :
any
|
| Public closeModal |
closeModal()
|
|
Returns :
void
|
| Async download |
download()
|
|
Returns :
any
|
| filterBySegment |
filterBySegment()
|
|
Returns :
any
|
| filterModalPopup | ||||||
filterModalPopup(data, keyToSend)
|
||||||
|
Parameters :
Returns :
void
|
| Async getAllEvidence | ||||
getAllEvidence(element)
|
||||
|
Parameters :
Returns :
any
|
| getconfig | ||||
getconfig(element)
|
||||
|
Parameters :
|
| getData | ||||
getData(element)
|
||||
|
Parameters :
Returns :
{ values: any; }
|
| getReport |
getReport()
|
|
Returns :
void
|
| goBack |
goBack()
|
|
Returns :
void
|
| gotoSolutionListPage |
gotoSolutionListPage()
|
|
Returns :
void
|
| handleParameterChange | ||||
handleParameterChange(event)
|
||||
|
Parameters :
Returns :
void
|
| initLayout |
initLayout()
|
|
Returns :
void
|
| modalClose | ||||
modalClose(event)
|
||||
|
Parameters :
Returns :
void
|
| ngAfterViewChecked |
ngAfterViewChecked()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onQuestionClick | ||||
onQuestionClick(id)
|
||||
|
Parameters :
Returns :
void
|
| openFile | ||||
openFile(file)
|
||||
|
Parameters :
Returns :
void
|
| segmentChanged | ||||
segmentChanged(segment)
|
||||
|
Parameters :
Returns :
void
|
| selectedTabChange | ||||
selectedTabChange(event)
|
||||
|
Parameters :
Returns :
void
|
| Public active |
Type : boolean[]
|
Default value : []
|
| config |
| data |
Type : any
|
| error |
Type : literal type
|
| evidenceParam |
Type : any
|
| filteredData |
Type : []
|
Default value : []
|
| Public filterModal |
Default value : false
|
| filters |
Type : any
|
| key |
Type : any
|
| layoutConfiguration |
Type : any
|
| Public layoutService |
Type : LayoutService
|
| lib |
Type : any
|
Decorators :
@ViewChild('lib', {static: false})
|
| loaderMessage |
Type : ILoaderMessage
|
| Public location |
Type : Location
|
| Public locations |
Type : LocationStrategy
|
| modal |
Decorators :
@ViewChild('modal')
|
| modalFilterData |
Type : any
|
| name |
Type : []
|
Default value : ['filter']
|
| Public noResult |
Default value : false
|
| Public noResultMessage |
Type : INoResultMessage
|
| questionId |
Type : any
|
| reportSections |
Type : any
|
| Public resourceService |
Type : ResourceService
|
| Public segmentfilter |
Default value : false
|
| segmentValue |
Type : string
|
| selectedListCount |
Type : number
|
Default value : 0
|
| Public showComponent |
Default value : true
|
| Public showEvidence |
Default value : false
|
| showLoader |
Default value : true
|
| Public showPdf |
Default value : false
|
| state |
Type : any
|
Default value : {}
|
| Public tabs |
Type : literal type[]
|
Default value : [
{ header: this.resourceService.frmelmnts.lbl.question },
]
|
| Public toasterService |
Type : ToasterService
|
| Public unsubscribe$ |
Default value : new Subject<void>()
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location, LocationStrategy } from '@angular/common';
import { DhitiService } from '@sunbird/core';
import {
ConfigService,
LayoutService,
INoResultMessage,
ResourceService,
ToasterService,
ILoaderMessage,
NavigationHelperService
} from '@sunbird/shared';
import * as _ from 'lodash-es';
import { ChangeDetectorRef } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
selector: 'app-report-view',
templateUrl: './report-view.component.html',
styleUrls: ['./report-view.component.scss'],
})
export class ReportViewComponent implements OnInit {
state: any = {};
segmentValue: string;
data: any;
config;
error: { result: boolean; message: string };
reportSections: any;
filters: any;
layoutConfiguration: any;
public noResultMessage: INoResultMessage;
public showComponent = true;
public segmentfilter = false;
public filterModal = false;
@ViewChild('lib', { static: false }) lib: any;
@ViewChild('modal') modal;
selectedListCount = 0;
name = ['filter'];
modalFilterData: any;
filteredData = [];
key: any;
questionId: any;
public active: boolean[] = [];
public tabs: { header: string }[] = [
{ header: this.resourceService.frmelmnts.lbl.question },
];
public noResult = false;
showLoader = true;
public showPdf = false;
public showEvidence = false;
evidenceParam: any;
public unsubscribe$ = new Subject<void>();
loaderMessage: ILoaderMessage;
constructor(
private dhitiService: DhitiService,
config: ConfigService,
public layoutService: LayoutService,
public location: Location,
public resourceService: ResourceService,
private routerParam: ActivatedRoute,
private cdref: ChangeDetectorRef,
public toasterService: ToasterService,
public locations: LocationStrategy,
private navigationhelperService: NavigationHelperService
) {
this.config = config;
this.locations.onPopState(() => {
this.modal.deny();
});
// this.state = this.router.getCurrentNavigation().extras.state;
this.routerParam.queryParams.subscribe((data: any) => {
this.state['entityId'] = data.entityId;
this.state['observationId'] = data.observationId;
this.state['entityType'] = data.entityType;
this.state['solutionId'] = data.solutionId;
if (data.filter) {
this.state['filter'] = { questionId: [] };
this.state['criteriaWise'] = false;
}
data.scores == 'true'
? (this.state['scores'] = true)
: (this.state['scores'] = false);
data.observation == 'true'
? (this.state['observation'] = true)
: (this.state['observation'] = false);
});
}
ngAfterViewChecked() {
this.cdref.detectChanges();
}
ngOnInit() {
this.initLayout();
this.noResultMessage = {
messageText: 'messages.stmsg.reportNotReady',
};
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
this.segmentValue = 'Questions';
this.state['pdf'] = false;
this.getReport();
}
initLayout() {
this.layoutConfiguration = this.layoutService.initlayoutConfig();
this.layoutService.switchableLayout().subscribe((layoutConfig) => {
if (layoutConfig != null) {
this.layoutConfiguration = layoutConfig.layout;
}
});
}
getReport() {
// remove null and undefined
this.state = _.omitBy(this.state, _.isNil);
this.error = null;
const config = {
url: this.config.urlConFig.URLS.DHITI.GENERIC_REPORTS,
data: this.state,
};
this.dhitiService.post(config).subscribe(
(success: any) => {
if (success.result === true && success.reportSections) {
this.data = success;
this.reportSections = this.filterBySegment();
if (this.data.filters && !this.filters) {
this.filters = this.data.filters;
}
if (this.data.filters) {
const modalFilter = this.data.filters.filter(
(filter) => filter.filter.type == 'modal'
)[0];
this.filters = this.filters.map((filter) => {
if (filter.filter.type == 'modal') {
filter = modalFilter;
}
return filter;
});
}
} else {
this.noResult = true;
this.showLoader = false;
}
this.filters.forEach((element) => {
if (element.filter.type == 'segment') {
if (this.tabs.length == 1) {
this.active.push(true);
this.tabs.push({
header: this.resourceService.frmelmnts.lbl.criteria,
});
}
this.segmentfilter = true;
}
});
this.showLoader = false;
},
(err) => {
this.reportSections = [];
this.error = err;
if (!this.error.result) {
this.noResult = true;
this.showLoader = false;
}
}
);
}
gotoSolutionListPage() {
this.location.back();
}
filterBySegment() {
if (this.segmentValue == 'Questions') {
const reportSections = [{ questionArray: this.data.reportSections }];
return reportSections;
}
return this.data.reportSections;
}
getData(element) {
const data = {
values: element.chart.data.datasets[0].data,
};
return data;
}
getconfig(element) {
const config = {
labels: _.get(element,'chart.data.labels'),
datasets: [{ data: _.get(element,'chart.data.datasets[0].data'),label:_.get(element,'chart.data.labels[0]') }],
options: _.get(element,'chart.options'),
colors: [
{ backgroundColor: _.get(element,'chart.data.datasets[0].backgroundColor') },
]
};
return config;
}
handleParameterChange(event) {
this.state['submissionId'] = _.get(event, 'value._id');
this.getReport();
}
segmentChanged(segment) {
segment === 'Criteria'
? (this.state.criteriaWise = true)
: (this.state.criteriaWise = false);
this.state.filter = null;
this.modalFilterData = null;
this.segmentValue = segment;
this.getReport();
}
openFile(file) {
window.open(file.url, '_blank');
}
filterModalPopup(data, keyToSend) {
this.key = keyToSend;
this.modalFilterData ? null : (this.modalFilterData = data);
let filteredData;
if (this.state.filter && this.state.filter.length) {
filteredData = this.state.filter[keyToSend];
} else {
filteredData = data.map((d) => d._id);
}
this.state.criteriaWise ? 'criteria' : 'question';
this.filteredData = filteredData;
this.selectedListCount = this.modalFilterData.length;
this.filterModal = true;
}
public closeModal() {
this.filterModal = false;
}
onQuestionClick(id) {
if (this.filteredData.includes(id)) {
const indexOfQuestion = this.filteredData.indexOf(id);
this.filteredData.splice(indexOfQuestion, 1);
} else {
this.filteredData.push(id);
}
}
applyFilter() {
if (!this.filteredData.length) {
const msgData =
this.segmentValue == 'Questions'
? 'messages.smsg.selectquestions'
: 'messages.smsg.selectcriteria';
this.toasterService.error(_.get(this.resourceService, msgData));
} else {
this.state.filter = {};
this.state.filter[this.key] = this.filteredData;
this.getReport();
this.filterModal = false;
}
}
async download() {
const url: any = await this.callApi();
window.location.href = url;
}
callApi() {
return new Promise((resolve, reject) => {
const payload = Object.assign({}, this.state, { pdf: true }); // will not change state obj
const config = {
url: this.config.urlConFig.URLS.DHITI.GENERIC_REPORTS,
data: payload,
};
this.dhitiService.post(config).subscribe((res: any) => {
if (res.status != 'success' && !res.pdfUrl) {
reject();
}
resolve(res.pdfUrl);
});
});
}
async getAllEvidence(element) {
this.questionId = element.order;
const payload = {
submissionId: this.state.submissionId,
observationId: this.state.observationId,
entityId: this.state.entityId,
questionId: element.order,
entityType: this.state.entityType,
solutionId: this.state.solutionId,
};
this.evidenceParam = payload;
this.showEvidence = true;
}
modalClose(event) {
this.showEvidence = false;
}
selectedTabChange(event) {
const { tabHeader } = _.get(event, 'tab.textLabel');
tabHeader && this.segmentChanged(tabHeader);
}
goBack() {
this.navigationhelperService.goBack();
}
}
<div [ngClass]="layoutConfiguration ? 'sbt-inside-page-container' : 'pt-16'">
<div *ngIf="this.data">
<div class="ui report-main-block">
<div class="twelve wide column px-0">
<div class="stackable grid m-0 sb-mid-container-min-height dashboard-body-scroll">
<div class="sb-sideview-tab-container pb-48 p-0 w-100" *ngIf="showComponent">
<div id="report-header" class="report__header">
<div class="cc-player__content-header relative9 reports-content-header">
<div class="ui container py-16">
<div class="content-header__content p-10">
<div class="d-flex flex-dc flex-basis-1 mr-32 min-w-0 content-header__content__title">
<div class="content-header__title font-weight-bold text-left">
<div class="d-flex">
<div class="d-flex flex-dc flex-basis-4">
<span class="relative position relative9 reports-back-btn my-0 pl-0 pr-10">
<span class="ui py-8 px-0">
<button type="button"
class="sb-btn sb-btn-link sb-btn-link-primary sb-left-icon-btn back-btn-new mb-5"
aria-label="back-button" (click)="gotoSolutionListPage()">
<i 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></i>
</button>
</span>
</span>
</div>
<div *ngIf="data">
<div class="report-title"> {{ data?.solutionName | titlecase }}
</div>
<div *ngIf="data">
<span class="ml-auto sb-last-update-status fnormal sb-color-gray-400 px-10 last-update">
<span>{{resourceService?.frmelmnts?.lbl?.lastSubmittedOn}} : </span>
{{data.completedDate| date: "yyyy/MM/dd"}}
</span>
</div>
</div>
<!-- <sl-report-header [title]="data.solutionName" [lastdate]="todayDate"></sl-report-header> -->
</div>
</div>
</div>
<div *ngFor="let filter of filters">
<div *ngIf="filter.filter.type == 'dropdown'" class="d-flex">
<div class="sb-field filter-drop mb-0 mr-8">
<mat-form-field appearance="fill" class="sb-mat__dropdown w-100 mb-16">
<mat-label>Select Submission</mat-label>
<mat-select role="listbox" aria-label="Select Submission" class="selection"
(selectionChange)="handleParameterChange($event)">
<mat-option class="mat-dropdown__options" role="option" *ngFor="let option of filter.filter.data" [value]="option"
attr.aria-label="{{option.name}}">{{option.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<div class="dropdown">
<button class="sb-btn sb-btn-normal sb-btn-primary filter-btn " *ngIf="!segmentfilter">
{{this.resourceService?.frmelmnts.btn.exportAs}}
</button>
<div class="dropdown-content">
<button class="sb-btn sb-btn-normal sb-btn-outline-primary filter-btn" (click)="download()">
Pdf
</button>
</div>
</div>
</div>
<p class="m-0 report-description py-15 pl-10">{{data.entityName}}</p>
</div>
</div>
</div>
<div class="ui container" *ngIf="data">
<div class="twelve wide column">
<div id="report-body" class="my-16">
<mat-tab-group (selectedTabChange)="selectedTabChange($event)">
<mat-tab *ngFor="let tab of tabs; let i = index" [label]="{'tabHeader': tab?.header}">
<ng-template mat-tab-label>
<span>{{tab.header | translate}}</span>
</ng-template>
<div class="ui bottom p-0 b-0 no-bg graph-section" *ngIf="segmentfilter">
<div class="double-btn">
<div class="column-btn">
<div class="dropdown">
<button class="sb-btn sb-btn-normal sb-btn-primary filter-btn">
{{this.resourceService?.frmelmnts.btn.exportAs}}
</button>
<div class="dropdown-content">
<button class="sb-btn sb-btn-normal sb-btn-outline-primary filter-btn"
(click)="download()">
Pdf
</button>
</div>
</div>
</div>
<div class="column-btn">
<div *ngFor="let filter of filters">
<button class="sb-btn sb-btn-normal sb-btn-primary filter-btn "
*ngIf="filter.filter.type=='modal'"
(click)="filterModalPopup(filter.filter.data, filter.filter.keyToSend)">
{{ resourceService?.frmelmnts?.lbl?.filters }}
</button>
</div>
</div>
</div>
</div>
<div class="ui bottom p-0 b-0 no-bg my-24 graph-section">
<div *ngFor="let section of reportSections">
<div [ngClass]="{'sb-graph-section p-24 my-24' : section.criteriaName}">
<strong *ngIf="section?.criteriaName">{{ section.criteriaName }}</strong>
<div *ngFor="let element of section?.questionArray; let i = index; let l = last;">
<div class="sb-graph-section p-24 my-24" [ngSwitch]="element?.responseType">
<sl-reports-text [data]="element" [questionNumber]="i + 1" *ngSwitchCase="'text'">
</sl-reports-text>
<sl-reports-text [data]="element" [questionNumber]="i + 1" *ngSwitchCase="'number'">
</sl-reports-text>
<sl-reports-text [data]="element" [questionNumber]="i + 1" *ngSwitchCase="'date'">
</sl-reports-text>
<sl-reports-text [data]="element" [questionNumber]="i + 1" *ngSwitchDefault>
</sl-reports-text>
<div *ngSwitchCase="'radio'">
<sl-pie-chart [data]="element" [questionNumber]="i + 1"></sl-pie-chart>
</div>
<div *ngSwitchCase="'pie'">
<sl-pie-chart [data]="element" [questionNumber]="i + 1"></sl-pie-chart>
</div>
<div *ngSwitchCase="'column'">
<strong>{{i+1}}) {{ element?.question }}</strong>
<sl-bar-chart [data]="element" class="bar-chart-container"></sl-bar-chart>
</div>
<div *ngSwitchCase="'bar'">
<strong>{{i+1}}) {{ element?.question }}</strong>
<sl-bar-chart [data]="element" class="bar-chart-container"></sl-bar-chart>
</div>
<div *ngSwitchCase="'multiselect'">
<strong>{{i+1}}) {{ element?.question }}</strong>
<sl-bar-chart [data]="element" class="bar-chart-container"></sl-bar-chart>
</div>
<div *ngSwitchCase="'horizontalBar'">
<sl-percentage-column-charts [chartData]="element" class="bar-chart-container">
</sl-percentage-column-charts>
</div>
<sl-expansion-table [datas]="element" *ngSwitchCase="'expansion-table'">
</sl-expansion-table>
<sl-expansion-panel [datas]="element" *ngSwitchCase="'expansion'">
</sl-expansion-panel>
<div *ngSwitchCase="'matrix'">
<strong>{{i+1}}) {{ element?.question }}</strong>
<div ui bottom graph-section
*ngFor="let data of element?.instanceQuestions; let i = index">
<div class="sb-graph-section p-24 my-24" [ngSwitch]="data?.responseType">
<sl-reports-text [data]="data" [questionNumber]="i + 1" *ngSwitchCase="'text'">
</sl-reports-text>
<sl-reports-text [data]="data" [questionNumber]="i + 1" *ngSwitchCase="'number'">
</sl-reports-text>
<sl-reports-text [data]="data" [questionNumber]="i + 1" *ngSwitchCase="'date'">
</sl-reports-text>
<sl-reports-text [data]="data" [questionNumber]="i + 1" *ngSwitchDefault>
</sl-reports-text>
<div *ngSwitchCase="'radio'">
<sl-pie-chart [data]="data" [questionNumber]="i + 1"></sl-pie-chart>
</div>
<div *ngSwitchCase="'pie'">
<sl-pie-chart [data]="data" [questionNumber]="i + 1"></sl-pie-chart>
</div>
<div *ngSwitchCase="'column'">
<strong>{{i+1}}) {{ data?.question }}</strong>
<sl-bar-chart [data]="data" class="bar-chart-container"></sl-bar-chart>
</div>
<div *ngSwitchCase="'bar'">
<strong>{{i+1}}) {{ data?.question }}</strong>
<sl-bar-chart [data]="data" class="bar-chart-container"></sl-bar-chart>
</div>
<div *ngSwitchCase="'multiselect'">
<strong>{{i+1}}) {{ data?.question }}</strong>
<sl-bar-chart [data]="data" class="bar-chart-container"></sl-bar-chart>
</div>
<div class="card-align">
<div *ngFor="let e of data.evidences" class="thumbnail-card">
<sl-attachments [url]="e.url" [extension]="e.extension"></sl-attachments>
</div>
<button *ngIf="data.evidence_count > 3"
class="sb-btn sb-btn-normal sb-btn-outline-primary filter-btn filter-modal-button"
(click)="getAllEvidence(data)">
View More
</button>
</div>
</div>
</div>
</div>
<div class="card-align">
<div *ngFor="let e of element.evidences" class="thumbnail-card">
<sl-attachments [url]="e.url" [extension]="e.extension"></sl-attachments>
</div>
<button *ngIf="element.evidence_count > 3"
class="sb-btn sb-btn-normal sb-btn-outline-primary filter-btn filter-modal-button"
(click)="getAllEvidence(element)">
View More
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
<div *ngIf="!reportSections">
<app-no-result [data]="noResultMessage"></app-no-result>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="twelve wide column" *ngIf="noResult">
<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"
class="sb-btn sb-btn-link sb-btn-link-primary sb-left-icon-btn back-btn-new mb-5"
aria-label="back-button" (click)="gotoSolutionListPage()">
<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>
</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>
<app-no-result [data]="noResultMessage"></app-no-result>
</div>
<div class="twelve wide column" *ngIf="showLoader">
<app-loader [data]='loaderMessage'></app-loader>
</div>
</div>
<app-modal-wrapper [config]="{disableClose: false, size: 'normal'}" (dismiss)="closeModal()" *ngIf="filterModal" #modal>
<ng-template sbModalContent>
<div class="sb-mat__modal sb-onboard modalDimention">
<div mat-dialog-title class="flex-jc-center">
<div class="sb-onboard__header">
<h4>{{segmentValue =='Questions' ? (resourceService?.frmelmnts?.lbl?.selectquestionfilter) :
(resourceService?.frmelmnts?.lbl?.selectcriteriafilter) }}</h4>
</div>
<button aria-label="close dialog" mat-dialog-close class="close-btn" (click)="closeModal()">
</button>
</div>
<mat-dialog-content>
<div class="sb-mat__modal__content">
<div *ngFor="let question of modalFilterData">
<div class="sb-checkbox sb-checkbox-secondary pt-24 ui checkbox">
<input value="{{question._id}}" type="checkbox" id="{{question._id}}" (change)="onQuestionClick(question._id)"
[checked]="filteredData?.includes(question?._id)">
<label for="{{question._id}}" class="questions">{{question.name}}</label>
</div>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions class="mb-0 sb-mat__modal__actions flex-jc-center">
<div class="sb-onboard__footer d-flex">
<button class="sb-btn sb-btn-normal sb-btn-primary text-uppercase" (click)="applyFilter()"
[disabled]="selectedListCount == 0" [ngClass]="{ 'sb-btn-disabled': selectedListCount == 0 }">
{{resourceService?.frmelmnts?.btn?.apply}} {{resourceService?.frmelmnts?.lbl?.filters }}
</button>
</div>
</mat-dialog-actions>
</div>
</ng-template>
</app-modal-wrapper>
<app-all-evidence *ngIf="showEvidence" [data]="evidenceParam" (closeEvent)="modalClose($event)"></app-all-evidence>
./report-view.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins"as *;
@use 'pages/content-header'as *;
@use 'pages/reports'as *;
.sb-graph-section {
position: relative;
z-index: 1;
margin: calculateRem(15px) !important;
padding: calculateRem(24px);
margin-top: calculateRem(24px);
background-color: var(--sb-card-bg);
color: var(--sb-text);
border-radius: calculateRem(4px);
}
.graph-section {
background-color: var(--sb-card-bg);
color: var(--sb-text);
}
.report-description {
margin-left: 4rem !important;
}
.sb-graph-section.global-filter {
background-color: var(--sbt-compt-bg) !important;
}
.graph-section {
background-color: var(--sbt-compt-bg) !important;
border-radius: 0px 0px 0px 0px !important;
margin-top: 0px !important;
padding-top: calculateRem(5px) !important;
}
.ui.selection.dropdown {
color: var(--ui-dropdown-selection-icon) !important;
}
.sb-field ::ng-deep {
.ui.selection.dropdown {
color: var(--gray-800) !important;
font-size: calculateRem(15px) !important;
min-height: calculateRem(40px) !important;
border-radius: calculateRem(24px) !important;
border: calculateRem(1px) var(--rc-dddddd) solid !important;
background-color: var(--white);
}
}
.report-title {
font-size: calculateRem(22px);
color: var(--sb-prominent-filter-title);
line-height: calculateRem(24px);
font-weight: 500;
}
.reports-content-header {
border-radius: calculateRem(24px) !important;
background: var(--sbt-body-bg) !important;
}
.ui.dropdown.selection {
::ng-deep {
.dropdown.icon {
color: var(--primary-color) !important;
}
}
}
.sb-field .ui.selection.dropdown {
::ng-deep {
.text {
color: var(--white) !important;
padding: 0 calculateRem(5px);
}
}
}
.chart-container {
display: block;
max-height: calculateRem(400px);
max-width: calculateRem(400px);
margin: 0 auto;
}
.bar-chart-container {
display: block;
max-width: calculateRem(900px);
max-height: calculateRem(450px);
margin: 0 auto;
}
.thumbnail-card {
height: calculateRem(98px);
margin-top: calculateRem(5px);
display: inline;
justify-content: space-around;
align-items: center;
}
.card-align {
margin-top: calculateRem(10px);
}
.filter-modal-button {
margin-top: calculateRem(20px);
}
.sb-filter {
&__container {
width: 100%;
height: 100vh;
min-height: calculateRem(400px);
background-color: var(--sbt-body-bg) !important;
padding: calculateRem(24px);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
overflow-y: auto;
@include respond-above(sm) {
border-radius: calculateRem(8px);
max-width: calculateRem(1008px);
height: auto;
}
}
&__header {
width: 100%;
text-align: center;
max-width: calculateRem(328px);
}
&__content {
width: calculateRem(648px);
max-width: 100%;
margin-bottom: auto;
}
&__footer {
margin-top: calculateRem(16px);
width: 100%;
text-align: center;
@include respond-above(sm) {
max-width: 80%;
}
}
}
::ng-deep {
.sb-filter-modal {
@include respond-below(sm) {
.ui.modal {
width: 95%;
margin: 0 0 0 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.ui.modal.scroll {
position: fixed !important;
margin-top: o !important;
margin-bottom: 0px !important;
top: 0;
width: 100%;
left: 0px;
right: 0px;
margin: 0 !important;
}
}
}
}
.sb-filter__content {
::ng-deep {
.sb-prominent-filter-field {
width: 50%;
}
}
}
.filter-modal {
float: right;
margin-bottom: calculateRem(12px);
}
input[type="checkbox"] {
background: var(--sb-card-bg);
border: var(--gray-100);
}
.questions {
color: var(--sb-prominent-filter-title);
font-weight: 500;
}
.ui.checkbox input.hidden+label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-weight: 500;
}
.card-images {
width: calculateRem(90px);
height: calculateRem(90px);
margin-right: calculateRem(5px);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
width: calculateRem(100px);
z-index: 3;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column-btn {
margin-top: calculateRem(15px);
float: right;
margin-right: calculateRem(5px);
}
.double-btn:after {
content: "";
display: table;
clear: both;
}
.modalDimention {
min-width: 60vw;
}