wizard trial

components.wizard-component.js

import Ember from 'ember';
const {isBlank, computed} = Ember;

export default Ember.Component.extend({
  nextText: 'Next',
  prevText: 'Prev',
  finalizeText: 'Finalize',
  
  init() {
    this._super(...arguments);
    
    if (isBlank(this.get('wizardFlow'))) {
      throw 'error';
    }
    
    if (isBlank(this.get('activeStep'))) {
      this.set('activeStep', this.get('wizardFlow')[0]);
    }
  },
  
  indexOfActiveStep: computed('activeStep', 'wizardFlow.[]', function(){
    return this.getIndexOfStep(this.get('activeStep'));
  }),
  
  getIndexOfStep: function(stepId) {
    return this.get('wizardFlow').findIndex((item)=>{return item===stepId});
  },
  
  performTransition(stepIncrement, activeStep) {
   	let indexOfStepToBeActivated;

    if (isBlank(activeStep)) {
      indexOfStepToBeActivated = this.get('indexOfActiveStep') + stepIncrement;
      activeStep = this.get('wizardFlow')[indexOfStepToBeActivated];
    } else {
      indexOfStepToBeActivated = this.getIndexOfStep(activeStep);
    }

    if (indexOfStepToBeActivated === this.get('wizardFlow.length')) {
      let wizardFinalizedAction = this.get('wizardFinalized') || (()=>{});
      wizardFinalizedAction();
    } else {
      this.set('activeStep', activeStep);
    }
  },
  
  actions: {
    nextClicked(activeStep) {
      this.performTransition(1, activeStep);
    },
    
    prevClicked(activeStep) {
      this.performTransition(-1, activeStep);
  	}
  }
});

components.wizard-step.js

import Ember from 'ember';
const {computed, get} = Ember;
import {equal, array} from 'ember-awesome-macros';

export default Ember.Component.extend({
  
  nextButtonText: computed('isLastStep', function(){
    return this.get('isLastStep') ? this.get('finalizeText') : this.get('nextText');
  }),
  

  firstStep: array.first('wizardFlow'),
  lastStep: array.last('wizardFlow'),  
  isLastStep: equal('stepId', 'lastStep'),
  prevHidden: equal('stepId', 'firstStep'),
  isActive: equal('stepId', 'activeStep'),
  isInFlow: array.includes('wizardFlow', 'stepId'),
  
  actions: {
    prevClicked() {
      let action = this.get('prevClicked') || (()=>{}); 
      Ember.RSVP.hash({result: action()}).then((json)=>
        this.get('internalPrevClicked')(get(json, 'result.activeStep'))
      );
    },
    
    nextClicked(){
      let action = this.get('nextClicked') || (()=>{});
      Ember.RSVP.hash({result: action()}).then((json)=>
        this.get('internalNextClicked')(get(json, 'result.activeStep'))
      );
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
    
  wizardFlow: [1,2,3],
  
  actions: { 
    step1NextClicked() {
      
      return new Ember.RSVP.Promise((resolve)=>{
        Ember.run.later(()=>resolve({}), 1000);
      });
    },
    
    step2NextClicked() {
     	Ember.run(()=>this.set('wizardFlow', [1,2,4,5]));
			//this.set('wizardFlow', [1,2,4,5]);
    },
    
    wizardFinalized() {
      alert('wizard finailzed');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#wizard-component wizardFlow=wizardFlow wizardFinalized=(action 'wizardFinalized') as |wizard|}}
  {{#wizard.step title='Step1' nextClicked=(action 'step1NextClicked')  stepId=1}}
    Deneme
  {{/wizard.step}}
  {{#wizard.step title='Step2' nextClicked=(action 'step2NextClicked') stepId=2}}
    Deneme2
  {{/wizard.step}}
  {{#wizard.step title='Step3' stepId=3}}
    Deneme3
  {{/wizard.step}}
  {{#wizard.step title='Step4' stepId=4}}
    Deneme4
  {{/wizard.step}}
  {{#wizard.step title='Step5' stepId=5}}
    Deneme5
  {{/wizard.step}}
{{/wizard-component}}
<br>
<br>

templates.components.wizard-component.hbs

{{yield (hash activeStep=activeStep
step=(component 'wizard-step' activeStep=activeStep wizardFlow=wizardFlow internalNextClicked=(action 'nextClicked') internalPrevClicked=(action 'prevClicked') nextText=nextText prevText=prevText finalizeText=finalizeText)
) }}

templates.components.wizard-step.hbs

{{#if isInFlow}}
  <h4>{{title}}</h4>
  {{#if isActive}}
    {{yield}}<br>
    {{#unless prevHidden}}
      <button disabled={{prevDisabled}} onclick={{action 'prevClicked'}}>{{prevText}}</button>
    {{/unless}}
    <button disabled={{nextDisabled}} onclick={{action 'nextClicked'}}>{{nextButtonText}}</button>
  {{/if}}
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
  	"ember-truth-helpers": "1.3.0",
    "ember-awesome-macros": "0.36.1"
  }
}