How to use ArrayInput to populate data in react-admin list view - reactjs

I have a react-admin Create View that I want to display and populate using ArrayInput which however seems to ignore the data of the list.
I tried to load the data with
const { data } = useQueryWithStore({
type: 'getList',
resource: 'comments',
});
and to set the source to it manually, but the ArrayInput seems unimpressed by all efforts to feed it some data.
I can iterate through the data array and render TextFields and remove buttons accordingly, while leaving the ArrayInput for adding new data, but that defeats the purpose and the beautiful interaction with ArrayInput. Is there something I'm missing? How should I pass the data for it to work as one would expect? I made a sandbox example for this HERE

For creating multiple rows of the entity with one form submit you will need a custom implementation or a work-around.
One of the most esiest ways could be to handle manually the submission of the form and alter the data and send separate requests for each entered entity.
Here in the docs is shown an example how you can pass the Create view a custom toolbar where you can implement your logic.

Related

ExtJS synchronize record between clients

I'm trying to do something fun: I'd like to send the record changes from one client to another and have the second client updated to show these changes. Basically collaborative viewing. The second client is disabled from making changes, he can only watch.
Simple fields like strings, numbers, checkboxes, etc. are easy, that worked right away.
The references are the problem. If I have a combo that uses another model as it's source, I am unable to update it on the second client.
I tried setting just the id, then the entire referenced object, I tried various set options, but simply no dice.
The record does change, I see that the data is updated, I was even able to manually modify the _ reference attributes, but the UI keeps showing the old values for those fields.
Is there a way to send the record from one client to another and have the other client just take over all values and display them in the UI? (it would be better to send just the changes, but I'd be very happy if I could get it to work with the entire record)
EDIT: I'm using SailsJS with socket.io, so the p2p connection is not the issue.
I'm getting the data like this:
var data = record.getData(true);
broadcastRecord(data);
And on the other side I tried:
record.set(data);
A code example for the receiving side would be appreciated, if anyone has an ide how to solve this...
I think your problem is related to associations and comboboxes.
Let's say you have a model User with a field group that references model Group, and that you have a User form with a Group combobox.
In the receiver client, you are probably getting only the group id. record.set(data) updates the bound combobox calling setValue(groupId).
This setValue will try to find the corresponding record inside its store, but it won't ask server-side for that record. Instead, it will create a new record with the passed id (showing an empty combobox).
If possibile, you can set remoteFilter:false to the store and queryMode:'local' on the combobox and preload all the data from that store.
Otherwise, I think you'll have to override the combobox setValue method to get the record remotely.

Angular Schema Form Custom Template Passing Parameter

I've been searching for a while now and can't find any examples of how I could pass a custom value to a template I created with Schema Form. I needed to create a template to allow for the label to be aligned any way the user wants it to be. I got a simple version of the template working, now I need to give the template information like where the label should be aligned and how many columns the field should take so I can have multiple fields on a single row. I've tried passing my custom fields in the field definition and retrieving it in the template from the form object.
firstName = {
labelAlign: "left"
title: "First Name"
type: "string"
}
In the sample labelAlign is the custom field that I want to access through the form object and this is part of the data that is passed through the sf-schema directive. Is there another way I can access this data in my template?
Thanks in advance.
UPDATE
If I pass the custom value in the form JSON instead of the schema JSON the value show on the form but it creates another field at the very end of the form which is not what I am looking for. I've seen schema form examples that show modifying fields in the form JSON without having this problem. Does anyone know how to make this work properly?
I found the answer to my question and want to post it here for others. The object I was looking for was form.schema. That will allow access to properties created in the schema JSON.

Angularjs: how to pass entire object to another controller?

OK, I'm very new to AngularJS. I'm converting a rather rough-app (that I've been writing for a couple of days) from using mostly jQuery over to using Angular. [ I discovered Angular "mid-stream", while researching how to alleviate all the bookmark and back-button headaches I was running into.]
On my main page, I have a table of search results. (If the user arrives without passing any parameters, a default search is called to build the table. And, of course, they can use a search form on that page to show themselves a different set of results.)
Now, when the user clicks on a table item, I want that table to more or less "become" a drop-down menu on the Item Details page that can be used to navigate from one table item to the next. (The list will usually be less than 20 items long at any given time.) Same data, same sort order, just in a different control.
Rather than build that "Child" page so that (in addition to making Ajax calls to pull up the item details) it runs the exact same query AGAIN and then builds a drop-down out of it... I thought perhaps there was some more-efficient way to do it.
Perhaps, pass the entire object of objects from the search results on to the Details controller? (I would somehow have to also pass an id for whichever item the user actually clicked on for details as well.)
[With jQuery, I had been building both the drop-down and the table of results on the same page...and then just use show() and hide() to alternate which one I was displaying. And I would fetch the Item Details data and populate/show hidden details divs whenever a table row or drop-down option was selected.]
First I think you should use some kind of routing, maybe this can be helpful
https://github.com/angular-ui/ui-router
And second one, if you want to access same object with multiple controllers, you should use factory with your object, and all you need is to inject that factory into your controllers, and you will have access to the same object from multiple controllers. Here is the short tutorial, it's very easy to understand:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
And third option, but it's not nice, is to emit or broadcast event and send object from one controller, and in another one you can put a listener for that event, here you can find more information:
http://www.theroks.com/angularjs-communication-controllers/
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Add a "permanent" filter to a store, until I manually call clearFilter

I'm using a store to fetch the specializations of all hikers (so hiker has many specializations). However, I have a detail window where this specializations are added/removed/shown ony for currently selected hiker (yea, it's a detail window).
My problem here is that my store fetch data for all hikers, but I want it to show, when detailed window is up, only data for given hiker. Notice also that I'm showing data in data-grid, so the user possibly can add filters and I noticed that if I add a filter with store.filter({...}) and user add a filter with data-grid, my filters are removed (so basically they are useless.
Which approach should I use? Do you have any suggestion? I were thinking about 1 store for each hiker, but I don't like this solution.
Edit 1:
I also noticed that I can't create a filter in the same way as data-grid builds them:
Ext.create('Ext.util.Filter', {
type: 'numeric',
comparison: 'eq',
field: 'hiker_id',
property: 'hiker_id',
value: me.hiker.get('id'),
root: 'data'
})
Which is boring, because I imnplemented on server side a functionality that parses the grid filters already.
We just give our filters in json format to the store's extra params. And parse that back-end. The extra params stay the same while paging or refreshing the grid.
grid.getStore().getProxy().extraParams = { filter: yourFilter };
-How- are your users doing the filter?
store.filter accepts both arrays and functions, so you can do quite a bit with it, without actually juggling the data on the server. (eg manage an array that is being passed to the filter, test against an object somewhere, or whatever)
Permanent filter? Not so much, but since you can add multiple filters etc, it is relatively trivial to keep track of what filters are in place.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-filter

Django: form that updates X amount of models

I have a page where it displays a filtered model instance list and allows users to update some fields of it or add new fields as a form.
I am curious what wpuld be a clever way of doing this, to delete and resave all the input data or make comparison for each data and save edited / new fields& entities.
I would like to mind you that I use postgres for saving these values and I display around 20 entries for this form.
The QuerySet object has the update() method - it's used in ie. Admin Panel for bulk updating multiple selected objects from change lists. Here is the method reference at django's official documentation.
How to use it:
Just create queryset with the models you want to update (assumng that MyModel has field named 'my_field'):
qs = MyModel.objects.all()
qs.update(my_field=value)
That's it - remember that update() method will not send any signals like the save() method - it will just run query directly to database.
As for 'adding fields via form' - I don't know if I got it right? You want to add additional related models or dynamically add fields to the model table on database?
If you want to add related models then use InlineFormset (http://docs.djangoproject.com/en/dev/topics/forms/modelforms/#inline-form) - it's quite easy to handle.
Otherwise you have to add fields to models' _meta as described here: How dynamic add custom field to model.

Resources