src/app/modules/report/components/all-evidence/all-evidence.component.ts
OnInit
| selector | app-all-evidence |
| styleUrls | ./all-evidence.component.scss |
| templateUrl | ./all-evidence.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(resourceService: ResourceService, config: ConfigService, dhitiService: DhitiService, location: LocationStrategy)
|
|||||||||||||||
|
Parameters :
|
| data | |
Type : any
|
|
| closeEvent | |
Type : EventEmitter
|
|
| Public closeModal |
closeModal()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| tabChanged | ||||||
tabChanged(tabChangeEvent: MatTabChangeEvent)
|
||||||
|
Parameters :
Returns :
void
|
| activeIndex |
Type : any
|
Default value : 0
|
| audios |
Type : any
|
Default value : []
|
| config |
| documents |
Type : any
|
Default value : []
|
| images |
Type : any
|
Default value : []
|
| Public location |
Type : LocationStrategy
|
| modal |
Decorators :
@ViewChild('modal')
|
| remarks |
Type : any
|
Default value : []
|
| Public resourceService |
Type : ResourceService
|
| Public scrollDistance |
Type : number
|
Default value : 2
|
| Public throttle |
Type : number
|
Default value : 50
|
| videos |
Type : any
|
Default value : []
|
import {
Component,
EventEmitter,
Input,
OnInit,
Output,
ViewChild,
} from '@angular/core';
import { ResourceService, ConfigService } from '@sunbird/shared';
import { DhitiService } from '@sunbird/core';
import { LocationStrategy } from '@angular/common';
import { MatTabChangeEvent } from '@angular/material/tabs';
@Component({
selector: 'app-all-evidence',
templateUrl: './all-evidence.component.html',
styleUrls: ['./all-evidence.component.scss'],
})
export class AllEvidenceComponent implements OnInit {
@ViewChild('modal') modal;
@Output() closeEvent = new EventEmitter<any>();
@Input() data: any;
public throttle = 50;
public scrollDistance = 2;
activeIndex:any = 0;
config;
remarks: any = [];
images: any = [];
videos: any = [];
documents: any = [];
audios: any = [];
constructor(
public resourceService: ResourceService,
config: ConfigService,
private dhitiService: DhitiService,
public location: LocationStrategy
) {
this.config = config;
this.location.onPopState(() => {
this.modal.deny();
});
}
ngOnInit() {
const config = {
url: this.config.urlConFig.URLS.DHITI.ALL_EVIDENCE,
data: this.data,
};
this.dhitiService.post(config).subscribe(
(success: any) => {
if (success.result === true && success.data) {
this.images = success.data.images;
this.videos = success.data.videos;
this.documents = success.data.documents;
this.remarks = success.data.remarks;
this.audios = success.data.audios;
}
},
(error) => {}
);
}
tabChanged(tabChangeEvent: MatTabChangeEvent): void {
this.activeIndex = tabChangeEvent.index
}
public closeModal() {
this.closeEvent.emit({ value: null });
}
}
<app-modal-wrapper [config]="{disableClose: true, size: 'normal'}" (dismiss)="closeModal()" #modal>
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible normal">
<div class="sb-onboard">
<div class="p-0 w-100">
<div class="sb-modal-content content">
<div class="ui container">
<mat-icon class="goback" (click)="closeModal()">highlight_off</mat-icon>
<div class="twelve wide column">
<div id="report-body" class="my-16">
<mat-tab-group mat-align-tabs="center" #tabs mat-stretch-tabs (selectedTabChange)="tabChanged($event)">
<mat-tab label="{{this.resourceService?.frmelmnts?.lbl?.evidences}}" [ngClass]="{'active-tab': activeIndex === 0}">
<div class="report-block ui bottom attached segment p-0 b-0 no-bg">
<div *ngIf="images?.length">
<p class="item">Images</p>
<div *ngFor="let data of images" class="thumbnail-card">
<sl-attachments [url]="data.url"
[extension]="data.extension">
</sl-attachments>
</div>
</div>
<div *ngIf="videos?.length">
<p class="item">Videos</p>
<div *ngFor="let data of videos" class="thumbnail-card">
<sl-attachments [url]="data.url" [extension]="mp4">
</sl-attachments>
</div>
</div>
<div *ngIf="documents?.length">
<p class="item">Documents</p>
<div *ngFor="let data of documents" class="thumbnail-card">
<sl-attachments [url]="data.url"
[extension]="data.extension">
</sl-attachments>
</div>
</div>
<div *ngIf="audios && audios?.length">
<p class="item">Audios</p>
<div *ngFor="let data of audios" class="thumbnail-card">
<sl-attachments [url]="data.url"
[extension]="data.extension">
</sl-attachments>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="{{this.resourceService?.frmelmnts?.lbl?.remarks}}" [ngClass]="{'active-tab': activeIndex === 1}">
<div *ngIf="remarks?.length"
class="report-block ui bottom attached segment p-0 b-0 no-bg">
<div *ngFor="let remark of remarks;let i=index">
<label>{{i+1}}) {{ remark }}</label>
</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
./all-evidence.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.thumbnail-card {
height: calculateRem(98px);
margin-top: calculateRem(10px);
display: inline;
justify-content: space-around;
align-items: center;
}
.evidence-modal {
.content {
height: 70vh;
padding: calculateRem(10px);
overflow-y: auto;
background: var(--sb-modal-content-bg);
border-radius: calculateRem(24px);
label{
color: var(--sb-prominent-filter-title);
}
}
}
.sbt-report-tabs-panel {
overflow: auto;
padding-bottom: calculateRem(2px);
border-radius: var(--sbt-bradius-24) !important;
background-color: var(--sb-card-bg);
}
.ui.secondary.pointing.menu .item {
font-size: calculateRem(16px) !important;
color: var(--gray-800);
opacity: 0.3;
font-weight: 600;
overflow: hidden;
}
.ui.secondary.pointing.menu .active.item {
color: var(--primary-color) !important;
opacity: 1 !important;
border-bottom-width: calculateRem(4px) !important;
border-color: var(--primary-color) !important;
overflow: hidden;
}
.ui.secondary.pointing.menu {
height: calculateRem(60px) !important;
overflow: hidden;
}
.sbt-report-btns-panel-new {
border-radius: 0px !important;
background-color: var(--white);
}
.report-block {
padding-top: calculateRem(10px);
padding-bottom: 0px;
margin-top:calculateRem(10px) !important;
background-color: transparent;
color: var(--sb-text);
}
.item{
margin-top: calculateRem(15px);
}
.goback{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
margin: 0.7rem 0;
cursor: pointer;
color: var(--ck-color-button-cancel);
}
::ng-deep{
mat-ink-bar.mat-ink-bar {
display: none !important;
}
.mat-tab-label-active {
border-bottom: 2px solid var(--primary-color) !important;
}
}