cleanup

app/Http/Controllers/CarController.php

@@ -85,7 +85,7 @@ class CarController extends Controller
                 'country' => $contact->country,
                 'company' => $contact->company,
                 'email' => $contact->email,
-                'link' => route('contacts.edit', $contact),
+                'link' => route('contacts.show', $contact),
             ],
             'link' => route('contracts.show', $contract),
         ];

app/Http/Controllers/ContactController.php

@@ -2,9 +2,10 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Car;
 use Inertia\Inertia;
 use App\Models\Contact;
-use App\Models\Car;
+use App\Models\Contract;
 use App\Enums\InsuranceType;
 use Illuminate\Http\Request;
 use Illuminate\Validation\Rule;
@@ -12,11 +13,6 @@ use Illuminate\Support\Facades\Redirect;
 
 class ContactController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
     public function index(Request $request)
     {
         return $this->renderContactsList($request, Contact::query(), 'Contacts/Index');
@@ -54,7 +50,7 @@ class ContactController extends Controller
                     'email' => $contact->email,
                     'address' => $contact->address,
                     'fullCity' => $contact->fullCity,
-                    'link' => route('contacts.edit', $contact),
+                    'link' => route('contacts.show', $contact),
                     'deleted_at' => $contact->deleted_at,
                 ]),
         ]);
@@ -85,22 +81,11 @@ class ContactController extends Controller
         return 'name';
     }
 
-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
     public function create()
     {
         return Inertia::render('Contacts/Create');
     }
 
-    /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
     public function store(Request $request)
     {
         $contact = Contact::create(
@@ -118,15 +103,9 @@ class ContactController extends Controller
             ])
         );
 
-        return Redirect::route('contacts.edit', $contact);
+        return Redirect::route('contacts.show', $contact);
     }
 
-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  \App\Models\Contact  $contact
-     * @return \Illuminate\Http\Response
-     */
     public function edit(Contact $contact)
     {
         return Inertia::render('Contacts/Edit', [
@@ -144,36 +123,68 @@ class ContactController extends Controller
                 'city' => $contact->city,
                 'country' => $contact->country,
                 'deleted_at' => $contact->deleted_at,
-                'bought_cars' => $contact->buyContracts()
-                    ->with('car')
-                    ->paginate(10)
-                    ->through(fn ($contract) => [
-                        'date' => $contract->date,
-                        'price' => $contract->price,
-                        'name' => $contract->car->name,
-                        'link' => route('cars.edit', $contract->car),
-                        'insurance_type' => InsuranceType::fromValue((int)$contract->insurance_type)->key,
-                    ]),
-                'sold_cars' => $contact->sellContracts()
-                    ->with('car')
-                    ->paginate(10)
-                    ->through(fn ($contract) => [
-                        'date' => $contract->date,
-                        'price' => $contract->price,
-                        'name' => $contract->car->name,
-                        'link' => route('cars.edit', $contract->car),
-                    ]),
             ]
         ]);
     }
 
