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\Validation\Rule;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request; use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Redirect;
class ContactsController extends Controller class ContactsController extends Controller
{ {
@ -46,7 +47,7 @@ class ContactsController extends Controller
public function store() public function store()
{ {
return Auth::user()->account->contacts()->create( Auth::user()->account->contacts()->create(
Request::validate([ Request::validate([
'first_name' => ['required', 'max:50'], 'first_name' => ['required', 'max:50'],
'last_name' => ['required', 'max:50'], 'last_name' => ['required', 'max:50'],
@ -61,7 +62,9 @@ class ContactsController extends Controller
'country' => ['nullable', 'max:2'], 'country' => ['nullable', 'max:2'],
'postal_code' => ['nullable', 'max:25'], 'postal_code' => ['nullable', 'max:25'],
]) ])
)->only('id'); );
return Redirect::route('contacts');
} }
public function edit(Contact $contact) public function edit(Contact $contact)
@ -107,15 +110,21 @@ class ContactsController extends Controller
'postal_code' => ['nullable', 'max:25'], 'postal_code' => ['nullable', 'max:25'],
]) ])
); );
return Redirect::route('contacts.edit', $contact);
} }
public function destroy(Contact $contact) public function destroy(Contact $contact)
{ {
$contact->delete(); $contact->delete();
return Redirect::route('contacts.edit', $contact);
} }
public function restore(Contact $contact) public function restore(Contact $contact)
{ {
$contact->restore(); $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 App\Organization;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request; use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Redirect; use Illuminate\Support\Facades\Redirect;
class OrganizationsController extends Controller 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\Validation\Rule;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Request; use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Redirect;
class UsersController extends Controller class UsersController extends Controller
{ {
@ -37,7 +38,7 @@ class UsersController extends Controller
public function store() public function store()
{ {
return Auth::user()->account->users()->create( Auth::user()->account->users()->create(
Request::validate([ Request::validate([
'first_name' => ['required', 'max:50'], 'first_name' => ['required', 'max:50'],
'last_name' => ['required', 'max:50'], 'last_name' => ['required', 'max:50'],
@ -45,7 +46,9 @@ class UsersController extends Controller
'password' => ['nullable'], 'password' => ['nullable'],
'owner' => ['required', 'boolean'], 'owner' => ['required', 'boolean'],
]) ])
)->only('id'); );
return Redirect::route('users');
} }
public function edit(User $user) public function edit(User $user)
@ -77,15 +80,21 @@ class UsersController extends Controller
if (Request::get('password')) { if (Request::get('password')) {
$user->update(['password' => Request::get('password')]); $user->update(['password' => Request::get('password')]);
} }
return Redirect::route('users.edit', $user);
} }
public function destroy(User $user) public function destroy(User $user)
{ {
$user->delete(); $user->delete();
return Redirect::route('users.edit', $user);
} }
public function restore(User $user) public function restore(User $user)
{ {
$user->restore(); $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"> <div class="px-10 py-12">
<h1 class="text-center font-bold text-3xl">Welcome Back!</h1> <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
<div class="mx-auto mt-6 w-24 border-b-2" /> <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" /> <text-input v-model="form.password" class="mt-6" label="Password" type="password" />
<label class="mt-6 select-none flex items-center" for="remember"> <label class="mt-6 select-none flex items-center" for="remember">
<input id="remember" v-model="form.remember" class="mr-1" type="checkbox"> <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"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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.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.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.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.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.fields.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('organization_id')" label="Organization"> <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 :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.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.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" 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.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" 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.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" 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.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" 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" /> <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.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country"> <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="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.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>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <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> </div>
</form> </form>
</div> </div>
@ -35,7 +35,6 @@
<script> <script>
import { Inertia, InertiaLink } from 'inertia-vue' import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton' import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput' import SelectInput from '@/Shared/SelectInput'
@ -50,11 +49,20 @@ export default {
TextInput, TextInput,
}, },
props: { props: {
contact: {
type: Object,
default: () => ({}),
},
organizations: Array, organizations: Array,
errors: {
type: Object,
default: () => ({}),
},
}, },
data() { data() {
return { return {
form: new Form({ sending: false,
form: {
first_name: null, first_name: null,
last_name: null, last_name: null,
organization_id: null, organization_id: null,
@ -65,15 +73,20 @@ export default {
region: null, region: null,
country: null, country: null,
postal_code: null, postal_code: null,
}), },
} }
}, },
watch: {
form: {
handler: form => Inertia.cache('contact', form),
deep: true,
},
},
methods: { methods: {
submit() { submit() {
this.form.post({ this.sending = true
url: this.route('contacts.store'), Inertia.post(this.route('contacts.store'), this.form)
then: data => Inertia.visit(this.route('contacts.edit', data.id)), .then(() => this.sending = false)
})
}, },
}, },
} }

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

@ -1,9 +1,9 @@
<template> <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"> <h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span> <span class="text-indigo-light font-medium">/</span>
{{ form.fields.first_name }} {{ form.fields.last_name }} {{ form.first_name }} {{ form.last_name }}
</h1> </h1>
<trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
This contact has been deleted. This contact has been deleted.
@ -11,27 +11,27 @@
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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.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.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.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.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.fields.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('organization_id')" label="Organization"> <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 :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.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.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" 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.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" 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.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" 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.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" 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" /> <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.fields.country" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('country')" label="Country"> <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="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.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>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center"> <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> <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> </div>
</form> </form>
</div> </div>
@ -40,7 +40,6 @@
<script> <script>
import { Inertia, InertiaLink } from 'inertia-vue' import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton' import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput' import SelectInput from '@/Shared/SelectInput'
@ -59,10 +58,15 @@ export default {
props: { props: {
contact: Object, contact: Object,
organizations: Array, organizations: Array,
errors: {
type: Object,
default: () => ({}),
},
}, },
data() { data() {
return { return {
form: new Form({ sending: false,
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,
@ -73,30 +77,23 @@ 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() { submit() {
this.form.put({ this.sending = true
url: this.route('contacts.update', this.contact.id), Inertia.put(this.route('contacts.update', this.contact.id), this.form)
then: () => Inertia.visit(this.route('contacts')), .then(() => 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.form.delete({ Inertia.delete(this.route('contacts.destroy', this.contact.id))
url: this.route('contacts.destroy', this.contact.id),
then: () => Inertia.replace(this.route('contacts.edit', this.contact.id)),
})
} }
}, },
restore() { restore() {
if (confirm('Are you sure you want to restore this contact?')) { if (confirm('Are you sure you want to restore this contact?')) {
this.form.put({ Inertia.put(this.route('contacts.restore', this.contact.id))
url: this.route('contacts.restore', this.contact.id),
then: () => Inertia.replace(this.route('contacts.edit', 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"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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" 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.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" 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.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" 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.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" 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.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" 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.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" 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" /> <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" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.country ? errors.country[0] : null" label="Country"> <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="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" 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>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <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> <loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
@ -77,7 +77,8 @@ export default {
methods: { methods: {
submit() { submit() {
this.sending = true 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"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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" 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.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" 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.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" 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.phone" :errors="errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" 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.address" :errors="errors.address" class="pr-6 pb-8 w-full lg:w-1/2" 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.city" :errors="errors.city" class="pr-6 pb-8 w-full lg:w-1/2" 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" /> <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" class="pr-6 pb-8 w-full lg:w-1/2" :error="errors.country ? errors.country[0] : null" label="Country"> <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="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" 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>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center"> <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> <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> </div>
</form> </form>
</div> </div>
@ -97,6 +97,7 @@ export default {
}, },
data() { data() {
return { return {
sending: false,
form: { form: {
name: this.organization.name, name: this.organization.name,
email: this.organization.email, email: this.organization.email,
@ -111,7 +112,9 @@ export default {
}, },
methods: { methods: {
submit() { submit() {
this.sending = true
Inertia.put(this.route('organizations.update', this.organization.id), this.form) Inertia.put(this.route('organizations.update', this.organization.id), this.form)
.then(() => this.sending = false)
}, },
destroy() { destroy() {
if (confirm('Are you sure you want to delete this organization?')) { 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"> <div class="bg-white rounded shadow overflow-hidden max-w-lg">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<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.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.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.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.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.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.email" :errors="errors.email" class="pr-6 pb-8 w-full lg:w-1/2" 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" /> <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.fields.owner" class="pr-6 pb-8 w-full lg:w-1/2" :error="form.errors.first('owner')" label="Owner"> <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="true">Yes</option>
<option :value="false">No</option> <option :value="false">No</option>
</select-input> </select-input>
</div> </div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center"> <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> </div>
</form> </form>
</div> </div>
@ -26,7 +26,6 @@
<script> <script>
import { Inertia, InertiaLink } from 'inertia-vue' import { Inertia, InertiaLink } from 'inertia-vue'
import Form from '@/Utils/Form'
import Layout from '@/Shared/Layout' import Layout from '@/Shared/Layout'
import LoadingButton from '@/Shared/LoadingButton' import LoadingButton from '@/Shared/LoadingButton'
import SelectInput from '@/Shared/SelectInput' import SelectInput from '@/Shared/SelectInput'
@ -41,25 +40,38 @@ export default {
TextInput, TextInput,
}, },
props: { props: {
organizations: Array, user: {
type: Object,
default: () => ({ owner: false }),
},
errors: {
type: Object,
default: () => ({}),
},
}, },
data() { data() {
return { return {
form: new Form({ sending: false,
first_name: null, form: {
last_name: null, first_name: this.user.first_name,
email: null, last_name: this.user.last_name,
password: null, email: this.user.email,
owner: null, password: this.user.password,
}), owner: this.user.owner,
},
} }
}, },
watch: {
form: {
handler: form => Inertia.cache('user', form),
deep: true,
},
},
methods: { methods: {
submit() { submit() {
this.form.post({ this.sending = true
url: this.route('users.store'), Inertia.post(this.route('users.store'), this.form)
then: data => Inertia.visit(this.route('users.edit', data.id)), .then(() => this.sending = false)
})
}, },
}, },
} }

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

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

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

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

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

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<label v-if="label" class="form-label" :for="id">{{ label }}:</label> <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)"> <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="error" class="form-error">{{ error }}</div> <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
</div> </div>
</template> </template>
@ -22,7 +22,10 @@ export default {
}, },
value: String, value: String,
label: String, label: String,
error: String, errors: {
type: Array,
default: () => [],
},
}, },
methods: { methods: {
focus() { focus() {

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

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<label v-if="label" class="form-label" :for="id">{{ label }}:</label> <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)" /> <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="error" class="form-error">{{ error }}</div> <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
</div> </div>
</template> </template>
@ -20,8 +20,14 @@ export default {
}, },
value: String, value: String,
label: String, label: String,
error: String, errors: {
autosize: Boolean, type: Array,
default: () => [],
},
autosize: {
type: Boolean,
default: false,
},
}, },
mounted() { mounted() {
if (this.autosize) { 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