mhdsyrwan / aor-embedded-array Goto Github PK

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>

Output

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?

We should able add one or more custom buttons as shown in the figure

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.

Please see https://github.com/marmelab/admin-on-rest/pull/1177

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

The icon of add button should be '+', now it looks similar to edit icon, so a little bit confusing.

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.

I am kind of new to react/js and am using aor to develop a platform. I am trying to dispose a history datagrid which is passed from my API as an array. You can see my issue in the image bellow.

Please let me know if I can help you with something or if you have some kind of solution.