Make customer addresses editable.

This commit is contained in:
2025-01-10 16:24:01 +01:00
parent 39f4acc1fc
commit 2b3c93a8b6
13 changed files with 213 additions and 15 deletions

View 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>