fix: manage route prefix (#336)

Author: alanpoulain

.github/workflows/ci.yml

@@ -28,6 +28,9 @@ jobs:
     - run: yarn test-next-app
     - run: yarn test-react-app
     - run: yarn test-vue-app
+    - env:
+        NODE_OPTIONS: "${{ matrix.node-version == 'current' && '--openssl-legacy-provider' || '' }}"
+      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 yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' 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>
   );