LilSchool/web/src/components/Childs.vue

<template>
  <div class="user-child-form form__group">
    <div class="form__title">Карточка ребёнка</div>
    <div class="user-child-form__description">
      Вся информация конфиденциальна и не передается третьим лицам. Необходима только для персонализации наград,
      поздравлений с Днем Рождения и других персонализированных акций.
    </div>
    <div class="tabs">
      <div class="user-child-form__tabs tabs__nav">
        <a class="user-child-form__tab tabs__btn" v-for="(child, index) in childs" :key="index" href="#"
           v-bind:class="{active: selectedIndex == index}" @click.prevent="select(index)">
          {{ child.first_name ? (child.first_name + '&nbsp;' + child.last_name) : ('Ребенок ' + (index || '')) }}</a>
        <a href="#" class="tabs__btn" @click.prevent="add()">Добавить ребенка</a>
      </div>
    </div>
    <div class="tabs__container">
      <div v-for="(child, index) in childs" :key="index" class="tabs__item js-tabs-item"
           v-bind:style="{display: selectedIndex == index ? 'block' : ''}">
        <div class="form__fieldset">
          <input type="hidden" name="child_id" :value="child.id" />
          <div class="form__field field" v-bind:class="{error: child.errors && child.errors.gender}">
            <div class="field__label">ИМЯ РЕБЕНКА</div>
            <div class="field__wrap">
              <input name='child_first_name' class="field__input" type="text" placeholder="Имя"
                     v-model="child.first_name">
            </div>
            <div v-if="child.errors && child.errors.first_name" class="field__error">{{ child.errors.first_name }}</div>
          </div>
          <div class="form__field field" v-bind:class="{error: child.errors && child.errors.last_name}">
            <div class="field__label">ФАМИЛИЯ РЕБЕНКА</div>
            <div class="field__wrap">
              <input name='child_last_name' id="child-last-name" class="field__input" type="text" placeholder="Фамилия"
                     v-model="child.last_name">
            </div>
            <div v-if="child.errors && child.errors.last_name" class="field__error">{{ child.errors.last_name }}</div>
          </div>
        </div>
        <div class="form__fieldset">
          <div class="form__field field" v-bind:class="{error: child.errors && child.errors.birthday}">
            <div class="field__label">ДАТА РОЖДЕНИЯ</div>
            <div class="field__wrap">
              <vue-datepicker input-class="field__input" name="child_birthday" language="ru" format="dd/MM/yyyy"
              v-model="child.birthday" placeholder="dd/mm/yyyy"/>
            </div>
            <div v-if="child.errors && child.errors.birthday" class="field__error">{{ child.errors.birthday }}</div>
          </div>
          <div class="form__field field" v-bind:class="{error: child.errors && child.errors.gender}">
            <div class="field__label">ПОЛ</div>
            <div class="field__wrap">
              <lil-select :value.sync="child.gender" :options="genders" value-key="0" title-key="1"/>
              <input name='child_gender' type="hidden" v-model="child.gender">
            </div>
            <div v-if="child.errors && child.errors.gender" class="field__error">{{ child.errors.gender }}</div>
          </div>
        </div>
        <a href="#" @click.prevent="remove(index)">Удалить</a>
      </div>
    </div>
  </div>
</template>

<script>
    import DatePicker from 'vuejs-datepicker';
    import LilSelect from './inputs/LilSelect';

    export default {
        name: "childs",
        props: ['childs'],
        data() {
            return {
                selectedIndex: 0,
                selectedChild: null,
                genders: [
                    ['n', 'М / Ж'],
                    ['f', 'Ж'],
                    ['m', 'М'],
                ]
            }
        },
        methods: {
            add(){
                this.childs.push({
                    first_name: '',
                    last_name: '',
                    birthday: '',
                    gender: 'n',
                    errors: {},
                });
                this.select(this.childs.length - 1);
            },
            remove(index){
                if(! confirm('Вы действительно хотите удалить данные о ребенке?')){
                    return;
                }
                this.childs.splice(index, 1);
                if(! this.childs.length){
                  this.add();
                }
                else if(this.selectedIndex == index){
                    this.select(0);
                }
            },
            select(index){
                this.selectedIndex = index;
                this.selectedChild = this.childs[index];
            }
        },
        mounted(){
            for(let i in this.childs){
                if(this.childs[i].errors){
                    this.select(i);
                }
            }
        },
        components: {
            'vue-datepicker': DatePicker,
            LilSelect,
        }
    }
</script>