Feb 9, 2021
0
Level 4
d3 + vue render data without refresh
I am new in D3 and i have created Family Tree but when i add a person i need to refresh the page to get new state (new JSON) but i wanted to done this without refresh (reactive) any one have any suggestion
my code (adding member form .vue)
<template>
<!-- ------------------------------------
- element : modal
------------------------------------ -->
<div data-app>
<v-card
elevation="10"
outlined
>
<v-toolbar color="cyan"
dark
flat>
<v-toolbar-title>Add Family Member for {{ userInfo.name }}</v-toolbar-title>
</v-toolbar>
<v-tabs flat>
<v-tab>
<v-icon left>
mdi-account
</v-icon>
Personal Details
</v-tab>
<v-tab>
<v-icon left>
mdi-lock
</v-icon>
Option 2
</v-tab>
<v-tab>
<v-icon left>
mdi-access-point
</v-icon>
Option 3
</v-tab>
<v-tab-item>
<v-card flat>
<v-card-text class="align-center" style="height: 400px;" v-if="!relationship">
<radial-menu
style="margin: auto; margin-top: 150px;background-color: white"
:itemSize="60"
:radius="120"
:angle-restriction="360">
<radial-menu-item
v-for="(item, index) in items"
:key="index"
class="shadow"
:style=[{backgroundColor:item.color}]
@click="() => handleClick(item)">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<span>
<v-icon
v-bind="attrs"
v-on="on"
>
{{ item.name }}
</v-icon>
</span>
</template>
<span :style={backgroundColor:item.color}> Add {{ item.info }}</span>
</v-tooltip>
</radial-menu-item>
</radial-menu>
</v-card-text>
<v-card-text v-else>
<form method="POST" action="/family" @submit.prevent="onSubmit">
<input type="hidden" class="form-control" id="active-node" name="demo">
<v-row>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="name"
label="First name"
required
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="middelname"
label="Middle Name"
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="surname"
label="Surname"
required
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
>
<v-radio-group
v-model="Living"
row
>
<v-radio
label="Living"
color="indigo"
value="living"
></v-radio>
<v-radio
label="Dead"
color="indigo"
value="dead"
></v-radio>
</v-radio-group>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
v-show="Living === 'living'"
v-if="bodcheckbox"
>
<v-select
v-if="Living === 'living'"
v-model="bodOnlyYear"
label="year"
:items="years"
>
</v-select>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
v-else
>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
:value="computedDateFormattedMomentjs"
label="Birth Date"
prepend-icon="mdi-calendar"
v-bind="attrs"
v-on="on"
clearable
></v-text-field>
</template>
<v-date-picker
v-model="birthDate"
no-title
@input="menu = false"
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="menu = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
@click="$refs.menu.save(birthDate)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
</v-col>
<v-col
cols="12"
sm="4"
md="4"
v-show="Living === 'living'"
v-if="!dodcheckbox"
>
<v-text-field
v-model="placeOfBirth"
label="Birth Place"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="4"
md="4"
v-show="Living === 'living'"
v-if="!dodcheckbox"
>
<v-text-field
v-model="currentLocation"
label="Current Place"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="4"
md="4"
v-show="Living === 'living'"
v-if="!dodcheckbox"
>
<v-checkbox
v-model="bodcheckbox"
label = "Birth Year"
value=true
></v-checkbox>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
v-show="Living === 'dead'"
v-if="!dodcheckbox"
>
<v-text-field
v-model="placeOfBirth"
label="Birth Place"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
v-show="Living === 'dead'"
v-if="!dodcheckbox"
>
<v-text-field
v-model="deathPlace"
label="Death Place"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
style="padding-top: 0px !important;"
v-show="Living === 'dead'"
v-if="!dodcheckbox"
>
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
:value="computedDateFormattedMoment"
label="Date of Death"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="dod"
no-title
@input="menu1 = false"
>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="menu1 = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
@click="$refs.menu.save(birthDate)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
v-else
>
<v-text-field
v-model="placeOfBirth"
label="Birth Place"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
v-show="Living === 'dead'"
v-if="dodcheckbox"
>
<v-text-field
v-model="deathPlace"
label="Death Place"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
style="padding-top: 0px !important;"
v-show="Living === 'dead'"
v-if="dodcheckbox"
>
<v-select
v-if="Living === 'dead'"
v-model="dodOnlyYear"
label="year"
:items="years"
>
</v-select>
</v-col>
<v-col
style="padding-top: 0px !important;"
v-if="Living === 'dead'">
<v-checkbox
v-model="dodcheckbox"
label = "Death Year"
value=true
></v-checkbox>
</v-col>
<v-btn
color="deep-purple lighten-2"
text
type="submit"
:disabled="submitted"
>
Submit
</v-btn>
</v-row>
</form>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card flat>
<v-card-text>
<p>
Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
</p>
<p>
Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.
</p>
<p>
Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam commodo suscipit quam. In consectetuer turpis ut velit. Sed cursus turpis vitae tortor. Aliquam eu nunc.
</p>
<p>
Etiam ut purus mattis mauris sodales aliquam. Ut varius tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce fermentum odio nec arcu.
</p>
<p class="mb-0">
Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
</p>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card flat>
<v-card-text>
<p>
Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
</p>
<p class="mb-0">
Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
</p>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-card>
</div>
</template>
<script>
import { mapState } from "vuex";
import moment from 'moment'
import { RadialMenu, RadialMenuItem } from 'vue-radial-menu'
export default {
name: "form.vue",
components: {
RadialMenu,
RadialMenuItem
},
data() {
return {
e1 : 1,
loadinga: false,
Living: '',
selection: null,
loading: false,
birthYear: null,
rootUser: "",
menu: false,
menu1: false,
id: "",
name: null,
middelname: "",
surname: "",
gender: "",
birthDate: "",
dod: null,
submitted: false,
relationship: '',
isSubmitted: false,
errors: [],
items: [
{name:'mdi-human-male', value:'father', color: '#5C5CFF', info:'Father'},
{name:'mdi-human-female', value:'mother', color: '#FF37A6', info: 'Mother'},
{name:'mdi-human-female', value:'wife', color: '#FF37A6', info: 'Wife'},
{name:'mdi-human-male', value:'husband', color: '#5C5CFF', info: 'Husband'},
{name:'mdi-human-male', value:'brother', color: '#5C5CFF', info: 'Brother'},
{name:'mdi-human-female', value:'sister', color: '#FF37A6', info: 'Sister'},
{name:'mdi-human-child', value:'son', color: '#5C5CFF', info: 'Son'},
{name:'mdi-human-female', value:'daughter', color: '#FF37A6', info: 'Daughter'}
],
lastClicked: 'click on something!',
emailRules: [
v => /.+@.+\..+/.test(v) || "E-mail must be valid"
],
dodcheckbox: false,
bodcheckbox: false,
dodOnlyYear: null,
bodOnlyYear: null,
placeOfBirth: '',
currentLocation: '',
emailid: '',
education: '',
profession: '',
deity: '',
medical: '',
community: '',
subcommunity: '',
isFatherSet: '',
isMotherSet: '',
deathPlace: '',
highestEducations:[],
educationaldetails: '',
professions:[],
communities: [],
subCommunities: [],
geneticdisorders: [],
};
},
async mounted() {
//this.rootUser = localStorage.getItem('rootUser')
await this.personsDetails();
if (sessionStorage.getItem("rootUser")) {
this.rootUser = await sessionStorage.getItem("rootUser");
} else {
this.rootUser = this.familyTree.id;
}
//console.log(this.familyTree.data.lastname)
this.surname = this.familyTree.data.lastname
//console.log('individualInfo',this.familyTreeData.individualInfo)
//this.isFatherSet = this.familyTreeData.individualInfo.parents
//this.rootUser = await sessionStorage.getItem("rootUser")
//console.log("rootUser", sessionStorage.getItem("rootUser"));
//console.log(this.rootUser === localStorage.getItem('rootUser'))
},
watch: {
name: function (newValue){
this.name = this.capitalizeFirstLetter(newValue)
},
middelname: function (newValue){
this.middelname = this.capitalizeFirstLetter(newValue)
},
surname: function (newValue){
this.surname = this.capitalizeFirstLetter(newValue)
},
dod: function (val){
// console.log('from watch',val)
// console.log(val.toString().length)
// console.log('length',this.dod.toString().length === 4)
// console.log('dodcheck',!this.dodcheckbox)
if (!!this.dodcheckbox){
console.log('ok');
this.dod = null
this.dodOnlyYear = null
}
},
birthDate: function (val){
let currentUserDOB = this.familyTreeData.individualInfo.dob
if (!!this.bodcheckbox){
this.birthDate = null
this.bodOnlyYear = null
}
if (!_.isNull(currentUserDOB)){
if (this.relationship === 'father' || this.relationship === 'mother'){
if (this.birthDate <= currentUserDOB){
console.log(this.birthDate <= currentUserDOB)
alert('BirtDate May be wrong')
}
}
}
},
Living: function (data){
if (data === 'living'){
this.dod = null
this.dodOnlyYear = null
}
},
isFatherSet: function (data){
console.log(data)
},
},
computed: {
computedDateFormattedMomentjs () {
return this.birthDate ? moment(this.birthDate).format('DD/MM/YYYY') : ''
},
computedDateFormattedMoment () {
return this.dod ? moment(this.dod).format('DD/MM/YYYY') : ''
},
...mapState({ familyTree: state => state.familyTree.tree }),
...mapState({ familyTreeData: state => state.familyTree }),
years () {
const year = new Date().getFullYear()
return Array.from({length: year - 1900}, (value, index) => 1901 + index)
},
userInfo(){
return this.familyTreeData.individualInfo
},
checkParents: function () {
let isMale, isFemale, isparent
isMale = this.familyTreeData.individualInfo.gender === 'male' ? true : false;
isFemale = this.familyTreeData.individualInfo.gender === 'female' ? true : false;
isparent = _.isEmpty(this.familyTreeData.individualInfo.parents) ? true : false
if (!_.isEmpty(this.familyTreeData.individualInfo.parents))
{
let hasFather, hasMother, isMale, isFemale, parents, filteredList;
parents = this.familyTreeData.individualInfo.parents
// if only 1 parent given
if ( parents.length === 1 ) {
hasFather = parents[0].gender === "male" ? true : false;
hasMother = !hasFather;
}
// if both parents given
if ( parents.length === 2 ) {
hasFather = parents[0].gender === "male" || parents[1].gender === "male" ? true : false;
hasMother = parents[0].gender === "female" || parents[1].gender === "female" ? true : false;
}
filteredList = _.filter( this.items, relation => {
if ( relation.name === "Father" ) {
return !hasFather
}
if ( relation.name === "Mother" ) {
return !hasMother
}
// if ( relation.name === "Husband" ) {
// return isFemale
// }
//
// if ( relation.name === "Wife" ) {
// return isMale
// }
return true;
})
// return
return filteredList
} else {
let filteredList = _.filter( this.items, relation => {
if ( relation.name === "Husband" ) {
return isFemale
}
if ( relation.name === "Wife" ) {
return isMale
}
if ( relation.name === "Brother" ) {
return !isparent
}
if ( relation.name === "Sister" ) {
return !isparent
}
return true;
})
return filteredList
}
}
},
created() {
this.selectHeighesteducation()
this.selectProfession()
this.selectCommunity()
this.selectSubommunity()
this.selectMedicalhistory()
},
methods: {
handleClick (item) {
this.relationship = item.value;
},
reserve () {
this.loadinga = true
setTimeout(() => (this.loadinga = false), 2000)
},
selectHeighesteducation(){
this.$axios
.$get(process.env.BASE_URL + "/getHeighestEducation")
.then((response) => {
this.highestEducations = response
this.loading = false
})
},
selectProfession(){
this.$axios
.$get(process.env.BASE_URL + "/getProfession")
.then((response) => {
this.professions = response
this.loading = false
})
},
selectCommunity(){
this.$axios
.$get(process.env.BASE_URL + "/getCommunityData")
.then((response) => {
this.communities = response
this.loading = false
})
},
selectSubommunity(){
this.$axios
.$get(process.env.BASE_URL + "/getSubCommunity")
.then((response) => {
this.subCommunities = response
this.loading = false
})
},
selectMedicalhistory(){
this.$axios
.$get(process.env.BASE_URL + "/getMedicalHistory")
.then((response) => {
this.geneticdisorders = response
this.loading = false
})
},
closeDialog(){
this.errors = [];
this.name = "";
this.middelname = "";
this.surname = "";
this.gender = "";
this.dod = "";
this.birthDate = "";
$nuxt.$emit('open-dialog-form-close')
},
check(){
if(this.relationship === 'Select Relation'){
alert('Select Relationship')
}
},
capitalizeFirstLetter(str){
return str.charAt(0).toUpperCase() + str.slice(1)
},
async personsDetails() {
await this.$store.dispatch("familyTree/callTree");
},
async onSubmit(value) {
if (this.dodcheckbox && this.Living === 'dead'){
let y= this.dodOnlyYear;
let m= 1;
let d= 1;
let fullDate = `${this.dodOnlyYear}-01-01`
this.dodOnlyYear = moment(fullDate).format('YYYY-DD-MM')
this.dod = this.dodOnlyYear
}
if (this.bodcheckbox && this.Living === 'living'){
let y= this.bodOnlyYear;
let m= 1;
let d= 1;
let fullDate = `${this.bodOnlyYear}-01-01`
this.bodOnlyYear = moment(fullDate).format('YYYY-DD-MM')
this.birthDate = this.bodOnlyYear
}
this.submitted = true;
// nullify previously set id
this.check()
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.relationship === "brother"
) {
this.gender = "male";
} else {
this.gender = "female";
}
if (this.relationship === "husband" || this.relationship === "wife") {
var user = {
name: this.name,
middlename: this.middelname,
lastname: this.surname,
gender: this.gender,
dob: this.birthDate,
dod: this.dod,
placeOfBirth: this.placeOfBirth,
currentlocation: this.currentLocation,
email: this.emailid,
educationaldetails: this.education,
profession: this.profession,
deity: this.deity,
healthHistory: this.medical,
community: this.community,
subcommunity: this.subcommunity,
externalTreeId: "demoId",
alive: this.Living
};
} else {
var user = {
name: this.name,
middlename: this.middelname,
lastname: this.surname,
gender: this.gender,
dob: this.birthDate,
dod: this.dod,
placeOfBirth: this.placeOfBirth,
currentlocation: this.currentLocation,
email: this.emailid,
educationaldetails: this.education,
profession: this.profession,
deity: this.deity,
healthHistory: this.medical,
community: this.community,
subcommunity: this.subcommunity,
alive: this.Living
};
}
console.log('user', user)
// ------------------------------------
// - 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");
let activeNodeId = window.activenode;
//console.log(activeNodeId)
// 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( postUrl);
await this.$axios
.$post(postUrl, user, { timeout: 120000 })
.then(response => {
console.log('member resp',response)
this.errors = [];
this.name = "";
this.middelname = "";
this.surname = "";
this.gender = "";
this.birthDate = "";
this.dod = "";
$nuxt.$emit('open-dialog-form-close')
//$.fancybox.close();
//$("#modal-bloodline-info").modal("hide");
if(response === 'date_validation'){
alert('Please enter the correct date of birth. Your parents are always older than you !!')
}
// else if(process.browser){
// window.location.reload(true);
// }
//this.$router.push("/family");
console.log("Working");
})
.catch(error => {
this.errors = error.response.data.errors;
this.submitted = false;
console.log("somthing went wrong");
if (error.response.status === 400) {
console.log(this.errors);
}
});
},
}
};
</script>
<style scoped>
.v-chip.v-size--default {
border-radius: 80px !important;
font-size: 14px !important;
height: 45px !important;
width: 123px !important;
}
.v-chip{
padding: 0 40px !important;
}
.toCapitalFirst{ text-transform: uppercase; }
.shadow{
box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 29px -5px rgba(0,0,0,0.75);
}
</style>
Render and view tree .vue
<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, mapGetters } from "vuex";
import { Auth } from "aws-amplify";
import tippy from "tippy.js";
import 'tippy.js/dist/tippy.css'; // optional for styling
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,
activeUserinfo: 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");
console.log(this.spouseId);
this.getTreeSpouse();
});
}
},
computed: {
...mapState({ familyTree: state => state.familyTree })
},
watch: {
},
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
this.data = _.cloneDeep( this.familyTree.tree )
//this.data = this.familyTree.tree;
//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);
const tippyTemplate = document.getElementById('bl-template');
// tippy
const blTippy = tippy(document.querySelectorAll('.action-edit'), {
theme: 'bloodline',
content: () => {
let cloned = tippyTemplate.cloneNode(true);
cloned.children.forEach( (action, index ) => {
action.addEventListener('click', (event) => {
if(index === 0) {
let emitPromise = new Promise( (resolve, reject) => {
this.$axios.$get( process.env.BASE_URL+'/userInfo/' + window.activenode, {timeout: 120000 })
.then(response => {
//console.log(window.activenode)
console.log('userInfo',response)
})
console.log(window.activenode);
setTimeout(() => resolve("done!"), 0);
})
emitPromise.then( result => {
$nuxt.$emit('open-dialog-form')
})
}
else if(index === 2) {
alert('ok');
}
});
});
cloned.setAttribute( 'style', 'display:block;' );
return cloned;
},
interactive: true,
trigger: 'click',
inertia: true,
animation: 'scale-extreme',
allowHTML: true,
maxWidth: 'none',
});
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"));
window.activenode = event.currentTarget.getAttribute('data-id');
//alert(window.activenode)
//$("#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
////////////////////////////////////////////////
let email;
email = this.$store.state.auth.user.attributes.email
console.log('jdhfjdfdgfhdgfhdgfhdgfhdgfhdfh',email)
this.data = _.cloneDeep( this.familyTree.tree )
//this.data = this.familyTree.tree;
//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);
const tippyTemplate = document.getElementById('bl-template');
// tippy
const blTippy = tippy(document.querySelectorAll('.action-edit'), {
theme: 'bloodline',
content: () => {
let cloned = tippyTemplate.cloneNode(true);
cloned.children.forEach( (action, index ) => {
action.addEventListener('click', (event) => {
if(index === 0) {
let emitPromise = new Promise( (resolve, reject) => {
this.sendData(window.activenode);
setTimeout(() => resolve("done!"), 0);
})
emitPromise.then( result => {
$nuxt.$emit('open-dialog-form')
})
}
else if(index === 1) {
let emitPromise = new Promise( (resolve, reject) => {
this.sendData(window.activenode);
setTimeout(() => resolve("done!"), 0);
})
emitPromise.then( result => {
$nuxt.$emit('open-dialog-form-edit')
})
}
else if(index === 2) {
alert('ok');
}
});
});
cloned.setAttribute( 'style', 'display:block;' );
return cloned;
},
interactive: true,
trigger: 'click',
inertia: true,
animation: 'scale-extreme',
allowHTML: true,
maxWidth: 'none',
});
if (process.browser) {
$("a.action-edit").on("click", event => {
let id;
window.activenode = event.currentTarget.getAttribute('data-id');
// id = window.activenode;
// console.log(id)
});
}
},
async sendData(value) {
await this.$store.dispatch("familyTree/userInfo", value);
},
}
};
</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);
}
7%,
90% {
transform: scale(0.4);
}
50% {
transform: scale(1);
}
}
</style>
Please or to participate in this conversation.