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>

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {{ $attributes->merge(['class' => 'size-8 p-1']) }}>
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
</svg>

After

Width:  |  Height:  |  Size: 401 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {{ $attributes->merge(['class' => 'size-8 p-1']) }}>
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>

After

Width:  |  Height:  |  Size: 651 B

View File

@@ -7,6 +7,7 @@
<div class="py-12" x-data="customerForm()">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<!-- Customer data -->
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
<div class="max-w-xl">
@@ -49,7 +50,6 @@
</div>
</div>
<!-- Existing addresses -->
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-bind="addresses">
<div class="max-w">
@@ -58,19 +58,22 @@
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
{{ __('customer.Existing addresses') }}
</h2>
</header>
<div class="grid grid-cols-3">
<div class="grid grid-cols-3 space-x-4 space-y-4">
<template x-for="address in addresses" :key="address.id">
<div>
<div class="flex flex-col p-8 pb-0">
<div class="border border-gray-500 pb-8">
<div class="flex flex-col p-8">
<x-address-card/>
</div>
<x-danger-button
x-show="!address.is_delivery && !address.is_address"
class="ml-8"
x-data=""
x-on:click.prevent="delete_id = address.id;$dispatch('open-modal', 'confirm-user-deletion')"
>{{ __('customer.Delete Address') }}</x-danger-button>
<div class="flex flex-row">
<a class="ml-8 inline-block" x-bind:href="'/address/' + address.id + '/edit'"><x-primary-button class="pl-2"><x-edit-icon class="h-6 mr-2"/>{{ __('form.Edit') }}</x-primary-button></a>
<x-danger-button
class="ml-2 pl-2"
x-data=""
x-on:click.prevent="delete_id = address.id;$dispatch('open-modal', 'confirm-user-deletion')"
><x-trash-icon class="h-6 mr-2"/>{{ __('form.Delete') }}</x-danger-button>
</div>
</div>
</template>
</div>
@@ -189,7 +192,6 @@
</form>
</x-modal>
</div>
</div>

View File

@@ -73,8 +73,10 @@
</div>
<div>
<a class="ml-8 mb-8 inline-block" x-bind:href="'/customer/' + customer.id + '/edit'"><x-primary-button>{{ __('form.Edit') }}</x-primary-button></a>
<a class="ml-8 mb-8 inline-block" x-bind:href="'/customer/' + customer.id + '/edit'"><x-primary-button class="pl-2+
"><x-edit-icon class="h-6 mr-2"/>{{ __('form.Edit') }}</x-primary-button></a>
</div>
</details>
</template>
</section>

View File

@@ -16,7 +16,7 @@
{{ __('common.Dashboard') }}
</x-nav-link>
<x-nav-link :href="route('customer.index')"
:active="\Illuminate\Support\Str::startsWith(request()->route()->getName(), 'customer.')">
:active="\Illuminate\Support\Str::startsWith(request()->route()->getName(), 'customer.') || \Illuminate\Support\Str::startsWith(request()->route()->getName(), 'address.')">
{{ __('customer.Customers') }}
</x-nav-link>
<x-nav-link :href="route('invoice.index')"