Sunbird Portal Documentation
  1. Components
  2. AlertModalComponent

File

src/app/modules/shared/components/alert-modal/alert-modal.component.ts

Metadata

selector app-alert-modal
styleUrls ./alert-modal.component.scss
templateUrl ./alert-modal.component.html

Index

Properties
Methods

Constructor

constructor(modal: SuiModal<IAlertModalContext | void | void>, location: Location, resourceService: ResourceService, locationStrategy: LocationStrategy)
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:19
Parameters :
Name Type Optional
modal SuiModal<IAlertModalContext | void | void> No
location Location No
resourceService ResourceService No
locationStrategy LocationStrategy No

Methods

getMethod
getMethod(data)
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:28
Parameters :
Name Optional
data No
Returns : void
navigatePrevious
navigatePrevious(data)
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:36
Parameters :
Name Optional
data No
Returns : void

Properties

instance
Type : string
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:19
isChecked
Default value : false
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:17
Public locationStrategy
Type : LocationStrategy
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:20
Public modal
Type : SuiModal<IAlertModalContext | void | void>
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:20
Public resourceService
Type : ResourceService
Defined in src/app/modules/shared/components/alert-modal/alert-modal.component.ts:18
 
import { Component } from '@angular/core';
import { SuiModal, ComponentModalConfig, ModalSize } from 'ng2-semantic-ui-v9';
import { Location, LocationStrategy } from '@angular/common';
import {ResourceService} from '../../services';
import * as _ from 'lodash-es';

interface IAlertModalContext {
    data: any;
}

@Component({
  selector: 'app-alert-modal',
  templateUrl: './alert-modal.component.html',
  styleUrls: ['./alert-modal.component.scss'],
})
export class AlertModalComponent {
  isChecked = false;
  public resourceService: ResourceService;
  instance: string;
  constructor(public modal: SuiModal<IAlertModalContext, void, void>, private location: Location, resourceService: ResourceService, public locationStrategy: LocationStrategy) {
    this.resourceService = resourceService;
    this.instance = _.upperCase(this.resourceService.instance);
    this.locationStrategy.onPopState(() => {
      this.modal.approve();
   });
  }

  getMethod(data) {
    if (data.type == 'cancel') {
      this.modal.deny(data.returnValue);
      return;
    }
    this.modal.approve(data.returnValue);
  }

  navigatePrevious(data) {
    data.footer.buttons[0].returnValue = false;
    this.modal.deny(data.footer.buttons[0].returnValue);
    this.location.back();
  }
}

export class AlertModal extends ComponentModalConfig<IAlertModalContext, void, void> {
  constructor(data: any) {
    super(AlertModalComponent, { data });

    this.transitionDuration = 200;
    this.isClosable = false;

    switch (data.size) {
      case 'mini':
        this.size = ModalSize.Mini;
        break;
      case 'tiny':
        this.size = ModalSize.Tiny;
        break;
      case 'small':
        this.size = ModalSize.Small;
        break;
      case 'normal':
        this.size = ModalSize.Normal;
        break;
      case 'large':
        this.size = ModalSize.Large;
        break;
    }
  }

}

<div class="sb-modal">
  <div class="popup">
    <i class="close inside icon" (click)="modal?.deny()"></i>
    <div class="popup-header" *ngIf="modal.context.data.content.title">
      <span>{{ modal.context.data.content.title }}</span>
    </div>
    <div *ngIf="modal.context.data.content.body.type == 'checkbox'" class="popup-body-checkbox">
      <input type="checkbox" id="myCheck" [(ngModel)]="isChecked" />
      <label for="myCheck" innerHtml="{{modal.context.data.content.body.data| interpolate:'{instance}': instance | interpolate:'{instance}': instance}}"></label><br />
    </div>
    <div *ngIf="modal.context.data.content.body.type == 'text'">
      <div class="popup-body" *ngIf="modal.context.data.content.body.data">
        {{ modal.context.data.content.body.data }}
      </div>
    </div>

    <div class={{modal.context.data.footer.className}}>
      <div *ngFor="let btn of modal.context.data.footer.buttons">
        <button
          [ngClass]="{'sb-btn sb-btn-normal sb-btn-primary':true,'sb-btn-disabled':isChecked == false && btn.type =='accept' && modal.context.data.content.body.type == 'checkbox'}"
          [disabled]="!isChecked && modal.context.data.content.body.type == 'checkbox' && btn.type=='accept'"
          tabindex="0" (click)="getMethod(btn)" autofocus>
          {{ btn.buttonText }}
        </button>
      </div>
    </div>
  </div>
</div>

./alert-modal.component.scss 

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;

.popup {
  border-radius: none !important;
  background: var(--sb-modal-content-bg);
  color: var(--sb-text);
  padding: calculateRem(16px);
}
.popup-header {
  color: var(--sb-text);
  span {
    justify-content: flex-start;
    font-size: calculateRem(16px);
    font-weight: bold;
  }
}

.alignRight {
  float: right;
  color: var(--red-400);
  i.icon {
    margin: 0;
  }
}

.popup-body {
  color: var(--sb-text);
  font-size: calculateRem(14px);
  padding: calculateRem(16px) 0 calculateRem(24px);
}

.popup-body-checkbox {
  display: flex;
  gap: calculateRem(10px);
  padding: calculateRem(20px) calculateRem(15px);

  input {
    margin-top: calculateRem(2px);
    margin-right: calculateRem(10px);
  }

  label {
    font-size: calculateRem(14px);
    font-weight: 500;
    line-height: 1.3em;
    color: var(--sb-text);
    text-align: justify;
  }
}

.single-btn {
  display: flex;
  justify-content: center;
  padding: calculateRem(10px) calculateRem(10px);
}

.double-btn {
  display: flex;
  justify-content: flex-end;
  padding: calculateRem(10px) calculateRem(10px);

  button {
    margin-right: calculateRem(15px);
  }
}

.double-btn-circle {
  display: flex;
  justify-content: flex-end;
  font-size: calculateRem(14px);
  padding: calculateRem(10px) calculateRem(10px);
  button {
    margin-right: calculateRem(14px);
    border-radius: 50%;
    height: calculateRem(55px);
    width: calculateRem(50px);
  }
}
.close.inside.icon{
  font-size: 0.875rem;
  padding: 0 !important;
  margin: 0 !important;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: 0px;
  position: absolute;
  top: 0;
  right: 0;
  }
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""