mhdsyrwan / aor-embedded-array Goto Github PK
View Code? Open in Web Editor NEWEmbedded Arrays for Admin On Rest
License: MIT License
Embedded Arrays for Admin On Rest
License: MIT License
Hi,
first of all thanks for this project. This is just what i need.
I have a mongoose document with a nested field:
var WorkSchema = new Schema({
title: { type: String },
description: { type: String },
links: [{
title: { type: String },
url: { type: String },
}],
},{ toObject: { virtuals: true }, toJSON: { virtuals: true }}, { versionKey: false });
i'm using your library to insert links inside this document:
<EmbeddedArrayInput source="links">
<TextInput label="URL" source="url" />
<TextInput label="Title" source="title"/>
</EmbeddedArrayInput>
I can create links without problem but when i try to fetch the fields are empty (but they exist in the database), the number of embeddedarray is correct: if i have two links in the database i have two embeddedarray in the aor edit page.
this is the error on the console: query option is required. You must specify your GraphQL document in the query option.
I would like to request for an option to enable the dragging of rows to rearrange the array.
~ Great & essential addon, this definitely should be in core AOR in my opinion.
I am getting alignment issue when I use ReferenceInput,
The code is as follows
<Create {...props}>
<TabbedForm>
<FormTab label="Details">
<TextInput source="id" />
<TextInput source="name" />
<TextInput source="details" />
<TextInput source="date" />
<TextInput source="duration" />
<TextInput source="time" />
<ReferenceInput source="id" reference="standards" allowEmpty>
<SelectInput source="name" />
</ReferenceInput>
</FormTab>
<FormTab label="Subjects">
<EmbeddedArrayInput source="subjects">
<ReferenceInput label="Enter subject" source="subject_id" reference="subjects" allowEmpty style={{ display: 'inline-block' }} >
<SelectInput source="name" />
</ReferenceInput>
<NumberInput label="Enter full marks" source="fullMarks" style={{ display: 'inline-block' }} />
<NumberInput label="Enter pass marks" source="passMarks" style={{ display: 'inline-block' }} />
</EmbeddedArrayInput>
</FormTab>
</TabbedForm>
</Create>
I would love to be able to insert another row that copies the data from the current row and inserts this row after the row in which the button was clicked. Or is it possible to just have the add button copy the previous row values by default? (in my case only, not suggested this be the default action out of the box)
We should able to customize container & label to give our look and feel.
Since it is preferred that some features live as an external package, it helps to be able to find them more easily. For that purpose, could you add the topics admin-on-rest
, react-admin
to this repo?
And could you add an examples paragraph to README.md that shows screenshots of how the UI of EmbeddedArrayField of EmbeddedArrayInput look like?
I have tried my best to use it in my project. A full example or a sandbox like this will be very helpful. Thanks
Hello,
Any news about the label translation which is currently not working?
I think you were waiting on some code change in aor?
Thanks
I try with combining two or more fields in a single line then the its look like follows
Here remove button is not inline, and Its looks ugly
So to solve this problem we can add a prop name removeButtonStyle
, which can used for customize the default styling of remove button. I try with that and found following result.
This I can achieve by providing the removeButtonStyle
.
Any plans to update for react-admin
?
If not, I can fork and update. Just wanted to check with you first.
Hello,
Currently you only publish a package dependent on aor 1.3.0.
Would it be possible to also have a next branch so we can already start integration with aor (ra) next branch ?
Thanks
For example we suppose, I have a state variable that is a array and have 4 members:
In EmbeddedArrayInput I want to add four item automatically to this EmbeddedArrayInput, now with button.
Is it possible? and if it is, is it easy?
I think that along the same lines that EmbeddedArrayInput works there is need for EmbeddedInput that works for one element - something that would solve my issues here: https://stackoverflow.com/questions/46592926/how-to-leverage-embedded-resources-in-referencearrayinput-and-referencearrayfiel
https://stackoverflow.com/questions/46592587/how-to-correctly-render-referenced-entities-in-list-when-i-have-objects-instead
Unless it works for one or many inputs at the same time - I will try it
Thanks!
I'm so confused how to display a string array. It's ok when I use ng-admin since there's an array field, but it's difficult to show a flat array field when migrating to aor. That's very odd.
Hello,
I am getting the following stack trace error when using EmbeddedArrayInput
one inside another one
My JSON payload look like:
{"id":"stcuEchLoadid_9",
"name":"Channel name",
"metadataSet":[{"locale":"en_GB","metadata":[{"key":"Title","value":"channel 01 title"}]},
{"locale":"none","metadata":[{"key":"another key","value":"another value"},
{"key":"a key","value":"a value"},
{"key":"Rating","value":"1"}
]
}]}
and my JSX like:
<Edit title={<ChannelTitle />} {...props}>
<SimpleForm>
<DisabledInput source="id"/>
<TextField source="name" validate={required}/>
<EmbeddedArrayInput source="metadataSet">
<TextField source="locale" />
<EmbeddedArrayInput source="metadataSet">
<TextField source="key" />
<TextField source="value" />
</EmbeddedArrayInput>
</EmbeddedArrayInput>
</SimpleForm>
</Edit>
The full stack trace if it helps
uncaught at t TypeError: Cannot read property '_currentElement' of null
at f._updateRenderedComponent (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:481451)
at f._performComponentUpdate (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:481276)
at f.updateComponent (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:480553)
at f.receiveComponent (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:479670)
at Object.receiveComponent (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:88310)
at Object.obj.(anonymous function) [as receiveComponent] (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8598:20)
at Object.updateChildren (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:474763)
at m._reconcilerUpdateChildren (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:472620)
at m._updateChildren (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:473369)
at m.updateChildren (http://localhost:8080/OpUi/static/js/main.4446f59a.js:1:473267)
f @ utils.js:225
(anonymous) @ proc.js:483
r @ scheduler.js:19
u @ scheduler.js:60
o @ scheduler.js:33
T @ proc.js:476
_ @ proc.js:425
h @ proc.js:306
n @ proc.js:378
Promise resolved (async)
E @ proc.js:440
S @ proc.js:507
_ @ proc.js:425
h @ proc.js:306
n @ proc.js:378
r @ proc.js:602
t @ proc.js:617
n @ proc.js:378
(anonymous) @ proc.js:489
r @ scheduler.js:19
u @ scheduler.js:60
o @ scheduler.js:33
(anonymous) @ channel.js:185
t @ channel.js:26
(anonymous) @ middleware.js:67
(anonymous) @ bindActionCreators.js:3
value @ Edit.js:125
value @ Edit.js:91
e.notifyAll @ CallbackQueue.js:74
close @ ReactReconcileTransaction.js:78
closeAll @ Transaction.js:207
perform @ Transaction.js:154
perform @ Transaction.js:141
perform @ ReactUpdates.js:87
x @ ReactUpdates.js:170
closeAll @ Transaction.js:207
perform @ Transaction.js:154
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
a @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145
its followed by a React Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
There seems to be a problem when trying to use a in combination with EmbeddedArrayInput.
I just can't get it to work - the reference field is not calling the endpoint, and therefore not displaying any data.
Are there any known tricks for this?
Hi!
First off, let me thank you, this is a lifesaver plugin :)
However, for me the labellAdd and labelRemove props are not working, or at least I'm missing something.
Example code:
export const CreateTest = (props) => (
<Create {...props}>
<TabbedForm>
<FormTab label="Testing">
<EmbeddedArrayInput source="testarr" label="Tests" labelAdd="Add new test" labelRemove="Remove test"
<TextInput source="name">
</EmbeddedArrayInput>
</FormTab >
</TabbedForm>
</Create>
);
So I added the labelAdd and labelRemove props but the buttons labels are still 'Add' and 'Remove' respectively. Am I missing something here?
Hi, is it possible to use this component if the array consists of primitive types, such as:
[1, 2, 3]
or ['one', 'two', 'three']
I assume it's not directly possible since the source prop of the nested field is required:
<EmbeddedArrayInput source="links">
<LongTextInput source="url" />
</EmbeddedArrayInput>
What would I have to change to make it work with just links[i]
instead of links[i].url
?
This is probably more like a query than an issue as I know this might be on the works already.
Do you have target release date for aor-embedded-array which is compatible with react-admin?
I have tried adding this in a [email protected] and it seems this is not yet usable.
Btw, thanks a lot for this tool. I badly need this. :D
Hi!
I would like to ask for some design enhancements for this plugin, as it becomes quite cluttered and non-user friendly when a user adds multiple elements especially when sub-elements are also involved.
My best bet so far would be to use material Cards for this issue, which can be easily nested inside another. This would make the design much clearer to follow. I would also suggest, that these cards should use the expanding capability of the material-ui cards, which would make the pages less vertically long. But this also raises the question of what the users should see when the card is collapsed.
I have read in one of the admin-on-rest issues that they for some reason (maybe even technical reasons) don't like this idea. I don't really seem to get why, though.
What do you think?
Also, I'm not trying to tell you what to do, I'm merely trying to get a conversation started about this and would especially love if a UX maestro could jump on in this issue :)
Add actions prop similar to how AOR allows for custom actions ala-CardActions
. This would be great for extending the functionality aside from the remove button.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.