Turn a promise into an observation

Question

tries to convert the function of the first promise swal to observable and try to use the cancel action. Can someone help me with the pls syntax.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger',
  buttonsStyling: false
}).then(function () {
  swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  )
}, function (dismiss) {
  // dismiss can be 'cancel', 'overlay',
  // 'close', and 'timer'
  if (dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

So far I have the following:

export class DialogService {
    confirm(title: string, message: string):Observable<any> {
        return Observable.fromPromise(swal({
            title: title,
            text: message,
            type: 'warning',
            showCancelButton: true
        }));
    }; }

How to add a function function (dismiss)to the above?

Answer 1

I'm not sure what swaluses native Promiseapi, I think it uses a promise library for JavaScript like q or something else.

export class DialogService {
    confirm(title: string, message: string):Observable<any> {
       return Observable.create( (observer: any) => {
                 swal({
                   title: title,
                   text: message,
                   type: 'warning',
                   showCancelButton: true
                 }).then((data)=>{
                    observer.next(data);
                 },(reason)=>{
                    observer.error(reason);
                 })
            })
     }
}

Answer 2

Once you are subscribed to Observable, you can pass "catch" from Promise.

const subscription = Observable.fromPromise(...).subscribe(
  function () {
    console.log('Deleted!');
   },
  function (dismiss) {
    console.log('Dismiss', dismiss);
  })

, , Promises/A +.

: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/frompromise.md

Answer 3

Nvm, I got the following:

    return Observable.create((observer) => {
        if (component.isUntouched()) {
            observer.next(true);
        } else {
            swal({
                title: 'Sure?',
                text: 'Not saved, are you sure?',
                type: 'warning',
                showCancelButton: true
            }).then(() => {
                observer.next(true);
            }, () => {
                observer.next(false);
            })
        }
    });

For completeness only, component.isUntouched()defined as follows:

@ViewChild('appForm') appForm: NgForm;
... 
isFormTouched():boolean{
    return this.eventForm.dirty;
}

And in the / html template:

<form class="form form-horizontal" (ngSubmit)="submitEvent()" #appForm="ngForm">
  ..
</form>