How can I present a grid to edit children of a parent object AND allow the user to add new child objects on the same view?
If I use a table, how do I redraw the table when a new child is added? Is there a control (hopefully that does not use jQuery) which will provide something more elegant?
My object graph looks like this:
person: {
name: 'Joe Blow',
children: [
{
name: 'Mary Blow',
gender: 'F',
age: '18',
hair: 'Brown',
eyes: 'Green'
},
{
name: 'Frank Blow',
gender: 'M',
age: '21',
hair: 'Bald',
eyes: 'Blue'
}
]
}
The view must have two forms... one to add a new child (basically just a name)... and a grid to allow the properties of each child to be edited.
Side note: I'm also worried about so many children being added that the columns shrink to an unusable size OR the grid grows too wide that it distorts the app's navigation and elements on the left.
Related
I use Ant Design and data which coming from API. I assume the data like this
data = [
{
name: "John",
job: "Freelancer",
},
{
name: 'Bob',
job: 'UI Designer'
},
{
name: 'Sam',
job: 'CEO'
},
{
name: 'Alex',
job: 'Mobile Dev'
},
{
name: 'Jess',
job: 'Web Dev'
},
];
I want to return the job with Tag from Ant Design which the tag has a different color
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
I have looped the data. but I don't know how to make the data have a different color tag
data.map((el) => {
//This example doesn't have color
return <Tag>{el.job}</Tag>
})
How to achieve that ? And sorry i'm not good enough in English. I hope you understand what i mean
Or you can visit code sandbox here
In your data, add a property something like tagColor for each object.
data = [
{
name: "John",
job: "Freelancer",
tagColor: "red"
},
{
name: 'Bob',
job: 'UI Designer'
tagColor: "green"
},
{
name: 'Sam',
job: 'CEO'
tagColor: "blue"
},
];
Then in the loop, use that property to dynamically add colors. Like,
data.map((el) => {
return <Tag color={el.tagColor}>{el.job}</Tag>
});
Updated
If the colors can be random, you can place all your colors in an array. And you can pick colors one by one using index or even a randomiser. Something like,
const colors = ["red", "blue", "green"];
data.map((el, i) => {
return <Tag color={colors[(i%colors.length)]}>{el.job}</Tag>
});
It will pick colors in the array one by one based on index.
I have a complex JSON response that is iterated over using ng-repeat. Only a relatively small subset of the attributes within the result set are displayed on the screen, so filtering of the results should be restricted to values the user can actually see, otherwise the filtering behavior would be confusing to the end-user.
Since one of the attributes I wish to filter on is a deeply nested array, a custom filter was needed since the built-in AngularJS filterFilter does not iterate over the array elements to the best of my knowledge.
I was able to get this working some time back in AngularJS v1.2.28, but unfortunately it appears to break during a migration to v1.4.3. I have not spent time to isolate where in the release cadence this functionality broke however.
I have not found any helpful information in the migration guides that would indicate what has changed. All I know is that the actual/expected parameters to the filter receive different values in the latest major version of AngularJS, which leads to the failure.
ng-repeat filter expression:
<li ng-repeat="user in users | list_filter:{establishment: {id: filterText, names: [{name: filterText}], locations: [{streetAddress1: filterText, streetAddress2: filterText, city: filterText, stateProvince: filterText, postalCode: filterText}]}}">
Example data structure of a single element:
data = [{
id: 234567,
name: 'John Doe',
establishment: {
id: 067915959,
locations: [{
id: '134B030365F5204EE05400212856E994',
type: 'postal',
streetAddress1: 'P O BOX 900',
city: 'Grover',
stateProvince: 'CA',
postalCode: '902340900',
isoCountryCode: 'US',
region: 'MONROE'
}, {
id: '999B030365F4204EE05400212856E991',
type: 'postal',
streetAddress1: '2590 Atlantic Ave',
city: 'Fredricks',
stateProvince: 'VA',
postalCode: '45487',
isoCountryCode: 'US',
region: 'MONROE'
}],
names: [{
name: 'Grover Central School Dst',
type: 'PRIMARY'
}, {
name: 'Grover Central School Dst',
type: 'MARKETING'
}, {
name: 'Grover CENTRAL SCHOOL DISTRICT',
type: 'LEGAL'
}]
}
}];
Supporting Plunker Examples:
Plunker for version 1.2.28:
http://plnkr.co/edit/KD1MmNMBEhO7X2v9yK4S?p=info
Plunker for version
1.4.3: http://plnkr.co/edit/OmPOOwRWCHuPutUtWOcC?p=info
Edit:
The issue appears to be directly related to the changes introduced in v1.3.6.
It appears the issue is related to the fact that an implicit AND condition is now being applied but was previously an implicit OR, which is what is desired in my case. You can import the old version as a separate filter, if the old behavior is desired.
I have a $scope collection that is continually being updated through websockets, so data is coming in about every 2 seconds.
Let's say I have this data coming in,
var socketData = [{
name: 'bob',
age: '20',
color: 'red'
}, {
name: 'jack',
age: '10',
color: 'yellow'
}]
$scope.data = socketData;
and it's changing constantly, like this for example, which could happen a number of seconds later.
var socketData = [{
name: 'bob',
age: '21',
color: 'green'
}, {
name: 'sam',
age: '22',
color: 'red'
}]
$scope.data = socketData;
and in the DOM I have this
<div ng-repeat="d in data">
<p>{{d.name}}</p>
<p>{{d.age}}</p>
<p>{{d.color}}</p>
</div>
I would like to animate (by adding a class and just having it fade in) to each property that has changed.
By using $watch, I can get the changes, but only the objects as a whole.
$scope.$watch('data', function(newVal, oldVal) {
console.log(newVal) // whole object
console.log(oldVal) // whole object
}, true);
So the problem is that I dont want to animate the entire object, but rather the property itself. So if the name changed for each object, in the dom I'd like to see the name fields change, not an entire object, just that individual change, and I'm having a difficult time achieving that.
Handsontable really fits my needs when it comes to UI interaction. But was wondering if it can also pivot data.
I have Json data that looks like this:
var objectData = [
{id: 1, name: "Ted Right", gender: "male"},
{id: 2, name: "Bill Allan", gender: "male"},
{id: 1, name: "Joan Well", gender: "female"},
{id: 2, name: "Jane Doe", gender: "female"}
];
where id value should be the row name and the gender value should be the column header and the name is the value in the table.
I'm not sure it's possible natively within the framework, but it looks like you can dynamically pass an array containing the column definitions to the table instance while creating it, so you could potentially handle it that way in javascript - you might want to check out this example.
How to create dynamic columns for Handsontable?
Old thread I know, but it's the first one that comes up for handsontable pivot table, so hopefully this helps someone.
To set custom row/column headers, have a look here:
http://handsontable.com/demo/renderers_html.html#header
Portion from above page:
$container.handsontable({
colHeaders: [
"<b>Bold</b> and <em>Beautiful</em>",
"Some <input type='checkbox' class='checker'> checkbox"
]
})
I have a Backbone Collection of Models that have different data coming in on page load than when it's fetched.
For example, the attributes coming in on page load are:
[{ name: 'cat', color: 'yellow' },
{ name: 'dog', color: 'brown' },
{ name: 'fish', color: 'orange' }]
Then, on fetch() (or otherwise updated from the server while the page lives, the data looks like:
[{ name: 'cat', current: 5, total: 100 },
{ name: 'dog', current: 6, total: 50 },
{ name: 'fish', current:7, total: 25 }]
How can I update the Backbone Collection with the new data while retaining the old data? IDs are not assigned from the server (name is guaranteed unique).
I ended up going with this. This will update the properties for models that exist while also removing models that did not come in and adding new ones.
Backbone.Collection.prototype.update = function(col_in){
var self = this,
new_models = [];
_(col_in).each(function(mod_in) {
var new_model = self._prepareModel(mod_in),
mod = self.get(new_model.id);
if (mod) {
new_models.push(mod.set(mod_in, {silent:true}));
} else {
new_models.push(mod_in);
}
});
this.reset(new_models);
};
Note the use of _prepareModel this is important so that the Models can be identified via whatever "id" property is used in the Backbone Model object.