-    /**
+    public function show(Contact $contact)
-     * Update the specified resource in storage.
+    {
-     *
+        return Inertia::render('Contacts/Show', [
-     * @param  \Illuminate\Http\Request  $request
+            'contact' => [
-     * @param  \App\Models\Contact  $contact
+                'id' => $contact->id,
-     * @return \Illuminate\Http\Response
+                'firstname' => $contact->firstname,
-     */
+                'lastname' => $contact->lastname,
+                'company' => $contact->company,
+                'title' => $contact->title,
+                'email' => $contact->email,
+                'notes' => $contact->notes,
+                'phone' => $contact->phone,
+                'address' => $contact->address,
+                'zip' => $contact->zip,
+                'city' => $contact->city,
+                'country' => $contact->country,
+                'deleted_at' => $contact->deleted_at,
+                'buy_contracts' => $contact->buyContracts()
+                    ->with('car')
+                    ->paginate(50)
+                    ->through(fn ($contract) => $this->getContractFields($contract)),
+                'sell_contracts' => $contact->sellContracts()
+                    ->with('car')
+                    ->paginate(50)
+                    ->through(fn ($contract) => $this->getContractFields($contract)),
+            ]
+        ]);
+    }
+
+    private function getContractFields(?Contract $contract) {
+        if (!$contract) {
+            return null;
+        }
+        $car = $contract->car;
+        return [
+            'id' => $contract->id,
+            'date' => $contract->date_formatted,
+            'price' => $contract->price->format(),
+            'type' => $contract->type,
+            'is_sell_contract' => $contract->isSellContract(),
+            'insurance_type' => $contract->insurance_type ? InsuranceType::fromValue((int)$contract->insurance_type)->key : null,
+            'car' => [
+                 'id' => $car->id,
+                    'stammnummer' => $car->stammnummer,
+                    'vin' => $car->vin,
+                    'name' => $car->name,
+                    'initial_date' => $car->initial_date_formatted,
+                    'colour' => $car->colour,
+                    'last_check_date' => $car->last_check_date_formatted,
+                    'kilometers' => $car->kilometers,
+                    'known_damage' => $car->known_damage,
+                    'notes' => $car->notes,
+                    'link' => route('cars.show', $car),
+            ],
+            'link' => route('contracts.show', $contract),
+        ];
+    }
+
     public function update(Request $request, Contact $contact)
     {
         $contact->update(
@@ -191,15 +202,9 @@ class ContactController extends Controller
             ])
         );
 
-        return Redirect::back()->with('success', 'Kontakt geändert.');
+        return Redirect::route('contacts.show', $contact)->with('success', 'Kontakt geändert.');
     }
 
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \App\Models\Contact  $contact
-     * @return \Illuminate\Http\Response
-     */
     public function destroy(Contact $contact)
     {
         $contact->delete();

app/Http/Controllers/ContractController.php

@@ -185,7 +185,7 @@ class ContractController extends Controller
                 'country' => $contract->contact->country,
                 'company' => $contract->contact->company,
                 'email' => $contract->contact->email,
-                'link' => route('contacts.edit', $contract->contact),
+                'link' => route('contacts.show', $contract->contact),
             ],
             'car' => [
                 'id' => $contract->car->id,

resources/js/Components/CarCard.vue

@@ -4,42 +4,40 @@
             {{ car.name }}
         </div>
         <div class="grid grid-cols-4 gap-2 w-full">
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.stammnummer" class="col-span-1 xs:col-span-2">
                 Stammnummer
             </div>
-            <div class="col-span-3 xs:col-span-2">
+            <div v-if="!hideEmpty || car.stammnummer" class="col-span-3 xs:col-span-2">
                 {{ car.stammnummer ? car.stammnummer : '-' }}
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.vin" class="col-span-1 xs:col-span-2">
                 Chassisnummer
             </div>
-            <div class="col-span-3 xs:col-span-2">
+            <div v-if="!hideEmpty || car.vin" class="col-span-3 xs:col-span-2">
                 {{ car.vin ? car.vin : '-'}}
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.colour" class="col-span-1 xs:col-span-2">
                 Farbe
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.colour" class="col-span-1 xs:col-span-2">
                 {{ car.colour ? car.colour : '-' }}
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.kilometers" class="col-span-1 xs:col-span-2">
                 Kilometerstand
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.kilometers" class="col-span-1 xs:col-span-2">
                 {{ car.kilometers ? car.kilometers + ' KM' : '-' }}
             </div>
-
+            <div v-if="!hideEmpty || car.initial_date" class="col-span-1 xs:col-span-2">
-            <div class="col-span-1 xs:col-span-2">
                 Erstzulassung
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.initial_date" class="col-span-1 xs:col-span-2">
                 {{ car.initial_date ? car.initial_date  : '-' }}
             </div>
-
+            <div v-if="!hideEmpty || car.last_check_date" class="col-span-1 xs:col-span-2">
-            <div class="col-span-1 xs:col-span-2">
                 Letzte Prüfung
             </div>
-            <div class="col-span-1 xs:col-span-2">
+            <div v-if="!hideEmpty || car.last_check_date" class="col-span-1 xs:col-span-2">
                 {{ car.last_check_date ? car.last_check_date  : '-' }}
             </div>
         </div>
@@ -65,6 +63,7 @@
 export default ({
     props: {
         car: Object,
+        hideEmpty: String,
     },
 })
 </script>

resources/js/Components/ContractCard.vue

@@ -7,7 +7,7 @@
         </div>
         <div v-if="contract.car" class="col-span-6 xs:col-span-12">
             <h3 class="mb-3">Auto</h3>
-            <car-card :car="contract.car" />
+            <car-card hide-empty="true" :car="contract.car" />
         </div>
         <div class="col-span-6 xs:col-span-12 h-full relative">
             <h3>Vertragsinformationen</h3>

resources/js/Components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sticky top-0 z-40">
-            <div class="w-full h-20 px-6 bg-white-100 border-b flex items-center justify-between">
+            <div class="w-full h-20 px-6 bg-white border-b flex items-center justify-between">
 
               <!-- left navbar -->
               <div class="flex">
@@ -79,7 +79,10 @@ export default {
     methods: {
         toggleSidebar() {
             this.$store.dispatch('toggleSidebar')
-        }
+        },
+        logout() {
+            this.$inertia.post(route('logout'));
+        },
     }
 }
 </script>

