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

<template>

  <h2>{{ $t('pick_social_issue') }}</h2>


  <div id="awc_create_form">

    <div id="picking">
      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
        
      <div v-for="si in socialIssues">
        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
      </div>

      <div v-if="hasSocialIssuePicked">
        <h2>{{ $t('pick_an_action') }}</h2>

        <vue-multiselect
          v-model="socialActionPicked"
          label="text"
          :options="socialActionsReachables"
          :searchable="true"
          :close-on-select="true"
          :show-labels="true"
          track-by="id"
        ></vue-multiselect> 
      </div>

      <div v-if="isLoadingSocialActions">
        <p>spinner</p>
      </div>
    </div>

    <div v-if="hasSocialActionPicked" id="start_date">
      <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
    </div>

    <div v-if="hasSocialActionPicked" id="end_date">
      <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
    </div>

    <div id="confirm">
      <div v-if="hasErrors">
        <p>{{ $t('form_has_errors') }}</p>

        <ul>
          <li v-for="e in errors">
            {{ e }}
          </li>
        </ul>
      </div>

      <div>
        <ul class="record_actions">
          <li class="cancel">
            <a href="#" class="sc-button bt-cancel">
              {{ $t('action.cancel') }}
            </a>
          </li>
          <li v-if="hasSocialActionPicked">
            <button class="sc-button bt-save" v-show="!isPostingWork" @click="submit">
              {{ $t('action.save') }}
            </button>
            <button class="sc-button bt-save" v-show="isPostingWork" disabled>
              {{ $t('Save') }}
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<style lang="scss">

#awc_create_form {
  display: grid;
  grid-template-areas: 
    "picking picking"
    "start_date end_date"
    "confirm confirm"
    ;
  grid-template-columns: 50% 50%;
  column-gap: 1.5rem;

  #picking {
    grid-area: picking;
  }

  #start_date {
    grid-area: start_date;
  }

  #end_date {
    grid-area: end_date;
  }

  #confirm {
    grid-area: confirm;
  }
}
</style>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import VueMultiselect from 'vue-multiselect';
import { dateToISO, ISOToDate } from 'ChillMainAssets/js/date.js';

const i18n = {
  messages: {
    fr: {
      startDate: "Date de début",
      endDate: "Date de fin",
      form_has_errors: "Le formulaire comporte des erreurs",
      pick_social_issue: "Choisir une problématique sociale",
      pick_an_action: "Choisir une action d'accompagnement",
      pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",

    }
  }
}

export default {
  name: 'App',
  components: {
    VueMultiselect,
  },
  methods: {
    submit() {
      this.$store.dispatch('submit');
    }
  },
  i18n,
  computed: {
    ...mapState([
      'socialIssues',
      'socialActionsReachables',
      'errors',
    ]),
    ...mapGetters([
      'hasSocialIssuePicked',
      'hasSocialActionPicked',
      'isLoadingSocialActions',
      'isPostingWork',
      'hasErrors',
    ]),
    socialIssuePicked: {
      get() {
        let s = this.$store.state.socialIssuePicked;

        if (s === null) {
          return null;
        }

        return s.id;
      },
      set(value) {
        this.$store.dispatch('pickSocialIssue', value);
      }
    },
    socialActionPicked: {
      get() {
        return this.$store.state.socialActionPicked;
      },
      set(value) {
        this.$store.commit('setSocialAction', value);
      }
    },
    startDate: {
      get() {
        let d = this.$store.state.startDate;
        return dateToISO(d);
      },
      set(value) {
        this.$store.commit('setStartDate', ISOToDate(value));
      }
    },
    endDate: {
      get() {
        return dateToISO(this.$store.state.endDate);
      },
      set(value) {
        this.$store.commit('setEndDate', ISOToDate(value));
      }
    },
  }
}

</script>