File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
closeEvent
|
Type : EventEmitter
|
|
|
Methods
|
Public
closeModal
|
closeModal()
|
|
|
|
|
|
onEntityChange
|
onEntityChange(entity)
|
|
|
|
|
|
modal
|
Decorators :
@ViewChild('modal')
|
|
|
|
Public
scrollDistance
|
Type : number
|
Default value : 2
|
|
|
|
selectedEntity
|
Type : any
|
|
|
|
selectedListCount
|
Type : number
|
Default value : 0
|
|
|
|
showLoaderBox
|
Default value : false
|
|
|
|
Public
throttle
|
Type : number
|
Default value : 50
|
|
|
import { LocationStrategy } from '@angular/common';
import {
Component,
EventEmitter,
Input,
OnInit,
Output,
ViewChild,
} from '@angular/core';
import { ResourceService } from '@sunbird/shared';
@Component({
selector: 'app-entity-list',
templateUrl: './entity-list.component.html',
styleUrls: ['./entity-list.component.scss'],
})
export class EntityListComponent implements OnInit {
@ViewChild('modal') modal;
@Output() closeEvent = new EventEmitter<any>();
@Input() solution: any;
showLoaderBox = false;
public throttle = 50;
public scrollDistance = 2;
selectedListCount = 0;
showSuccessModal;
selectedEntity: any;
constructor(public resourceService: ResourceService, public location: LocationStrategy) {
this.location.onPopState(() => {
this.modal.deny();
});
}
ngOnInit() {}
public closeModal() {
this.closeEvent.emit({value: null});
}
onEntityChange(entity) {
this.selectedEntity = {};
this.solution.entities.forEach(item => {
if (item._id !== entity._id) {
item.selected = false;
} else {
item.selected = true;
this.selectedEntity = entity;
}
});
this.selectedListCount = 1;
}
submit() {
const data = {
solutionDetail: this.solution,
selectedEntity: this.selectedEntity
};
this.closeEvent.emit({value: data});
}
}
<app-modal-wrapper [config]="{disableClose: false,size: 'normal',panelClass: ['overflow-visible', 'material-modal']}" (dismiss)="closeModal()" #modal>
<ng-template sbModalContent>
<div class="sb-mat__modal sb-onboard">
<div mat-dialog-title class="flex-jc-center">
<div class="sb-onboard__header">
<h4>{{ resourceService.frmelmnts?.lbl?.selectEntity }}</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 class="content search-results">
<div *ngIf="solution.entities?.length">
<div *ngFor="let entity of solution.entities; let i = index">
<div class="sb-radio-btn-checkbox sb-radio-btn-primary checked-box">
<input value="{{ entity._id }}" id="{{ entity._id }}" type="radio" [checked]="entity.selected"
(change)="onEntityChange(entity)" />
<label for="{{ entity._id }}"> {{ entity.name }}</label>
</div>
</div>
</div>
<div class="twelve wide column" *ngIf="!solution.entities?.length">
<app-no-result [data]="noResultMessage"></app-no-result>
</div>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions class="mb-0 sb-mat__modal__actions flex-jc-center">
<div class="actions footer">
<button type="button" class="sb-btn sb-btn-normal sb-btn-primary text-uppercase" type="submit"
(click)="submit()" [disabled]="selectedListCount == 0"
[ngClass]="{ 'sb-btn-disabled': selectedListCount == 0 }">
{{ resourceService.frmelmnts?.btn?.submit }}
<span class="arrow-icon">
<em class="icon-svg icon-svg--xxs icon-back">
<svg class="icon icon-svg--white">
<use xlink:href="assets/images/sprite.svg#arrow-long-right"></use>
</svg>
</em>
</span>
</button>
</div>
</mat-dialog-actions>
</div>
</ng-template>
</app-modal-wrapper>
<div class="twelve wide column" *ngIf="showLoaderBox">
<app-loader [data]="loaderMessage"></app-loader>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.add-entity-modal{
.content{
max-height: 60vh;
label{
color: var(--sb-prominent-filter-title);
}
label:hover{
cursor: pointer;
}
}
.footer{
width: 100%;
text-align: center;
background: var(--sb-card-bg);
border-top: none;
}
.search-box{
margin-top: calculateRem(15px);
}
}
.sb-onboard {
&__header {
width: 100%;
margin: calculateRem(20px) 0px;
padding-left : calculateRem(15px);
}
&__content {
width: calculateRem(648px);
max-width: 100%;
margin-bottom: auto;
overflow: hidden;
overflow-y: auto;
}
&__footer {
margin-top: calculateRem(16px);
width: 100%;
text-align: center;
}
}
::ng-deep {
.sb-onbrd-modal {
@include respond-below(sm) {
.ui.modal {
margin: 0 0 0 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.ui.modal.scroll {
position: fixed !important;
top: 0;
width: 100%;
left: 0px;
right: 0px;
margin: 0 !important;
}
}
}
}
.sbt-search-box{
box-shadow: none;
margin: 0;
}
.load-mr-btn{
height: 2rem;
font-size: 1rem;
padding: 0.5rem 2rem;
}
.load-mr-bt-center{
text-align:center
}
.checked-box{
background: none;
}
Legend
Html element with directive