core/templates/components/common-layout-directives/common-elements/alert-message.component.ts - develop - githubmirror/oppia

core/templates/components/common-layout-directives/common-elements/alert-message.component.ts

70 строк2 KB

NITISH KUMAR

[GSoC 2026] M1.12 - Fix part of #24716: Add configurable dismiss button support for toast messages (#26786)

19 июл 2026, 13:37

19 июл 2026, 13:378460f3c

// Copyright 2016 The Oppia Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Component for Alert Messages
 */

import {Component, Input} from '@angular/core';
import {ToastrService} from 'ngx-toastr';
import {AlertsService} from 'services/alerts.service';
require('ngx-toastr/toastr.css');

export interface MessageObject {
  type: string;
  content: string;
  timeout: number;
  closeButton?: boolean;
}

@Component({
  selector: 'oppia-alert-message',
  template: '<div class="oppia-alert-message"></div>',
})
export class AlertMessageComponent {
  // These properties are initialized using Angular lifecycle hooks
  // and we need to do non-null assertion. For more information, see
  // https://github.com/oppia/oppia/wiki/Guide-on-defining-types#ts-7-1
  @Input() messageObject!: MessageObject;
  @Input() messageIndex!: number;

  constructor(
    private alertsService: AlertsService,
    private toastrService: ToastrService
  ) {}

  ngOnInit(): void {
    if (this.messageObject.type === 'info') {
      this.toastrService
        .info(this.messageObject.content, '', {
          timeOut: this.messageObject.timeout,
          closeButton: this.messageObject.closeButton,
        })
        .onHidden.toPromise()
        .then(() => {
          this.alertsService.deleteMessage(this.messageObject);
        });
    } else if (this.messageObject.type === 'success') {
      this.toastrService
        .success(this.messageObject.content, '', {
          timeOut: this.messageObject.timeout,
          closeButton: this.messageObject.closeButton,
        })
        .onHidden.toPromise()
        .then(() => {
          this.alertsService.deleteMessage(this.messageObject);
        });
    }
  }
}