Commit d09418c7 authored by Korko's avatar Korko
Browse files

Separate participant as a distinct component

parent 19988212
This diff is collapsed.
This diff is collapsed.
......@@ -3,10 +3,10 @@ var alertify = require('alertify.js');
var SmsTools = require('./smsTools.js');
var Vue = require('vue');
var VueAutosize = require('vue-autosize')
Vue.use(VueAutosize)
var VueAutosize = require('vue-autosize');
Vue.use(VueAutosize);
var app = new Vue({
window.app = new Vue({
el: '#form',
data: {
......@@ -18,6 +18,42 @@ var app = new Vue({
maxSms: global.maxSms
},
components: {
participant: {
template: '#participant-template',
props: ['idx', 'participants'],
data: function() {
return {
name: '',
email: '',
phone: '',
};
},
computed: {
participantNames: function() {
var names = [];
this.participants.forEach(function(participant, idx) {
if(participant.name && idx !== this.idx) {
names.push({id: participant.id, value: idx, text: participant.name});
}
}.bind(this));
return names;
}
},
watch: {
name: function() {
this.$emit('changename', this.name);
},
email: function() {
this.$emit('changeemail', this.email);
},
phone: function() {
this.$emit('changephone', this.phone);
}
}
}
},
computed: {
emailUsed: function() {
......@@ -93,14 +129,10 @@ var app = new Vue({
name: '',
email: '',
phone: '',
partner: -1
id: 'id' + this.participants.length + (new Date()).getTime()
});
},
removeParticipant: function(idx) {
this.participants.splice(idx, 1);
},
submit: function(event) {
var postData = $(event.target).serializeArray();
var formURL = $(event.target).attr("action");
......
......@@ -48,8 +48,8 @@ Le mot clef \"{TARGET}\" est obligatoire dans le corps du message afin de donner
'phone.placeholder' => 'ex : 0612345678',
'partner.none' => 'Aucun',
'partner.remove' => 'Enlever',
'partner.add' => 'Ajouter un participant',
'participant.remove' => 'Enlever',
'participant.add' => 'Ajouter un participant',
'mail.title' => 'Titre du mail',
'mail.title.placeholder' => 'ex : Soirée secretsanta du 23 décembre chez Martin',
......
......@@ -207,37 +207,47 @@
</thead>
<tbody>
{{-- Default is two empty rows to have two entries at any time --}}
<tr class="participant" v-for="(participant, idx) in participants">
<td class="row">
<label>
<div class="input-group">
<span class="input-group-addon counter">@{{ idx+1 }}</span>
<input type="text" name="name[]" required="required" placeholder="@lang('form.name.placeholder')" v-model="participant.name" class="form-control participant-name" />
</div>
</label>
</td>
<td class="row border-left">
<input type="email" name="email[]" placeholder="@lang('form.email.placeholder')" v-model="participant.email" class="form-control participant-email" :required="!participant.phone" />
</td>
<td>
@lang('form.mail-sms')
</td>
<td class="row border-right">
<input type='tel' pattern='0[67]\d{8}' maxlength="10" name="phone[]" placeholder="@lang('form.phone.placeholder')" v-model="participant.phone" class="form-control participant-phone" :required="!participant.email" />
</td>
<td class="row">
<select name="partner[]" class="form-control participant-partner" v-model="participant.partner">
<option value="-1">@lang('form.partner.none')</option>
<option v-for="(partner, pidx) in participants" v-if="partner.name && idx !== pidx" :value="pidx">@{{ partner.name }}</option>
</select>
</td>
<td class="row participant-remove-wrapper">
<button type="button" class="btn btn-danger participant-remove" :disabled="idx < 2" @click="removeParticipant(idx)"><span class="glyphicon glyphicon-minus"></span><span> @lang('form.partner.remove')</span></button>
</td>
<script type="text/x-template" id="participant-template" v-pre>
<tr class="participant" :id="'participant_'+idx">
<td class="row">
<label>
<div class="input-group">
<span class="input-group-addon counter">@{{ idx+1 }}</span>
<input type="text" name="name[]" required="required" placeholder="@lang('form.name.placeholder')" v-model="name" class="form-control participant-name" />
</div>
</label>
</td>
<td class="row border-left">
<input type="email" name="email[]" placeholder="@lang('form.email.placeholder')" v-model="email" class="form-control participant-email" :required="!phone" />
</td>
<td>
@lang('form.mail-sms')
</td>
<td class="row border-right">
<input type='tel' pattern='0[67]\d{8}' maxlength="10" name="phone[]" placeholder="@lang('form.phone.placeholder')" v-model="phone" class="form-control participant-phone" :required="!email" />
</td>
<td class="row border-right text-left">
<select name="partner[]" class="form-control participant-partner">
<option value="-1">@lang('form.partner.none')</option>
<option v-for="(partner, pidx) in participants" v-if="partner.name && idx !== pidx" :key="partner.id" :value="pidx">@{{ partner.name }}</option>
</select>
</td>
<td class="row participant-remove-wrapper">
<button type="button" class="btn btn-danger participant-remove" :disabled="participants.length <= 2" @click="$emit('delete')"><span class="glyphicon glyphicon-minus"></span><span> @lang('form.participant.remove')</span></button>
</td>
</tr>
</script>
<tr is="participant" v-for="(participant, idx) in participants" :key="participant.id"
:participants="participants"
:idx="idx"
@changename="participant.name = $event"
@changeemail="participant.email = $event"
@changephone="participant.phone = $event"
@delete="participants.splice(idx, 1)">
</tr>
</tbody>
</table>
<button type="button" class="btn btn-success participant-add" @click="addParticipant()"><span class="glyphicon glyphicon-plus"></span> @lang('form.partner.add')</button>
<button type="button" class="btn btn-success participant-add" @click="addParticipant()"><span class="glyphicon glyphicon-plus"></span> @lang('form.participant.add')</button>
</div>
<div class="row" id="contact">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment