I have a computed property (filteredSyms) that depends on the asynchronous computed property (allSynonyms). I am using async-computed plugin for this:
https://www.npmjs.com/package/vue-async-computed.
However, when the data gets updated the computed property doesn't wait until the result of the async property update. Therefore, I receive not up to date information. Then after the async property actually return new value computed property doesn't run update again.
How can I make it work the way that computer property waits until there is a result from the async computed property?
The code is below:
asyncComputed: {
async allSynonyms() {
let allSyns = await this.$axios.$post('/db/sym/synonyms', this.model.syms);
return allSyns;
}
},
computed: {
filteredSyms() {
let that = this;
let allSyn = this.allSynonyms;
let exactMatch = this.symsByRating.filter(
function (v) {
let isExactMatch = v.title.toLocaleLowerCase().indexOf(that.searchString.toLocaleLowerCase()) >= 0;
return !that.idsToFilter.includes(v.id) && isExactMatch
&& (!that.currentBodyPart || v.bodyParts.indexOf(that.currentBodyPart) >= 0)
&& that.hasMoreSubsyms(v)
&& (!allSyn || !that.containsObject(v, allSyn))
&& (v.sex == that.model.sex || v.sex == 'NA');
});
let partialList = [];
exactMatch.forEach(ex => partialList.push({n: 100, sym: ex}));
for (let sym of this.symsByRating ) {
let searchWords = this.searchString.toLocaleLowerCase().split(' ');
let symWords = sym.title.toLocaleLowerCase().split(' ');
let n = 0;
let isPartialMatch = false;
symLoop:for (let symWord of symWords) {
symWord = symWord.substring(0, symWord.length - 1);
for (let searchWord of searchWords) {
// don't count last letters of the words
searchWord = searchWord.substring(0, searchWord.length - 1);
if (searchWord.length > 2 && symWord.indexOf(searchWord) >= 0) {
n++;
isPartialMatch = true;
}
}
}
if (exactMatch.indexOf(sym) < 0 && isPartialMatch
&& (!this.currentBodyPart || sym.bodyParts.indexOf(this.currentBodyPart) >= 0)
&& this.hasMoreSubsyms(sym)
&& (!allSyn || !this.containsObject(sym, allSyn))
&& (sym.sex == that.model.sex || sym.sex == 'NA')) {
partialList.push({n: n, sym: sym});
}
}
partialList.sort(function(obj1, obj2) {
return obj2.n - obj1.n;
});
if (this.searchString && this.searchString != '') {
partialList = this.filterSynonyms(partialList);
}
let fs = partialList.map(ws => ws.sym);
console.dir(fs);
return fs;
}
}
A lot of stuff is going on the filtered method, but I guess the main point here that it is using this.allSynonyms to do the check but it is not updated at the time filteredSyms is executed.
Thanks for your suggestions!
(I haven't really tested this out, but it should work.)
vue-async-computed does provide the status in this.$asyncComputed.allSynonyms.success.
try adding this.$asyncComputed.allSynonyms.success as a dependencies to filteredSyms and it should update when success state change.
Related
I have this part of code that work but strangely the latest step of outputting the result doesn't work.. When i try to log the first element of array it returns undefined bacause the execution is asynchronous. I thought to build a series of nested callbacks but I think that is a bad practice. Is there any other way to makes it work without create nested promise callbacks?
CODE:
var ImgGalleyURL = [];
//CONTROLLO SE SONO STATE INSERITE IMMAGINI DA CARICARE E LE CARICO
if (postwp.postImgGallery1 != null && postwp.postImgGallery1 != "") {
msg.createMedia(postwp.postImgGallery1).then((imgURL)=>ImgGalleyURL.push(imgURL));
}
if (postwp.postImgGallery2 != null && postwp.postImgGallery2 != "") {
msg.createMedia(postwp.postImgGallery2).then((imgURL)=>ImgGalleyURL.push(imgURL));
}
if (postwp.postImgGallery3 != null && postwp.postImgGallery3 != "") {
msg.createMedia(postwp.postImgGallery3).then((imgURL)=>ImgGalleyURL.push(imgURL));
}
if (postwp.postImgGallery4 != null && postwp.postImgGallery4 != "") {
msg.createMedia(postwp.postImgGallery4).then((imgURL)=>ImgGalleyURL.push(imgURL));
}
if (postwp.postImgGallery5 != null && postwp.postImgGallery5 != "") {
msg.createMedia(postwp.postImgGallery5).then((imgURL)=>ImgGalleyURL.push(imgURL));
}
console.log(ImgGalleyURL[0] + "this is the first image loaded");
Thank you all
I think you're looking for Promise.race:
const promises = [];
for (let i=1; i<=5; i++) {
const propName = "postImgGallery" + i;
if (postwp[propName] != null && postwp[propName] != "") {
promises.push(msg.createMedia(postwp[propName]));
}
}
Promise.race(promises).then(firstUrl => {
console.log(firstUrl + "this is the first image loaded");
});
Promise.all(promises).then(imgGalleryURLs => {
console.log("All images ("+ imgGalleryURLs.join(", ") + ") loaded");
});
You were trying to log the first value of the array when none of the promises was fulfilled yet, so it was still empty.
I'm trying to figure out an issue with Google Maps v3 and a polyfill we use for non-ES6 browsers (IE11 for example). The error we get is:
This site overrides Array.from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly.
The polyfill is: ( from https://vanillajstoolkit.com/polyfills/arrayfrom/ )
if (!Array.from) {
Array.from = (function () {
var toStr = Object.prototype.toString;
var isCallable = function (fn) {
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
};
var toInteger = function (value) {
var number = Number(value);
if (isNaN(number)) { return 0; }
if (number === 0 || !isFinite(number)) { return number; }
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
};
var maxSafeInteger = Math.pow(2, 53) - 1;
var toLength = function (value) {
var len = toInteger(value);
return Math.min(Math.max(len, 0), maxSafeInteger);
};
// The length property of the from method is 1.
return function from(arrayLike/*, mapFn, thisArg */) {
// 1. Let C be the this value.
var C = this;
// 2. Let items be ToObject(arrayLike).
var items = Object(arrayLike);
// 3. ReturnIfAbrupt(items).
if (arrayLike == null) {
throw new TypeError('Array.from requires an array-like object - not null or undefined');
}
// 4. If mapfn is undefined, then let mapping be false.
var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
var T;
if (typeof mapFn !== 'undefined') {
// 5. else
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
if (!isCallable(mapFn)) {
throw new TypeError('Array.from: when provided, the second argument must be a function');
}
// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
if (arguments.length > 2) {
T = arguments[2];
}
}
// 10. Let lenValue be Get(items, "length").
// 11. Let len be ToLength(lenValue).
var len = toLength(items.length);
// 13. If IsConstructor(C) is true, then
// 13. a. Let A be the result of calling the [[Construct]] internal method
// of C with an argument list containing the single item len.
// 14. a. Else, Let A be ArrayCreate(len).
var A = isCallable(C) ? Object(new C(len)) : new Array(len);
// 16. Let k be 0.
var k = 0;
// 17. Repeat, while k < len… (also steps a - h)
var kValue;
while (k < len) {
kValue = items[k];
if (mapFn) {
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
} else {
A[k] = kValue;
}
k += 1;
}
// 18. Let putStatus be Put(A, "length", len, true).
A.length = len;
// 20. Return A.
return A;
};
}());
}
This works fine on other pages - but for some reason Google Maps seems to have an issue with it!
Even more frustratingly, is that it then breaks one of my other plugins (a lazy load script), which works fine until the Google map stuff is loaded
Any ideas on what its moaning about, and how to fix it?
If you have IE11 or a VM, you can test it at: https://www.chambresdhotes.org/Detailed/1768.html (click on the map at the bottom of the page, and this will load the Google Map - but then you get this annoying error, and it breaks the lazyload scrolling after)
Thanks!
This is continuing from an old thread here https://groups.google.com/forum/#!topic/firepad-io/73dKYaUwTn4)
The aim is to clean the database for documents which have many revisions over a long period
I need help writing a function that issue a FB command to delete all revisions which are 'nd' days older than the 'ns' snapshot.
I am not sure of both the Firebase syntax for this command and how to access the relevant firebase keys properly.
Any help will be greatly appreciated
Thx!
ended up solving this
PR: https://github.com/firebase/firepad/pull/264
code:
FirebaseAdapter.prototype.deleteOldRevisions_ = function(query) {
var self=this;
query.once('value', function(s) {
if (typeof s.val() === 'undefined' || s.val() === null || !s.hasChildren()) return;
s.forEach(function(rev) {
utils.log('removing old revision: '+rev.key);
rev.ref.remove();
});
setTimeout(function() { self.deleteOldRevisions_(query); }, 100); // delete the next one
});
}
FirebaseAdapter.prototype.monitorHistory_ = function() {
var self = this;
// Get the latest checkpoint as a starting point so we don't have to re-play entire history.
self.ref_.child('checkpoint').once('value', function(s) {
//utils.log(new Date().toISOString() + ': got checkpoint');
if (self.zombie_) { return; } // just in case we were cleaned up before we got the checkpoint data.
var revisionId = s.child('id').val(), op = s.child('o').val(), author = s.child('a').val();
if (op !== null && revisionId !== null && author !== null &&
op !== undefined && revisionId !== undefined && author !== undefined) {
self.pendingReceivedRevisions_[revisionId] = { o: op, a: author };
self.checkpointRevision_ = revisionFromId(revisionId);
self.monitorHistoryStartingAt_(self.checkpointRevision_ + 1);
} else {
self.checkpointRevision_ = 0;
self.monitorHistoryStartingAt_(self.checkpointRevision_);
}
// delete revisions older than one week before last checkpoint
if (revisionId) {
var historyRef=self.ref_.child('history');
historyRef.child(revisionId+'/t').once('value', function(s) {
if (typeof s.val() !== 'undefined' && s.val() !== null) {
var weekBefore=s.val()-(24*60*60*1000*7);
//utils.log('checkpoint revision: '+self.checkpointRevision_);
//utils.log('checkpoint time: ' + new Date(s.val()));
//utils.log('remove before: ' + new Date(weekBefore));
self.deleteOldRevisions_(historyRef.orderByChild('t').endAt(weekBefore));
}
});
}
});
};
I need to filter the listing or records according to selection in dropdownlists.
I have three dropdowns that needs to filter the records reactively in collaboration with each other. i.e value selection in one dropdownlist should filter the records effected by other dropdownlist values.
var filterAndLimitResults = function (cursor) {
if (!cursor) {
return [];
}
var raw = cursor.fetch();
var currentChosenCategory = chosenCategory.get();
var currentChosenCity = chosenCity.get();
var currentJtype = chosenJtype.get();
console.log(currentChosenCategory);
console.log(currentChosenCity);
// filter category
var filtered = [];
if (!currentChosenCategory || currentChosenCategory == "" && !currentChosenCity || currentChosenCity == "" && !currentJtype || currentJtype == "")
{
filtered = raw;
// console.log(filtered);
}
else {
filtered = _.filter(raw, function (item) {
if(currentChosenCategory){
return item.ccategory === currentChosenCategory ;
}
if(currentChosenCity){
return item.city === currentChosenCity ;
console.log(item.city === currentChosenCity);
}
});
}
var currentLimit =limit.get();
//enforce the limit
if (currentLimit ) {
filtered = _.first(filtered, currentLimit );
}
return filtered;
};
the above code is doing both filtering the dropdowns and limit the number of records so as to give infinite scrolling.
Edit For Text Based Search
Here is my eventmap for seach box
"keyup #search-title":function(e,t){
if(e.which === 27){
searchTitle.set("");
}
else {
var text = $(e.target.val);
searchTitle.set(text)
console.log(searchTitle.set(text));
}
}
This is what iam doing in the filteredAndLimitResults
if(!(!currentSearchTitle || currentSearchTitle == "")) {
filtered = _.filter(filtered, function (item) {
return item.title === currentSearchTitle ;
console.log(item.title === currentSearchTitle);
});
}
when i am typing something in the search box. all the records vanishes and when in press esc it comes back to as it was. in console.log i can see that on everytime i press a key it returns the collection.
You need to enforce the filters one after the other. Try like that:
var filterAndLimitResults = function (cursor) {
if (!cursor) {
return [];
}
var raw = cursor.fetch();
var currentChosenCategory = chosenCategory.get();
var currentChosenCity = chosenCity.get();
var currentJtype = chosenJtype.get();
console.log(currentChosenCategory);
console.log(currentChosenCity);
// filter category
var filtered = [];
if (!currentChosenCategory || currentChosenCategory == "" || currentChosenCategory === "All categories")
{
filtered = raw;
// console.log(filtered);
}
else {
filtered = _.filter(raw, function (item) {
if(currentChosenCategory){
return item.ccategory === currentChosenCategory ;
}
});
}
// filter city
if (!(!currentChosenCity || currentChosenCity == "" || currentChosenCity === "All cities"))
{
filtered = _.filter(filtered, function (item) {
if(currentChosenCity){
return item.city === currentChosenCity ;
console.log(item.city === currentChosenCity);
}
});
}
// filter JType
if (!(!currentJtype || currentJtype == "" || currentJtype === "All Jtypes"))
{
filtered = _.filter(filtered, function (item) {
if(currentJtype){
//update the item.ccategory with the right field
return item.ccategory === currentJtype ;
}
});
}
var currentLimit =limit.get();
//enforce the limit
if (currentLimit ) {
filtered = _.first(filtered, currentLimit );
}
return filtered;
};
How can I prevent events with conflict time? Is there any variable to set up?
No, there is not a variable to set, but you can use something like clientEvents which retrieves events that fullcalendar has in memory. You can use the function below in the eventDrop. In the case below it uses a function to filter out whether the event will have have an overlap or not.
function checkOverlap(event) {
var start = new Date(event.start);
var end = new Date(event.end);
var overlap = $('#calendar').fullCalendar('clientEvents', function(ev) {
if( ev == event)
return false;
var estart = new Date(ev.start);
var eend = new Date(ev.end);
return (Math.round(estart)/1000 < Math.round(end)/1000 && Math.round(eend) > Math.round(start));
});
if (overlap.length){
//either move this event to available timeslot or remove it
}
}
you can add eventOverlap : false in the celendar config,
http://fullcalendar.io/docs/event_ui/eventOverlap/
Correct overlap checking.
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
/// deny overlap of event
var start = new Date(event.start);
var end = new Date(event.end);
var overlap = $('#calendar').fullCalendar('clientEvents', function(ev) {
if( ev == event) {
return false;
}
var estart = new Date(ev.start);
var eend = new Date(ev.end);
return (
( Math.round(start) > Math.round(estart) && Math.round(start) < Math.round(eend) )
||
( Math.round(end) > Math.round(estart) && Math.round(end) < Math.round(eend) )
||
( Math.round(start) < Math.round(estart) && Math.round(end) > Math.round(eend) )
);
});
if (overlap.length){
revertFunc();
return false;
}
}
Add custom property in the event object overlap:false for example your event object will be
`{
title:'Event',
start: '2017-01-04T16:30:00',
end: '2017-01-04T16:40:00',
overlap:false
}`
Now override selectOverlap function,
selectOverlap: function(event) {
if(event.ranges && event.ranges.length >0) {
return (event.ranges.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length)>0;
}
else {
return !!event && event.overlap;
}
},
It will not let the another event to override the already placed event.
This does the trick. It also handles resizing overlapping events
var calendar = new Calendar(calendarEl, {
selectOverlap: false,
eventOverlap: false
}
});