I want to use the form I made in 'create' component in 'edit' component.
There are some properties in data object that i need to populate in edit-component that were empty in create-component, also I want to replace create() method with edit(), method which uses axios to communicate with API.
I am clueless how to proceed with this problem, also I thought this might be a pretty common question to ask but I didn't find any satisfying answer. Is there no way i can replace existing methods in child component? Should I make different component for html form and for relevant methods?
create-component
<template>
<div id="dashboard-form">
<button class="button modal-button"
data-target="#myModal"
@click="modalToggle">
Launch Form
</button>
<div class="modal" id="myModal"
:class="{'is-active': modalStatus}">
<div class="modal-backgound"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Fill a new entry</p>
<button class="delete"
aria-label="close"
@click="modalToggle">
</button>
</header>
<section class="modal-card-body">
<form action="post">
<div class="modal-form" v-if="step === 1">
<div class="field">
<label class="label">Parent's Name</label>
<div class="control">
<input type="text" class="input"
placeholder="Enter parent name here"
v-model="parentName"
v-validate="'required'"
name="parentName"
:class="{'is-danger': errors.has('parentName'),
'is-success': parentName!=='' && !errors.has('parentName')}">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('parentName')">
{{ errors.first('parentName')}}
</p>
</div>
<div class="field">
<label for="parentContact" class="label">
Parent's Contact Number
</label>
<div class="control">
<input type="tel" class="input"
placeholder="Enter 10 digit mobile number"
v-model="parentContact"
v-validate="{required: true, regex: /^[5-9]\d{9}$/}"
:class="{'is-danger': errors.has('parentContact'),
'is-success': parentContact!=='' && !errors.has('parentContact')}"
name="parentContact">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('parentContact')">
{{ errors.first('parentContact' )}}
</p>
</div>
<div class="field">
<label class="label">Student's Name</label>
<div class="control">
<input type="text" class="input is-success"
placeholder="enter student name here"
v-model="studentName"
name="studentName">
</div>
</div>
<div class="field">
<label class="label">Tutor's Name</label>
<div class="control">
<input type="text" class="input"
placeholder="Enter tutor's name here"
v-model="tutorName"
v-validate="'required'"
name="tutorName"
:class="{'is-danger': errors.has('tutorName'),
'is-success': tutorName!=='' && !errors.has('tutorName')}">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('tutorName')">
{{ errors.first('tutorName')}}
</p>
</div>
<div class="field">
<label for="tutorContact" class="label">
Tutor's Contact Number
</label>
<div class="control">
<input type="tel" class="input"
placeholder="Enter 10 digit mobile number"
v-model="tutorContact"
v-validate="{required: true, regex: /^[5-9]\d{9}$/}"
:class="{'is-danger': errors.has('tutorContact'),
'is-success': tutorContact!=='' && !errors.has('tutorContact')}"
name="tutorContact">
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('tutorContact')">
{{ errors.first('tutorContact') }}
</p>
</div>
<div class="field">
<label for="startingDate" class="label">
Tuition Started on
</label>
<div class="control">
<input type="date" class="input"
v-model="startingDate"
v-validate="'required'"
:class="{'is-danger': errors.has('startingDate'),
'is-success': startingDate!='' && !errors.has('startingDate')}"
name="startingDate">
</div>
<p class="help has-text-left"
v-show="errors.has('startingDate')">
{{ errors.first('startingDate') }}
</p>
</div>
<div class="field">
<label for="sessionDuration" class="label">
How long each session lasts(in hours)
</label>
<div class="control">
<input type="text" class="input"
v-model="sessionDuration"
v-validate="'required'"
:class="{'is-danger': errors.has('sessionDuration'),
'is-success': !errors.has('sessionDuration')}"
name="sessionDuration">
</div>
<p class="help has-text-left" v-show="errors.has('sessionDuration')">
{{ errors.first('sessionDuration') }}
</p>
</div>
<div class="field">
<label for="sessionsMonth" class="label">
Number of sessions in a month.
</label>
<div class="control">
<input type="number" class="input"
v-model="sessionsMonth"
v-validate="'required'"
:class="{'is-danger': errors.has('sessionsMonth'),
'is-success': !errors.has('sessionsMonth')}"
name="sessionsMonth">
</div>
<p class="help has-text-left"
v-show="errors.has('sessionsMonth')">
{{ errors.first('sessionsMonth') }}
</p>
</div>
<div class="field">
<label for="fees" class="label">
Fees Charged from Parents
</label>
<div class="control">
<input type="number" class="input"
v-model="fees" v-validate="'required|min_value:500'"
:class="{'is-danger': errors.has('fees'),
'is-success': !errors.has('fees')}"
name="fees">
</div>
<p class="help has-text-left"
v-show="errors.has('fees')">
{{ errors.first('fees') }}
</p>
</div>
<div class="field">
<label for="commission" class="label">
How much commission is being charged?
</label>
<div class="control">
<input type="number" class="input"
v-model="commission"
v-validate="'required|min_value:0|max_value:50'"
:class="{'is-danger': errors.has('commission'),
'is-success': !errors.has('commission')}"
name="commission">
</div>
<p class="help has-text-left"
v-show="errors.has('commission')">
{{ errors.first('commission') }}
</p>
</div>
<div class="field">
<label for="coordinator" class="label">Coordinator</label>
<div class="control">
<div class="select"
:class="{'is-success': coordinator!=='',
'is-danger': coordinator==='' && coordinatorIsFocused}">
<select name="coordinator" v-model="coordinator"
@focus.once="coordinatorToggle">
<option selected disabled>Name of Coordinator</option>
<option value="seth">Himanshu(Seth)</option>
<option value="hk">Himanshu(HK)</option>
<option value="anuj">Anuj</option>
</select>
</div>
</div>
<p class="help has-text-left"
v-show="coordinator==='' && coordinatorIsFocused">
Selecting one of the option is required
</p>
</div>
<div class="field">
<label for="paymentMode" class="label"></label>
<div class="control">
<div class="select"
:class="{'is-success': paymentMode!=='',
'is-danger': paymentMode==='' && paymentModeIsFocused}">
<select name="paymentMode" v-model="paymentMode"
@focus.once="paymentModeToggle">
<option disabled selected>Mode of Payment</option>
<option value="cash">Cash</option>
<option value="paytm">PayTM</option>
<option value="bank seth">Bank Seth</option>
<option value="bank anuj">Bank Anuj</option>
<option value="kotak">Kotak</option>
</select>
</div>
</div>
<p class="help has-text-left"
v-show="paymentMode==='' && paymentModeIsFocused">
Selecting one of the option is required
</p>
</div>
</div>
<div class="modal-form" v-if="step === 2">
<div class="field">
<p class="has-text-left">In which standard student is studing?</p>
<div class="control">
<div class="select"
:class="{'is-success': standard!='',
'is-danger': standard==='' && standardIsFocused}">
<select v-model="standard"
@focus.once="standardToggle()"
@change="emptySubjects()">
<option value="pre-primary">Pre-Primary</option>
<option value="1">Standard 1</option>
<option value="2">Standard 2</option>
<option value="3">Standard 3</option>
<option value="4">Standard 4</option>
<option value="5">Standard 5</option>
<option value="6">Standard 6</option>
<option value="7">Standard 7</option>
<option value="8">Standard 8</option>
<option value="9">Standard 9</option>
<option value="10">Standard 10</option>
<option value="11-sci">Standard 11 - Science</option>
<option value="11-com">Standard 11 - Commerce</option>
<option value="11-art">Standard 11 - Arts</option>
<option value="12-sci">Standard 12 - Science</option>
<option value="12-com">Standard 12 - Commerce</option>
<option value="12-art">Standard 12 - Arts</option>
</select>
</div>
</div>
<p class="help has-text-left is-danger"
v-show="standard==='' && standardIsFocused">
Selecting one of the option is required.
</p>
</div>
<p>Which subject(s) does the student need help with?</p>
<div class="field">
<div class="control" v-for="(subject,index) in subjectListFinal" :key="index">
<label class="checkbox">
<input type="checkbox" :value="subject" v-model="subjects" v-validate="'required'" name="subjects">
{{subject}}
</label>
</div>
</div>
<p class="help has-text-left is-danger"
v-show="errors.has('subjects')">
Select atleast one subject.
</p>
</div>
</form>
</section>
<footer class="modal-card-foot">
<div class="field is-grouped">
<button class="button is-link"
@click="prev" v-show="step===2">
Previous
</button>
<button class="button is-link"
@click="next" v-show="step===1">
Next
</button>
<button class="button is-link"
@click="validateBeforeSubmit" v-show="step===2">
Submit
</button>
</div>
</footer>
</div>
<label class="modal-close is-large" @click="modalToggle"></label>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'DashboardForm',
data () {
return {
modalStatus: false,
standardIsFocused: false,
coordinatorIsFocused: false,
paymentModeIsFocused: false,
step: 1,
parentName: '',
parentContact: '',
studentName: '',
tutorName: '',
tutorContact: '',
startingDate: '',
sessionDuration: '1',
sessionsMonth: 24,
fees: null,
commission: null,
coordinator: '',
paymentMode: '',
standard: '',
subjects: [],
prePrimarySubjects: [
'Abacus',
'Handwriting Basics',
'English Phonetics',
'English',
'KG Academics'
],
standard1To5Subjects: [
'All Subjects',
'Vedic Maths',
'Mathematics',
'Science',
'English',
'Hindi',
'Environmental Studies',
'Mathematics-Science (Combo)',
'Handwriting (English/Hindi)'
],
standard6To10Subjects:[
'Mathematics',
'Science',
'Computer Science',
'English',
'Hindi',
'Social Science',
'Sanskrit',
'Environmental Studies',
'French',
'German',
'Spanish',
'Mathematics-Science (Combo)',
'Olympiad Maths/Science'
],
standard11To12ArtsSubjects: [
'Geography',
'History',
'Political Science',
'Humanities',
'English',
'Psychology',
'Computer Science/Information Practices'
],
standard11To12CommerceSubjects: [
'Accounts',
'Business Studies',
'Economics',
'Mathematics',
'English',
'Psychology',
'Computer Science/Information Practices'
],
standard11To12ScienceSubjects: [
'Mathematics',
'Physics',
'Chemistry',
'English',
'PCB Combo',
'PCM Combo',
'Computer Science/Information Practices',
'Competitive Exam Preparation'
]
}
},
methods: {
modalToggle() {
this.modalStatus = !this.modalStatus
},
prev() {
this.step--
},
next() {
this.coordinatorToggle()
this.paymentModeToggle()
this.$validator.validate('parentName', this.parentName)
this.$validator.validate('parentContact', this.parentContact)
this.$validator.validate('tutorName', this.tutorName)
this.$validator.validate('tutorContact', this.tutorContact)
this.$validator.validate('startingDate', this.startingDate)
this.$validator.validate('sessionDuration', this.sessionDuration)
this.$validator.validate('sessionsMonth', this.sessionsMonth)
this.$validator.validate('fees', this.fees)
this.$validator.validate('commission', this.commission).then(() => {
if(!this.errors.any() && this.coordinator!=='' && this.paymentMode!==''){
this.step++
}
})
},
validateBeforeSubmit() {
this.$validator.validateAll().then(() => {
if(!this.errors.any()) {
this.addQuery()
this.modalToggle()
}
})
},
standardToggle() {
this.standardIsFocused = true
},
coordinatorToggle() {
this.coordinatorIsFocused = true
},
paymentModeToggle() {
this.paymentModeIsFocused = true
},
emptySubjects() {
this.subjects = []
},
addQuery() {
axios({
method: 'post',
url: 'http://127.0.0.1:8000/api/dashboard/',
data: {
parent_name: this.parentName,
parent_contact: this.parentContact,
student_name: this.studentName,
tutor_name: this.tutorName,
tutor_contact: this.tutorContact,
standard: this.standard,
subject: this.subjects,
starting_date: this.startingDate,
session_month: this.sessionsMonth,
session_duration: this.sessionDuration,
fees: this.fees,
commission: this.commission,
coordinator: this.coordinator,
mode_payment: this.paymentMode
}
}).then(() =>{
this.parentName = '',
this.subjects = [],
this.parentContact = '',
this.studentName = '',
this.tutorName = '',
this.tutorContact = '',
this.standard = '',
this.startingDate = '',
this.sessionsMonth = 24,
this.sessionDuration = '1',
this.fees = null,
this.commission = null,
this.coordinator = '',
this.paymentMode = '',
this.step = 1
})
.catch((error) => {
console.log(error);
});
}
},
computed: {
subjectListFinal: function() {
if (this.standard==='pre-primary'){
return this.prePrimarySubjects
}
else if (this.standard==='1'||this.standard==='2'||this.standard==='3'||this.standard==='4'||this.standard==='5') {
return this.standard1To5Subjects
}
else if (this.standard==='6'||this.standard==='7'||this.standard==='8'||this.standard==='9'||this.standard==='10') {
return this.standard6To10Subjects
}
else if (this.standard==='11-sci'||this.standard==='12-sci') {
return this.standard11To12ScienceSubjects
}
else if (this.standard==='11-com'||this.standard==='12-com') {
return this.standard11To12CommerceSubjects
}
else if (this.standard==='11-art'||this.standard==='12-art') {
return this.standard11To12ArtsSubjects
}
}
}
}
</script>
