Confirmer Wizard Example

components.json-output.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  tagName: 'pre',
  classNames: ['json-output'],
  
  output: computed('json', function() {
    return JSON.stringify(this.json, null, 2);
  })
});

components.my-wizard.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import Confirmer from 'confirmer';

const STEPS = Object.freeze({
  ONE: 'one',
  TWO: 'two',
  THREE: 'three'
});

const STEP_TITLES = Object.freeze({
  [STEPS.ONE]: 'Step One',
  [STEPS.TWO]: 'Step Two',
  [STEPS.THREE]: 'Step Three'
});

export default Component.extend({
  STEPS, STEP_TITLES,
  
  stepMap: computed('currentStep', function() {
    return { [this.currentStep]: true };
  }),
  
  openModal() {
    return new Confirmer(resolver => {
      this.setProperties({ resolver, result: {} });
      resolver.dispose(() => {
        this.setProperties({ resolver: null, result: null });
      });
      this.waitForStepOne()
      	.onConfirmed(() => resolver.confirm(this.result))
        .onRejected(resolver.reject)
        .onCancelled(resolver.cancel)
        .catch(resolver.error);
    });
  },
  
  waitForStep(currentStep) {
    return new Confirmer(stepResolver => {
      this.setProperties({ stepResolver, currentStep });
    }).onConfirmed(v => this.result[currentStep] = v);
  },
  
  waitForStepOne() {
    return this.waitForStep(STEPS.ONE)
    	.onConfirmed(() => this.waitForStepTwo());
  },
  
  waitForStepTwo() {
    return this.waitForStep(STEPS.TWO)
    	.onConfirmed(() => this.waitForStepThree())
    	.onRejected(() => this.waitForStepOne());
  },
  
  waitForStepThree() {
    return this.waitForStep(STEPS.THREE)
    	.onRejected(() => this.waitForStepTwo());
  },
  
  didInsertElement() {
    this._super(...arguments);
    this.registerManager({
      open: () => this.openModal(),
      confirm: v => this.resolver.confirm(v),
      reject: v => this.resolver.reject(v),
      cancel: v => this.resolver.cancel(v),
      error: err => this.resolver.error(err)
    });
  },
  
  actions: {
    resolve(method, value) {
      this.stepResolver[method](value);
    }
  }
});

controllers.application.js

import Controller from '@ember/controller';

export default Controller.extend({
  wizardResult: "Wizard has not been opened yet.",
  
  actions: {
    async showWizard() {
      try {
        this.set('wizardRunning', false);
        let result = await this.wizardManager.open();
        this.set('wizardResult', result);
      } finally {
        this.set('wizardRunning', false);
      }
    }
  }
});

templates.application.hbs

<div class="containter">
  <div class="columns">
    <div class="column col-1"></div>
    <div class="column col-10">

      <JsonOutput @json={{this.wizardResult}}/>

      <button
        class="btn btn-primary"
        disabled={{this.wizardRunning}}
        {{action "showWizard"}}
      >
        Open Wizard
      </button>

    </div>
    <div class="column col-1"></div>
  </div>
</div>

<MyWizard @registerManager={{action (mut this.wizardManager)}}/>

templates.components.json-output.hbs

<code>{{this.output}}</code>

templates.components.my-wizard.hbs

<div class="modal {{if this.resolver "active"}}">
  <a
    class="modal-overlay"
    aria-label="Close"
    role="button"
    {{action "resolve" "cancel"}}
  ></a>

  <div class="modal-container">
    <div class="modal-header">
      <a
        class="btn btn-clear float-right"
        aria-label="Close"
        {{action "resolve" "cancel"}}
      ></a>
      <div class="modal-title h5">
        My Wizard - {{get this.STEP_TITLES this.currentStep}}
      </div>
    </div>
    <div class="modal-body">
      <div class="content">
        {{#if this.stepMap.one}}
          Step one!
        {{/if}}

        {{#if this.stepMap.two}}
          Step Two!
        {{/if}}

        {{#if this.stepMap.three}}
          Step Three!
        {{/if}}
      </div>
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "spectre_css": "https://unpkg.com/spectre.css/dist/spectre.min.css",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-confirmed": "2.5.0"
  }
}