Dec 2, 2020
0
Level 4
vuetify dialogs set to hide / show
I have nuxt project in that i required v-dialog to complete user registration but my form is coming from parent component "Familform.vue"
<template>
<!-- <div class="modal fade" id="modal-bloodline-info" tabindex="-1" aria-labelledby="modal-add-person" aria-hidden="true">-->
<!-- <div class="modal-dialog">-->
<!-- <div class="modal-content">-->
<!-- <div class="modal-header">-->
<!-- <h5 class="modal-title" id="modal-add-person">Add Person</h5>-->
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!-- <span aria-hidden="true">×</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- <div class="modal-body">-->
<!-- <ancestor-descendant-form></ancestor-descendant-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div>
<v-dialog
v-model="dialog"
width="500"
id = 'bloodlineForm'
>
<ancestor-descendant-form></ancestor-descendant-form>
</v-dialog>
</div>
</template>
<script>
import ancestorDescendantForm from "~/components/ancestorDescendantForm.vue";
export default {
name: "familyForm.vue",
components: {
'ancestorDescendantForm': ancestorDescendantForm
},
data(){
return{
dialog: false
}
}
}
</script>
<style scoped>
</style>
and wanted to open my v-dialog on action-edit on click event that is in "familyTree.vue" (child component)
<template>
<div id="wrapper-bloodline">
<file-loader v-if='isLoadComplete'></file-loader>
<family-controllers></family-controllers>
</div>
</template>
<script>
import fileLoader from "~/components/fileLoader.vue"
import familyControllers from "~/components/familyControllers.vue";
import { bloodline } from '../plugins/bloodline';
import { treeJson } from '../plugins/tree';
import {mapActions, mapState} from 'vuex'
import { Auth } from "aws-amplify";
export default {
name: "familyTree.vue",
components: {
'fileLoader': fileLoader,
'familyControllers': familyControllers
},
data () {
return {
isLoadComplete: true,
bloodlineObj: null,
bloodlineTree: null,
data: null,
rootUser: null,
userEmail: null,
test: '',
spouseId: null,
}
},
async mounted () {
//this.rootUser = localStorage.getItem('rootUser')
await this.getAuthUserCognito()
//await this.getUserConformation()
await this.personsDetails()
await this.treeRecord()
this.isLoadComplete = false
if (process.client){
$("a.external-tree").on("click", (event) => {
let spouse = $(event.currentTarget);
this.spouseId = spouse.attr('data-id');
this.getTreeSpouse();
});
}
},
computed: {
...mapState({ familyTree: (state) => state.familyTree.tree })
},
methods:{
...mapActions({
callTree: 'familyTree/callTree'
}),
getTreeSpouse(){
this.sendspouseId()
},
async sendspouseId(){
const spouseId = this.spouseId
if (process.browser) {
window.location.reload(true)
}
//console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',spouseId)
await this.$store.dispatch('familyTree/callTree', spouseId)
//var lastname = sessionStorage.getItem("spouseId");
//console.log('spouseId',lastname)
this.data = this.familyTree
//console.log(this.rootUser)
// crate bloodline instance
this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );
// create tree
this.bloodlineTree = this.bloodlineObj.render( this.data );
//this.bloodlineTree = this.bloodlineObj.render( treeJson );
// if (process.browser){
// $('a.action-edit').on( 'click', (event) => {
//
// // action link
// let actionLink = $(event.currentTarget);
// // set dynamic input hidden value
// $('input#active-node').val(actionLink.attr('data-id'));
//
// $('#modal-bloodline-info').modal('show');
// });
// }
},
// async getTreeSpouse(){
// await this.$axios.$get( process.env.BASE_URL+'/user/' + this.spouseId, {timeout: 120000 })
// .then(resp => {
// this.data = resp
//
// //console.log(this.rootUser)
//
// // crate bloodline instance
// this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );
//
// // create tree
// this.bloodlineTree = this.bloodlineObj.render( this.data );
// //this.bloodlineTree = this.bloodlineObj.render( treeJson );
//
// // if (process.browser){
// // $('a.action-edit').on( 'click', (event) => {
// //
// // // action link
// // let actionLink = $(event.currentTarget);
// // // set dynamic input hidden value
// // $('input#active-node').val(actionLink.attr('data-id'));
// //
// // $('#modal-bloodline-info').modal('show');
// // });
// // }
// })
// },
getAuthUserCognito(){
Auth.currentUserInfo()
.then(data => {
this.userEmail = data.attributes.email
//console.log(data.attributes.email)
})
},
async personsDetails() {
await this.$store.dispatch('familyTree/callTree')
},
async treeRecord(){
/////////////////////////////////////////////////
//using email id search tree from backend and display tree of user
////////////////////////////////////////////////
this.data = this.familyTree
//console.log(this.rootUser)
// crate bloodline instance
this.bloodlineObj = bloodline.init( 'wrapper-bloodline' );
// create tree
this.bloodlineTree = this.bloodlineObj.render( this.data );
//this.bloodlineTree = this.bloodlineObj.render( treeJson );
if (process.browser){
$('a.action-edit').on( 'click', (event) => {
// action link
let actionLink = $(event.currentTarget);
// set dynamic input hidden value
this.dialog = true
$('input#active-node').val(actionLink.attr('data-id'));
//$('#bloodlineForm').attr.on = true
//console.log('jkk',$('#bloodlineForm').click.stop = "dialog = true")
//$('#bloodlineForm').click.stop = "dialog = true"
$('#bloodlineForm').stop = "dialog = true"
//$('#modal-bloodline-info').modal('show');
});
}
},
}
}
</script>
<style scoped>
svg {
display:block;
width:258px;
height:258px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.tree {
fill: #E73E0D;
}
.circle-mask {
transform-origin: 50% 90%;
animation: scale 5s infinite ease-out;
}
.preloader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background: rgb(255,255,255);
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: opacity 0.3s linear;
}
@keyframes scale {
0%, 100% {
transform: scale(0.0);
}
7%, 90% {
transform: scale(0.4);
}
50% {
transform: scale(1);
}
}
</style>
and close v-dialog after user fill the form in ancestor.vue that contain my form
<template>
<!-- ------------------------------------
- element : modal
------------------------------------ -->
<div>
<v-card>
<v-card-title class="headline grey lighten-2">
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
@click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
<!-- <form method="POST" action="/family" @submit.prevent="onSubmit">-->
<!-- <input type="hidden" class="form-control" placeholder="First name" id="active-node" name="demo">-->
<!-- <div class="form-group">-->
<!-- <!– <label for="first_name">First Name</label> –>-->
<!-- <input-->
<!-- type="text"-->
<!-- class="form-control"-->
<!-- placeholder="First name"-->
<!-- id="first_name"-->
<!-- name="first_name"-->
<!-- v-model="UserData.name"-->
<!-- />-->
<!-- <!– <small id="emailHelp" class="form-text text-muted">First Name</small> –>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <!– <label for="surname">Sir Name</label> sir name speeling mistake –>-->
<!-- <input-->
<!-- type="text"-->
<!-- class="form-control"-->
<!-- placeholder="surname"-->
<!-- id="surname"-->
<!-- name="surname"-->
<!-- v-model="UserData.surname"-->
<!-- />-->
<!-- <!– <small id="d" class="form-text text-muted">Last Name</small> –>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <!– <label for="birthDate">Date of Birth</label>-->
<!-- indian format pending-->
<!-- –>-->
<!-- <input-->
<!-- type="date"-->
<!-- class="form-control"-->
<!-- placeholder="birthDate"-->
<!-- id="birthDate"-->
<!-- name="birthDate"-->
<!-- v-model="UserData.birthDate"-->
<!-- />-->
<!-- <!– <small id="c" class="form-text text-muted">Birth Date</small> –>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <!– <label for="gender">Add</label> –>-->
<!-- <select class="form-control" id="relationship" name="relationship" v-model="relationship">-->
<!-- <!– <select-->
<!-- class="form-control"-->
<!-- id="gender"-->
<!-- name="gender"-->
<!-- v-model="UserData.gender"-->
<!-- > –>-->
<!-- <option value="select" disabled>Select Relation</option>-->
<!-- <option value="father">Father</option>-->
<!-- <option value="mother">Mother</option>-->
<!-- <option value="wife">Wife</option>-->
<!-- <option value="husband">Husband</option>-->
<!-- <option value="son">Son</option>-->
<!-- <option value="daughter">Daughter</option>-->
<!-- </select>-->
<!-- </div>-->
<!-- <button type="submit" class="btn btn-primary">Submit</button>-->
<!-- </form>-->
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "form.vue",
data() {
return {
loading: false,
rootUser: '',
id: '',
UserData: {
name: '',
surname: '',
gender: '',
birthDate: '',
},
relationship: '',
isSubmitted: false,
errors: [],
}
},
async mounted() {
//this.rootUser = localStorage.getItem('rootUser')
await this.personsDetails()
if (sessionStorage.getItem("rootUser")){
this.rootUser = await sessionStorage.getItem("rootUser")
console.log('A')
}else {
this.rootUser = this.familyTree
console.log('B')
}
//this.rootUser = await sessionStorage.getItem("rootUser")
console.log('rootUser',sessionStorage.getItem("rootUser"))
//console.log(this.rootUser === localStorage.getItem('rootUser'))
},
computed: {
...mapState({ familyTree: (state) => state.familyTree.tree.id }),
},
methods:{
async personsDetails() {
await this.$store.dispatch('familyTree/callTree')
},
async onSubmit(){
// nullify previously set id
this.id = null;
this.isSubmitted = true;
this.loading = true;
// ------------------------------------
// - Must store data in const variable so
// its conevrt in object in object
// ------------------------------------ -->
if (
this.relationship === 'father'
|| this.relationship === 'husband'
|| this.relationship === 'son'){
this.UserData.gender = 'male';
} else {
this.UserData.gender = 'female';
}
if (
this.relationship === 'husband'
|| this.relationship === 'wife' ){
var user = {
name: this.UserData.name,
lastname: this.UserData.surname,
gender: this.UserData.gender,
dob: this.UserData.birthDate,
externalTreeId: 'demoId'
}
} else {
var user = {
name: this.UserData.name,
lastname: this.UserData.surname,
gender: this.UserData.gender,
dob: this.UserData.birthDate
}
}
// ------------------------------------
// - Insert in Relationship
// - Member id + relationship + rootId
// - body add user { name, surname, gender, birthday }
// - gender render on if check depend on relationship
// ------------------------------------ -->
let postUrlPromise = new Promise((resolve, reject) => {
let hiddenInput = document.querySelector('#active-node');
// set the id
let activeNodeId = hiddenInput.getAttribute('value');
// resolve
if( activeNodeId ) resolve( `${process.env.BASE_URL}/member/${activeNodeId}/${this.relationship}/${this.rootUser}` );
});
// create post url
let postUrl = await postUrlPromise;
console.log(postUrl)
// console.log( `${process.env.BASE_URL}/member/${this.id}/${this.relationship}/${this.rootUser}` );
await this.$axios.$post( postUrl, user, {timeout: 120000 })
.then( response => {
this.errors = [];
this.UserData.name = ''
this.UserData.surname= ''
this.UserData.gender = ''
this.UserData.birthDate = ''
$('#modal-bloodline-info').modal('hide');
if (process.browser) {
window.location.reload(true)
}
console.log('Working')
})
.catch((error) => {
this.errors = error.response.data.errors;
console.log('somthing went wrong');
if (error.response.status === 400 ){
console.log(this.errors)
}
});
},
}
}
</script>
<style scoped>
</style>
But i am not able to open this form on child (FamilyTree.vue) component any one tell me where i miss?
Please or to participate in this conversation.