Well, I'm fairly new to both angular and breeze and I have an entity called Collection with a navigation property products since a collection can have many products in it.
So when I click a button I want to add that product to that collection but I haven't had any luck with it, I read breeze.js documentation and apparently doing something like
collection.products.push(product)
should work, but it's not working any thoughts on this?
this is the entity definition
addType({
name: 'Collection',
defaultResourceName: 'collections',
dataProperties: {
id: { type: ID },
name: { max: 255, null: false },
slug: { max: 255 },
productsCount: { type: DT.Int16 }
},
navigationProperties: {
products: {
type: 'Product',
hasmany: true
}
}
})
This is the code that actually tries to add the item to the products
function addToCollection(product){
logSuccess('Product added to collection');
//trying to put a product into the collection products, with no luck
vm.collection.products.push(product);
}
And this is the template where the products are listed and the user can add them to the collection.
tbody
tr(ng-repeat="product in vm.products | inCollection:vm.filter_by")
td {{ product.master.sku }}
td {{ product.name }}
td {{ product.price | currency }}
td
img(data-ng-src="{{ product.master.images[0].mini_url }}")
td.text-center
.btn-group.btn-group-xs
a.btn.btn-default(data-ng-click="vm.addToCollection(product)")
i.fa.fa-plus
.btn-group.btn-group-xs
a.btn.btn-default(data-ng-click="vm.removeFromCollection(product)")
i.fa.fa-minus
I've been debugging and breeze is not returning any goodAdds so it won't add it to the collection, any ideas on why this is not a goodAdd? BTW, collections N -> N products.
As far as I know breeze doesn't support modification through Navigation properties So what you need to have is 2 types .. Collection and Property..
addType({
name: 'Proeprty',
defaultResourceName: 'properties',
dataProperties: {
id: { type: ID },
collectionId: { type: int32}
},
navigationProperties: {
collection: {
type: 'Collection',
isScalar: true
}
}
})
then when you want to add onto it you just make sure you set the collectionId
Breeze's Navigation Properties aren't like typical relationships
Related
Using React with TypeScript
Please could somebody provide an example of how I might be able to use a Kendo DataSource to read from a method which internally uses Axios to prod an external API for JSON data..? I must have flown through 20 different versions of this code trying different approaches, nothing seems to fit...
All I'm trying to do currently is supply a Kendo ComboBox with an array of {id: number, name: string}
Very basic stuff at the moment, but I do have to use a similar approach to this later on with a Kendo Grid which handles server side sorting and pagination so I'd like to get this working now then that should be somewhat easier later on...
The reason I want to use Axios is because I've written an api.ts file that appends appropriate headers on the gets and posts etc and also handles the errors nicely (i.e. when the auth is declined etc...)
A basic example of what I'm trying, which isn't working is this: -
public dataSource: any;
constructor(props: {}) {
super(props);
this.dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: function() {
return [{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }];
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
}
<ComboBox
name="test"
dataSource={this.dataSource}
placeholder={this.placeholder}
dataValueField="id"
dataTextField="name"
/>
Anybody got any thoughts on this please? :)
Easy fix in the end...
this.dataSource = new kendo.data.DataSource({
transport: {
read: function(options: any) {
options.success([{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }]);
}.bind(this)
},
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
});
2 things were wrong..
Removed the type: "odata",
and
Added the usage of options in
All working fine now with the async await function also, just passing the data into the options.success in the .then on the promise. Job done :-)
Im trying to filter an ng-repeat by an id value.
$scope.filter = $stateParams.id; --> 56a1832a36dc3d0e00c7aa3f
Heres the model for the Item Object with relevant vlues
var ItemSchema = new Schema({
title: {
type: String,
maxlength: 150
}
user: {
type: Schema.ObjectId,
ref: 'User'
}
});
How exactly do i filter the Items by the user._id ?
My attempt which is giving no results.
<div ng-repeat="saving in savings| filter: {user : 'filter'}">
https://plnkr.co/edit/sihBuRe9vNKO0jB1Wk8b
The docs explain using filters very well. The filter filters the array by property you pass to it. If it's an object, it will match its properties against each item in the array. This means that item in array with property user: {_id: 2} will be shown.
<div ng-repeat="saving in savings | filter:{user: {_id: 2}}">{{saving.title}}</div>
You can checkout this question for another example.
I have a list of "Savings" in an ng-repeat. The model for savings is
var SavingSchema = new Schema({
title: {
type: String,
},
link: {
type: String,
},
user: {
type: Schema.ObjectId,
ref: 'User'
}
});
Therefore i need to get to saving.user._id
Im trying something like
<div ng-repeat="saving in savings|filter:{ 'user._id': 'otherid' }">
but it doesnt like the user._id
Works fine with ._id if i want to filter by the top level _id but not the embedded user._id
How do i filter by the embedded user._id as the left side parameter
I am having an interesting issue with angular-formly. I am attempting to use the 'model' tag as shown below because my model is not flat.
{
'key': 'last',
'model': 'model.name',
'templateOptions: {}
}
However, I cannot update the model in a clean manner. Simply replacing model or even model.name with a matching model that contains the updated value does not cause the model to update the view.
var newModel = {
name: {
first: 'Gandalf',
last: 'The White'
}
};
self.model = {
name: {
first: 'Gandalf',
last: 'The Grey'
}
};
function setNewLastName() {
self.model = newModel;
}
setNewLastName();
However if I drill down to the specific property, it works as expected.
self.model.name.last = self.newModel.name.last;
Here is a link to a JSBin where the value updates using the drill-down method immediately above.
Drill-down JSBin
Another JSBin that attempts to update the model by assigning a new model that does not update.
Assign Model JSBin
Has anyone ran into this issue or can you see where I'm doing something wrong?
You replace the model for each key, therefore you never see the changes.
What you need to do is to match the model in the key itself.
vm.fields = [
{
key: 'name.first', // <-- HERE
type: 'input',
//model: vm.model.name, //Wrong
templateOptions: {
label: 'First Name'
}
},
{
key: 'name.first', // <-- AND HERE
type: 'input',
//model: vm.model.name, //Wrong
templateOptions: {
label: 'Last Name'
}
},
//...
];
See corrected example: http://jsbin.com/pupijoc/1/edit?js,console,output
UPDATE: Nested properties are also handled by fieldGroups
Se updated example: http://jsbin.com/pupijoc/3/edit?js,console,output
I have a model defined on the client.
module Shared{
export class HotelType{
ID : number;
Description : string;
}
export class Hotel{
ID : number;
Type : HotelType
}
}
I am using ngGrid to display the data.
What I do in my controller is very simple. Call the service and populate the data in the ng grid.
this.$scope.gridOptions = {
data: 'hotels',
columnDefs: [{ field: 'ID', displayName: 'HotelID' },
{ field: 'Type.Description', displayName: 'Description' }],
multiSelect: false,
selectedItems: []
};
ServiceManager.CallMethod(...)
.success((hotels) => {
this.$scope.hotels= hotels;
});
All my hotels are of the same type. First row in the grid if fine.
10 - Best hotel
but the description in other rows is empty
11 -
12 -
When looking at what I get from my service I noticed I get an array of Hotels which is fine.
hotels[0].Type is a object with an $id = 2 and has all the properties (Description : "Best hotel" etc..)
But, hotels[1].Type only has one property $ref "2".
And it is the same with all other types in other hotels.
I believe this is the reason why ng grid is displaying a description in only first row.
Does anyone know how this can be fixed?
I would like to see description in all of the row of ng grid..
Thank you.