Related pubs in form #910
Related pubs in form #910
Conversation
allisonking
force-pushed
the
aking/791/related-pubs-in-form
branch
from
0648f6c to
3751834
Compare
| @@ -175,6 +176,18 @@ export const FormElement = ({ | |||
| ); | |||
| } | |||
|
|
|||
| if (element.isRelation) { | |||
| const valueComponent = input; | |||
There was a problem hiding this comment.
I had a small hope this would Just Work, but it doesn't :) We want to render an "wrapper" component and an "inner" component
The 'wrapper' component is the 'Pub Relations' box, and the 'inner' component is the popover 'Role' in this screenshot. Without taking any of the changes in this PR into account, FormElement would return the contents of 'Role', which is what we want, just in the popover instead, so I stashed that as valueComponent here. Then render the 'wrapper' as RelatedPubsElement.
This doesn't actually work though because the value of the form is going to be an array now—something like {'croccroc:author': [ {value: 'admin', relatedPubId: 'xxx'} ]} so currently we end up rendering
.
The only way I can think of to get this to work is to render a separate component inside RelatedPubsElement based on the CoreSchemaType that is a lot like FormElement.tsx but doesn't make all the same assumptions, and might not use i.e. TextInputElement.tsx since that tries to get the field value directly when really we need to index into the array.
maybe I'm missing a simpler way to do this though??
allisonking
force-pushed
the
aking/791/related-pubs-in-form
branch
from
7a509bb to
1995b69
Compare
| demoComponent: ({ element }) => { | ||
| const isText = | ||
| element.schemaName === CoreSchemaType.String || | ||
| element.schemaName === CoreSchemaType.Email; |
There was a problem hiding this comment.
Email was showing up as a number component in the demo component part
| @@ -95,49 +96,12 @@ const elementPanelTitles: Record<PanelState["state"], string> = { | |||
| editingButton: "Edit Submission Button", | |||
| }; | |||
|
|
|||
| const PanelHeader = ({ state }: { state: PanelState["state"] }) => { | |||
There was a problem hiding this comment.
I moved all the side panel stuff to another component so I could reuse it in the form fill page. I think this would be better off using a drawer or maybe even the new side bar component from shadcn, but for now I reused what we had to keep things consistent
| @@ -1,48 +1,24 @@ | |||
| import { defaultComponent } from "schemas"; | |||
There was a problem hiding this comment.
Refactored this to be a wrapper around PubFieldFormElement which now takes a lot of the inside of this function. This is because I needed to reuse the parts in PubFieldFormElement to render the inner value component:
| @@ -0,0 +1,172 @@ | |||
| import { defaultComponent } from "schemas"; | |||
There was a problem hiding this comment.
pretty much directly pulled from FormElement.tsx
| (pv) => pv.relatedPubId | ||
| ); | ||
|
|
||
| if (pubValuesWithRelations.length) { |
There was a problem hiding this comment.
this might result in an inconsistent return—should I update replacePubRelationsBySlug to also return something like what the .insertInto("pub_values") below does and then combine them?
| body = error[0]?.message; | ||
| const firstErrorIndex = error.findIndex((e) => !!e); | ||
| const firstError = error[firstErrorIndex]; | ||
| body = firstError?.message ?? `Error with value at index ${firstErrorIndex}`; |
There was a problem hiding this comment.
this isn't a great error message, but I wasn't sure a better way to get something to show up when there is an error with a value in one of the array fields. This shows up as
when the 'value' field is empty
Issue(s) Resolved
Closes #791
High-level Explanation of PR
Adds related pub configuration to the external fill form.
Test Plan
And also configure the 'value' for the relationship
This should work for more complex fields like StringArrays too and include validation on the 'value' field
Save the form. Visiting the form again should load your values (you can visit again by visiting the url
http://localhost:3000/c/{communitySlug}/public/forms/{formSlug}/fill?pubId={pubId})You can also visit the pub page for this created pub and see your related pubs
Screenshots (if applicable)
Notes
Known issues: