pop box Check box with info UI design and Funtionality in Angualar
HTML
<div class=”wo-container”>
<div class=”popup-container”>
<div class=”row header d-flex justify-content-between”>
<p class=”header-align”>{{regulatoryIdSelected.regulatory_id}}: {{popupHeader}}</p>
<i class=”fa fa-times ps-2 cancel-popup” (click)=”onPopupClose()” aria-hidden=”true”></i>
</div>
<div class=”row popup-body”>
<div class=”col-md-12 form-body”>
<form #importData=”ngForm”>
<div class=”row”>
<div class=”col-md-8 form-group”>
<label for=”industry” class=”form-font pt-2 pb-2">{{userRole==’Regulatory Admin’ ? ‘Select
Manager’:’Select Subject Expert’}}<sup><img src=”../../../../assets/asterics.svg” /></sup></label><br />
<span>
<select id=”industry” name=”industry” (change)=”onIndustrySelect($event)” [(ngModel)]=”assignedtoInfo”
required>
<! — <option value=”” selected disabled>Select User</option> →
<option *ngFor=”let item of dropdownItemsIndustry[0]” [value]=”item.user_id”>
{{ item.user_name }}
</option>
</select>
</span>
</div>
</div>
<div class=”row mt-3">
<div class=”col-xs-12 col-sm-12 col-md-12 col-lg-12 form-group”>
<label for=”description” class=”form-font pt-2">Comment</label><br />
<div class=”textArea”>
<textarea id=”description” name=”description” #text class=”text-area form-control”
placeholder=”Enter your comment here…” autofocus cols=”auto” rows=”auto”
[(ngModel)]=”comments”></textarea>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-8">
<input class=”checkboxes” type=”checkbox” id=”restrictregulations” name=”restrictregulations” value=”restrictregulations” (change)=”isCheckValueChange($event)” />
<label for=”restrictregulations”>Restrict reassign</label>
<span (mouseenter)=”mouseEnter() “ (mouseleave)=”mouseLeave()”>
<i class=”fa fa-info-circle icon-background1"></i>
<span [hidden]=”!iconVisible” class=”wrapper”>Restrict Manager from reassigning the regulation</span>
</span>
</div>
</div>
<div class=”row footer”>
<div class=”align-btns”>
<button class=”mrgn-right stroked-Btn-Sec” (click)=”onPopupClose()”>CANCEL</button>
<button class=”mrgn-right stroked-Btn-Pri” [disabled]=”!(selectedValue >= 1)”
(click)=”onAllocate()”>ALLOCATE</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
@import ‘../../../../styles/variables.scss’;
.wo-container {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0.5em;
width: 100%;
height: 100%;
z-index: 10;
margin-left: -12px;
}
.popup-container {
position: absolute;
top: 18%;
width: 60%;
left: 20%;
.header {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5);
background-color: #EEF5FF;
height: 3em;
.name {
position: relative;
left: 2em;
top: 0.8em;
}
.close-img {
position: relative;
right: 1em;
top: 1em;
float: right;
cursor: pointer;
}
.success-logo {
position: relative;
top: 0.6em;
left: 2em;
}
}
.content {
background-color: $white;
padding: 1em;
min-height: 10em;
}
}
.align-btns {
display: flex;
justify-content: right;
padding: 5px;
margin-top: -80px;
}
.mrgn-right {
margin-right: 5%;
}
.footer {
// background-color: #D8D8D8;
height: 3em;
bottom: -149px;
position: relative;
// button{
// width: 101px;
// height: 29px;
// font-weight: 700;
// font-size: 12px;
// text-align: center;
// text-transform: uppercase;
// color: #2B6FD6;
// border: 1px solid #CADCF8;
// background-color: #CADCF8;
// }
}
.form-body {
background-color: $white;
}
.header-align {
position: relative;
top: 20%;
color: $black;
}
.textArea {
width: 75%;
height: 100px;
}
.text-area {
width: 100%;
height: 88px;
resize: none;
background-color:transparent;
border:1.5px solid #CADCF8;
font-size: 12px;
line-height: 16px;
color: #000000;
border-radius: 0px;
&:focus {
outline: none;
border: 1px solid none;
box-shadow: none;
}
}
.popup-body{
height: 400px;
}
label{
color: #000000;
font-weight: 400;
font-size: 10px;
}
select{
padding: 5px;
border: none;
border-bottom: 1px solid #6899E2;
width: 200px;
font-size: 12px;
font-weight: 400;
}
.cancel-popup{
position: relative;
text-align: right;
/* top: -61%; */
font-size: 18px;
bottom: 60%;
cursor: pointer;
color: #2B6FD6;
}
.CheckedInfo{
margin-left: 7px;
font-size: 10px;
}
.icon-background1 {
color: #2B6FD6;;
margin-left: 8px;
}
.fa-info-circle:before {
content: “\f05a”;
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
}
.wrapper {
background-color: black;
font-size: 9px;
color: white;
width: 150px;
margin-left: -26px;
text-align: center;
border-radius: 6px;
padding: 10px;
// z-index: 1;
}
.wrapper::after {
content: “ “;
position: absolute;
top: 62%;
right: 631px; /* To the left of the tooltip */
margin-top: -5px;
border-width: 7px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.checkbox-border {
// outline: 1px solid rgba(50,125,255,1);
// color: #2B6FD6;
border: 1.5px solid #CADCF8;
background-color: white;
// padding: 0px 20px 0px 20px;
}
input[type=checkbox] { display: none; }
input[type=checkbox] + label {
padding-left: 22px;
position: relative;
padding-top: 4px;
}
input[type=checkbox] + label::before {
display: block;
border: 1px solid #6899E2;
left: 3px;
top: 3px;
height: 14px;
width: 14px;
content: “”;
position: absolute;
line-height: 14px;
padding-left: 3px;
}
input[type=checkbox]:invalid + label::before {
border-color:blue;
}
input[type=checkbox]:checked + label::before {
content: “✓”;
}
TS file
import { Component, EventEmitter, Input, OnInit, Output } from ‘@angular/core’;
import { CommonServiceService } from ‘src/app/services/common-service.service’;
import { DataProcessingService } from ‘src/app/services/data-processing.service’;
@Component({
selector: ‘app-edit-popup’,
templateUrl: ‘./edit-popup.component.html’,
styleUrls: [‘./edit-popup.component.scss’]
})
export class EditPopupComponent implements OnInit {
@Input() regulatoryIdSelected:any;
public comments=””;
assignedtoInfo:any;
selectedCheckBoxValue:any=””;
selectedValue:number=0;
public expandDropdown:boolean = false;
public dropdownItemsIndustry: string[] = [];
public popupHeader:string=’’;
userRole:string=’’;
userId:any;
buttonDisabled:boolean=false;
isDataLoaded:boolean=false;
@Output() hidepopup=new EventEmitter<boolean>();
iconVisible: boolean;
constructor(private commonService: CommonServiceService,private dataService:DataProcessingService) { }
ngOnInit(): void {
this.getLoggedinUserDetails();
// this.comments=this.regulatoryIdSelected.comments;
this.assignedtoInfo=this.regulatoryIdSelected.assigned_to ==null ?this.regulatoryIdSelected.user_id:this.regulatoryIdSelected.assigned_to;
}
public onIndustrySelect(event: any): string {
this.selectedValue=event.target.value
console.log(“Industry value “, event.target.value,this.buttonDisabled);
return event;
}
onPopupClose(){
this.hidepopup.emit(false);
}
async getLoggedinUserDetails(){
this.userId= this.commonService.getUserId();
this.userRole= this.commonService.getUserRole(); //’Responsible Manager’//this.commonService.getUserRole();
if(this.userRole==’Regulatory Admin’){
this.popupHeader=’CHOOSE RESPONSIBLE MANAGER’
this.dropdownDate(1);
}else if(this.userRole==’Responsible Manager’){
this.popupHeader=’CHOOSE SUBJECT EXPERT’
this.dropdownDate(2);
}
}
async dropdownDate(userRole:any){
await this.commonService.getAllUserDetails().subscribe((allUser)=>{
const allData=allUser[‘results’]
this.isDataLoaded=true
if(userRole==1){
this.dropdownItemsIndustry.push(allData[0].filter((x)=>x.role_id==2))
}else if(userRole==2){
this.dropdownItemsIndustry.push(allData[0].filter((x)=>x.role_id==3))
}
},
(error)=>{console.log(‘unauth’,error)})
}
isCheckValueChange(event){
this.selectedCheckBoxValue=””;
if(event.target.checked){
this.selectedCheckBoxValue = “Restrict”;
}else{
this.selectedCheckBoxValue = “NULL”
}
}
onAllocate(){
console.log(‘form submitted’,this.selectedValue,this.comments,this.regulatoryIdSelected)
const copyData = JSON.parse(JSON.stringify(this.regulatoryIdSelected));
copyData.user_id=this.userId;
copyData.assigned_to=this.selectedValue;
copyData.pending_acceptance=”True”;
copyData.edited_by=this.userId;
copyData.got_back = this.selectedCheckBoxValue;
copyData.comments=this.comments;
copyData.status=’subjectexpert’
if(this.userRole==’Regulatory Admin’){
copyData.requirement_status=null;
this.commonService.editAdminDashBoardData(copyData).subscribe((msg)=>{
console.log(msg)
if(msg.status==200){
this.hidepopup.emit(false);
this.dataService.getDashboardData();
}
})
}else if(this.userRole==’Responsible Manager’){
copyData.requirement_status=”Open”;
this.commonService.ManagerDashboardAcceptandDecline(copyData).subscribe((msg)=>{
console.log(msg)
if(msg.status==200){
this.hidepopup.emit(false);
this.dataService.getDashboardData();
}
})
}
}
mouseEnter() {
this.iconVisible = true;
}
mouseLeave() {
this.iconVisible = false;
}
}
Dashboard html file
<div *ngIf=”openRegulatoryAssignPopup”>
<app-edit-popup
[regulatoryIdSelected]=”regulatoryIdClickedForAssigning”
(hidepopup)=”onHideAssignpopup($event)”
></app-edit-popup>
</div>
</div>
TS filr
onEditOfRegulatory(item:any){
this.regulatoryIdClickedForAssigning=item;
this.openRegulatoryAssignPopup=!this.openRegulatoryAssignPopup;
}
onHideAssignpopup(e:any){
this.openRegulatoryAssignPopup=!this.openRegulatoryAssignPopup;
}