chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue

<template>
  <ol class="breadcrumb">
    <li
        v-for="s in steps"
        class="breadcrumb-item" :class="{ active: step === s }"
    >
        {{ $t('household_members_editor.app.steps.'+s) }}
    </li>
  </ol>
  <concerned v-if="step === 'concerned'"></concerned>
  <household v-if="step === 'household'" @ready-to-go="goToNext"></household>
  <household-address v-if="step === 'household_address'"></household-address>
  <positioning v-if="step === 'positioning'"></positioning>
  <dates v-if="step === 'confirm'"></dates>
  <confirmation v-if="step === 'confirm'"></confirmation>

  <ul class="record_actions sticky-form-buttons">
    <li class="cancel" v-if="step !== 'concerned'">
      <button class="btn btn-cancel" @click="goToPrevious">
        {{ $t('household_members_editor.app.previous') }}
      </button>
    </li>
    <li class="cancel" v-else-if="hasReturnPath">
      <button class="btn btn-cancel" @click="goToPrevious">
        {{ $t('household_members_editor.app.cancel') }}
      </button>
    </li>
    <li v-if="step !== 'confirm'">
      <button class="btn btn-action" @click="goToNext" :disabled="!isNextAllowed">
        {{ $t('household_members_editor.app.next') }}&nbsp;<i class="fa fa-arrow-right"></i>
      </button>
    </li>
    <li v-else>
      <button class="btn btn-save" @click="confirm" :disabled="hasWarnings">
        {{ $t('household_members_editor.app.save') }}
      </button>
    </li>
  </ul>
</template>

<script>

import {mapGetters, mapState} from 'vuex';
import Concerned from './components/Concerned.vue';
import Household from './components/Household.vue';
import HouseholdAddress from './components/HouseholdAddress';
import Dates from './components/Dates.vue';
import Confirmation from './components/Confirmation.vue';
import Positioning from "./components/Positioning";

export default {
  name: 'App',
  components: {
    Positioning,
    Concerned,
    Household,
    HouseholdAddress,
    Dates,
    Confirmation,
  },
  data() {
    return {
        step: 'concerned',
    };
  },
  computed: {
    ...mapState({
      hasWarnings: (state) => state.warnings.length > 0 || state.errors.length > 0,
    }),
    steps() {
      let s = ['concerned', 'household'];

      if (this.$store.getters.isHouseholdNew) {
        s.push('household_address');
      }

      if (!this.$store.getters.isModeLeave) {
        s.push('positioning');
      }

      s.push('confirm');

      return s;
    },
    hasReturnPath() {
      let params = new URLSearchParams(window.location.search);

      return params.has('returnPath');
    },
    // return true if the next step is allowed
    isNextAllowed() {
      switch (this.$data.step) {
        case 'concerned':
          return this.$store.state.concerned.length > 0;
        case 'household':
          return this.$store.state.mode !== null;
        case 'household_address':
          return this.$store.getters.hasHouseholdAddress || this.$store.getters.isHouseholdForceNoAddress;
        case 'positioning':
            return this.$store.getters.hasHouseholdOrLeave
                && this.$store.getters.hasPersonsWellPositionnated;
      }

      return false;
    },
  },
  methods: {
    goToNext() {
      console.log('go to next');
      switch (this.$data.step) {
        case 'concerned':
          this.$data.step = 'household';
          break;
        case 'household':
          if (this.$store.getters.isHouseholdNew) {
            this.$data.step = 'household_address';
            break;
          } else if (this.$store.getters.isModeLeave) {
            this.$data.step = 'confirm';
            break;
          } else {
            this.$data.step = 'positioning';
            break;
          }
        case 'household_address':
          this.$data.step = 'positioning';
          break;
        case 'positioning':
          this.$data.step = 'confirm';
          break;
      }
    },
    goToPrevious() {
      if (this.$data.step === 'concerned') {
        let params = new URLSearchParams(window.location.search);
        if (params.has('returnPath')) {
          window.location.replace(params.get('returnPath'));
        } else {
          return;
        }
      }

      let s = this.steps;
      let index = s.indexOf(this.$data.step);
      if (s[index - 1] === undefined) {
        throw Error("step not found");
      }

      this.$data.step = s[index - 1];
    },
    confirm() {
      this.$store.dispatch('confirm');
    },
  }
}

</script>