fix: manage route prefix

Author: alanpoulain

.github/workflows/ci.yml

@@ -28,6 +28,7 @@ jobs:
     - run: yarn test-next-app
     - run: yarn test-react-app
     - run: yarn test-vue-app
+    - run: yarn test-nuxt-app
     - run: yarn test-gen-env
     - run: yarn test-gen-openapi3
     - run: yarn check

package.json

@@ -66,7 +66,8 @@
     "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js",
     "test-react-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create react-app ./tmp/app/reactapp && yarn --cwd ./tmp/app/reactapp add react-router-dom@5 redux redux-thunk react-redux redux-form connected-react-router && cp -R ./tmp/react/* ./tmp/app/reactapp/src && cp ./templates/react/index.js ./tmp/app/reactapp/src && start-server-and-test 'BROWSER=none yarn --cwd ./tmp/app/reactapp start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
     "test-next-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create next-app --typescript ./tmp/app/next && yarn --cwd ./tmp/app/next add isomorphic-unfetch formik react-query && cp -R ./tmp/next/* ./tmp/app/next && rm ./tmp/app/next/pages/index.tsx && rm -rf ./tmp/app/next/pages/api && yarn --cwd ./tmp/app/next build && start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
-    "test-vue-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && cd ./tmp/app && npm init -y vue@2 -- --router vue && cd ../.. && yarn --cwd ./tmp/app/vue add vuex@3 vuex-map-fields lodash && cp -R ./tmp/vue/* ./tmp/app/vue/src && cp ./templates/vue/main.js ./tmp/app/vue/src && yarn --cwd ./tmp/app/vue build && start-server-and-test 'yarn --cwd ./tmp/app/vue vite preview --host 127.0.0.1 --port 3000' http://127.0.0.1:3000/books/ 'yarn playwright test'"
+    "test-vue-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && cd ./tmp/app && npm init -y vue@2 -- --router vue && cd ../.. && yarn --cwd ./tmp/app/vue add vuex@3 vuex-map-fields lodash && cp -R ./tmp/vue/* ./tmp/app/vue/src && cp ./templates/vue/main.js ./tmp/app/vue/src && yarn --cwd ./tmp/app/vue build && start-server-and-test 'yarn --cwd ./tmp/app/vue vite preview --host 127.0.0.1 --port 3000' http://127.0.0.1:3000/books/ 'yarn playwright test'",
+    "test-nuxt-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create nuxt-app --answers \"'{\\\"name\\\":\\\"nuxt\\\",\\\"language\\\":\\\"js\\\",\\\"pm\\\":\\\"yarn\\\",\\\"ui\\\":\\\"vuetify\\\",\\\"features\\\":[],\\\"linter\\\":[],\\\"test\\\":\\\"none\\\",\\\"mode\\\":\\\"spa\\\",\\\"target\\\":\\\"static\\\",\\\"devTools\\\":[],\\\"vcs\\\":\\\"none\\\"}'\" ./tmp/app/nuxt && yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields && cp -R ./tmp/nuxt/* ./tmp/app/nuxt && NUXT_TELEMETRY_DISABLED=1 NODE_OPTIONS=--openssl-legacy-provider yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start' http://127.0.0.1:3000/books/ 'yarn playwright test'"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"

src/generators/NextGenerator.js

@@ -1,6 +1,7 @@
 import chalk from "chalk";
 import handlebars from "handlebars";
 import hbhComparison from "handlebars-helpers/lib/comparison.js";
+import hbhString from "handlebars-helpers/lib/string.js";
 import BaseGenerator from "./BaseGenerator.js";
 
 export default class NextGenerator extends BaseGenerator {
@@ -35,6 +36,7 @@ export default class NextGenerator extends BaseGenerator {
     ]);
 
     handlebars.registerHelper("compare", hbhComparison.compare);
