Update create organization form to use the new Inertia form

This commit is contained in:
Jonathan Reinink 2020-12-22 13:33:00 -05:00
parent 312a5eb4ed
commit 8b7672391c

View file

@ -5,23 +5,23 @@
<span class="text-indigo-400 font-medium">/</span> Create <span class="text-indigo-400 font-medium">/</span> Create
</h1> </h1>
<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.post(route('organizations.store'))">
<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.name" :error="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
<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 justify-end items-center"> <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button> <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Organization</loading-button>
</div> </div>
</form> </form>
</div> </div>
@ -42,14 +42,10 @@ export default {
SelectInput, SelectInput,
TextInput, TextInput,
}, },
props: {
errors: Object,
},
remember: 'form', remember: 'form',
data() { data() {
return { return {
sending: false, form: this.$inertia.form({
form: {
name: null, name: null,
email: null, email: null,
phone: null, phone: null,
@ -58,16 +54,8 @@ export default {
region: null, region: null,
country: null, country: null,
postal_code: null, postal_code: null,
}, }),
} }
}, },
methods: {
submit() {
this.$inertia.post(this.route('organizations.store'), this.form, {
onStart: () => this.sending = true,
onFinish: () => this.sending = false,
})
},
},
} }
</script> </script>