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

Update all pages to use Inertia for POST, PUT and DELETE requests

This commit is contained in:
Jonathan Reinink 2019-04-15 21:18:29 -04:00
parent 72262482e2
commit 46764b2e1b
14 changed files with 174 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/Http/Controllers/ContactsController.php
View File

@ -7,6 +7,7 @@ use Inertia\Inertia;
use Illuminate\Validation\Rule;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Redirect;
class ContactsController extends Controller
{
@ -46,7 +47,7 @@ class ContactsController extends Controller
public function store()
{
return Auth::user()->account->contacts()->create(
Auth::user()->account->contacts()->create(
Request::validate([
'first_name' => ['required', 'max:50'],
'last_name' => ['required', 'max:50'],
@ -61,7 +62,9 @@ class ContactsController extends Controller
'country' => ['nullable', 'max:2'],
'postal_code' => ['nullable', 'max:25'],
])
)->only('id');
);
return Redirect::route('contacts');
}
public function edit(Contact $contact)
@ -107,15 +110,21 @@ class ContactsController extends Controller
'postal_code' => ['nullable', 'max:25'],
])
);
return Redirect::route('contacts.edit', $contact);
}
public function destroy(Contact $contact)
{
$contact->delete();
return Redirect::route('contacts.edit', $contact);
}
public function restore(Contact $contact)
{
$contact->restore();
return Redirect::route('contacts.edit', $contact);
}
}

1
app/Http/Controllers/OrganizationsController.php
View File

@ -6,7 +6,6 @@ use Inertia\Inertia;
use App\Organization;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Redirect;
class OrganizationsController extends Controller

13
app/Http/Controllers/UsersController.php
View File

@ -7,6 +7,7 @@ use Inertia\Inertia;
use Illuminate\Validation\Rule;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Redirect;
class UsersController extends Controller
{
@ -37,7 +38,7 @@ class UsersController extends Controller
public function store()
{
return Auth::user()->account->users()->create(
Auth::user()->account->users()->create(
Request::validate([
'first_name' => ['required', 'max:50'],
'last_name' => ['required', 'max:50'],
@ -45,7 +46,9 @@ class UsersController extends Controller
'password' => ['nullable'],
'owner' => ['required', 'boolean'],
])
)->only('id');
);
return Redirect::route('users');
}
public function edit(User $user)
@ -77,15 +80,21 @@ class UsersController extends Controller
if (Request::get('password')) {
$user->update(['password' => Request::get('password')]);
}
return Redirect::route('users.edit', $user);
}
public function destroy(User $user)
{
$user->delete();
return Redirect::route('users.edit', $user);
}
public function restore(User $user)
{
$user->restore();
return Redirect::route('users.edit', $user);
}
}

2
resources/js/Pages/Auth/Login.vue
View File

@ -6,7 +6,7 @@
<div class="px-10 py-12">
<h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
<div class="mx-auto mt-6 w-24 border-b-2" />
<text-input v-model="form.email" class="mt-10" label="Email" :error="errors.email ? errors.email[0] : null" type="email" autofocus autocapitalize="off" />
<text-input v-model="form.email" :errors="errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" />
<text-input v-model="form.password" class="mt-6" label="Password" type="password" />
<label class="mt-6 select-none flex items-center" for="remember">
<input id="remember" v-model="form.remember" class="mr-1" type="checkbox">

49
resources/js/Pages/Contacts/Create.vue
View File

@ -7,26 +7,26 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
<text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
<select-input v-model="form.fields.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('organization_id')" label="Organization">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
<text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
<select-input v-model="form.organization_id" :errors="errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
<option :value="null" />
<option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
</select-input>
<text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
<text-input v-model="form.fields.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('phone')" label="Phone" />
<text-input v-model="form.fields.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('address')" label="Address" />
<text-input v-model="form.fields.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('city')" label="City" />
<text-input v-model="form.fields.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('region')" label="Province/State" />
<select-input v-model="form.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country">
<text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
<text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
<text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
<text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
<select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
<option :value="null" />
<option value="CA">Canada</option>
<option value="US">United States</option>
</select-input>
<text-input v-model="form.fields.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('postal_code')" label="Postal code" />
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
<loading-button :loading="form.sending" class="btn-indigo" type="submit">Create Contact</loading-button>
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button>
</div>
</form>
</div>
@ -35,7 +35,6 @@
<script>
import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput'
@ -50,11 +49,20 @@ export default {
TextInput,
},
props: {
contact: {
type: Object,
default: () => ({}),
},
organizations: Array,
errors: {
type: Object,
default: () => ({}),
},
},
data() {
return {
form: new Form({
sending: false,
form: {
first_name: null,
last_name: null,
organization_id: null,
@ -65,15 +73,20 @@ export default {
region: null,
country: null,
postal_code: null,
}),
},
}
},
watch: {
form: {
handler: form => Inertia.cache('contact', form),
deep: true,
},
},
methods: {
submit() {
this.form.post({
url: this.route('contacts.store'),
then: data => Inertia.visit(this.route('contacts.edit', data.id)),
})
this.sending = true
Inertia.post(this.route('contacts.store'), this.form)
.then(() => this.sending = false)
},
},
}