+    handlebars.registerHelper("lowercase", hbhString.lowercase);
   }
 
   help(resource) {
@@ -77,24 +79,21 @@ export default class NextGenerator extends BaseGenerator {
 
     // Copy with patterned name
     this.createDir(`${dir}/components/${context.lc}`);
-    this.createDir(`${dir}/pages/${context.name}`);
-    this.createDir(`${dir}/pages/${context.name}/[id]`);
+    this.createDir(`${dir}/pages/${context.lc}s`);
+    this.createDir(`${dir}/pages/${context.lc}s/[id]`);
     [
       // components
       "components/%s/List.tsx",
       "components/%s/Show.tsx",
       "components/%s/Form.tsx",
-    ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, context.lc, context)
-    );
-    [
+
       // pages
-      "pages/%s/[id]/index.tsx",
-      "pages/%s/[id]/edit.tsx",
-      "pages/%s/index.tsx",
-      "pages/%s/create.tsx",
+      "pages/%ss/[id]/index.tsx",
+      "pages/%ss/[id]/edit.tsx",
+      "pages/%ss/index.tsx",
+      "pages/%ss/create.tsx",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, context.name, context, "foos")
+      this.createFileFromPattern(pattern, dir, context.lc, context)
     );
 
     // interface pattern should be camel cased

src/generators/NextGenerator.test.js

@@ -29,7 +29,7 @@ describe("generate", () => {
         description: "An URL",
       }),
     ];
