Make customers deletable and recoverable.

app/Http/Controllers/Api/CustomerController.php

@@ -18,6 +18,14 @@ class CustomerController extends Controller
         return response()->json(Customer::with(['address', 'delivery'])->orderBy('name')->get());
     }
 
+    /**
+     * Display a listing of the resource.
+     */
+    public function withTrashed(): JsonResponse
+    {
+        return response()->json(Customer::with(['address', 'delivery'])->withTrashed()->orderBy('name')->get());
+    }
+
     /**
      * Store a newly created resource in storage.
      */
@@ -66,4 +74,14 @@ class CustomerController extends Controller
 
         return response()->json(null, 204);
     }
+
+    /**
+     * Restore the specified resource.
+     */
+    public function restore(int $id): JsonResponse
+    {
+        $customer = Customer::withTrashed()->findOrFail($id)->restore();
+
+        return response()->json($customer);
+    }
 }

app/Models/Invoice.php

@@ -99,7 +99,7 @@ class Invoice extends Model
      */
     public function customer(): BelongsTo
     {
-        return $this->belongsTo(Customer::class);
+        return $this->belongsTo(Customer::class)->withTrashed();
     }
 
     /**

lang/de/form.php

@@ -14,6 +14,7 @@ return [
     'Add' => 'Anlegen',
     'Edit' => 'Bearbeiten',
     'Delete' => 'Löschen',
+    'Restore' => 'Wiederherstellen',
     'Save' => 'Speichern',
     'Change' => 'Ändern',
     'SaveAndContinue' => 'Speichern und Weiter',

resources/views/components/restore-icon.blade.php

@@ -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="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+</svg>

resources/views/customer/index.blade.php

@@ -19,14 +19,15 @@
                                 {{ __("customer.Add new customer by clicking add") }}
                             </p>
                         </header>
-                        <a class="mt-6 inline-block" href="{{ route('customer.create') }}"><x-primary-button>{{ __('form.Add') }}</x-primary-button></a>
+                        <a class="mt-6 inline-block" href="{{ route('customer.create') }}">
+                            <x-primary-button>{{ __('form.Add') }}</x-primary-button>
+                        </a>
                     </section>
                 </div>
             </div>
 
             <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-                <div class="max-w" x-data="{ customers: []}"
+                <div class="max-w" x-data="customerForm()">
-                     x-init="customers = await fetchCustomers().then((data) => data );">
                     <section>
                         <header>
                             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
@@ -34,19 +35,46 @@
                             </h2>
                         </header>
 
-                        <div class="cursor-pointer grid grid-cols-3 mt-4">
+                        <div class="flex flex-row mt-4">
-                            <div class="font-bold border-b-2">{{ __('common.Name') }}</div>
+                            <div class="w-11/12 grid grid-cols-3">
-                            <div class="font-bold border-b-2">{{ __('common.Email') }}</div>
+                                <div class="font-bold border-b-2">{{ __('common.Name') }}</div>
-                            <div class="font-bold border-b-2">{{ __('common.Created at') }}</div>
+                                <div class="font-bold border-b-2">{{ __('common.Email') }}</div>
+                                <div class="font-bold border-b-2">{{ __('common.Created at') }}</div>
+                            </div>
+                            <div class="w-1/12 border-b-2"></div>
                         </div>
 
-                        <template x-for="customer in customers">
+                        <template x-for="(customer, index) in customers">
-                            <div class="even:bg-gray-100 odd:bg-white hover:bg-gray-400">
+                            <div class="even:bg-gray-100 odd:bg-white hover:bg-gray-400 flex flex-row">
-                                <div class="cursor-pointer grid grid-cols-3" x-on:click="window.location.href='/customer/' + customer.id;">
+                                <div class="w-11/12 grid grid-cols-3"
+                                     :class="(customer.deleted_at == null) ? 'cursor-pointer' : 'line-through';"
+                                     x-on:click="(customer.deleted_at == null) ? window.location.href='/customer/' + customer.id : ''">
                                     <div x-text="customer.name"></div>
                                     <div x-text="customer.email"></div>
                                     <div x-text="customer.created"></div>
                                 </div>
+                                <div class="w-1/12 place-items-end" x-data="{ tooltip: false }" x-show="customer.deleted_at == null" >
+                                    <x-trash-icon class="cursor-pointer h-6"
+                                                  x-on:click="deleteCustomer(index);"
+                                                  x-on:mouseover="tooltip = true"
+                                                  x-on:mouseleave="tooltip = false"
+                                    />
+                                    <div x-show="tooltip"
+                                         class="text-sm text-white absolute bg-gray-900 rounded-lg p-2 transform -translate-y-16 translate-x-8">
+                                        {{ __('form.Delete') }}
+                                    </div>
+                                </div>
+                                <div class="w-1/12 place-items-end" x-data="{ tooltip: false }" x-show="customer.deleted_at != null" >
+                                    <x-restore-icon class="cursor-pointer h-6"
+                                                  x-on:click="restoreCustomer(index);"
+                                                  x-on:mouseover="tooltip = true"
+                                                  x-on:mouseleave="tooltip = false"
+                                    />
+                                    <div x-show="tooltip"
+                                         class="text-sm text-white absolute bg-gray-900 rounded-lg p-2 transform -translate-y-16 translate-x-8">
+                                        {{ __('form.Restore') }}
+                                    </div>
+                                </div>
                             </div>
                         </template>
 
@@ -60,16 +88,64 @@
 </x-app-layout>
 
 <script>
-    let fetchCustomers = async () => {
+    function customerForm() {
-        return await new Promise((resolve, reject) => {
+        return {
-            axios.get('/customer')
+            customers: [],
-                .then(function (response) {
-                    resolve(response.data);
-                })
-                .catch(function (error) {
-                    console.log(error);
-                })
-        });
-    }
 
+            success: false,
+            error: false,
+            message: '',
+
+            init() {
+                let vm = this;
+                axios.get('/customer-with-trashed')
+                    .then(function (response) {
+                        vm.customers = response.data;
+                    })
+                    .catch(function (error) {
+                        vm.error = true;
+                        vm.message = error.response.data.message;
+                    })
+
+            },
+
+            deleteCustomer(index) {
+                let vm = this;
+                axios.delete('/customer/' + this.customers[index].id)
+                    .then(function (response) {
+                        vm.error = false;
+                        vm.success = true;
+                        vm.message = '';
+                        vm.customers[index].deleted_at = 0;
+                        window.setTimeout(function () {
+                            vm.success = false;
+                        }, 1000);
+                    })
+                    .catch(function (error) {
+                        vm.error = true;
+                        vm.success = false;
+                        vm.message = error.response.data.message;
+                    });
+            },
+
+            restoreCustomer(index) {
+                let vm = this;
+                axios.get('/customer/' + this.customers[index].id + '/restore')
+                    .then(function (response) {
+                        vm.error = false;
+                        vm.success = true;
+                        vm.message = '';
+                        vm.customers[index].deleted_at = null;
+                        window.setTimeout(function () {
+                            vm.success = false;
+                        }, 1000);
+                    })
+                    .catch(function(error) {
+                        vm.error = true;
+                        vm.success = false;
+                        vm.message = error.response.data.message;
+                    })
+            }
+        }
+    }
 </script>

routes/api.php

@@ -31,6 +31,8 @@ Route::group(['as' => 'api.'], function () {
         });
 
         Route::apiResource('/customer', CustomerController::class);
+        Route::get('/customer-with-trashed', [CustomerController::class, 'withTrashed']);
+        Route::get('/customer/{id}/restore', [CustomerController::class, 'restore'])->name('customer.restore');
         Route::apiResource('/customer.address', AddressController::class)->shallow();
         Route::apiResource('/taxrate', TaxRateController::class)->except(['show']);
         Route::get('/invoice-filter/{start}/{end}', [InvoiceController::class, 'index'])->name('invoice.index');