modals with a new inertia-page component

[dillingham]

showing edit modal on index, similar to vue's nested routes

/organizations/#edit-1

<modal :show="$inertia.is('#edit-1')">
  <inertia-page id="edit-1" url="/organizations/1/edit">
      <template v-slot="{ page }">
          <edit-organization-form :organization="page.props.organization" />
      </template>
  </inertia-page>
</modal>

prop	description
id	used for url hash / navigation
url	where to get a inertia response of a page

the functional inertia-page component would do the following when mounted / modal :show == true

• add #edit-1 to the current url
• ajax request the data of the url
• add to the history

And you could open the modal like so:

$inertia.visit('#edit-1')

and close the modal, idea

$inertia.back()

---

<inertia-link> is smart and knows that #edit-1 is a modal from inertia-page or a section on the page with smooth scroll maybe

render('Organizations/Edit') would be it's own unique layout, not a modal.
And edit-organization-form shared between Edit and modals anywhere
And use same inertia responses to populate that form when in a modal
So, edit from a index item or show page and it would work the same

---

And a wantsJson form option, could pass a boolean to the form to bubble up the form response.

<inertia-page url="/organizations/1/edit" v-slot="{ page }" id="edit-1">
    <edit-organization-form 
        :organization="page.props.organization" 
        :wants-json="true" 
        @success="nextForm" 
    />
</inertia-page>

Which would allow "multiple stacks" because you could navigate to next in nextForm
Mostly valuable for creating related records on the fly or appending lists