-    const resource = new Resource("abcs", "http://example.com/foos", {
+    const resource = new Resource("prefix/aBe_cd", "http://example.com/foos", {
       id: "abc",
       title: "abc",
       readableFields: fields,

src/generators/NuxtGenerator.js

@@ -25,9 +25,10 @@ export default class NuxtGenerator extends BaseVueGenerator {
       "mixins/update.js",
 
       // pages
-      "pages/foos/new.vue",
+      "pages/foos/create.vue",
       "pages/foos/index.vue",
-      "pages/foos/_id.vue",
+      "pages/foos/_id/edit.vue",
+      "pages/foos/_id/index.vue",
 
       // store
       "store/crud.js",
@@ -106,7 +107,11 @@ export default class NuxtGenerator extends BaseVueGenerator {
 
     this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
 
-    [`${dir}/components/${lc}`, `${dir}/pages/${lc}s`].forEach((dir) => {
+    [
+      `${dir}/components/${lc}`,
+      `${dir}/pages/${lc}s`,
+      `${dir}/pages/${lc}s/_id`,
+    ].forEach((dir) => {
       this.createDir(dir);
     });
 
@@ -118,9 +123,10 @@ export default class NuxtGenerator extends BaseVueGenerator {
       "components/%s/Form.vue",
 
       // pages
-      "pages/%ss/new.vue",
+      "pages/%ss/create.vue",
       "pages/%ss/index.vue",
-      "pages/%ss/_id.vue",
+      "pages/%ss/_id/edit.vue",
+      "pages/%ss/_id/index.vue",
 
       // service
       "services/%s.js",

src/generators/NuxtGenerator.test.js

@@ -29,7 +29,7 @@ describe("generate", () => {
         description: "An URL",
       }),
     ];
-    const resource = new Resource("abc", "http://example.com/foos", {
+    const resource = new Resource("prefix/aBe_cd", "http://example.com/foos", {
       id: "foo",
       title: "Foo",
       readableFields: fields,
@@ -60,9 +60,10 @@ describe("generate", () => {
         "/utils/dates.js",
         "/utils/fetch.js",
         "/utils/hydra.js",
-        "/pages/foos/_id.vue",
+        "/pages/foos/_id/edit.vue",
+        "/pages/foos/_id/index.vue",
         "/pages/foos/index.vue",
-        "/pages/foos/new.vue",
+        "/pages/foos/create.vue",
       ].forEach((file) => {
         expect(fs.existsSync(tmpobj.name + file)).toBe(true);
       });

src/generators/QuasarGenerator.js

@@ -116,7 +116,7 @@ export default class extends BaseGenerator {
     handlebars.registerHelper("ifOdd", hbh_comparison.ifOdd);
     handlebars.registerHelper("inArray", hbh_array.inArray);
     handlebars.registerHelper("forEach", hbh_array.forEach);
-    handlebars.registerHelper("downcase", hbh_string.downcase);
+    handlebars.registerHelper("lowercase", hbh_string.lowercase);
     handlebars.registerHelper("capitalize", hbh_string.capitalize);
 
     this.registerSwitchHelper();

src/generators/VueBaseGenerator.js

@@ -43,7 +43,7 @@ export default class extends BaseGenerator {
     handlebars.registerHelper("isArray", hbh_array.isArray);
     handlebars.registerHelper("inArray", hbh_array.inArray);
     handlebars.registerHelper("forEach", hbh_array.forEach);
-    handlebars.registerHelper("downcase", hbh_string.downcase);
+    handlebars.registerHelper("lowercase", hbh_string.lowercase);
 
     this.registerSwitchHelper();
   }
@@ -105,15 +105,13 @@ export default class extends BaseGenerator {
     const lc = resource.title.toLowerCase();
     const titleUcFirst =
       resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
+    const fields = this.parseFields(resource);
 
     const formFields = this.buildFields(resource.writableFields);
 
     const dateTypes = ["time", "date", "dateTime"];
     const formContainsDate = formFields.some((e) => dateTypes.includes(e.type));
 
-    const fields = this.buildFields(resource.readableFields);
-    const listContainsDate = fields.some((e) => dateTypes.includes(e.type));
-
     const parameters = [];
     params.forEach((p) => {
       const param = fields.find((field) => field.name === p.variable);
@@ -139,7 +137,6 @@ export default class extends BaseGenerator {
       uc: resource.title.toUpperCase(),
       fields,
       dateTypes,
-      listContainsDate,
       paramsHaveRefs,
       parameters,
       formFields,
@@ -304,4 +301,31 @@ export default class extends BaseGenerator {
       recPerPage: "Records per page:",
     };
   }
+
+  parseFields(resource) {
+    const fields = [
+      ...resource.writableFields,
+      ...resource.readableFields,
+    ].reduce((list, field) => {
+      if (list[field.name]) {
+        return list;
+      }
+
+      const isReferences = field.reference && field.maxCardinality !== 1;
+      const isEmbeddeds = field.embedded && field.maxCardinality !== 1;
+
+      return {
+        ...list,
+        [field.name]: {
+          ...field,
+          readonly: false,
+          isReferences,
+          isEmbeddeds,
+          isRelations: isEmbeddeds || isReferences,
+        },
+      };
+    }, {});
+
+    return Object.values(fields);
+  }
 }

templates/next/components/common/Pagination.tsx

@@ -19,22 +19,22 @@ const Pagination = ({ collection }: Props) => {
   return (
     <nav aria-label="Page navigation">
       <Link href={first ? first : '#'}>
-        <a className={`btn btn-primary${previous ? '' : ' disabled'}`}>
+        <a className={`btn btn-primary${previous ? '' : ' disabled'}`} aria-label="First page">
           <span aria-hidden="true">&lArr;</span> First
         </a>
       </Link>
       <Link href={previous ? previous : '#'}>
-        <a className={`btn btn-primary${previous ? '' : ' disabled'}`}>
+        <a className={`btn btn-primary${previous ? '' : ' disabled'}`} aria-label="Previous page">
           <span aria-hidden="true">&larr;</span> Previous
         </a>
       </Link>
       <Link href={next ? next : '#'}>
-        <a className={`btn btn-primary${next ? '' : ' disabled'}`}>
+        <a className={`btn btn-primary${next ? '' : ' disabled'}`} aria-label="Next page">
           Next <span aria-hidden="true">&rarr;</span>
         </a>
       </Link>
       <Link href={last ? last : '#'}>
-        <a className={`btn btn-primary${next ? '' : ' disabled'}`}>
+        <a className={`btn btn-primary${next ? '' : ' disabled'}`} aria-label="Last page">
           Last <span aria-hidden="true">&rArr;</span>
         </a>
       </Link>

templates/next/components/common/ReferenceLinks.tsx

@@ -2,13 +2,10 @@ import Link from "next/link";
 import { Fragment, FunctionComponent } from "react";
 
 interface Props {
-  items: string | string[];
-  useIcon?: boolean;
+  items: string | string[] | { href: string; name: string } | { href: string; name: string }[];
 }
-const ReferenceLinks: FunctionComponent<Props> = ({
-  items,
-  useIcon = false,
-}) => {
+
+const ReferenceLinks: FunctionComponent<Props> = ({ items }) => {
   if (Array.isArray(items)) {
     return (
       <Fragment>
@@ -22,16 +19,9 @@ const ReferenceLinks: FunctionComponent<Props> = ({
   }
 
   return (
-    <Link href={items}>
+    <Link href={typeof items === "string" ? items : items.href}>
       <a>
-        {useIcon ? (
-          <Fragment>
-            <i className="bi bi-search" aria-hidden="true"></i>
-            <span className="sr-only">Show</span>
-          </Fragment>
-        ) : (
-          items
-        )}
+        {typeof items === "string" ? items : items.name}
       </a>
     </Link>
   );

templates/next/components/foo/Form.tsx

@@ -35,7 +35,7 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
 
   const deleteMutation = useMutation<FetchResponse<{{ucf}}> | undefined, Error|FetchError, DeleteParams>(({ id }) => delete{{{ucf}}}(id), {
     onSuccess: () => {
-      router.push("/{{{name}}}");
+      router.push("/{{{lc}}}s");
     },
     onError: (error)=> {
       setError(`Error when deleting the resource: ${error}`);
@@ -193,7 +193,7 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
           </form>
         )}
       </Formik>
-      <Link href="/{{{name}}}">
+      <Link href="/{{{lc}}}s">
         <a className="btn btn-primary">Back to list</a>
       </Link>
       { {{{lc}}} && (

templates/next/components/foo/List.tsx

@@ -2,57 +2,67 @@ import { FunctionComponent } from "react";
 import Link from "next/link";
 
 import ReferenceLinks from "../common/ReferenceLinks";
+import { getPath } from "../../utils/dataAccess";
 import { {{{ucf}}} } from '../../types/{{{ucf}}}';
 
 interface Props {
-  {{{name}}}: {{{ucf}}}[];
+  {{{lc}}}s: {{{ucf}}}[];
 }
 
-export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
+export const List: FunctionComponent<Props> = ({ {{{lc}}}s }) => (
   <div>
     <h1>{{{ucf}}} List</h1>
-    <Link href="/{{{name}}}/create">
+    <Link href="/{{{lc}}}s/create">
       <a className="btn btn-primary">Create</a>
     </Link>
     <table className="table table-responsive table-striped table-hover">
       <thead>
         <tr>
           <th>id</th>
           {{#each fields}}
-          <th>{{name}}</th>
+            <th>{{name}}</th>
           {{/each}}
           <th/>
         </tr>
       </thead>
       <tbody>
-        { {{{name}}} && ({{{name}}}.length !== 0) && {{{name}}}.map( ( {{{lc}}} ) => (
+        { {{{lc}}}s && ({{{lc}}}s.length !== 0) && {{{lc}}}s.map( ( {{{lc}}} ) => (
           {{{lc}}}['@id'] &&
           <tr key={ {{{lc}}}['@id'] }>
-            <th scope="row"><ReferenceLinks items={ {{{lc}}}['@id'] } /></th>
+            <th scope="row">
+              <ReferenceLinks items={ { href: getPath({{{lc}}}['@id'], '/{{{lc}}}s/[id]'), name: {{{lc}}}['@id'] } } />
+            </th>
             {{#each fields}}
               <td>
                 {{#if reference}}
-                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } />
+                  <ReferenceLinks items={ { href: getPath({{{../lc}}}['{{{name}}}'], '/{{{lowercase reference.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}'] } } />
                 {{else if isEmbeddeds}}
-                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => emb['@id']) } />
+                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => ({ href: getPath(emb['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: emb['@id'] })) } />
                 {{else if embedded}}
-                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}']['@id'] } />
+                  <ReferenceLinks items={ { href: getPath({{{../lc}}}['{{{name}}}']['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}']['@id'] } } />
                 {{else if (compare type "==" "Date") }}
                   { {{{../lc}}}['{{{name}}}']?.toLocaleString() }
                 {{else}}
                   { {{{../lc}}}['{{{name}}}'] }
                 {{/if}}
               </td>
             {{/each}}
-            <td><ReferenceLinks items={ {{{lc}}}['@id'] } useIcon={true} /></td>
-          <td>
-            <Link href={`${ {{~lc}}["@id"]}/edit`}>
-              <a>
-                <i className="bi bi-pen" aria-hidden="true" />
-                <span className="sr-only">Edit</span>
-              </a>
-            </Link>
-          </td>
+            <td>
+              <Link href={ getPath({{{lc}}}['@id'], '/{{{lc}}}s/[id]') }>
+                <a>
+                  <i className="bi bi-search" aria-hidden="true"></i>
+                  <span className="sr-only">Show</span>
+                </a>
+              </Link>
+            </td>
+            <td>
+              <Link href={ getPath({{{lc}}}["@id"], '/{{{lc}}}s/[id]/edit') }>
+                <a>
+                  <i className="bi bi-pen" aria-hidden="true" />
+                  <span className="sr-only">Edit</span>
+                </a>
+              </Link>
+            </td>
           </tr>
         ))}
       </tbody>