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_templates/scaffold/templates/react/Index.jsx.tt ADDED Viewed

@@ -0,0 +1,26 @@
+import { Link, Head } from '@inertiajs/react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+export default function Index({ <%= plural_table_name %>, flash }) {
+  return (
+    <>
+      <Head title="<%= human_name.pluralize %>" />
+      {flash.notice && <p style={{ color: 'green' }}>{flash.notice}</p>}
+      <h1><%= human_name.pluralize %></h1>
+      <div>
+        {<%= plural_table_name %>.map((<%= singular_table_name %>) => (
+          <div key={<%= singular_table_name %>.id}>
+            <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+            <p>
+              <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+            </p>
+          </div>
+        ))}
+      </div>
+      <Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/New.jsx.tt ADDED Viewed

@@ -0,0 +1,27 @@
+import { Link, Head } from '@inertiajs/react'
+import Form from './Form'
+export default function New({ <%= singular_table_name %> }) {
+  return (
+    <>
+      <Head title="New <%= human_name.downcase %>" />
+      <h1>New <%= human_name.downcase %></h1>
+      <Form
+        <%= singular_table_name %>={<%= singular_table_name %>}
+        onSubmit={(form) => {
+          form.transform((data) => ({ <%= singular_table_name %>: data }))
+          form.post('<%= js_resources_path %>')
+        }}
+        submitText="Create <%= human_name.downcase %>"
+      />
+      <br />
+      <div>
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/One.jsx.tt ADDED Viewed

@@ -0,0 +1,26 @@
+export default function <%= inertia_component_name %>({ <%= singular_table_name %> }) {
+  return (
+    <div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+      <p>
+        <strong><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+        {<%= singular_table_name %>.<%= attribute.column_name %> && (
+          <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>{<%= singular_table_name %>.<%= attribute.column_name %>.filename}</a>
+        )}
+      </p>
+<% elsif attribute.attachments? -%>
+      </p>
+      {<%= singular_table_name %>.<%= attribute.column_name %>.map((file, i) => (
+        <div key={i}>
+          <a href={file.url}>{file.filename}</a>
+        </div>
+      ))}
+<% else -%>
+        {<%= singular_table_name %>.<%= attribute.column_name %>.toString()}
+      </p>
+<% end -%>
+<% end -%>
+    </div>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/Show.jsx.tt ADDED Viewed

@@ -0,0 +1,39 @@
+import { Link, Head } from '@inertiajs/react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+export default function Show({ <%= singular_table_name %>, flash }) {
+  const onDestroy = (e) => {
+    if (!confirm('Are you sure you want to delete this <%= human_name.downcase %>?')) {
+      e.preventDefault()
+    }
+  }
+  return (
+    <>
+      <Head title={`<%= human_name %> #${<%= singular_table_name %>.id}`} />
+      {flash.notice && <p style={{ color: 'green' }}>{flash.notice}</p>}
+      <h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+      <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+      <div>
+        <Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link>
+        {' | '}
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+        <br />
+        <Link
+          href={`<%= js_resource_path %>`}
+          onClick={onDestroy}
+          as="button"
+          method="delete"
+        >
+          Destroy this <%= human_name.downcase %>
+        </Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt ADDED Viewed

@@ -0,0 +1,37 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+  export let <%= singular_table_name %>
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    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>
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+<h1>Editing <%= human_name.downcase %></h1>
+<Form
+  {<%= singular_table_name %>}
+  submitText="Update <%= human_name.downcase %>"
+  on:submit={handleSubmit}
+/>
+<br />
+<div>
+  <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt ADDED Viewed

@@ -0,0 +1,96 @@
+<script>
+  import { useForm } from '@inertiajs/svelte'
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
+  export let <%= singular_table_name %>
+  export let submitText
+  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>
+<form on:submit|preventDefault={dispatch('submit', { form: $form })}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+  <div>
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      bind:value={$form.password}
+    />
+    {#if $form.errors.password}
+      <div class="error">{$form.errors.password.join(', ')}</div>
+    {/if}
+  </div>
+  <div>
+    <label for="password_confirmation">Password Confirmation</label>
+    <input
+      type="password"
+      name="password_confirmation"
+      id="password_confirmation"
+      bind:value={$form.password_confirmation}
+    />
+    {#if $form.errors.password_confirmation}
+      <div class="error">{$form.errors.password_confirmation.join(', ')}</div>
+    {/if}
+  </div>
+<% else -%>
+  <div>
+    <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>} />
+<% elsif attribute.attachment? -%>
+    <input
+      type="file"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      on:input={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+    />
+<% elsif attribute.attachments? -%>
+    <input
+      type="file"
+      multiple="multiple"
+      name="<%= attribute.singular_name %>[]"
+      id="<%= attribute.singular_name %>"
+      on:input={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+    />
+<% else -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      bind:value={$form.<%= attribute.column_name %>}
+    />
+<% end -%>
+    {#if $form.errors.<%= attribute.column_name %>}
+      <div class="error">{$form.errors.<%= attribute.column_name %>.join(', ')}</div>
+    {/if}
+  </div>
+<% end -%>
+<% end -%>
+  <div>
+    <button type="submit" disabled={$form.processing}>{submitText}</button>
+  </div>
+</form>
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Index.svelte.tt ADDED Viewed

@@ -0,0 +1,42 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import <%= inertia_component_name %> from './<%= inertia_component_name %>.svelte'
+  export let <%= plural_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.pluralize %></title>
+</svelte:head>
+{#if flash.notice}
+  <p class="notice">{flash.notice}</p>
+{/if}
+<h1><%= human_name.pluralize %></h1>
+<div>
+  {#each <%= plural_table_name %> as <%= singular_table_name %> (<%= singular_table_name %>.id)}
+    <div>
+      <<%= inertia_component_name %> {<%= singular_table_name %>} />
+      <p>
+        <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+      </p>
+    </div>
+  {/each}
+</div>
+<Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+<style>
+  .notice {
+    color: green;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte/New.svelte.tt ADDED Viewed

@@ -0,0 +1,30 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+  export let <%= singular_table_name %>
+  const handleSubmit = (e) => {
+    const { form } = e.detail
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+    form.post('<%= js_resources_path %>')
+  }
+</script>
+<svelte:head>
+  <title>New <%= human_name.downcase %></title>
+</svelte:head>
+<h1>New <%= human_name.downcase %></h1>
+<Form
+  {<%= singular_table_name %>}
+  submitText="Create <%= human_name.downcase %>"
+  on:submit={handleSubmit}
+/>
+<br />
+<div>
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte/One.svelte.tt ADDED Viewed

@@ -0,0 +1,28 @@
+<script>
+  export let <%= singular_table_name %>
+</script>
+<div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <p>
+    <strong><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    {#if <%= singular_table_name %>.<%= attribute.column_name %>}
+      <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>
+        {<%= singular_table_name %>.<%= attribute.column_name %>.filename}
+      </a>
+    {/if}
+  </p>
+<% elsif attribute.attachments? -%>
+  </p>
+  {#each <%= singular_table_name %>.<%= attribute.column_name %> as { url, filename }}
+    <div>
+      <a href={url}>{filename}</a>
+    </div>
+  {/each}
+<% else -%>
+    {<%= singular_table_name %>.<%= attribute.column_name %>}
+  </p>
+<% end -%>
+<% end -%>
+</div>

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

@@ -0,0 +1,46 @@
+<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>
+{#if flash.notice}
+  <p class="notice">{flash.notice}</p>
+{/if}
+<h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+<<%= inertia_component_name %> {<%= singular_table_name %>} />
+<div>
+  <Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+  <br />
+  <button
+    use:inertia={{ href: `<%= js_resource_path %>`, method: 'delete' }}
+    on:click={onDestroy}
+    type="button"
+  >
+    Destroy this <%= human_name.downcase %>
+  </button>
+</div>
+<style>
+  .notice {
+    color: green;
+  }
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <Head title="Editing <%= human_name.downcase %>" />
+  <h1>Editing <%= human_name.downcase %></h1>
+  <Form
+    :<%= singular_table_name %>="<%= singular_table_name %>"
+    submitText="Update <%= human_name.downcase %>"
+    @onSubmit="handleSubmit"
+  />
+  <br />
+  <div>
+    <Link :href="`<%= js_resource_path %>`">Show this <%= human_name.downcase %></Link> |
+    <Link href="<%= js_resources_path %>">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_templates/scaffold/templates/vue/Form.vue.tt ADDED Viewed

@@ -0,0 +1,94 @@
+<template>
+  <form @submit.prevent="emit('onSubmit', form)">
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div>
+      <label class="label" for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        v-model="form.password"
+      />
+      <div v-if="form.errors.password" class="error">
+        {{ form.errors.password.join(', ') }}
+      </div>
+    </div>
+    <div>
+      <label class="label" for="password_confirmation">
+        Password Confirmation
+      </label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+        v-model="form.password_confirmation"
+      />
+      <div v-if="form.errors.password_confirmation" class="error">
+        {{ form.errors.password_confirmation.join(', ') }}
+      </div>
+    </div>
+<% else -%>
+    <div>
+      <label class="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 %>" />
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        @input="form.<%= attribute.column_name %> = $event.target.files[0]"
+      />
+<% 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)"
+      />
+<% else -%>
+      <input type="<%= input_type(attribute) %>" name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" v-model="form.<%= attribute.column_name %>" />
+<% end -%>
+      <div v-if="form.errors.<%= attribute.column_name %>" class="error">
+        {{ form.errors.<%= attribute.column_name %>.join(', ') }}
+      </div>
+    </div>
+<% end -%>
+<% end -%>
+    <div>
+      <button type="submit" :disabled="form.processing">
+        {{ 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 scoped>
+.label {
+  display: block;
+}
+.error {
+  color: red;
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <Head title="<%= human_name.pluralize %>" />
+  <p v-if="flash.notice" class="notice">{{ flash.notice }}</p>
+  <h1><%= human_name.pluralize %></h1>
+  <div>
+    <div 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 %>`">Show this <%= human_name.downcase %></Link>
+      </p>
+    </div>
+  </div>
+  <Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+</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>
+<style scoped>
+.notice {
+  color: green;
+}
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <Head title="New <%= human_name.downcase %>" />
+  <h1>New <%= human_name.downcase %></h1>
+  <Form
+    :<%= singular_table_name %>="<%= singular_table_name %>"
+    submitText="Create <%= human_name.downcase %>"
+    @onSubmit="handleSubmit"
+  />
+  <br />
+  <div>
+    <Link href="<%= js_resources_path %>">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_templates/scaffold/templates/vue/One.vue.tt ADDED Viewed

@@ -0,0 +1,26 @@
+<template>
+  <div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+    <p>
+      <strong><%= 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_templates/scaffold/templates/vue/Show.vue.tt ADDED Viewed

@@ -0,0 +1,44 @@
+<template>
+  <Head :title="`<%= human_name %> #${<%= singular_table_name %>.id}`" />
+  <p v-if="flash.notice" class="notice">{{ flash.notice }}</p>
+  <h1><%= human_name %> #{{ <%= singular_table_name %>.id }}</h1>
+  <<%= inertia_component_name %> :<%= singular_table_name %>="<%= singular_table_name %>" />
+  <div>
+    <Link :href="`<%= js_edit_resource_path %>`">Edit this <%= human_name.downcase %></Link> |
+    <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+    <br />
+    <Link
+      :href="`<%= js_resource_path %>`"
+      @click="onDestroy"
+      as="button"
+      method="delete"
+    >
+      Destroy this <%= human_name.downcase %>
+    </Link>
+  </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>
+<style scoped>
+.notice {
+  color: green;
+}
+</style>