Make customer addresses editable.
This commit is contained in:
129
resources/views/address/edit.blade.php
Normal file
129
resources/views/address/edit.blade.php
Normal file
@@ -0,0 +1,129 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
{{ __('customer.Edit existing address') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12" x-data="addressForm()">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-bind="address">
|
||||
|
||||
<div class="max-w-xl">
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('customer.Edit address') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("customer.Hint edit address.") }}
|
||||
</p>
|
||||
</header>
|
||||
<form class="mt-6 space-y-6" @submit.prevent="">
|
||||
|
||||
<p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
|
||||
<p x-show="success" x-transition
|
||||
class="text-sm text-green-600 dark:text-green-400">{{ __('form.Saved') }}</p>
|
||||
|
||||
<div>
|
||||
<x-input-label for="name" :value="__('common.Name')"/>
|
||||
<x-text-input id="name" name="name" type="text"
|
||||
class="mt-1 block w-full" :value="old('name')" disabled autofocus
|
||||
autocomplete="name" x-model="address.name"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="email" :value="__('common.Email')"/>
|
||||
<x-text-input id="email" name="email" type="email"
|
||||
class="mt-1 block w-full" :value="old('email')" disabled
|
||||
autocomplete="username" x-model="address.email"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="phone" :value="__('common.Phone')"/>
|
||||
<x-text-input id="phone" name="phone" type="text"
|
||||
class="mt-1 block w-full" :value="old('phone')" disabled
|
||||
autocomplete="phone"
|
||||
x-model="address.phone"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="address" :value="__('common.Address')"/>
|
||||
<x-text-input id="address" name="address" type="text"
|
||||
class="mt-1 block w-full" :value="old('address')" disabled
|
||||
autocomplete="address"
|
||||
x-model="address.address"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row space-x-8">
|
||||
<div class="w-1/4">
|
||||
<x-input-label for="zip" :value="__('common.Zip Code')"/>
|
||||
<x-text-input id="zip" name="zip" type="text"
|
||||
class="mt-1 block w-full" :value="old('zip')" disabled
|
||||
autocomplete="zip"
|
||||
x-model="address.zip"/>
|
||||
</div>
|
||||
<div class="w-3/4">
|
||||
<x-input-label for="city" :value="__('common.City')"/>
|
||||
<x-text-input id="city" name="city" type="text"
|
||||
class="mt-1 block w-full" :value="old('city')" disabled
|
||||
autocomplete="city"
|
||||
x-model="address.city"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row space-x-8">
|
||||
<x-input-label class="w-1/4" for="is_address"
|
||||
:value="__('customer.Invoice Address')"/>
|
||||
<input type="hidden" name="is_address" value="0"/>
|
||||
<x-text-input id="is_address" name="is_address" type="checkbox"
|
||||
class="mt-1" :value="old('is_address')"
|
||||
x-model="address.is_address"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row space-x-8">
|
||||
<x-input-label class="w-1/4" for="is_delivery"
|
||||
:value="__('customer.Delivery Address')"/>
|
||||
<input type="hidden" name="is_delivery" value="0"/>
|
||||
<x-text-input id="is_delivery" name="is_delivery" type="checkbox"
|
||||
class="mt-1" :value="old('is_delivery')"
|
||||
x-model="address.is_delivery"/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<x-primary-button @click="submit">{{ __('form.Save') }}</x-primary-button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
<script>
|
||||
function addressForm() {
|
||||
return {
|
||||
address: {!! $address !!},
|
||||
error: false,
|
||||
message: '',
|
||||
success: false,
|
||||
|
||||
submit() {
|
||||
let vm = this;
|
||||
axios.put('/address/' + this.address.id, this.address)
|
||||
.then(function (response) {
|
||||
vm.success = true;
|
||||
vm.error = false;
|
||||
})
|
||||
.catch(function (error) {
|
||||
vm.error = true;
|
||||
vm.message = error.response.data;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user