vue_crud-generator 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 91c1e659bf0a9f074d213b3d1b43d71a36aca203cd7197919b52b92c1517525d
+  data.tar.gz: f2de1c452a0039ac649d04594ce76660d64076c99a4e85837d5c657061a0360d
+SHA512:
+  metadata.gz: 5c2df4665592e2264239b7803a561151b45cf846eb0ae31c6f717665d47826b98acebc1b3eb5b0d667efdb31014aebe0eb5d893170bf19be402782cbe207401f
+  data.tar.gz: 1dc92cb5b11d04fec6dbc4ff2d87548a3a03be893950ee180c29a837dbd1de2bd41998d6850c5a522105fa5d312bd744cdff992deaf2d1d6df76f57d3d96b829

data/lib/generators/vue_js/vuetify_crud/USAGE

@@ -0,0 +1,10 @@
+Description:
+    Generates a front end CRUD vuetify component compatible with Rails controller_scaffold.
+
+    At least one field with "primary_key" type is required.
+
+Example:
+    rails generate vuetify_crud User id:primary_key email:string role:integer
+
+    This will create:
+        app/javascript/components/users_crud.vue

data/lib/generators/vue_js/vuetify_crud/templates/crud_component.vue.tt

@@ -0,0 +1,188 @@
+<!--
+  Vuetify component structure inspired by CRUD example from official docs:
+    https://vuetifyjs.com/components/data-tables
+-->
+
+<template>
+  <div>
+    <v-toolbar flat color="white">
+        <v-toolbar-title><%= plural_name.capitalize %></v-toolbar-title>
+        <v-spacer />
+        <v-dialog v-model="dialog" max-width="500px">
+            <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
+            <v-card>
+                <v-card-title>
+                    <span class="headline">{{ formTitle }}</span>
+                </v-card-title>
+
+                <v-card-text>
+                    <v-container grid-list-md>
+                        <v-layout wrap>
+                          <div v-if="editedId !== -1">
+                              <%= primary_key_name.capitalize %> {{editedItem.<%= primary_key_name %>}}
+                          </div>
+                          <%= attributes_names_without_id.map { |name| (<<-JS).strip }.join("\n#{' ' * 26}")
+                            <v-flex xs12 sm12 md12>
+                              <v-text-field v-model="editedItem.#{name}" label="#{name.capitalize}" />
+                            </v-flex>
+                            JS
+                          %>
+                        </v-layout>
+                    </v-container>
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>
+                    <v-btn color="blue darken-1" flat @click.native="save">Save</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-toolbar>
+
+    <v-data-table
+            :headers="headers"
+            :items="items"
+            hide-actions
+            class="elevation-1"
+    >
+        <template slot="items" slot-scope="props">
+            <%= attributes_names.map { |name| "<td>{{ props.item.#{name} }}</td>" }.join("\n#{' ' * 10}") %>
+            <td>
+                <v-icon
+                        small
+                        class="mr-2"
+                        @click="editItem(props.item)"
+                >
+                    edit
+                </v-icon>
+                <v-icon
+                        small
+                        @click="deleteItem(props.item)"
+                >
+                    delete
+                </v-icon>
+            </td>
+        </template>
+    </v-data-table>
+
+    <v-snackbar v-model="errorSnackbar" top color="error" :timeout="6000">
+      Error occured{{renderErrorText}}
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+
+  const routeURL = '<%= route_url %>';
+
+  export default {
+    methods: {
+      resetToDefault() {
+        this.editedId = -1;
+        Object.assign(this.editedItem, this.defaultItem);
+      },
+
+      close() {
+        this.resetToDefault();
+        this.dialog = false;
+      },
+
+      errorHandler(error) {
+          if (error.response) {
+              const data = error.response.data;
+              this.errorText = data.errors || data;
+          }
+          this.errorSnackbar = true;
+      },
+
+      save() {
+        if (this.editedId === -1) {
+            axios.post(routeURL, this.editedItem).then(res => {
+                this.items.push(res.data);
+                this.close();
+            }).catch(this.errorHandler.bind(this));
+        } else {
+            axios.patch(routeURL + '/' + this.editedId, this.editedItem).then(res => {;
+                var elementIndex = this.findItemById(res.data.<%= primary_key_name %>);
+                if (elementIndex !== -1) {
+                    Object.assign(this.items[elementIndex], res.data);
+                }
+                this.close();
+            }).catch(this.errorHandler.bind(this));
+        }
+      },
+
+      findItemById(id) {
+          return this.items.findIndex(element => {
+              return element.<%= primary_key_name %> == id;
+          });
+      },
+
+      editItem(item) {
+        this.editedId = item.<%= primary_key_name %>;
+        Object.assign(this.editedItem, item);
+        this.dialog = true;
+      },
+
+      deleteItem(item) {
+        const id = item.<%= primary_key_name %>;
+        const run = confirm(
+                'Are you sure you want to delete <%= singular_name %> with <%= primary_key_name %> ' + id + '?'
+        );
+
+        if (run) {
+            axios.delete(routeURL + '/' + id).then(res => {
+                const index = this.findItemById(id);
+                if (index !== -1) {
+                  this.items.splice(index, 1);
+                }
+            }).catch(this.errorHandler.bind(this));
+        }
+      }
+    },
+
+    computed: {
+      renderErrorText() {
+        return this.errorText ? ': ' + this.errorText : '';
+      },
+
+      formTitle () {
+        return this.editedId === -1 ? 'New Item' : 'Edit Item';
+      }
+    },
+
+    created() {
+      this.resetToDefault();
+      axios.get(routeURL).then(res => {
+        this.items = res.data;
+      }).catch(this.errorHandler.bind(this));
+    },
+
+    data() {
+      return {
+        defaultItem: {
+          // you can add default values for your attributes here
+          <%= attributes_names_without_id.map {|name| "#{name}: null" }.join(",\n#{' ' * 10}") %>
+        },
+        editedItem: {
+        },
+        editedId: -1,
+        errorSnackbar: false,
+        errorText: null,
+        dialog: false,
+        items: [],
+        headers: [
+          <%= attributes_names.map {|name| (<<-JS).strip }.join(",\n#{' ' * 10}")
+          {
+              text:  '#{name.capitalize}',
+              value: '#{name}'
+          }
+          JS
+          %>
+        ]
+      };
+    }
+  };
+</script>

