Add Nuxt.js generator

src/generators.js

@@ -1,5 +1,6 @@
 import AdminOnRestGenerator from "./generators/AdminOnRestGenerator";
 import NextGenerator from "./generators/NextGenerator";
+import NuxtGenerator from "./generators/NuxtGenerator";
 import ReactGenerator from "./generators/ReactGenerator";
 import ReactNativeGenerator from "./generators/ReactNativeGenerator";
 import TypescriptInterfaceGenerator from "./generators/TypescriptInterfaceGenerator";
@@ -18,6 +19,8 @@ export default function generators(generator = "react") {
       return wrap(AdminOnRestGenerator);
     case "next":
       return wrap(NextGenerator);
+    case "nuxt":
+      return wrap(NuxtGenerator);
     case "react":
       return wrap(ReactGenerator);
     case "react-native":

src/generators/NuxtGenerator.js

@@ -0,0 +1,146 @@
+import chalk from "chalk";
+import BaseVueGenerator from "./VueBaseGenerator";
+
+export default class extends BaseVueGenerator {
+  constructor(params) {
+    super(params);
+
+    this.registerTemplates(`nuxt/`, [
+      // components
+      "components/ActionCell.vue",
+      "components/Alert.vue",
+      "components/ConfirmDelete.vue",
+      "components/DataFilter.vue",
+      "components/InputDate.vue",
+      "components/Loading.vue",
+      "components/Toolbar.vue",
+      "components/foo/Filter.vue",
+      "components/foo/Form.vue",
+
+      // mixins
+      "mixins/create.js",
+      "mixins/list.js",
+      "mixins/notification.js",
+      "mixins/show.js",
+      "mixins/update.js",
+
+      // pages
+      "pages/foos/new.vue",
+      "pages/foos/index.vue",
+      "pages/foos/_id.vue",
+
+      // store
+      "store/crud.js",
+      "store/foo.js"
+    ]);
+  }
+
+  help(resource) {
+    console.log(
+      chalk.green('Code for the "%s" resource type has been generated!'),
+      resource.title
+    );
+  }
+
+  generateFiles(api, resource, dir, params) {
+    const context = super.getContextForResource(resource, params);
+    const lc = context.lc;
+
+    [
+      `${dir}/config`,
+      `${dir}/error`,
+      `${dir}/mixins`,
+      `${dir}/services`,
+      `${dir}/utils`,
+      `${dir}/validators`
+    ].forEach(dir => this.createDir(dir, false));
+
+    // error
+    this.createFile(
+      "error/SubmissionError.js",
+      `${dir}/error/SubmissionError.js`,
+      {},
+      false
+    );
+
+    // mixins
+    [
+      "mixins/create.js",
+      "mixins/list.js",
+      "mixins/notification.js",
+      "mixins/show.js",
+      "mixins/update.js"
+    ].forEach(file => this.createFile(file, `${dir}/${file}`, context, false));
+
+    // stores
+    this.createFile(
+      `store/modules/notifications.js`,
+      `${dir}/store/notifications.js`,
+      { hydraPrefix: this.hydraPrefix },
+      false
+    );
+
+    this.createFile(
+      `store/crud.js`,
+      `${dir}/store/crud.js`,
+      { hydraPrefix: this.hydraPrefix },
+      false
+    );
+
+    // validators
+    this.createFile(
+      "validators/date.js",
+      `${dir}/validators/date.js`,
+      { hydraPrefix: this.hydraPrefix },
+      false
+    );
+
+    // utils
+    ["dates.js", "fetch.js", "hydra.js"].forEach(file =>
+      this.createFile(`utils/${file}`, `${dir}/utils/${file}`, {}, false)
+    );
+
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.js`);
+
+    for (let dir of [`${dir}/components/${lc}`, `${dir}/pages/${lc}s`]) {
+      this.createDir(dir);
+    }
+
+    this.createFile("services/api.js", `${dir}/services/api.js`, {}, false);
+
+    [
+      // components
+      "components/%s/Filter.vue",
+      "components/%s/Form.vue",
+
+      // pages
+      "pages/%ss/new.vue",
+      "pages/%ss/index.vue",
+      "pages/%ss/_id.vue",
+
+      // service
+      "services/%s.js",
+
+      // store
+      "store/%s.js"
+    ].forEach(pattern => this.createFileFromPattern(pattern, dir, lc, context));
+
+    // components
+    [
+      "ActionCell.vue",
+      "Alert.vue",
+      "ConfirmDelete.vue",
+      "DataFilter.vue",
+      "InputDate.vue",
+      "Loading.vue",
+      "Toolbar.vue"
+    ].forEach(file =>
+      this.createFile(
+        `components/${file}`,
+        `${dir}/components/${file}`,
+        context,
+        false
+      )
+    );
+  }
+}

src/generators/NuxtGenerator.test.js

@@ -0,0 +1,74 @@
+import { Api, Resource, Field } from "@api-platform/api-doc-parser/lib";
+import fs from "fs";
+import tmp from "tmp";
+import NuxtGenerator from "./NuxtGenerator";
+
+const generator = new NuxtGenerator({
+  hydraPrefix: "hydra:",
+  templateDirectory: `${__dirname}/../../templates`
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+describe("generate", () => {
+  test("Generate a Nuxt app", () => {
+    const tmpobj = tmp.dirSync({ unsafeCleanup: true });
+
+    const fields = [
+      new Field("bar", {
+        id: "http://schema.org/url",
+        range: "http://www.w3.org/2001/XMLSchema#string",
+        reference: null,
+        required: true,
+        description: "An URL"
+      })
+    ];
+    const resource = new Resource("abc", "http://example.com/foos", {
+      id: "foo",
+      title: "Foo",
+      readableFields: fields,
+      writableFields: fields,
+      getParameters: function getParameters() {
+        return Promise.resolve([]);
+      }
+    });
+    const api = new Api("http://example.com", {
+      entrypoint: "http://example.com:8080",
+      title: "My API",
+      resources: [resource]
+    });
+
+    generator.generate(api, resource, tmpobj.name).then(() => {
+      [
+        "/components/ActionCell",
+        "/components/ConfirmDelete",
+        "/components/DataFilter",
+        "/components/foo/Filter",
+        "/components/foo/Form.vue",
+        "/components/foo/Layout",
+        "/components/InputDate.vue",
+        "/components/Loading.vue",
+        "/components/Alert.vue",
+        "/components/Toolbar.vue",
+        "/config/entrypoint.js",
+        "/error/SubmissionError.js",
+        "/locales/en.js",
+        "/services/api.js",
+        "/services/foo.js",
+        "/store/foo.js",
+        "/utils/dates.js",
+        "/utils/fetch.js",
+        "/utils/hydra.js",
+        "/pages/foos/_id.vue",
+        "/pages/foos/index.vue",
+        "/pages/foos/new.vue"
+      ].forEach(file => {
+        expect(fs.existsSync(tmpobj.name + file)).toBe(true);
+      });
+
+      tmpobj.removeCallback();
+    });
+  });
+});

templates/nuxt/components/ActionCell.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <v-row justify="space-around">
+      <v-icon v-if="handleShow" small class="mr-2" @click="handleShow">mdi-eye</v-icon>
+      <v-icon v-if="handleEdit" small class="mr-2" @click="handleEdit">mdi-pencil</v-icon>
+      <v-icon v-if="handleDelete" small @click="confirmDelete = true">mdi-delete</v-icon>
+    </v-row>
+    <ConfirmDelete
+      v-if="handleDelete"
+      :visible="confirmDelete"
+      :handle-delete="handleDelete"
+      @close="confirmDelete = false"
+    />
+  </div>
+</template>
+
+<script>
+import ConfirmDelete from './ConfirmDelete';
+
+export default {
+  name: 'ActionCell',
+  components: {
+    ConfirmDelete
+  },
+  data: () => ({
+    confirmDelete: false
+  }),
+  props: {
+    handleShow: {
+      type: Function,
+      required: false
+    },
+    handleEdit: {
+      type: Function,
+      required: false
+    },
+    handleDelete: {
+      type: Function,
+      required: false
+    }
+  }
+};
+</script>

templates/nuxt/components/Alert.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-snackbar
+    v-model="show"
+    :color="color"
+    :multi-line="true"
+    :timeout="timeout"
+    right
+    top
+  >
+    \{{ text }}
+    <template v-if="subText">
+      <p>\{{ subText }}</p>
+    </template>
+
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        dark
+        text
+        v-bind="attrs"
+        @click="show = false"
+      >
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+import { mapFields } from 'vuex-map-fields';
+
+export default {
+  computed: {
+    ...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout'])
+  },
+
+  methods: {
+    close() {
+      this.show = false;
+    }
+  }
+};
+</script>

templates/nuxt/components/ConfirmDelete.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-dialog v-model="show" persistent width="300">
+    <v-card>
+      <v-card-text>Are you sure you want to delete this item?</v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="error darken-1" @click="handleDelete">
+          Delete
+        </v-btn>
+        <v-btn color="secondary darken-1" text @click.stop="show = false">
+          Cancel
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmDelete',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+      default: () => false
+    },
+    handleDelete: {
+      type: Function,
+      required: true
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.visible;
+      },
+      set(value) {
+        if (!value) {
+          this.$emit('close');
+        }
+      }
+    }
+  }
+};
+</script>