Skip to content

Письменов Дмитрий Иванович / yourroomads

Go to a project
Commit 312a5eb4 by Jonathan Reinink
Options

Update edit contact form to use the new Inertia form

1 parent f8d9865c
Inline Side-by-side
Showing with 14 additions and 21 deletions
resources/js/Pages/Contacts/Edit.vue
...@@ -9,29 +9,29 @@ ...@@ -9,29 +9,29 @@
This contact has been deleted. This contact has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="form.put(route('contacts.update', contact.id))">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :error="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
<text-input v-model="form.last_name" :error="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" /> <text-input v-model="form.last_name" :error="form.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
<select-input v-model="form.organization_id" :error="errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization"> <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
<option :value="null" /> <option :value="null" />
<option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option> <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
</select-input> </select-input>
<text-input v-model="form.email" :error="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" /> <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.phone" :error="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" /> <text-input v-model="form.phone" :error="form.errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
<text-input v-model="form.address" :error="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" /> <text-input v-model="form.address" :error="form.errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
<text-input v-model="form.city" :error="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" /> <text-input v-model="form.city" :error="form.errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
<text-input v-model="form.region" :error="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" /> <text-input v-model="form.region" :error="form.errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
<select-input v-model="form.country" :error="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country"> <select-input v-model="form.country" :error="form.errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
<option :value="null" /> <option :value="null" />
<option value="CA">Canada</option> <option value="CA">Canada</option>
<option value="US">United States</option> <option value="US">United States</option>
</select-input> </select-input>
<text-input v-model="form.postal_code" :error="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" /> <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div> </div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button> <button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button> <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
</div> </div>
</form> </form>
</div> </div>
...@@ -66,8 +66,7 @@ export default { ...@@ -66,8 +66,7 @@ export default {
remember: 'form', remember: 'form',
data() { data() {
return { return {
sending: false, form: this.$inertia.form({
form: {
first_name: this.contact.first_name, first_name: this.contact.first_name,
last_name: this.contact.last_name, last_name: this.contact.last_name,
organization_id: this.contact.organization_id, organization_id: this.contact.organization_id,
...@@ -78,16 +77,10 @@ export default { ...@@ -78,16 +77,10 @@ export default {
region: this.contact.region, region: this.contact.region,
country: this.contact.country, country: this.contact.country,
postal_code: this.contact.postal_code, postal_code: this.contact.postal_code,
}, }),
} }
}, },
methods: { methods: {
submit() {
this.$inertia.put(this.route('contacts.update', this.contact.id), this.form, {
onStart: () => this.sending = true,
onFinish: () => this.sending = false,
})
},
destroy() { destroy() {
if (confirm('Are you sure you want to delete this contact?')) { if (confirm('Are you sure you want to delete this contact?')) {
this.$inertia.delete(this.route('contacts.destroy', this.contact.id)) this.$inertia.delete(this.route('contacts.destroy', this.contact.id))
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!