gzbender
7 years ago
parent
a98587c9ca
commit
bb8871141f
12 changed files with 296 additions and 109 deletions
@ -0,0 +1,26 @@ |
||||
# Generated by Django 2.0.7 on 2019-06-06 21:05 |
||||
|
||||
from django.conf import settings |
||||
from django.db import migrations, models |
||||
import django.db.models.deletion |
||||
|
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('user', '0031_user_review_url'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.CreateModel( |
||||
name='Child', |
||||
fields=[ |
||||
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), |
||||
('first_name', models.CharField(max_length=30, verbose_name='Имя ребенка')), |
||||
('last_name', models.CharField(blank=True, default='', max_length=150, verbose_name='Фамилия ребенка')), |
||||
('gender', models.CharField(choices=[('n', 'не указан'), ('m', 'Мужчина'), ('f', 'Женщина')], default='n', max_length=1, verbose_name='Пол ребенка')), |
||||
('birthday', models.DateField(blank=True, null=True, verbose_name='День рождения ребенка')), |
||||
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='childs', to=settings.AUTH_USER_MODEL)), |
||||
], |
||||
), |
||||
] |
||||
@ -0,0 +1,21 @@ |
||||
# Generated by Django 2.0.7 on 2019-06-07 20:48 |
||||
|
||||
from django.db import migrations |
||||
|
||||
|
||||
def add_childs(apps, schema_editor): |
||||
User = apps.get_model('user', 'User') |
||||
Child = apps.get_model('user', 'Child') |
||||
for user in User.objects.exclude(child_first_name=''): |
||||
Child.objects.get_or_create(user=user, first_name=user.child_first_name, last_name=user.child_last_name, |
||||
gender=user.child_gender, birthday=user.child_birthday) |
||||
|
||||
class Migration(migrations.Migration): |
||||
|
||||
dependencies = [ |
||||
('user', '0032_child'), |
||||
] |
||||
|
||||
operations = [ |
||||
migrations.RunPython(add_childs), |
||||
] |
||||
@ -0,0 +1,119 @@ |
||||
<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 + ' ' + 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: '', |
||||
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> |
||||
Loading…
Reference in new issue