resources/js/Components/ShowPage.vue

@@ -3,7 +3,7 @@
         <template #header>
             <slot name="header"></slot>
         </template>
-        <div class="py-6 grid grid-cols-12 gap-12 max-w-7xl sm:px-6 lg:px-8">
+        <div class="grid grid-cols-12 gap-12 w-full mb-10">
             <div class="col-span-6 xs:col-span-12">
                 <slot name="info"></slot>
             </div>
@@ -13,7 +13,7 @@
                 </div>
             </div>
         </div>
-        <div class="py-6 grid grid-cols-12 gap-8 w-full">
+        <div class="grid grid-cols-12 gap-12 w-full">
             <slot name="more"></slot>
         </div>
     </layout>

resources/js/Components/Sidebar.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- give the sidebar z-50 class so its higher than the navbar if you want to see the logo -->
     <!-- you will need to add a little "X" button next to the logo in order to close it though -->
-    <div class="w-1/2 md:w-1/3 lg:w-64 fixed md:top-0 md:left-0 h-screen lg:block bg-white-100 border-r z-30" :class="sideBarOpen ? '' : 'hidden'" id="main-nav">
+    <div class="w-1/2 md:w-1/3 lg:w-64 fixed md:top-0 md:left-0 h-screen lg:block bg-white border-r z-30" :class="sideBarOpen ? '' : 'hidden'" id="main-nav">
 
         <div class="w-full h-20 border-b flex px-4 items-center mb-8">
             <p class="font-semibold text-2xl text-blue-400 pl-4">Your SwissCar</p>

resources/js/Layouts/Layout.vue

@@ -2,13 +2,13 @@
     <div class="leading-normal tracking-normal" id="main-body">
         <div class="flex flex-wrap">   
             <Sidebar />
-            <div class="w-full bg-white-100 pl-0 lg:pl-64 min-h-screen" :class="sideBarOpen ? 'overlay' : ''" id="main-content">
+            <div class="w-full bg-gray-100 pl-0 lg:pl-64 min-h-screen" :class="sideBarOpen ? 'overlay' : ''" id="main-content">
                 <Navbar>
                   <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                     <slot name="header"></slot>
                   </h2>
                 </Navbar>
-                <div class="p-6 bg-gray-100 mb-20">
+                <div class="p-12 bg-gray-100 mb-20">
                     <main>
                         <slot></slot>
                     </main>

resources/js/Pages/Cars/Components/CarForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="max-w-7xl py-10 sm:px-6 lg:px-8">
+    <div class="max-w-7xl">
         <jet-form-section @submitted="submitForm">
             <template #title>
                 <slot name="title"></slot>

