atasistro
/
pingcrm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update edit user form to use the new Inertia form

This commit is contained in:
Jonathan Reinink 2020-12-22 13:38:37 -05:00
parent f1b1fec306
commit 3c9d00deeb
1 changed files with 11 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/js/Pages/Users/Edit.vue
View File

@ -12,21 +12,21 @@
This user has been deleted. This user 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.post(route('users.update', user.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" />
<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.password" :error="errors.password" class="pr-6 pb-8 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" /> <text-input v-model="form.password" :error="form.errors.password" class="pr-6 pb-8 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
<select-input v-model="form.owner" :error="errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner"> <select-input v-model="form.owner" :error="form.errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
<option :value="true">Yes</option> <option :value="true">Yes</option>
<option :value="false">No</option> <option :value="false">No</option>
</select-input> </select-input>
<file-input v-model="form.photo" :error="errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" /> <file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
</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="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button> <button v-if="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button> <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
</div> </div>
</form> </form>
</div> </div>
@ -56,45 +56,23 @@ export default {
TrashedMessage, TrashedMessage,
}, },
props: { props: {
errors: Object,
user: Object, user: Object,
}, },
remember: 'form', remember: 'form',
data() { data() {
return { return {
sending: false, form: this.$inertia.form({
form: { _method: 'put',
first_name: this.user.first_name, first_name: this.user.first_name,
last_name: this.user.last_name, last_name: this.user.last_name,
email: this.user.email, email: this.user.email,
password: this.user.password, password: this.user.password,
owner: this.user.owner, owner: this.user.owner,
photo: null, photo: null,
}, }),
} }
}, },
methods: { methods: {
submit() {
var data = new FormData()
data.append('first_name', this.form.first_name || '')
data.append('last_name', this.form.last_name || '')
data.append('email', this.form.email || '')
data.append('password', this.form.password || '')
data.append('owner', this.form.owner ? '1' : '0')
data.append('photo', this.form.photo || '')
data.append('_method', 'put')
this.$inertia.post(this.route('users.update', this.user.id), data, {
onStart: () => this.sending = true,
onFinish: () => this.sending = false,
onSuccess: () => {
if (Object.keys(this.$page.props.errors).length === 0) {
this.form.photo = null
this.form.password = null
}
},
})
},
destroy() { destroy() {
if (confirm('Are you sure you want to delete this user?')) { if (confirm('Are you sure you want to delete this user?')) {
this.$inertia.delete(this.route('users.destroy', this.user.id)) this.$inertia.delete(this.route('users.destroy', this.user.id))