Merge pull request #13 from dionmaicon/add_types_to_model_templates

Add eslintrc file
dionmaicon · Dec 31, 2019 · 3e293f4 · 3e293f4
2 parents 88a4c9c + 40a2b25
commit 3e293f4
Show file tree

Hide file tree

Showing 9 changed files with 200 additions and 100 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -11,4 +11,4 @@ deploy:
   provider: npm
   email: "dionmaicon@outlook.com"
   api_key: $npm_token
-  tag: beta
+  # tag: beta
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # vue-crudgen
-CRUD (Create, Read, Update and Delete) basic generator for Vue.js
+CRUD (Create, Read, Update and Delete) basic generator for Vue.js - Beta.
 
 [![Coverage Status](https://coveralls.io/repos/github/dionmaicon/vue-crudgen/badge.svg?branch=master)](https://coveralls.io/github/dionmaicon/vue-crudgen?branch=master)
 [![Build Status](https://travis-ci.org/dionmaicon/vue-crudgen.svg?branch=master)](https://travis-ci.org/dionmaicon/vue-crudgen)
@@ -8,19 +8,25 @@ CRUD (Create, Read, Update and Delete) basic generator for Vue.js
 [![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=dionmaicon_vue-crudgen&metric=duplicated_lines_density)](https://sonarcloud.io/dashboard?id=dionmaicon_vue-crudgen)
 [![Quality gate](https://sonarcloud.io/api/project_badges/quality_gate?project=dionmaicon_vue-crudgen)](https://sonarcloud.io/dashboard?id=dionmaicon_vue-crudgen)
 
-The focus this package is front-end with vue..
+The focus this package is front-end with vue.
 
-Best practices for better RESTful API:
+Next Releases:
+- Vuetify
+- Typescript
 
-![image](https://user-images.githubusercontent.com/19849921/51780016-45660880-20f2-11e9-9d59-dec28b1bc5aa.png)
+Best practices for better RESTful API:
 
+| Resource      | GET (Read) | POST (Create)  | PUT (Update) | DELETE (Delete) |
+| ------------- | ------------- |------------- | ------------- |------------- |
+| /users        | Return a list of Users  | Create a new User  | Bulk Update of Users  | Delete all Users  |
+| /users/123    | Returns a Specific User  | (405)  | Update a Specific User  | Delete a Specific User  |
 
 Result for a model generate for this tool:
 
 ![vue-crudgen-laptop with hidpi screen](https://user-images.githubusercontent.com/19849921/51761375-05803080-20b4-11e9-9cab-055008397c32.png)
 
 
-Install Vue CLI and Vue-Crudgen.
+Install Vue-CLI and Vue-Crudgen.
 ```
 npm install -g @vue/cli
 npm install -g vue-crudgen
@@ -29,22 +35,34 @@ npm install -g vue-crudgen
 
 How to do?
 
-First of all, You need create a Vue-project and set up your structure of files. My default configurations is babel, pwa, router, vuex, eslint, unit-jest.
+You need to create a Vue-project and setup your structure of files. My Recomended configuration is: Babel, PWA, Router, Vuex, Eslint and Unit-Jest.
 ```
-vue create <your-project>
+vue create <your-project-name>
 
 ```
-Now init Vue-Crudgen structure project pattern.
 
+IMPORTANT!! Vue crud Generator uses eslint to prettier/vue code. Check dependencies. You need to create or edit an .eslintrc.js file.
+
+```
+//.eslintrc.js
+...
+'extends': [
+  'plugin:prettier/recommended',
+  'plugin:vue/essential',
+],
+...
+```
+
+Now init Vue-Crudgen structure project pattern.
 ```
 cd <you-root-project-path>
 vue-crudgen -i
 ```
 After run the command just wait some seconds for scaffold and lint.
 Now you need to create models.
 ```
-mkdir models
-cd models
+mkdir src/models
+cd src/models
 touch author.js
 ```
 Files *.js models objects should be named in singular.
@@ -82,91 +100,65 @@ After create a model, execute at command line:
 ```
 vue-crudgen -m ./src/models/
 ```
-IMPORTANT!! Vue crud Generator uses eslint to prettier/vue code. Check dependencies.
-
+After run, you will see something like this in your project structure:
 ```
-//.eslintrc
-...
-'extends': [
-  'plugin:prettier/recommended',
-  'plugin:vue/essential',
-],
-...
-```
-Example:
-```
-./
+project/
+├── babel.config.js
+├── jest.config.js
+├── node_modules
 ├── package.json
 ├── package-lock.json
 ├── public
 │   ├── favicon.ico
-│   └── index.html
+│   ├── img
+│   ├── index.html
+│   └── robots.txt
 ├── README.md
-└── src
-    ├── assets
-    │   └── logo.png
-    ├── App.vue
-    ├── main.js
-    ├── router
-    |    ├──index.js
-    ├── services
-        ├──service.js
-    ├── models
-    │   ├── user.js
+│   ├── src
+│   |  ├── App.vue
+│   |  ├── assets
+│   |  |  └── logo.png
+│   |  ├── components
+│   |  │   ├── author
+│   |  │   └── HelloWorld.vue
+│   |  ├── helpers
+│   |  │   └── alert.vue
+│   |  ├── main.js
+│   |  ├── models
+│   |  │   └── author.js
+│   |  ├── registerServiceWorker.js
+│   |  ├── router
+│   |  │   └── index.js
+│   |  ├── routes
+│   |  │   ├── author.js
+│   |  │   └── index.js
+│   |  ├── services
+│   |  │   ├── author.js
+│   |  │   └── httpService.js
+│   |  ├── store
+│   |  │   ├── index.js
+│   |  │   └── modules
+│   |  └── views
+│   |  ├── About.vue
+│   |  └── Home.vue
+└── tests
+    └── unit
+```
+You still have to create a .env file with your API base url or edit httpService.js in services directory.
+```
+VUE_APP_BASE_URL=http://localhost:8081
+```
+Now in your root project, start the app and browse to http://localhost:8080/author.
+
+```
+npm run serve
 
 ```
-Execute in root of the project:
-
-```
-vue-crudgen -m ./src/models/
-```
-
-Will be generate the follow:
 
-```
-./
-├── package.json
-├── package-lock.json
-├── public
-│   ├── favicon.ico
-│   └── index.html
-├── README.md
-└── src
-    ├── assets
-    │   └── logo.png
-    ├── components
-    │   ├── author
-    │   │   ├── AuthorCreate.vue
-    │   │   ├── AuthorEdit.vue
-    │   │   ├── AuthorForm.vue
-    │   │   ├── AuthorIndex.vue
-    │   │   └── AuthorView.vue
-    ├── helpers
-    │   └── alert.vue
-    ├── App.vue
-    ├── main.js
-    ├── router
-    |    ├──index.js
-    ├── routes
-    |    ├──author.js
-    |    ├──index.js
-    ├── services
-    |    ├──author.js
-    |    ├──service.js
-    ├── store
-    |    ├──modules
-    |    |  ├──author.js
-    |    |  ├──index.js
-    |    ├──index.js
-    ├── models
-    │   ├── author.js
-    |
-```
 Others models:
 
-```
+``` javascript
 //book.js
-
 const resource = {
   endPoint: "books"
 };
@@ -202,10 +194,10 @@ const model = {
     options: ["price", "ISBN"]
   }
 };
-
 module.exports = { model, resource };
+```
 
-
+``` javascript
 //publishing.js
 
 const resource = {
@@ -220,5 +212,4 @@ const model = {
 };
 
 module.exports = { model, resource };
-
 ```
diff --git a/js/bootstrap/form.js b/js/bootstrap/form.js
@@ -125,7 +125,7 @@ const Form = class {
 <script>
   import { get${capitalizedName} } from "@/services/${this.modelName}";
   relationsImport
-  import { mapActions, mapGetters } from "vuex";
+  import { mapActions } from "vuex";
 
   dataImport
 

diff --git a/js/bootstrap/index.js b/js/bootstrap/index.js
@@ -126,7 +126,7 @@ const Index = class {
           this.$router.push({ name: "${this.modelName}Edit", params: { id: id }})
         },
         async remove(id){
-          let option = await this.$modal.show({title: "Danger", message: "Do you sure that want delete this ${this.modelName}? This operation is irreversible!" , alert : "danger"});
+          let option = await this.$modal.show({title: "Danger", message: "Do you want delete this ${this.modelName}?" , alert : "danger"});
           if(option){
             this.delete${capitalizedName}(id)
               .then( response => {
@@ -207,6 +207,9 @@ const Index = class {
     </script>
 
     <style lang="css" scoped>
+    .container {
+      text-align: left;
+    }
     .options-button {
       float: right;
       min-width: 100px;

diff --git a/js/eslint/eslintrc.js b/js/eslint/eslintrc.js
@@ -0,0 +1,40 @@
+const Eslintrc = class {
+  constructor() {}
+
+  getTemplate() {
+    let template = `
+    module.exports = {
+      root: true,
+      env: {
+        node: true
+      },
+      'extends': [
+        'plugin:prettier/recommended',
+        'plugin:vue/essential'
+      ],
+      rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+      },
+      parserOptions: {
+        parser: 'babel-eslint'
+      },
+      overrides: [
+        {
+          files: [
+            '**/__tests__/*.{j,t}s?(x)',
+            '**/tests/unit/**/*.spec.{j,t}s?(x)'
+          ],
+          env: {
+            jest: true
+          }
+        }
+      ]
+    }
+    `;
+
+    return template;
+  }
+};
+
+module.exports = Eslintrc;
diff --git a/js/init.js b/js/init.js
@@ -4,30 +4,44 @@ const IndexRouter = require("./router/indexRouter.js");
 const HttpService = require("./service/httpService.js");
 const IndexStore = require("./store/indexStore.js");
 const IndexModule = require("./store/indexModule.js");
+const Eslintrc = require("./eslint/eslintrc.js");
 
 const Init = class {
   constructor(config) {
     this.config = config;
   }
 
   generate() {
-    this.createRoutesStruct();
+    this.createRouterStruct();
+    this.createIndexRoutesStruct();
     this.createServicesStruct();
     this.createStoreStruct();
     this.createModulesStruct();
-    // this.createTemplateApp();
     this.createTemplateAlert();
     this.createTemplateMain();
+    this.createTemplateEslintrc();
   }
 
-  async createRoutesStruct() {
+  async createIndexRoutesStruct() {
     const indexRouter = new IndexRouter();
-    const indexTemplate = indexRouter.getTemplate();
+    const indexTemplate = indexRouter.getIndexRouterTemplate();
     fs.writeFile(this.config.pathRoutes + "/index.js", indexTemplate, err => {
       if (err) {
         console.error(err);
       } else {
-        console.log("Router file was create with success!");
+        console.log("Routes Index file was create with success!");
+      }
+    });
+  }
+
+  async createRouterStruct() {
+    const indexRouter = new IndexRouter();
+    const indexTemplate = indexRouter.getRouterTemplate();
+    fs.writeFile(this.config.pathRouter + "/index.js", indexTemplate, err => {
+      if (err) {
+        console.error(err);
+      } else {
+        console.log("Router Index file was create with success!");
       }
     });
   }
@@ -143,6 +157,18 @@ const Init = class {
       }
     });
   }
+
+  async createTemplateEslintrc() {
+    const eslintrc = new Eslintrc();
+    const eslintrcTemplate = eslintrc.getTemplate();
+    fs.writeFile("./.eslintrc.js", eslintrcTemplate, err => {
+      if (err) {
+        console.error(err);
+      } else {
+        console.log("eslintrc.js file was create with success!");
+      }
+    });
+  }
 };
 
 module.exports = Init;