VueFire watch for empty array property - javascript

looking around for a solution for my problem!
I try to make Vue.Draggable work with VueFire. I have a few lists with cards that can be dragged between them, sorted, cloned and so on. While the lists are populated with cards Vue.Draggable works perfectly, it watches for changes, triggers events like magic.
This is the working JSON:
categories: [{
name: "todo",
cards: ["second","first","second"]
},{
name: "doing"
cards: ["first","fourth","second"]
},{
name: "done",
cards: ["second", "fourth","first","third"]
}]
The problem comes when one o the lists is empty. We all know that Firebase doesn't store empty properties that's why Vue.Draggable can't watch for a property that doesn't exist. For example like this:
categories: [{
name: "todo",
cards: ["second","first","second"]
},{
name: "doing"
// missing cards property because it's empty
},{
name: "done",
cards: ["second", "fourth","first","third"]
}]
The cards property should be filled with values by dragging items to the list, but because cards doesn't exist Vue.Draggable can't watch for changes in that list and can't trigger events.
Is there a way to create some kind of placeholder or middleware to simulate that empty array? Or what are other possible solutions in this case?
Here's a small JSFiddle.
Thank you!

Why don't you initialize the cards property if nothing is returned from firebase?
categories: [{
name: "todo",
cards: ["second","first","second"]
},{
name: "doing",
cards: firebaseCollectionProperty || []
},{
name: "done",
cards: ["second", "fourth","first","third"]
}]

Related

Why javascript array sort doesn't compare all elements with each other?

I'm trying to understand why Javascript array sort doesn't work with the following logic. I have no problems making my own algorithm to sort this array, but I'm trying to make it with the Javascript sort built-in method to understand it better.
In this code, I want to push entities that "belongs to" another entity to the bottom, so entities that "has" other entities appear on the top. But apparently, the sort method doesn't compare all elements with each other, so the logic doesn't work properly.
Am I doing something wrong, or it is the correct behavior for the Javascript sort method?
The code I'm trying to execute:
let entities = [
{
name: 'Permission2',
belongsTo: ['Role']
},
{
name: 'Another',
belongsTo: ['User']
},
{
name: 'User',
belongsTo: ['Role', 'Permission2']
},
{
name: 'Teste',
belongsTo: ['User']
},
{
name: 'Role',
belongsTo: ['Other']
},
{
name: 'Other',
belongsTo: []
},
{
name: 'Permission',
belongsTo: ['Role']
},
{
name: 'Test',
belongsTo: []
},
]
// Order needs to be Permission,
let sorted = entities.sort((first, second) => {
let firstBelongsToSecond = first.belongsTo.includes(second.name),
secondBelongsToFirst = second.belongsTo.includes(first.name)
if(firstBelongsToSecond) return 1
if(secondBelongsToFirst) return -1
return 0
})
console.log(sorted.map(item => item.name))
As you can see, "Role" needs to appear before "User", "Other" before "Role", etc, but it doesn't work.
Thanks for your help! Cheers
You're running into literally how sorting is supposed to work: sort compares two elements at a time, so let's just take some (virtual) pen and paper and write out what your code is supposed to do.
If we use the simplest array with just User and Role, things work fine, so let's reduce your entities to a three element array that doesn't do what you thought it was supposed to do:
let entities = [
{
name: 'User',
belongsTo: ['Role', 'Permission2']
},
{
name: 'Test',
belongsTo: []
},
{
name: 'Role',
belongsTo: ['Other']
}
]
This will yield {User, Test, Role} when sorted, because it should... so let's see why it should:
pick elements [0] and [1] from [user, test, role] for comparison
compare(user, test)
user does not belong to test
test does not belong to user
per your code: return 0, i.e. don't change the ordering
we slide the compare window over to [1] and [2]
compare(test, role)
test does not belong to role
role does not belong to test
per your code: return 0, i.e. don't change the ordering
we slide the compare window over to [2] and [3]
there is no [3], we're done
The sorted result is {user, test, role}, because nothing got reordered
So the "bug" is thinking that sort compares everything-to-everything: as User and Role are not adjacent elements, they will never get compared to each other. Only adjacent elements get compared.

Push in array not reactive in HTML

