RubyGems - inertia_rails-contrib - Versions diffs - 0.1.0 - Mend

inertia_rails-contrib 0.1.0

Files changed (78) hide show

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/Show.svelte.tt ADDED Viewed

@@ -0,0 +1,58 @@
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  export let <%= singular_table_name %>
+  export let flash
+  const onDestroy = (e) => {
+    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
+      e.preventDefault()
+    }
+  }
+</script>
+<svelte:head>
+  <title><%= human_name %> #{<%= singular_table_name %>.id}</title>
+</svelte:head>
+<div class="mx-auto md:w-2/3 w-full px-8 pt-8">
+  <div class="mx-auto">
+    {#if flash.notice}
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+        {flash.notice}
+      </p>
+    {/if}
+    <h1 class="font-bold text-4xl"><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+    <<%= inertia_component_name %> {<%= singular_table_name %>} />
+    <Link
+      href={`<%= js_edit_resource_path %>`}
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Edit this <%= human_name.downcase %>
+    </Link>
+    <Link
+      href="<%= js_resources_path %>"
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Back to <%= human_name.pluralize.downcase %>
+    </Link>
+    <div class="inline-block ml-2">
+      <button
+        use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+        on:click={onDestroy}
+        type="button"
+        class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
+      >
+        Destroy this <%= human_name.downcase %>
+      </button>
+    </div>
+  </div>
+</div>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Edit.vue.tt ADDED Viewed

@@ -0,0 +1,44 @@
+<template>
+  <Head title="Editing <%= human_name.downcase %>" />
+  <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+    <h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
+    <Form
+      :<%= singular_table_name %>="<%= singular_table_name %>"
+      submitText="Update <%= human_name.downcase %>"
+      @onSubmit="handleSubmit"
+    />
+    <Link
+      :href="`<%= js_resource_path %>`"
+      class="mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Show this <%= human_name.downcase %>
+    </Link>
+    <Link
+      href="<%= js_resources_path %>"
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Back to <%= human_name.pluralize.downcase %>
+    </Link>
+  </div>
+</template>
+<script setup>
+import { Link, Head } from '@inertiajs/vue3'
+import Form from './Form.vue'
+const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
+const handleSubmit = (form) => {
+  form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+  form.post(`<%= js_resource_path %>`, {
+    headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+  })
+<% else -%>
+  form.patch(`<%= js_resource_path %>`)
+<% end -%>
+}
+</script>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Form.vue.tt ADDED Viewed

@@ -0,0 +1,127 @@
+<template>
+  <form @submit.prevent="emit('onSubmit', form)" class="contents">
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div class="my-5">
+      <label for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        v-model="form.password"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+      <div
+        v-if="form.errors.password"
+        class="text-red-500 px-3 py-2 font-medium"
+      >
+        {{ form.errors.password.join(', ') }}
+      </div>
+    </div>
+    <div class="my-5">
+      <label for="password_confirmation">Password Confirmation</label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+        v-model="form.password_confirmation"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+      <div
+        v-if="form.errors.password_confirmation"
+        class="text-red-500 px-3 py-2 font-medium"
+      >
+        {{ form.errors.password_confirmation.join(', ') }}
+      </div>
+    </div>
+<% else -%>
+    <div class="my-5">
+      <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= attribute.column_name %>"
+        rows="4"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        @input="form.<%= attribute.column_name %> = $event.target.files[0]"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple="multiple"
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+        @input="form.<%= attribute.column_name %> = Array.from($event.target.files)"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif attribute.field_type == :check_box -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= attribute.column_name %>"
+        class="block mt-2 h-5 w-5"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        v-model="form.<%= attribute.column_name %>"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% end -%>
+      <div v-if="form.errors.<%= attribute.column_name %>" :class="$style.error">
+        {{ form.errors.<%= attribute.column_name %>.join(', ') }}
+      </div>
+    </div>
+<% end -%>
+<% end -%>
+    <div class="inline">
+      <button
+        type="submit"
+        :disabled="form.processing"
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+      >
+        {{ submitText }}
+      </button>
+    </div>
+  </form>
+</template>
+<script setup>
+import { useForm } from '@inertiajs/vue3'
+const { <%= singular_table_name %>, submitText } = defineProps(['<%= singular_table_name %>', 'submitText'])
+const emit = defineEmits(['onSubmit'])
+const form = useForm({
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+  password: '',
+  password_confirmation: '',
+<% else -%>
+  <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+})
+</script>
+<style module>
+.label {
+  display: block;
+}
+.error {
+  color: red;
+}
+</style>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Index.vue.tt ADDED Viewed

@@ -0,0 +1,43 @@
+<template>
+  <Head title="<%= human_name.pluralize %>" />
+  <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+    <p
+      v-if="flash.notice"
+      class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block"
+    >
+      {{ flash.notice }}
+    </p>
+    <div class="flex justify-between items-center">
+      <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
+      <Link
+        href="<%= js_new_resource_path %>"
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium"
+      >
+        New <%= human_name.downcase %>
+      </Link>
+    </div>
+    <div class="min-w-full">
+      <template v-for="<%= singular_table_name %> in <%= plural_table_name %>" :key="<%= singular_table_name %>.id">
+        <<%= inertia_component_name %> :<%= singular_table_name %>="<%= singular_table_name %>" />
+        <p>
+          <Link
+            :href="`<%= js_resource_path %>`"
+            class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+          >
+            Show this <%= human_name.downcase %>
+          </Link>
+        </p>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+import { Link, Head } from '@inertiajs/vue3'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+const { <%= plural_table_name %>, flash } = defineProps(['<%= plural_table_name %>', 'flash'])
+</script>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/New.vue.tt ADDED Viewed

@@ -0,0 +1,32 @@
+<template>
+  <Head title="New <%= human_name.downcase %>" />
+  <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+    <h1 class="font-bold text-4xl">New <%= human_name.downcase %></h1>
+    <Form
+      :<%= singular_table_name %>="<%= singular_table_name %>"
+      submitText="Create <%= human_name.downcase %>"
+      @onSubmit="handleSubmit"
+    />
+    <Link
+      href="<%= js_resources_path %>"
+      class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+    >
+      Back to <%= human_name.pluralize.downcase %>
+    </Link>
+  </div>
+</template>
+<script setup>
+import { Link, Head } from '@inertiajs/vue3'
+import Form from './Form.vue'
+const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
+const handleSubmit = (form) => {
+  form.transform((data) => ({ <%= singular_table_name %>: data }))
+  form.post('<%= js_resources_path %>')
+}
+</script>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/One.vue.tt ADDED Viewed

@@ -0,0 +1,26 @@
+<template>
+  <div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+    <p class="my-5">
+      <strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+      <a v-if="<%= singular_table_name %>.<%= attribute.column_name %>" :href="<%= singular_table_name %>.<%= attribute.column_name %>.url">
+        {{ <%= singular_table_name %>.<%= attribute.column_name %>.filename }}
+      </a>
+    </p>
+<% elsif attribute.attachments? -%>
+    </p>
+    <div v-for="file in <%= singular_table_name %>.<%= attribute.column_name %>">
+      <a :href="file.url">{{ file.filename }}</a>
+    </div>
+<% else -%>
+      {{ <%= singular_table_name %>.<%= attribute.column_name %> }}
+    </p>
+<% end -%>
+<% end -%>
+  </div>
+</template>
+<script setup>
+const { <%= singular_table_name %> } = defineProps(['<%= singular_table_name %>'])
+</script>

data/lib/generators/inertia_tw_templates/scaffold/templates/vue/Show.vue.tt ADDED Viewed

@@ -0,0 +1,56 @@
+<template>
+  <Head :title="`<%= human_name %> #${<%= singular_table_name %>.id}`" />
+  <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+    <div class="mx-auto">
+      <p
+        v-if="flash.notice"
+        class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block"
+      >
+        {{ flash.notice }}
+      </p>
+      <h1 class="font-bold text-4xl"><%= human_name %> #{{ <%= singular_table_name %>.id }}</h1>
+      <<%= inertia_component_name %> :<%= singular_table_name %>="<%= singular_table_name %>" />
+      <Link
+        :href="`<%= js_edit_resource_path %>`"
+        class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+      >
+        Edit this <%= human_name.downcase %>
+      </Link>
+      <Link
+        href="<%= js_resources_path %>"
+        class="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+      >
+        Back to <%= human_name.pluralize.downcase %>
+      </Link>
+      <div class="inline-block ml-2">
+        <Link
+          :href="`<%= js_resource_path %>`"
+          @click="onDestroy"
+          as="button"
+          method="delete"
+          class="mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium"
+        >
+          Destroy this <%= human_name.downcase %>
+        </Link>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { Link, Head } from '@inertiajs/vue3'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+const { <%= singular_table_name %>, flash } = defineProps(['<%= singular_table_name %>', 'flash'])
+const onDestroy = (e) => {
+  if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
+    e.preventDefault()
+  }
+}
+</script>