resources/js/Pages/Cars/Index.vue

@@ -6,11 +6,9 @@
                 Alle Autos
             </h2>
         </template>
-        <div class="py-12">
+        <div class="w-full mx-auto">
-            <div class="w-full mx-auto sm:px-6 lg:px-8">
             <simple-table :title="cars.total + ' Autos'" :data="cars" :columns="columns" :defaultSort="sort" :filters="filters" :currentRoute="currentRoute"  />
         </div>
-        </div>
     </layout>
 </template>
 

resources/js/Pages/Cars/Show.vue

@@ -10,7 +10,7 @@
             <car-card :car="car" />
         </template>
         <template #actions>
-            <edit-button v-if="!car.deleted_at" :href="route('cars.destroy', car.id)" />
+            <edit-button v-if="!car.deleted_at" :href="route('cars.edit', car.id)" />
             <delete-button v-if="!car.deleted_at" :href="route('cars.destroy', car.id)" />
             <restore-button v-if="car.deleted_at" :href="route('cars.restore', car.id)" />
             <div v-if="car.deleted_at">
@@ -18,7 +18,7 @@
             </div>
         </template>
         <template #more>
-            <div class="sm:px-6 lg:px-8 col-span-6 xs:col-span-12">
+            <div class="col-span-6 xs:col-span-12">
                 <div class="whitespace-nowrap">
                     <h1 class="font-bold text-3xl">{{ car.buy_contracts.total > 1 ? car.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag' }}</h1>
                 </div>
@@ -32,7 +32,7 @@
                     </inertia-link>
                 </div>
             </div>
-            <div class="sm:px-6 lg:px-8 col-span-6 xs:col-span-12">
+            <div class="col-span-6 xs:col-span-12">
                 <div class="whitespace-nowrap">
                     <h1 class="font-bold text-3xl">{{ car.sell_contracts.total > 1 ? car.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag' }}</h1>
                 </div>
@@ -53,7 +53,6 @@
 <script>
 import ShowPage from '@/Components/ShowPage.vue'
 import BreadCrumb from '@/Components/BreadCrumb.vue'
-import SimpleTable from '@/Components/SimpleTable.vue'
 import CarCard from '@/Components/CarCard.vue'
 import BuyContractCard from '@/Components/BuyContractCard.vue'
 import SellContractCard from '@/Components/SellContractCard.vue'
@@ -65,7 +64,6 @@ export default {
     components: {
         ShowPage,
         BreadCrumb,
-        SimpleTable,
         CarCard,
         BuyContractCard,
         SellContractCard,
@@ -79,17 +77,6 @@ export default {
     data() {
         return {
             currentRoute: 'cars.show',
-            buyContractsColumns: [
-                {key: 'contact', value: 'Verkäufer'},
-                {key: 'date', value: 'Kaufdatum'},
-                {key: 'price', value: 'Kaufpreis'},
-            ],
-            sellContractsColumns: [
-                {key: 'contact', value: 'Käufer'},
-                {key: 'date', value: 'Verkaufsdatum'},
-                {key: 'price', value: 'Verkaufspreis'},
-                {key: 'insurance_type', value: 'Versicherungstyp'},
-            ],
         }
     },
 }

resources/js/Pages/Cars/Sold.vue

@@ -6,11 +6,9 @@
                 Verkaufte Autos
             </h2>
         </template>
-        <div class="py-12">
+        <div class="w-full mx-auto">
-            <div class="w-full mx-auto sm:px-6 lg:px-8">
             <simple-table :title="cars.total + ' Autos'" :data="cars" :columns="columns" :defaultSort="sort" :filters="filters" :currentRoute="currentRoute"  />
         </div>
-        </div>
     </layout>
 </template>
 

resources/js/Pages/Cars/Unsold.vue

@@ -6,11 +6,9 @@
                 Meine Autos
             </h2>
         </template>
-        <div class="py-12">
+        <div class="w-full mx-auto">
-            <div class="w-full mx-auto sm:px-6 lg:px-8">
             <simple-table :title="cars.total + ' Autos'" :data="cars" :columns="columns" :defaultSort="sort" :filters="filters" :currentRoute="currentRoute"  />
         </div>
-        </div>
     </layout>
 </template>
 

resources/js/Pages/Contacts/Buyers.vue

@@ -6,11 +6,9 @@
             Käufer
         </h2>
     </template>
-    <div class="py-12">
     <div class="w-full mx-auto sm:px-6 lg:px-8">
       <simple-table :title="contacts.total + ' Käufer'" :data="contacts" :columns="columns" :defaultSort="sort" :filters="filters" :currentRoute="currentRoute"  />
     </div>
-    </div>
   </layout>
 </template>
 
@@ -38,7 +36,6 @@ export default {
         {key: 'company', value: 'Firma', sortable: true},
         {key: 'address', value: 'Adresse', sortable: true},
         {key: 'fullCity', value: 'Ort', sortable: true},
-        {key: 'email', value: 'E-Mail', sortable: true},
         {key: 'phone', value: 'Telefon'},
       ],
     }

resources/js/Pages/Contacts/Components/ContactForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="max-w-7xl py-10 sm:px-6 lg:px-8">
+    <div class="max-w-7xl">
         <jet-form-section @submitted="submitForm">
             <template #title>
                 <slot name="title"></slot>
@@ -100,6 +100,7 @@ import JetInput from '@/Jetstream/Input.vue'
 import JetActionMessage from '@/Jetstream/ActionMessage'
 import JetInputError from '@/Jetstream/InputError'
 import JetFormSection from '@/Jetstream/FormSection'
+import { useForm } from '@inertiajs/inertia-vue3'
 
 export default {
     components: {
@@ -110,35 +111,18 @@ export default {
         JetInputError,
         JetActionMessage,
     },
-
     props: {
-        form: Object,
+        data: Object,
         meta: Object,
     },
-
+    data() {
-    computed: {
-        contact: function () {
         return {
-                id: this.form.id,
+            form: useForm(this.meta.form_name, this.data),
-                firstname: this.form.firstname,
-                lastname: this.form.lastname,
-                company: this.form.company,
-                email: this.form.email,
-                phone: this.form.phone,
-                address: this.form.address,
-                zip: this.form.zip,
-                city: this.form.city,
-                country: this.form.country,
-                notes: this.form.notes,
         }
     },
-    },
-
     methods: {
         submitForm() {
-            this.form.post(route(this.meta.link, this.contact), {
+            this.form.submit(this.meta.method, this.meta.route);
-                preserveScroll: true,
-            });
         },
     },
 }

resources/js/Pages/Contacts/Create.vue

@@ -8,7 +8,7 @@
         </template>
    
         <div>
-            <contact-form :form="form" :meta="meta">
+            <contact-form :data="data" :meta="meta">
                 <template #title>Neuen Kontakt erfassen</template>
                 <template #description>Anschliessend können mit dem neuen Kontakt Verträge abgeschlossen werden.</template>
             </contact-form>
@@ -30,12 +30,13 @@ export default {
     data() {
         return {
             meta: {
-                link: 'contacts.store',
+                form_name: 'CreateContact',
+                route: this.route('contacts.store'),
+                method: 'post',
                 button_text: 'Kontakt speichern',
                 on_success: 'Kontakt gespeichert',
             },
-            form: this.$inertia.form({
+            data: {
-                _method: 'POST',
                 id: null,
                 firstname: null,
                 lastname: null,
@@ -47,7 +48,7 @@ export default {
                 city: null,
                 country: null,
                 notes: null,
-            }),
+            },
         }
     },
 }

resources/js/Pages/Contacts/Edit.vue

@@ -8,39 +8,26 @@
         </template>
    
         <div>
-            <contact-form :form="form" :meta="meta">
+            <contact-form :data="data" :meta="meta">
                 <template #title>Kontaktinformationen</template>
                 <template #description>
                     Kontaktinformationen anschauen &amp; anpassen.
-                    <contact-card :contact="computedContact" />
                 </template>
             </contact-form>
         </div>
-        <div class="py-12">
-            <div class="max-w-7xl sm:px-6 lg:px-8">
-                <simple-table :title="'An ' + title + ' verkaufte Autos'" :data="contact.bought_cars" :columns="boughtCarColumns" />
-            </div>
-            <div class="max-w-7xl pt-6 sm:px-6 lg:px-8">    
-                <simple-table :title="'Von ' + title + ' gekaufte Autos'" :data="contact.sold_cars" :columns="soldCarColumns" />
-            </div>
-        </div>
     </layout>
 </template>
 
 <script>
 import Layout from '@/Layouts/Layout'
 import BreadCrumb from '@/Components/BreadCrumb.vue'
-import ContactCard from '@/Components/ContactCard.vue'
-import SimpleTable from '@/Components/SimpleTable.vue'
 import ContactForm from './Components/ContactForm.vue'
 
 export default {
     components: {
         Layout,
         BreadCrumb,
-        SimpleTable,
         ContactForm,
-        ContactCard,
     },
 
     props: {
@@ -49,12 +36,13 @@ export default {
     data() {
         return {
             meta: {
-                link: 'contacts.update',
+                form_name: 'EditContact' + this.contact.id,
+                route: this.route('contacts.update', this.contact.id),
+                method: 'put',
                 button_text: 'Änderungen speichern',
                 on_success: 'Änderungen gespeichert',
             },
-            form: this.$inertia.form({
+            data: {
-                _method: 'PUT',
                 id: this.contact.id,
                 firstname: this.contact.firstname,
                 lastname: this.contact.lastname,
@@ -66,41 +54,17 @@ export default {
                 city: this.contact.city,
                 country: this.contact.country,
                 notes: this.contact.notes,
-            }),
+            },
-            boughtCarColumns: [
-                {key: 'name', value: 'Auto'},
-                {key: 'date', value: 'Verkaufsdatum'},
-                {key: 'price', value: 'Verkaufspreis'},
-                {key: 'insurance_type', value: 'Versicherungstyp'},
-            ],
-            soldCarColumns: [
-                {key: 'name', value: 'Auto'},
-                {key: 'date', value: 'Kaufdatum'},
-                {key: 'price', value: 'Kaufpreis'},
-            ]
         }
     },
     computed: {
         title: function () {
-            if (this.form.company) {
+            if (this.data.company) {
-                return this.form.company;
+                return this.data.company;
             }
 
-            return this.form.lastname + ' ' + this.form.firstname;
+            return this.data.lastname + ' ' + this.data.firstname;
         }, 
-        computedContact: function () {
-            return {
-                firstname: this.form.firstname,
-                lastname: this.form.lastname,
-                company: this.form.company,
-                email: this.form.email,
-                phone: this.form.phone,
-                address: this.form.address,
-                zip: this.form.zip,
-                city: this.form.city,
-                country: this.form.country,
-            }
-        }
     },
 }
 </script>

resources/js/Pages/Contacts/Index.vue

@@ -6,11 +6,9 @@
             Alle Kontakte
         </h2>
     </template>
-    <div class="py-12">
+    <div class="w-full mx-auto">
-        <div class="w-full mx-auto sm:px-6 lg:px-8">
         <simple-table :title="contacts.total + ' Kontakte'" :data="contacts" :columns="columns" :defaultSort="sort" :filters="filters" :currentRoute="currentRoute" />
     </div>
-    </div>
   </layout>
 </template>
 
@@ -38,7 +36,6 @@ export default {
         {key: 'company', value: 'Firma', sortable: true},
         {key: 'address', value: 'Adresse', sortable: true},
         {key: 'fullCity', value: 'Ort', sortable: true},
-        {key: 'email', value: 'E-Mail', sortable: true},
         {key: 'phone', value: 'Telefon'},
       ],
     }

resources/js/Pages/Contacts/Sellers.vue

@@ -6,11 +6,9 @@
             Käufer
         </h2>
     </template>
-    <div class="py-12">
+    <div class="w-full mx-auto">
-        <div class="w-full mx-auto sm:px-6 lg:px-8">
         <simple-table :title="contacts.total + ' Verkäufer'" :data="contacts" :columns="columns" :defaultSort="sort" :filters="filters" :currentRoute="currentRoute" />
     </div>
-    </div>
   </layout>
 </template>
 
@@ -38,7 +36,6 @@ export default {
         {key: 'company', value: 'Firma', sortable: true},
         {key: 'address', value: 'Adresse', sortable: true},
         {key: 'fullCity', value: 'Ort', sortable: true},
-        {key: 'email', value: 'E-Mail', sortable: true},
         {key: 'phone', value: 'Telefon'},
       ],
     }

resources/js/Pages/Contacts/Show.vue

@@ -0,0 +1,96 @@
+<template>
+    <show-page>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                <bread-crumb text="Kontakte" :href="route('contacts')" />
+                {{ title }}
+            </h2>
+        </template>
+
+        <template #info>
+            <contact-card :contact="contact" />
+        </template>
+
+        <template #actions>
+            <edit-button v-if="!contact.deleted_at" :href="route('contacts.edit', contact.id)" />
+            <delete-button v-if="!contact.deleted_at" :href="route('contacts.destroy', contact.id)" />
+            <restore-button v-if="contact.deleted_at" :href="route('contacts.restore', contact.id)" />
+            <div v-if="contact.deleted_at">
+                gelöscht: {{ contact.deleted_at }}
+            </div>
+        </template>
+   
+        <template #more>
+            <div class="col-span-10 xs:col-span-12">
+                <div class="whitespace-nowrap">
+                    <h1 class="font-bold text-3xl">{{ contact.buy_contracts.total > 1 ? contact.buy_contracts.total + ' Ankaufsverträge' : 'Ankaufsvertrag' }}</h1>
+                </div>
+                <div v-for="contract in contact.buy_contracts.data" :key="contract.id">
+                    <buy-contract-card :contract="contract"/>
+                </div>
+                <div v-if="!contact.deleted_at">
+                    <inertia-link :href="route('contracts.create_from_contact', contact.id)" class="w-full py-6 mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition" >
+                        <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                        Neuer Ankaufsvertrag
+                    </inertia-link>
+                </div>
+            </div>
+            <div class="col-span-10 xs:col-span-12">
+                <div class="whitespace-nowrap">
+                    <h1 class="font-bold text-3xl">{{ contact.sell_contracts.total > 1 ? contact.sell_contracts.total + ' Verkaufsverträge' : 'Verkaufsvertrag' }}</h1>
+                </div>
+                <div v-for="contract in contact.sell_contracts.data" :key="contract.id">
+                    <sell-contract-card :contract="contract"/>
+                </div>
+                <div v-if="!contact.deleted_at">
+                    <inertia-link :href="route('contracts.create_from_contact', contact.id)" class="py-6 w-full mt-12 inline-flex items-center px-4 bg-green-800 border border-transparent rounded-md font-semibold justify-center text-md text-white uppercase tracking-widest hover:bg-green-700 focus:outline-none focus:border-green-900 focus:ring focus:ring-green-300 disabled:opacity-25 transition" >
+                        <unicon fill="white" class="mr-1" height="22" width="22" name="plus-circle"></unicon>
+                        Neuer Verkaufssvertrag
+                    </inertia-link>
+                </div>
+            </div>
+        </template>
+    </show-page>
+</template>
+
+<script>
+import ShowPage from '@/Components/ShowPage.vue'
+import BreadCrumb from '@/Components/BreadCrumb.vue'
+import ContactCard from '@/Components/ContactCard.vue'
+import BuyContractCard from '@/Components/BuyContractCard.vue'
+import SellContractCard from '@/Components/SellContractCard.vue'
+import EditButton from '@/Components/Buttons/EditButton.vue'
+import DeleteButton from '@/Components/Buttons/DeleteButton.vue'
+import RestoreButton from '@/Components/Buttons/RestoreButton.vue'
+
+export default {
+    components: {
+        ShowPage,
+        BreadCrumb,
+        ContactCard,
+        BuyContractCard,
+        SellContractCard,
+        EditButton,
+        DeleteButton,
+        RestoreButton,
+    },
+
+    props: {
+        contact: Object,
+    },
+    data() {
+        return {
+            currentRoute: 'contacts.show',
+        }
+    },
+    computed: {
+        title: function () {
+            if (this.contact.company) {
+                return this.contact.company;
+            }
+
+            return this.contact.lastname + ' ' + this.contact.firstname;
+        }, 
+    },
+}
+</script>

resources/js/Pages/Contracts/Components/ContractForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="max-w-7xl py-10 sm:px-6 lg:px-8">
+    <div class="max-w-7xl">
         <jet-form-section @submitted="submitForm">
             <template #title>
                 <slot name="title"></slot>

resources/js/Pages/Contracts/CreateFromCar.vue

@@ -7,7 +7,7 @@
             </h2>
         </template>
         <div>
-            <jet-form-section class="max-w-7xl pb-5 sm:px-6 lg:px-8">
+            <jet-form-section class="max-w-7xl">
                 <template #title>
                     Auto
                 </template>

resources/js/Pages/Contracts/Show.vue

@@ -33,7 +33,7 @@
             </div>
         </template>
         <template #actions>
-            <edit-button :href="route('contracts.edit', contract.id)" />
+            <edit-button v-if="!contract.deleted_at" :href="route('contracts.edit', contract.id)" />
             <print-button class="mb-3" :href="route('contracts.print', contract.id)" />
             <delete-button v-if="!contract.deleted_at" :href="route('contracts.destroy', contract.id)" />
             <restore-button v-if="contract.deleted_at" :href="route('contracts.restore', contract.id)" />
@@ -42,11 +42,11 @@
             </div>
         </template>
         <template #more>
-            <div class="sm:px-6 lg:px-8 col-span-6 xs:col-span-12">
+            <div class="col-span-6 xs:col-span-12">
                 <h3 class="mb-3">Auto</h3>
                 <car-card :car="contract.car" />
             </div>
-            <div class="sm:px-6 lg:px-8 col-span-4 xs:col-span-12">
+            <div class="col-span-5 xs:col-span-12">
                 <h3 class="mb-3">{{ contactTitle }}</h3>
                 <contact-card :contact="contract.contact" />
             </div>

routes/web.php

@@ -53,10 +53,14 @@ Route::post('contacts', [ContactController::class, 'store'])
     ->name('contacts.store')
     ->middleware(['auth:sanctum', 'verified']);
 
-Route::get('contacts/{contact}', [ContactController::class, 'edit'])
+Route::get('contacts/{contact}/edit', [ContactController::class, 'edit'])
     ->name('contacts.edit')
     ->middleware(['auth:sanctum', 'verified']);
 
+Route::get('contacts/{contact}', [ContactController::class, 'show'])
+    ->name('contacts.show')
+    ->middleware(['auth:sanctum', 'verified']);
+
 Route::put('contacts/{contact}', [ContactController::class, 'update'])
     ->name('contacts.update')
     ->middleware(['auth:sanctum', 'verified']);
@@ -133,6 +137,10 @@ Route::get('contracts/create/car/{car}', [ContractController::class, 'createFrom
     ->name('contracts.create_from_car')
     ->middleware(['auth:sanctum', 'verified']);
 
+    Route::get('contracts/create/contact/{contact}', [ContractController::class, 'createFromContact'])
+    ->name('contracts.create_from_contact')
+    ->middleware(['auth:sanctum', 'verified']);
+
 Route::post('contracts', [ContractController::class, 'store'])
     ->name('contracts.store')
     ->middleware(['auth:sanctum', 'verified']);