diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx index 2284cff5..f97a3b9e 100644 --- a/templates/next/components/foo/Form.tsx +++ b/templates/next/components/foo/Form.tsx @@ -1,6 +1,7 @@ import { FunctionComponent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; +import Head from "next/head"; import { Formik } from "formik"; import { fetch } from "../../utils/dataAccess"; import { {{{ucf}}} } from '../../types/{{{ucf}}}'; @@ -27,15 +28,21 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { return (
- { {{{lc}}} ?

Edit {{{ucf}}} { {{{lc}}}['@id'] }

:

Create {{{ucf}}}

} - { - const errors = {}; - // add your validation logic here +
+ + { {{{lc}}} ? `Edit {{{ucf}}} ${ {{{~lc}}}['@id']}` : `Create {{{ucf}}}` } + + +
+

{{{lc}}} ? `Edit {{{ucf}}} ${ {{{~lc}}}['@id']}` : `Create {{{ucf}}}`

+ { + const errors = {}; + // add your validation logic here return errors; - }} - onSubmit={async (values, { setSubmitting, setStatus }) => { + }} + onSubmit={async (values, { setSubmitting, setStatus }) => { const isCreation = !values["@id"]; try { await fetch(isCreation ? "/{{{name}}}" : values["@id"], { @@ -53,24 +60,24 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { msg: `Error when ${isCreation ? 'creating': 'updating'} the resource.`, }); } - setSubmitting(false); - }} - > - {({ - values, + setSubmitting(false); + }} + > + {({ + values, status, errors, touched, - handleChange, - handleBlur, - handleSubmit, - isSubmitting, - }) => ( -
+ handleChange, + handleBlur, + handleSubmit, + isSubmitting, + }) => ( + {{#each formFields}} -
- - + + = ({ {{{lc}}} }) => { {{#if required}}required={true}{{/if}} className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`} aria-invalid={errors.{{name}} && touched.{{name~}} } - onChange={handleChange} - onBlur={handleBlur} - /> -
- { errors.{{name}} && touched.{{name}} &&
{ errors.{{name}} }
} + onChange={handleChange} + onBlur={handleBlur} + /> +
+ { errors.{{name}} && touched.{{name}} &&
{ errors.{{name}} }
} {{/each}} - {status && status.msg && ( -
- {status.msg} -
- )} + {status && status.msg && ( +
+ {status.msg} +
+ )} - {error && ( -
- {error} -
- )} + {error && ( +
+ {error} +
+ )} - - - )} - - - Back to list - - { {{{lc}}} && ( - - )} - - ); + + + )} + + + Back to list + + { {{{lc}}} && ( + + )} + + ); }; diff --git a/templates/next/components/foo/List.tsx b/templates/next/components/foo/List.tsx index 92943710..0826fa40 100644 --- a/templates/next/components/foo/List.tsx +++ b/templates/next/components/foo/List.tsx @@ -1,5 +1,6 @@ import { FunctionComponent } from "react"; import Link from "next/link"; +import Head from "next/head"; import ReferenceLinks from "../../components/common/ReferenceLinks"; import { {{{ucf}}} } from '../../types/{{{ucf}}}'; @@ -9,6 +10,12 @@ interface Props { export const List: FunctionComponent = ({ {{{name}}} }) => (
+
+ + {{{ucf}}} List + + +

{{{ucf}}} List

Create @@ -31,6 +38,8 @@ export const List: FunctionComponent = ({ {{{name}}} }) => ( {{#if reference}}{{else}}{ {{{../lc}}}['{{{name}}}'] }{{/if}} {{/each}} +

+ Edit ))} diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx index 1b45dcbe..0c6d59d8 100644 --- a/templates/next/components/foo/Show.tsx +++ b/templates/next/components/foo/Show.tsx @@ -1,5 +1,6 @@ import { FunctionComponent, useState } from 'react'; import Link from 'next/link'; +import Head from "next/head"; import { useRouter } from "next/router"; import { fetch } from "../../utils/dataAccess"; import { ReferenceLinks } from '../common/ReferenceLinks'; @@ -26,8 +27,14 @@ export const Show: FunctionComponent = ({ {{{lc}}} }) => { }; return ( -
-

Show { {{{lc}}}['@id'] }

+

+
+ + {`Show {{{ucf}}} ${ {{{~lc}}}['@id']}`} + + +
+

{`Show {{{ucf}}} ${ {{{~lc}}}['@id']}`}