🐀 💡 🤸🏿 Kami membungkus dalam jendela konfirmasi modal Janji 🌺 🧕🏻 🤜🏿

Ketika pengguna melakukan beberapa tindakan kritis dan / atau tidak dapat diubah, sebelum mengirim permintaan ke server, Anda perlu meminta konfirmasi kepada pengguna.

Sebagai aturan, modal "Apakah Anda yakin ingin melakukan ini dan itu dan itu" ditampilkan dan ada dua tombol di bawah ini: Ya dan Tidak. Jika pengguna mengklik "ya", maka kami mengirim permintaan ke server dan menutup modalnya. Jika tidak, tutup saja modalnya.

Ini adalah fungsi standar yang umum digunakan di beberapa tempat dalam suatu proyek. Juga, ketika membangun fungsionalitas proyek, kemungkinan akan menambahkan beberapa tempat lagi di mana modal dengan konfirmasi diperlukan. Oleh karena itu, untuk menghindari duplikasi kode, secara jelas modal semacam itu harus dikeluarkan dalam komponen terpisah. Untuk menghindari godaan palu kruk, komponen ini harus serbaguna dan mudah digunakan.

Mari kita beralih dari lirik ke aksi. Untuk menampilkan modal, kami akan menggunakan Bootstrap.

Sebenarnya versi saya dari komponen seperti itu:

yes-no-modal.component.html

<div bsModal #yesNoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-{{type}}" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{title}}</h4>
        <button type="button" class="close" (click)="onNoClick()" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{body}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onNoClick()">{{noBtnText}}</button>
        <button type="button" class="btn btn-{{type}}" (click)="onYesClick()">{{yesBtnText}}</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

yes-no-modal.component.ts

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-yes-no-modal',
  templateUrl: './yes-no-modal.component.html',
  styleUrls: ['./yes-no-modal.component.css']
})
export class YesNoModalComponent implements OnInit {

  @ViewChild('yesNoModal') public yesNoModal: ModalDirective;

  @Input() private type = 'info';
  @Input() private title = '';
  @Input() private body = '';
  @Input() private yesBtnText = '';
  @Input() private noBtnText = '';

  constructor() { }

  ngOnInit(): void {
  }

  public showAsync(data = null): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      this.yesNoModal.show();
      this.onYesClick = () => {
        this.yesNoModal.hide();
        resolve(data);
      };
      this.onNoClick = () => {
        this.yesNoModal.hide();
        reject(data);
      };
    });
  }

  private onYesClick(): any {}
  private onNoClick(): any {}

}

Saya memasukkan judul peringatan, teks peringatan, skema warna / tingkat keparahan (bahaya, info, peringatan) ke dalam parameter, Anda juga dapat mendefinisikan kembali label pada tombol.

Untuk menunjukkan modal, panggil showAsync, di mana kami dapat mentransfer data sewenang-wenang. Kami mendapatkan data yang sama dalam resolusi / penolakan.

Selanjutnya, hubungkan modal ke komponen lain:

account.component.html

<app-yes-no-modal
  #deleteModal
  body="     ?"
  title=""
  type="danger"
></app-yes-no-modal>
<button (click)="delete()"></button>

account.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {YesNoModalComponent} from '../_common/yes-no-modal/yes-no-modal.component';
import {DeleteUserEndpoint} from '../../api/delete-user.endpoint';
import {ErrorService} from '../../services/error/error.service';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.css'],
  providers: [DeleteUserEndpoint]
})
export class AccountComponent implements OnInit {


  @ViewChild('deleteModal') public deleteModal: YesNoModalComponent;

  constructor (private deleteUserEndpoint: DeleteUserEndpoint) {
  }

  delete(data) {
    this.deleteModal.showAsync(data).then(result => {
      this.deleteUserEndpoint.execute(result);
    });
  }

  ngOnInit(): void {
  }
}

Menurut pendapat saya, penggunaan solusi semacam itu terlihat sesederhana dan mudah dibaca.

Sebagai perbandingan, saat menggunakan EventEmitter, Anda harus mendefinisikan dua metode di setiap komponen - showDeleteModal (), yang dipanggil dengan mengklik tombol delete, dan metode delete (), yang dipanggil oleh event modal. Jika Anda memiliki beberapa modals seperti itu dalam satu komponen untuk tindakan pengguna yang berbeda, maka keterbacaan kode sudah akan terganggu.

Dalam komentar, seperti biasa, saya mengharapkan kritik yang konstruktif dan masuk akal.

Kami membungkus dalam jendela konfirmasi modal Janji

More articles: