Jun 1, 2021
0
Level 4
filter not get update
I want to filter date and show to user on hover but i am not getting updated filter on each hover
code this is in method but i am getting each id on hover
// ------------------------------------------
// - on hover display relations in circle
// ------------------------------------------
//Wife,husband,
let relations = [ 'wife', 'husband', 'son', 'daughter' , 'sister', 'brother', 'father', 'mother' ];
let schemaWrapper = `<div class='wrapper-relation-circle'></div>`;
let schemaRelation = `<a class='relation-circle' href="javascript:;"></a>`;
let prevStackIndex, higherStackIndex = 110;
// stop event propagation for external tree links
$( '.descendant a.external-tree, .ancestor a.external-tree' ).hover(
function(evt) {
evt.stopPropagation();
return false;
},
function(evt) {
evt.stopPropagation();
return false;
}
);
let self = this;
$('.action-edit').mouseover(function (e){
})
$( '.descendant, .ancestor' ).not('.blank').hover (
function() {
window.hoverId = event.currentTarget.getAttribute('data-id');
let filteredList, isMale, isFemale,isFather,isMother;
self.$axios.$get( `http://localhost:3001/userRelationValidator/${window.hoverId}/609e122f00c656001adbc48b`, {timeout: 120000 })
.then(resp => {
//let c = [];
// console.log(resp)
isMale = resp.gender === "male" ? true : false;
isFemale = resp.gender === "female" ? true : false;
isFather = resp.father === 1 ? true : false;
isMother = resp.mother === 1 ? true : false;
let r = new Promise( (resolve, reject) => {
relations = relations.filter(item =>{
if (item === 'husband'){
return isFemale
}
if (item === 'wife'){
return isMale
}
if (item === 'father'){
return !isFather
}
if (item === 'mother'){
return !isMother
}
return true
})
console.log(relations)
return relations
setTimeout(() => resolve("done!"), 0);
})
r.then( result => {})
})
prevStackIndex = $( this ).css( 'z-index' );
// update stack / zindex
$( this ).css( 'z-index', higherStackIndex );
// add wrapper
let relationWrapper = $( schemaWrapper );
$( this ).append( relationWrapper );
// get the dimesions of wrapper
let relationWrapperDimesions = {};
relationWrapperDimesions.width = relationWrapper.width();
relationWrapperDimesions.height = relationWrapper.height();
// circular position calculator
let radius = relationWrapperDimesions.width / 2.5;
let cenX = ( relationWrapperDimesions.width / 2.5 ) - 15;
let cenY = ( relationWrapperDimesions.height / 2 ) - 43;
let angle = 0;
let steps = Math.PI * 2 / relations.length;
let left, top;
// add relations
_.forEach( relations, ( relation, relationIndex ) => {
//console.log('relationIndex',relationIndex)
//console.log('hover',self);
angle = relationIndex * steps;
left = cenX + Math.cos(angle) * radius;
top = cenY + Math.sin(angle) * radius;
let relationCurrent = $( schemaRelation );
let htmlImg = `<img src="/relations/${relation}-icon.png">`;
relationCurrent.html( htmlImg );
// on click event
relationCurrent.on( 'click', event => {
// let desc id
let descId = $( this ).attr( 'data-id' );
console.log(descId)
//console.table(self.sendData())
window.activenode = descId;
//promise to send active id to
// store familyTree/userInfo
let emitPromise = new Promise( (resolve, reject) => {
//console.log(this)
const relationData = {
id: window.activenode,
relation: `${relation}`
};
//console.log(relationData)
self.sendData(relationData);
setTimeout(() => resolve("done!"), 0);
})
emitPromise.then( result => {
window.relation = `${relation}`
console.log('`${relation}`',`${relation}`)
//$nuxt.$emit('createData', `${relation}`)
//self.$emit("openDialogForm",`${relation}`)
$nuxt.$emit('open-dialog-form')
//alert( `Adding ${relation} for user id : ${descId}` );
})
});
relationWrapper.append( relationCurrent );
relationCurrent.animate({
top: top,
left:left,
opacity: 1,
}, (75 * relationIndex) );
});
},
can any one tell where i am doing mistake
Please or to participate in this conversation.