data/lib/generators/vue_js/vuetify_crud/vuetify_crud_generator.rb

@@ -0,0 +1,35 @@
+require 'rails/generators/base'
+
+module VueJs
+  class VuetifyCrudGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path('templates', __dir__)
+
+    argument :attributes, type: :array, default: [], banner: "field:type field:type"
+
+    def create_component_file
+      template "crud_component.vue.tt", "app/javascript/components/#{plural_name}_crud.vue"
+    end
+
+    def attributes_names_without_id
+      attributes_without_id.map(&:name)
+    end
+
+    def attributes_without_id
+      @attributes_without_id ||= attributes.reject {|attr| attr.type == :primary_key}
+    end
+
+    def primary_key_name
+      @primary_key_name ||= find_primary_key.name
+    end
+
+    private
+
+    def find_primary_key
+      attributes.find {|attribute|
+        attribute.type == :primary_key
+      }.tap {|attribute|
+        raise Thor::RequiredArgumentMissingError, "Error: primary key field is required" if attribute.nil?
+      }
+    end
+  end
+end

metadata

@@ -0,0 +1,62 @@
+--- !ruby/object:Gem::Specification
+name: vue_crud-generator
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Senya
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2018-07-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Rails generator which makes a front end CRUD Vuetify component compatible
+  with Rails `controller_scaffold`.
+email:
+- senya@riseup.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/generators/vue_js/vuetify_crud/USAGE
+- lib/generators/vue_js/vuetify_crud/templates/crud_component.vue.tt
+- lib/generators/vue_js/vuetify_crud/vuetify_crud_generator.rb
+homepage: https://gitlab.com/cmrd-senya/vue_crud-generator
+licenses:
+- MPL-2.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.7.6
+signing_key: 
+specification_version: 4
+summary: A rails generator for front end CRUD component built with VueJS.
+test_files: []