53
resources/js/Pages/Contacts/Edit.vue
View File

@ -1,9 +1,9 @@
<template>
<layout :title="`${form.fields.first_name} ${form.fields.last_name}`">
<layout :title="`${form.first_name} ${form.last_name}`">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span>
{{ form.fields.first_name }} {{ form.fields.last_name }}
{{ form.first_name }} {{ form.last_name }}
</h1>
<trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
This contact has been deleted.
@ -11,27 +11,27 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
<text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
<select-input v-model="form.fields.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('organization_id')" label="Organization">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
<text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
<select-input v-model="form.organization_id" :errors="errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
<option :value="null" />
<option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
</select-input>
<text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
<text-input v-model="form.fields.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('phone')" label="Phone" />
<text-input v-model="form.fields.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('address')" label="Address" />
<text-input v-model="form.fields.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('city')" label="City" />
<text-input v-model="form.fields.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('region')" label="Province/State" />
<select-input v-model="form.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country">
<text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
<text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
<text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
<text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
<select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
<option :value="null" />
<option value="CA">Canada</option>
<option value="US">United States</option>
</select-input>
<text-input v-model="form.fields.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('postal_code')" label="Postal code" />
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
<button v-if="!contact.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
<loading-button :loading="form.sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
</div>
</form>
</div>
@ -40,7 +40,6 @@
<script>
import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput'
@ -59,10 +58,15 @@ export default {
props: {
contact: Object,
organizations: Array,
errors: {
type: Object,
default: () => ({}),
},
},
data() {
return {
form: new Form({
sending: false,
form: {
first_name: this.contact.first_name,
last_name: this.contact.last_name,
organization_id: this.contact.organization_id,
@ -73,30 +77,23 @@ export default {
region: this.contact.region,
country: this.contact.country,
postal_code: this.contact.postal_code,
}),
},
}
},
methods: {
submit() {
this.form.put({
url: this.route('contacts.update', this.contact.id),
then: () => Inertia.visit(this.route('contacts')),
})
this.sending = true
Inertia.put(this.route('contacts.update', this.contact.id), this.form)
.then(() => this.sending = false)
},
destroy() {
if (confirm('Are you sure you want to delete this contact?')) {
this.form.delete({
url: this.route('contacts.destroy', this.contact.id),
then: () => Inertia.replace(this.route('contacts.edit', this.contact.id)),
})
Inertia.delete(this.route('contacts.destroy', this.contact.id))
}
},
restore() {
if (confirm('Are you sure you want to restore this contact?')) {
this.form.put({
url: this.route('contacts.restore', this.contact.id),
then: () => Inertia.replace(this.route('contacts.edit', this.contact.id)),
})
Inertia.put(this.route('contacts.restore', this.contact.id))
}
},
},

19
resources/js/Pages/Organizations/Create.vue
View File

@ -7,18 +7,18 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.name ? errors.name[0] : null" label="Name" />
<text-input v-model="form.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.email ? errors.email[0] : null" label="Email" />
<text-input v-model="form.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.phone ? errors.phone[0] : null" label="Phone" />
<text-input v-model="form.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.address ? errors.address[0] : null" label="Address" />
<text-input v-model="form.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.city ? errors.city[0] : null" label="City" />
<text-input v-model="form.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.region ? errors.region[0] : null" label="Province/State" />
<select-input v-model="form.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.country ? errors.country[0] : null" label="Country">
<text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
<text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
<text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
<text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
<text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
<select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
<option :value="null" />
<option value="CA">Canada</option>
<option value="US">United States</option>
</select-input>
<text-input v-model="form.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.postal_code ? errors.postal_code[0] : null" label="Postal code" />
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
@ -77,7 +77,8 @@ export default {
methods: {
submit() {
this.sending = true
Inertia.post(this.route('organizations.store'), this.form).then(() => this.sending = false)
Inertia.post(this.route('organizations.store'), this.form)
.then(() => this.sending = false)
},
},
}

21
resources/js/Pages/Organizations/Edit.vue
View File

@ -11,22 +11,22 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.name ? errors.name[0] : null" label="Name" />
<text-input v-model="form.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.email ? errors.email[0] : null" label="Email" />
<text-input v-model="form.phone" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.phone ? errors.phone[0] : null" label="Phone" />
<text-input v-model="form.address" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.address ? errors.address[0] : null" label="Address" />
<text-input v-model="form.city" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.city ? errors.city[0] : null" label="City" />
<text-input v-model="form.region" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.region ? errors.region[0] : null" label="Province/State" />
<select-input v-model="form.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.country ? errors.country[0] : null" label="Country">
<text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
<text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
<text-input v-model="form.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
<text-input v-model="form.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
<text-input v-model="form.region" :errors="errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
<select-input v-model="form.country" :errors="errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
<option :value="null" />
<option value="CA">Canada</option>
<option value="US">United States</option>
</select-input>
<text-input v-model="form.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.postal_code ? errors.postal_code[0] : null" label="Postal code" />
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
<button v-if="!organization.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
<loading-button :loading="form.sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
</div>
</form>
</div>
@ -97,6 +97,7 @@ export default {
},
data() {
return {
sending: false,
form: {
name: this.organization.name,
email: this.organization.email,
@ -111,7 +112,9 @@ export default {
},
methods: {
submit() {
this.sending = true
Inertia.put(this.route('organizations.update', this.organization.id), this.form)
.then(() => this.sending = false)
},
destroy() {
if (confirm('Are you sure you want to delete this organization?')) {

50
resources/js/Pages/Users/Create.vue
View File

@ -7,17 +7,17 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
<text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
<text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
<text-input v-model="form.fields.password" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('password')" type="password" autocomplete="new-password" label="Password" />
<select-input v-model="form.fields.owner" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('owner')" label="Owner">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
<text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
<text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.password" :errors="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" :errors="errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
<option :value="true">Yes</option>
<option :value="false">No</option>
</select-input>
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
<loading-button :loading="form.sending" class="btn-indigo" type="submit">Create User</loading-button>
<loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button>
</div>
</form>
</div>
@ -26,7 +26,6 @@
<script>
import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput'
@ -41,25 +40,38 @@ export default {
TextInput,
},
props: {
organizations: Array,
user: {
type: Object,
default: () => ({ owner: false }),
},
errors: {
type: Object,
default: () => ({}),
},
},
data() {
return {
form: new Form({
first_name: null,
last_name: null,
email: null,
password: null,
owner: null,
}),
sending: false,
form: {
first_name: this.user.first_name,
last_name: this.user.last_name,
email: this.user.email,
password: this.user.password,
owner: this.user.owner,
},
}
},
watch: {
form: {
handler: form => Inertia.cache('user', form),
deep: true,
},
},
methods: {
submit() {
this.form.post({
url: this.route('users.store'),
then: data => Inertia.visit(this.route('users.edit', data.id)),
})
this.sending = true
Inertia.post(this.route('users.store'), this.form)
.then(() => this.sending = false)
},
},
}

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

@ -1,9 +1,9 @@
<template>
<layout :title="`${form.fields.first_name} ${form.fields.last_name}`">
<layout :title="`${form.first_name} ${form.last_name}`">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
<span class="text-indigo-light font-medium">/</span>
{{ form.fields.first_name }} {{ form.fields.last_name }}
{{ form.first_name }} {{ form.last_name }}
</h1>
<trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
This user has been deleted.
@ -11,18 +11,18 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.fields.first_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('first_name')" label="First name" />
<text-input v-model="form.fields.last_name" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('last_name')" label="Last name" />
<text-input v-model="form.fields.email" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('email')" label="Email" />
<text-input v-model="form.fields.password" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('password')" type="password" autocomplete="new-password" label="Password" />
<select-input v-model="form.fields.owner" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('owner')" label="Owner">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
<text-input v-model="form.last_name" :errors="errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
<text-input v-model="form.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
<text-input v-model="form.password" :errors="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" :errors="errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
<option :value="true">Yes</option>
<option :value="false">No</option>
</select-input>
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
<button v-if="!user.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
<loading-button :loading="form.sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
</div>
</form>
</div>
@ -31,7 +31,6 @@
<script>
import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput'
@ -49,40 +48,37 @@ export default {
},
props: {
user: Object,
organizations: Array,
errors: {
type: Object,
default: () => ({}),
},
},
data() {
return {
form: new Form({
sending: false,
form: {
first_name: this.user.first_name,
last_name: this.user.last_name,
email: this.user.email,
password: this.user.password,
owner: this.user.owner,
}),
},
}
},
methods: {
submit() {
this.form.put({
url: this.route('users.update', this.user.id),
then: () => Inertia.visit(this.route('users')),
})
this.sending = true
Inertia.put(this.route('users.update', this.user.id), this.form)
.then(() => this.sending = false)
},
destroy() {
if (confirm('Are you sure you want to delete this user?')) {
this.form.delete({
url: this.route('users.destroy', this.user.id),
then: () => Inertia.replace(this.route('users.edit', this.user.id)),
})
Inertia.delete(this.route('users.destroy', this.user.id))
}
},
restore() {
if (confirm('Are you sure you want to restore this user?')) {
this.form.put({
url: this.route('users.restore', this.user.id),
then: () => Inertia.replace(this.route('users.edit', this.user.id)),
})
Inertia.put(this.route('users.restore', this.user.id))
}
},
},

9
resources/js/Shared/SelectInput.vue
View File

@ -1,10 +1,10 @@
<template>
<div>
<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<select :id="id" ref="input" v-model="selected" v-bind="$attrs" class="form-select" :class="{ error: error }">
<select :id="id" ref="input" v-model="selected" v-bind="$attrs" class="form-select" :class="{ error: errors.length }">
<slot />
</select>
<div v-if="error" class="form-error">{{ error }}</div>
<div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
</div>
</template>
@ -20,7 +20,10 @@ export default {
},
value: [String, Number, Boolean],
label: String,
error: String,
errors: {
type: Array,
default: () => [],
},
},
data() {
return {

9
resources/js/Shared/TextInput.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: error }" :type="type" :value="value" @input="$emit('input', $event.target.value)">
<div v-if="error" class="form-error">{{ error }}</div>
<input :id="id" ref="input" v-bind="$attrs" class="form-input" :class="{ error: errors.length }" :type="type" :value="value" @input="$emit('input', $event.target.value)">
<div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
</div>
</template>
@ -22,7 +22,10 @@ export default {
},
value: String,
label: String,
error: String,
errors: {
type: Array,
default: () => [],
},
},
methods: {
focus() {

14
resources/js/Shared/TextareaInput.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<label v-if="label" class="form-label" :for="id">{{ label }}:</label>
<textarea :id="id" ref="input" v-bind="$attrs" class="form-textarea" :class="{ error: error }" :value="value" @input="$emit('input', $event.target.value)" />
<div v-if="error" class="form-error">{{ error }}</div>
<textarea :id="id" ref="input" v-bind="$attrs" class="form-textarea" :class="{ error: errors.length }" :value="value" @input="$emit('input', $event.target.value)" />
<div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
</div>
</template>
@ -20,8 +20,14 @@ export default {
},
value: String,
label: String,
error: String,
autosize: Boolean,
errors: {
type: Array,
default: () => [],
},
autosize: {
type: Boolean,
default: false,
},
},
mounted() {
if (this.autosize) {

44
resources/js/Utils/Form.js vendored
View File

@ -1,44 +0,0 @@
import axios from 'axios'
import Errors from '@/Utils/Errors'
class Form {
constructor(fields = {}) {
this.fields = fields
this.sending = false
this.errors = new Errors()
this.http = axios.create({
headers: { 'X-Requested-With': 'XMLHttpRequest' },
})
}
delete({ url, then }) {
this.request(this.http.delete(url), then)
}
post({ url, data = this.fields, then }) {
this.request(this.http.post(url, data), then)
}
put({ url, data = this.fields, then }) {
this.request(this.http.put(url, data), then)
}
request(request, then) {
this.sending = true
request.then(response => {
this.sending = false
then(response.data)
}).catch(error => {
this.sending = false
if (error.response && error.response.status === 422) {
this.errors.record(error.response.data.errors)
} else {
return Promise.reject(error)
}
})
}
}
export default Form