salix/front/core/components/step-control/step-control.js

import ngModule from '../../module';
import './style.scss';

export default class StepControl {
    constructor($state) {
        this.$state = $state;
    }

    set steps(steps) {
        if (!steps) return;

        this._steps = steps;

        if (this.currentStepIndex > 0)
            this.$state.go(this._steps[0].state);
    }

    set currentState(state) {
        if (!this.onStepChange)
            return this.$state.go(state);

        let change = this.onStepChange({state});

        if (typeof change === 'object' && change.then) {
            return change.then(isAllowed => {
                if (isAllowed)
                    this.$state.go(state);
            });
        }

        if (change)
            this.$state.go(state);
    }

    get totalSteps() {
        return this._steps.length;
    }

    get currentState() {
        return this.$state.current.name;
    }

    get currentStepIndex() {
        for (let i = 0; i < this._steps.length; i++) {
            if (this._steps[i].state == this.$state.current.name)
                return i;
        }
    }

    onPreviousClick() {
        let state = this._steps[this.currentStepIndex - 1].state;

        this.currentState = state;
    }

    onNextClick() {
        let state = this._steps[this.currentStepIndex + 1].state;

        this.currentState = state;
    }

    canMovePrevious() {
        return this.currentStepIndex > 0;
    }

    canFinalize() {
        return this.currentStepIndex === this.totalSteps - 1;
    }

    canMoveNext() {
        return this.currentStepIndex < this.totalSteps - 1;
    }
}

StepControl.$inject = ['$state'];

ngModule.vnComponent('vnStepControl', {
    template: require('./step-control.html'),
    controller: StepControl,
    bindings: {
        steps: '<',
        onStepChange: '&?',
        onStepEnd: '&?'
    }
});