Hi everyone,
I’ve got a page which serves both for creating a new contact and editing an existing one (if there is an id or not in the url, the content will be pre-filled or not).
My issue: after having saved a new contact or edited an existing one, the page for creating a new one is now “filled” with the old values.
I say “filled”, because these values are linked to an object, and the object is correctly initialized as an empty object. So if I try to save the new contact, it will failed because the “model” is empty even if the view is filled…
How can I prevent the form from remember the previous values?
Thank you !
I am using f7 v1, vue.js, and I4m using the app-famework.
Below the source code:
<template>
<f7-page name="contact-edit" class="page-contact-edit" :cached="false" :domCache="false">
<f7-navbar :back-link="$lang('common-cancel')" sliding>
<f7-nav-center sliding>
{{ $route.params.contactId ? $lang('contactEdit-editContactTitle') : $lang('contactEdit-newContactTitle') }}
</f7-nav-center>
<f7-nav-right>
<f7-link id="form-contact-edit-save">{{$lang('common-ok')}}</f7-link>
</f7-nav-right>
</f7-navbar>
<form id="form-contact-edit">
<f7-list>
<f7-list-item>
<f7-input type="text" name="firstname" v-model="contact.firstname" :placeholder="$lang('contactEdit-form-firstname')" />
</f7-list-item>
<f7-list-item>
<f7-input type="text" name="lastname" v-model="contact.lastname" :placeholder="$lang('contactEdit-form-lastname')" :value="$route.params.contactId"/>
</f7-list-item>
<f7-list-item>
<f7-input type="text" name="company" v-model="contact.company" :placeholder="$lang('contactEdit-form-company')" />
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-item>
<f7-icon slot="media" f7="at" class="contact-info-icons"></f7-icon>
<f7-input type="text" name="email" v-model="contact.email" :placeholder="$lang('contactEdit-form-email')"/>
</f7-list-item>
<f7-list-item>
<f7-icon slot="media" f7="phone" class="contact-info-icons"></f7-icon>
<f7-input type="text" name="phone" v-model="contact.phone" :placeholder="$lang('contactEdit-form-phone')"/>
</f7-list-item>
<f7-list-item>
<f7-icon slot="media" f7="social_linkedin" class="contact-info-icons"></f7-icon>
<f7-input type="text" name="linkedin" v-model="contact.social.linkedinForm" :placeholder="$lang('contactEdit-form-linkedin')"/>
</f7-list-item>
<f7-list-item>
<f7-icon slot="media" f7="social_facebook" class="contact-info-icons"></f7-icon>
<f7-input type="text" name="facebook" v-model="contact.social.facebookForm" :placeholder="$lang('contactEdit-form-facebook')"/>
</f7-list-item>
<f7-list-item>
<f7-icon slot="media" f7="social_twitter" class="contact-info-icons"></f7-icon>
<f7-input type="text" name="twitter" v-model="contact.social.twitterForm" :placeholder="$lang('contactEdit-form-twitter')"/>
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-item smart-select smart-select-back-on-select :title="$lang('contactEdit-form-minFrequency')">
<select name="min-frequency" v-model="contact.minFrequencyText">
<option value="day" :data-display-as="$lang('contactEdit-form-minFrequency-day')">{{$lang('contactEdit-form-minFrequency-everyDay')}}</option>
<option value="week" :data-display-as="$lang('contactEdit-form-minFrequency-week')">{{$lang('contactEdit-form-minFrequency-everyWeek')}}</option>
<option value="fortnight" :data-display-as="$lang('contactEdit-form-minFrequency-fortnight')">{{$lang('contactEdit-form-minFrequency-everyFortnight')}}</option>
<option value="month" :data-display-as="$lang('contactEdit-form-minFrequency-month')">{{$lang('contactEdit-form-minFrequency-everyMonth')}}</option>
<option value="trimester" :data-display-as="$lang('contactEdit-form-minFrequency-trimester')">{{$lang('contactEdit-form-minFrequency-everyTrimester')}}</option>
<option value="semester" :data-display-as="$lang('contactEdit-form-minFrequency-semester')">{{$lang('contactEdit-form-minFrequency-everySemester')}}</option>
<option value="year" :data-display-as="$lang('contactEdit-form-minFrequency-year')">{{$lang('contactEdit-form-minFrequency-everyYear')}}</option>
<option value="frozen" :data-display-as="$lang('contactEdit-form-minFrequency-frozen')">{{$lang('contactEdit-form-minFrequency-everyFrozen')}}</option>
</select>
</f7-list-item>
<f7-list-label>{{$lang('contactEdit-form-minFrequencyExplanation')}}</f7-list-label>
</f7-list>
<f7-list v-if="$route.params.contactId">
<f7-list-button color="red" id="form-contact-edit-delete">{{$lang('contactEdit-deleteContact')}}</f7-list-button>
</f7-list>
</form>
</f7-page>
</template>
<script>
import { Contact } from '../class/contact.class.js'
export default {
data: function () {
return {
contact: new Contact()
}
},
mounted: function () {
console.log('contact-edit page is mounted.')
var _this = this
/* setTimeout(function() {
document.getElementById("form-contact-edit").reset();
}, 3000); */
// If we are editing the contact, we fill all the inputs
if (this.$route.params.contactId) {
this.$fireFS(
'users/' + this.$user.uid + '/contacts/' + this.$route.params.contactId
).onSnapshot(function (doc) {
if (doc.exists) {
console.log('Contact before load from DB', _this.contact.uid)
_this.contact = new Contact()
_this.contact.loadFromDB(doc.data(), doc.id)
_this.$forceUpdate()
console.log('Contact after load from DB', _this.contact.uid)
}
})
} else {
// else we ensure they are all empty
console.log(_this.contact)
document.getElementById('form-contact-edit').reset()
this.contact = new Contact()
console.log('Contact is new', this.contact.firstname)
this.$forceUpdate()
}
// Click on Save button
document
.getElementById('form-contact-edit-save')
.addEventListener('click', function () {
console.log('Start saving a new contact')
// We define our new Contact object and we do some input checks
console.log(_this.contact)
let newContact = _this.contact.exportToDB()
console.log(newContact)
// If we have the required information (at least a name), we attempt to save the contact
if (newContact.name || newContact.firstname) {
// If the contact already exist, we replace it
if (_this.contact.uid) {
_this
.$fireFS(
'users/' + _this.$user.uid + '/contacts/' + _this.contact.uid
)
.set(newContact)
// If we successfully saved the contact
.then(function (docRef) {
console.log('Contact updated')
})
// If updating the contact failed
.catch(function (error) {
console.error('Error updating the contact: ', error)
// We raise an alert to the user
alert(_this.$lang('contactEdit-update-failedFirebase'))
})
} else {
// else we create a new one
_this
.$fireFS('users/' + _this.$user.uid + '/contacts')
.add(newContact)
// If we successfully saved the contact
.then(function (docRef) {
console.log('New contact created with ID: ', docRef.id)
})
// If creating the contact failed
.catch(function (error) {
console.error('Error creating the contact: ', error)
// We raise an alert to the user
alert(_this.$lang('contactEdit-save-failedFirebase'))
})
}
// We reset the "contact edit" form
_this.contact = new Contact()
_this.$f7.initSmartSelects('.page-contact-edit') // update the "smart select" value
// We close the "contact edit" page
_this.$router.back()
} else {
alert(_this.$lang('contactEdit-save-failedMissInformation'))
}
})
// Click on Delete button
if (document.getElementById('form-contact-edit-delete')) {
document
.getElementById('form-contact-edit-delete')
.addEventListener('click', function () {
_this.$f7.confirm(
'The deletion of the contact cannot be undone.',
'Are you sure?',
function () {
console.log('Start deleting the contact')
_this
.$fireFS(
'users/' + _this.$user.uid + '/contacts/' + _this.contact.uid
)
.delete()
.then(function () {
console.log('Contact successfully deleted!')
})
.catch(function (error) {
console.error('Error deleting contact: ', error)
})
// We close the "contact edit" page
_this.$router.back()
}
)
})
}
}
}
</script>