data/lib/inertia_rails-contrib.rb ADDED Viewed

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+require_relative "inertia_rails_contrib"

data/lib/inertia_rails_contrib/generators/controller_template_base.rb ADDED Viewed

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+require "rails/generators/named_base"
+require "inertia_rails_contrib/generators_helper"
+module InertiaRailsContrib
+  module Generators
+    class ControllerTemplateBase < Rails::Generators::NamedBase
+      include GeneratorsHelper
+      class_option :frontend_framework, required: true, desc: "Frontend framework to generate the views for.",
+        default: GeneratorsHelper.guess_the_default_framework
+      argument :actions, type: :array, default: [], banner: "action action"
+      def empty_views_dir
+        empty_directory base_path
+      end
+      def copy_view_files
+        actions.each do |action|
+          @action = action
+          @path = File.join(base_path, "#{action.camelize}.#{extension}")
+          template "#{options.frontend_framework}/#{template_filename}.#{extension}", @path
+        end
+      end
+      private
+      def base_path
+        File.join(pages_path, inertia_base_path)
+      end
+      def template_filename
+        "view"
+      end
+      def pages_path
+        "app/frontend/pages"
+      end
+      def extension
+        case options.frontend_framework
+        when "react" then "jsx"
+        when "vue" then "vue"
+        when "svelte" then "svelte"
+        else
+          raise ArgumentError, "Unknown frontend framework: #{options.frontend_framework}"
+        end
+      end
+    end
+  end
+end