When I remove a comment on my HTML var {{selecionados}} selected from, and I click on the list of names is all fine, but when HTML retreat or comment on again no longer works.
<script async src="//jsfiddle.net/raphaelscunha/9cwztvzv/1/embed/"></script>
Vue.js will only update your view when a property within the data object is changed, not when a new property is added. (See Change Detection Caveats in the Vue.js guide)
If you want it to react when ativo is set to true, make sure the property exists beforehand.
Try something like this when you're initializing your Vue object:
atores: [
{ name: 'Chuck Norris', ativo: false},
{ name: 'Bruce Lee', ativo: false },
{ name: 'Jackie Chan', ativo: false },
{ name: 'Jet Li', ativo: false}
]
JSFiddle

Why am I not getting any values displayed in my ui-grid dropdown?

I have this following code for ui-grid column Definition:
{ name: "carrier_influence_group", displayName: "Carrier influence group", enableCellEdit: true, showSortMenu: false,
editableCellTemplate: 'ui-grid/dropdownEditor', editDropDownOptionsArray: [ { id: 11, value: 'Medium' }, { id: 12, value: 'Large' }],
editDropdownIdLabel: 'id',editDropdownValueLabel: 'name'}
I am binding the name of these object to the column.
Every thing is fine normally. The grid as such renders correctly. But when I dbl click to edit this row, the text in this row disappears. A dropdown appears but it has no option to select from.
I tried changing my array to:
[ { id: 11, name: 'Medium' }, { id: 12, name: 'Large' }]
What is missing here. I have seen this official code. Seems like all is similar except for a filter. I do not need any such filter. Is it necessary to have one. The official docs do not mention anything about it.
Already referred http://stackoverflow.com/questions/28323540/showing-readable-data-in-ui-grid-with-editable-drop-down-cell
First thing to try - it should be editDropdownOptionsArray not editDropDownOptionsArray (note the case).

GetOrgChart: Nodes whose parent haven't been defined

I'm using the GetOrgChart JQuery plugin and running into a JavaScript error of:
Uncaught Type Error: Cannot read property '_ap' of null
I was able to determine that this is occurring in the case from my dataset where a user occurs earlier in the list than their manager does. My hierarchy is based around NTLogins, so the NTLogin of a given user is the id and the parentId is their manager's NTLogin.
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: "bobeans125",
parentId: null,
Name: "Bob Beans"
}, {
id: "franklin884",
parentId: "tdawl756",
Name: "Frank Lin"
}, {
id: "tdawl756",
parentId: "bobeans125",
Name: "Tim Dawl"
}]
});
JSFIDDLE Demo
I have no good way that I can think of to order the data so that this doesn't occur other than finding all of the many root nodes and drilling down into the hierarchy manually so that the dataset being sent to GetOrgChart is ordered. However, the assumption of not having to do so was the primary driver for choosing GetOrgChart.
I ended up just recursively walking the tree and building the object in the right order. I was able to get it to load without error, however, the tree is too large to be displayed and requires being zoomed out too far to be useful.
Id : and ParentId: is integer value but you gave string value so your output is Error: Cannot read property '_ap' of null.
Correct Example:
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: 1,
parentId: null,
Name: "Bob Beans"
}, {
id: 2,
parentId: 1,
Name: "Frank Lin"
}, {
id: "3",
parentId: "1",
Name: "Tim Dawl"
}]
});

Delete item from nested object array

I'm working with AngularJS and have an object array like that in my controller :
$scope.folderList = [{
name: 'root',
path: 'uploads/',
subs: [{
name: 'pictures',
path: 'uploads/pictures',
subs: [{
...
}]
}, {
name: 'videos',
path: 'uploads/videos',
subs: [{
...
}]
}]
}];
For this nested array, I have 2 directives set them up in a nested UL LI list with ng-repeat.
Now I have my nested list of folders, and I want to trigger a function to delete the selected folder.
So I trigger my function to delete with "folder" in parameter, for example, if I trigger the "delete" function on the pictures folder, the folder parameter will be like that :
folder = {
name: 'pictures',
path: 'uploads/pictures',
subs: [{ ... }]
}
And I want to delete this object from the nested array.
With a 1 level object array, I use this :
var index = $scope.folderList.indexOf(folder);
delete $scope.folderList.splice(index, 1);
But it (obviously) doesn't work on a nested array !
How can I easily delete an entry from a nested array on JavaScript (or AngularJS ?)
I've heard that underscore.js was made for this, but I never used it, and after seeing their documentation I wasn't able to find the proper function to do this !
Thanks for your help !

Categories