|
1 | 1 | import { FunctionComponent, useState } from "react"; |
2 | 2 | import Link from "next/link"; |
3 | 3 | import { useRouter } from "next/router"; |
4 | | -import { ErrorMessage, Formik } from "formik"; |
| 4 | +import { ErrorMessage{{#if hasManyRelations}}, Field, FieldArray{{/if}}, Formik } from "formik"; |
5 | 5 | import { useMutation } from "react-query"; |
6 | 6 |
|
7 | 7 | import { fetch, FetchError, FetchResponse } from "../../utils/dataAccess"; |
@@ -53,7 +53,20 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => { |
53 | 53 | <div> |
54 | 54 | <h1>{ {{{lc}}} ? `Edit {{{ucf}}} ${ {{~lc}}['@id']}` : `Create {{{ucf}}}` }</h1> |
55 | 55 | <Formik |
56 | | - initialValues={ {{~lc}} ? {...{{lc~}} } : new {{{ucf}}}()} |
| 56 | + initialValues={ |
| 57 | + {{lc}} ? |
| 58 | + { |
| 59 | + ...{{lc}}, |
| 60 | + {{#each fields}} |
| 61 | + {{#if isEmbeddeds}} |
| 62 | + {{name}}: {{../lc}}.{{name}}?.map((emb: any) => emb['@id']) ?? "", |
| 63 | + {{else if embedded}} |
| 64 | + {{name}}: {{../lc}}.{{name}}?.['@id'] ?? "", |
| 65 | + {{/if}} |
| 66 | + {{/each}} |
| 67 | + } : |
| 68 | + new {{{ucf}}}() |
| 69 | + } |
57 | 70 | validate={() => { |
58 | 71 | const errors = {}; |
59 | 72 | // add your validation logic here |
@@ -100,32 +113,66 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => { |
100 | 113 | <form onSubmit={handleSubmit}> |
101 | 114 | {{#each formFields}} |
102 | 115 | <div className="form-group"> |
103 | | - <label className="form-control-label" htmlFor="{{lc}}_{{name}}">{{name}}</label> |
104 | | - <input |
105 | | - name="{{name}}" |
106 | | - id="{{lc}}_{{name}}" |
107 | | - {{#compare type "==" "dateTime" }} |
108 | | - value={values.{{name}}?.toLocaleString() ?? ""} |
109 | | - {{/compare}} |
110 | | - {{#compare type "!=" "dateTime" }} |
111 | | - value={values.{{name}} ?? ""} |
112 | | - {{/compare}} |
113 | | - type="{{type}}" |
114 | | - {{#if step}}step="{{{step}}}"{{/if}} |
115 | | - placeholder="{{{description}}}" |
116 | | - {{#if required}}required={true}{{/if}} |
117 | | - className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`} |
118 | | - aria-invalid={errors.{{name}} && touched.{{name~}} ? 'true' : undefined} |
119 | | - onChange={handleChange} |
120 | | - onBlur={handleBlur} |
121 | | - /> |
122 | | - <ErrorMessage |
123 | | - className="invalid-feedback" |
124 | | - component="div" |
125 | | - name="{{name}}" |
126 | | - /> |
| 116 | + {{#if isRelations}} |
| 117 | + <div className="form-control-label">{{name}}</div> |
| 118 | + <FieldArray |
| 119 | + name="{{name}}" |
| 120 | + render={(arrayHelpers) => ( |
| 121 | + <div id="{{../lc}}_{{name}}"> |
| 122 | + {values.{{name}} && values.{{name}}.length > 0 ? ( |
| 123 | + values.{{name}}.map((item: any, index: number) => ( |
| 124 | + <div key={index}> |
| 125 | + <Field name={`{{name}}.${index}`} /> |
| 126 | + <button |
| 127 | + type="button" |
| 128 | + onClick={() => arrayHelpers.remove(index)} |
| 129 | + > |
| 130 | + - |
| 131 | + </button> |
| 132 | + <button |
| 133 | + type="button" |
| 134 | + onClick={() => arrayHelpers.insert(index, '')} |
| 135 | + > |
| 136 | + + |
| 137 | + </button> |
| 138 | + </div> |
| 139 | + )) |
| 140 | + ) : ( |
| 141 | + <button type="button" onClick={() => arrayHelpers.push('')}> |
| 142 | + Add |
| 143 | + </button> |
| 144 | + )} |
| 145 | + </div> |
| 146 | + )} |
| 147 | + /> |
| 148 | + {{else}} |
| 149 | + <label className="form-control-label" htmlFor="{{../lc}}_{{name}}">{{name}}</label> |
| 150 | + <input |
| 151 | + name="{{name}}" |
| 152 | + id="{{../lc}}_{{name}}" |
| 153 | + {{#compare type "==" "dateTime" }} |
| 154 | + value={values.{{name}}?.toLocaleString() ?? ""} |
| 155 | + {{/compare}} |
| 156 | + {{#compare type "!=" "dateTime" }} |
| 157 | + value={values.{{name}} ?? ""} |
| 158 | + {{/compare}} |
| 159 | + type="{{type}}" |
| 160 | + {{#if step}}step="{{{step}}}"{{/if}} |
| 161 | + placeholder="{{{description}}}" |
| 162 | + {{#if required}}required={true}{{/if}} |
| 163 | + className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`} |
| 164 | + aria-invalid={errors.{{name}} && touched.{{name~}} ? 'true' : undefined} |
| 165 | + onChange={handleChange} |
| 166 | + onBlur={handleBlur} |
| 167 | + /> |
| 168 | + <ErrorMessage |
| 169 | + className="invalid-feedback" |
| 170 | + component="div" |
| 171 | + name="{{name}}" |
| 172 | + /> |
| 173 | + {{/if}} |
127 | 174 | </div> |
128 | | - {{/each}} |
| 175 | + {{/each}} |
129 | 176 | {status && status.msg && ( |
130 | 177 | <div |
131 | 178 | className={`alert ${ |
|
0 commit comments