data/lib/inertia_rails_contrib/generators/scaffold_template_base.rb ADDED Viewed

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+require "rails/generators/resource_helpers"
+require_relative "controller_template_base"
+module InertiaRailsContrib
+  module Generators
+    class ScaffoldTemplateBase < ControllerTemplateBase
+      include Rails::Generators::ResourceHelpers
+      remove_argument :actions
+      argument :attributes, type: :array, default: [], banner: "field:type field:type"
+      def copy_view_files
+        available_views.each do |view|
+          filename = "#{view}.#{extension}"
+          template "#{options.frontend_framework}/#{filename}", File.join(base_path, filename)
+        end
+        template "#{options.frontend_framework}/#{partial_name}.#{extension}", File.join(base_path, "#{inertia_component_name}.#{extension}")
+      end
+      private
+      def available_views
+        %w[Index Edit Show New Form]
+      end
+      def partial_name
+        "One"
+      end
+    end
+  end
+end

data/lib/inertia_rails_contrib/generators_helper.rb ADDED Viewed

@@ -0,0 +1,88 @@
+module InertiaRailsContrib
+  module GeneratorsHelper
+    def self.guess_the_default_framework
+      case Rails.root.join("package.json").read
+      when /@inertiajs\/react/
+        "react"
+      when /@inertiajs\/svelte/
+        "svelte"
+      when /@inertiajs\/vue3/
+        "vue"
+      else
+        puts "Could not determine the Inertia.js framework you are using."
+      end
+    end
+    def self.guess_inertia_template
+      if Rails.root.join("tailwind.config.js").exist?
+        "inertia_tw_templates"
+      else
+        "inertia_templates"
+      end
+    end
+    def inertia_base_path
+      (class_path + [file_name]).map(&:camelize).join("/")
+    end
+    def inertia_component_name
+      singular_name.camelize
+    end
+    def attributes_to_serialize
+      [:id] + attributes.reject do |attribute|
+        attribute.password_digest? ||
+          attribute.attachment? ||
+          attribute.attachments?
+      end.map(&:column_name)
+    end
+    def js_resource_path
+      "#{route_url}/${#{singular_table_name}.id}"
+    end
+    def js_edit_resource_path
+      "#{route_url}/${#{singular_table_name}.id}/edit"
+    end
+    def js_new_resource_path
+      "#{route_url}/new"
+    end
+    def js_resources_path
+      route_url
+    end
+    def input_type(attribute)
+      case attribute.type
+      when :string
+        "text"
+      when :text, :rich_text
+        "text_area"
+      when :integer
+        "number"
+      when :float, :decimal
+        "number"
+      when :datetime, :timestamp, :time
+        "datetime-local"
+      when :date
+        "date"
+      when :boolean
+        "checkbox"
+      when :attachments, :attachment
+        "file"
+      else
+        "text"
+      end
+    end
+    def default_value(attribute)
+      case attribute.type
+      when :boolean
+        "false"
+      else
+        "''"
+      end
+    end
+  end
+end

data/lib/inertia_rails_contrib/version.rb ADDED Viewed

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+module InertiaRailsContrib
+  VERSION = "0.1.0"
+end

data/lib/inertia_rails_contrib.rb ADDED Viewed

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+require "inertia_rails" if defined?(Rails)
+require_relative "inertia_rails_contrib/version"
+module InertiaRailsContrib
+end