cars form

app/Http/Controllers/CarController.php

@@ -127,11 +127,11 @@ class CarController extends Controller
             $request->validate([
                 'stammnummer' => ['required', 'unique:cars', 'string', 'size:11', 'regex:/[0-9]{3}[.][0-9]{3}[.][0-9]{3}/i'],
                 'vin' => ['required', 'unique:cars', 'string', 'size:17'],
-                'initial_date' => ['nullable', 'date'],
+                'initial_date' => ['required', 'date'],
-                'last_check_date' => ['nullable', 'date'],
+                'last_check_date' => ['required', 'date'],
                 'colour' => ['nullable', 'max:75'],
                 'car_model_id' => ['required', 'exists:App\Models\CarModel,id'],
-                'kilometers' => ['nullable', 'max:75'],
+                'kilometers' => ['required', 'max:75'],
             ])
         );
 
@@ -152,7 +152,7 @@ class CarController extends Controller
                 'id' => $car->id,
                 'stammnummer' => $car->stammnummer,
                 'vin' => $car->vin,
-                'car_model' => $car->carModel,
+                'car_model' => $car->carModel->only('id', 'name'),
                 'brand' => $car->brand,
                 'name' => $car->name,
                 'initial_date' => $car->initial_date,
@@ -179,7 +179,20 @@ class CarController extends Controller
                 //         'link' => route('cars.edit', $car),
                 //         'insurance_type' => InsuranceType::fromValue((int)$contract->insurance_type)->key,
                 //     ]),
-            ]
+            ],
+            'brands' => Brand::all()->map(function ($brand) {
+                return [
+                    'id' => $brand->id,
+                    'name' => $brand->name,
+                    'models' => $brand->carModels()->get()
+                    ->map(function ($carModel) {
+                        return [
+                            'id' => $carModel->id,
+                            'name' => $carModel->name,
+                        ];
+                    }),
+                ];
+            }),
         ]);
     }
 
@@ -194,13 +207,13 @@ class CarController extends Controller
     {
         $car->update(
             $request->validate([
-                'stammnummer' => ['unique', 'max:11'],
+                'stammnummer' => ['required', 'unique:cars,stammnummer,' . $car->id, 'string', 'size:11', 'regex:/[0-9]{3}[.][0-9]{3}[.][0-9]{3}/i'],
-                'vin' => ['max:17'],
+                'vin' => ['required', 'unique:cars,vin,' . $car->id, 'string', 'size:17'],
-                'initial_date' => ['nullable', 'date'],
+                'initial_date' => ['required', 'date'],
-                'last_check_date' => ['nullable', 'date'],
+                'last_check_date' => ['required', 'date'],
                 'colour' => ['nullable', 'max:75'],
-                // 'model_id' => ['nullable', 'max:150'],
+                'car_model_id' => ['required', 'exists:App\Models\CarModel,id'],
-                'kilometers' => ['nullable', 'max:75'],
+                'kilometers' => ['required', 'max:75'],
             ])
         );
 

app/Http/Controllers/ContactController.php

@@ -128,7 +128,7 @@ class ContactController extends Controller
             ])
         );
 
-        return Redirect::route('contacts.edit', $contact)->with('success', 'Kontakt erstellt.');
+        return Redirect::route('contacts.edit', $contact);
     }
 
     /**

app/Models/Car.php

@@ -41,10 +41,10 @@ class Car extends Model
     //     return Money::CHF($this->buyContracts()->price);
     // }
 
-    public function getInitialDateAttribute($initialDate)
+    // public function getInitialDateAttribute($initialDate)
-    {
+    // {
-        return Carbon::parse($initialDate)->format('d.m.Y');
+    //     return Carbon::parse($initialDate)->format('d.m.Y');
-    }
+    // }
 
     public function brand()
     {

public/js/app.js

@@ -18134,6 +18134,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Jetstream_InputError__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/Jetstream/InputError */ "./resources/js/Jetstream/InputError.vue");
 /* harmony import */ var _Jetstream_FormSection__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/Jetstream/FormSection */ "./resources/js/Jetstream/FormSection.vue");
 /* harmony import */ var vue_multiselect__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vue-multiselect */ "./node_modules/vue-multiselect/dist/vue-multiselect.esm.js");
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+
 
 
 
@@ -18154,30 +18156,56 @@ __webpack_require__.r(__webpack_exports__);
     Multiselect: vue_multiselect__WEBPACK_IMPORTED_MODULE_7__.default
   },
   props: {
-    form: Object,
+    data: Object,
     brands: Array,
-    meta: Object
+    meta: Object,
+    brand: Object,
+    car_model: Object
   },
   data: function data() {
     return {
-      brand: this.form.brand,
       brandSearch: null,
       modelSearch: null,
       carModels: [],
-      model: this.form.model
+      brandSelection: this.brand,
+      car_modelSelection: this.car_model,
+      form: (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_8__.useForm)(this.meta.form_name, this.data)
     };
   },
   methods: {
     submitForm: function submitForm() {
-      this.form.post(route(this.meta.link, this.form.data()), {
+      this.form.submit(this.meta.method, this.meta.route);
-        preserveScroll: true
+    },
-      });
+    updateBrand: function updateBrand(brand) {
+      if (brand) {
+        this.brand.id = brand.id;
+        this.brand.name = brand.name;
+        this.brand.models = brand.models;
+      } else {
+        this.brand.id = null;
+        this.brand.name = null;
+        this.brand.models = [];
+      }
+
+      this.updateCarModelsList(brand);
+    },
+    updateCarModel: function updateCarModel(car_model) {
+      if (car_model) {
+        this.car_model.id = car_model.id;
+        this.car_model.name = car_model.name;
+        this.form.car_model_id = car_model.id;
+      } else {
+        this.car_model.id = null;
+        this.car_model.name = null;
+        this.form.car_model_id = null;
+      }
     },
     updateCarModelsList: function updateCarModelsList(brand) {
       var _brand$models;
 
       this.carModels = (_brand$models = brand.models) !== null && _brand$models !== void 0 ? _brand$models : [];
-      this.model = null;
+      this.car_modelSelection = null;
+      this.updateCarModel(null);
     },
     updateBrandSearch: function updateBrandSearch(searchQuery, id) {
       this.brandSearch = searchQuery;
@@ -18188,11 +18216,11 @@ __webpack_require__.r(__webpack_exports__);
       axios.post(this.route('brands.store'), {
         name: this.brandSearch
       }).then(function (response) {
-        var newBrand = response.data;
+        _this.brandSelection = response.data;
 
-        _this.brands.push(newBrand);
+        _this.brands.push(_this.brandSelection);
 
-        _this.brand = newBrand;
+        _this.updateBrand(_this.brandSelection);
       });
     },
     updateCarModelSearch: function updateCarModelSearch(searchQuery, id) {
@@ -18205,15 +18233,29 @@ __webpack_require__.r(__webpack_exports__);
         name: this.modelSearch,
         brand_id: this.brand.id
       }).then(function (response) {
-        var newModel = response.data;
+        _this2.car_modelSelection = response.data;
 
-        _this2.carModels.push(newModel);
+        _this2.carModels.push(_this2.car_modelSelection);
 
-        _this2.model = newModel;
+        _this2.updateCarModel(_this2.car_modelSelection);
       });
     }
   },
-  computed: {}
+  mounted: function mounted() {
+    this.$nextTick(function () {
+      var _this3 = this;
+
+      this.brandSelection = this.brands.find(function (x) {
+        return x.id === _this3.brand.id;
+      });
+
+      if (this.brandSelection) {
+        var _this$brandSelection$;
+
+        this.carModels = (_this$brandSelection$ = this.brandSelection.models) !== null && _this$brandSelection$ !== void 0 ? _this$brandSelection$ : [];
+      }
+    });
+  }
 });
 
 /***/ }),
@@ -18247,23 +18289,32 @@ __webpack_require__.r(__webpack_exports__);
   data: function data() {
     return {
       meta: {
-        link: 'cars.store',
+        form_name: 'CreateCar',
+        route: this.route('cars.store'),
+        method: 'post',
         button_text: 'Auto speichern',
         on_success: 'Auto gespeichert'
       },
-      form: this.$inertia.form({
+      data: {
-        _method: 'POST',
         id: null,
         stammnummer: null,
         vin: null,
         colour: null,
-        model_id: null,
+        car_model_id: null,
         initial_date: null,
         last_check_date: null,
         kilometers: null,
         known_damage: null,
         notes: null
-      })
+      },
+      brand: {
+        id: null,
+        name: null
+      },
+      car_model: {
+        id: null,
+        name: null
+      }
     };
   }
 });
@@ -18299,13 +18350,22 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
     CarForm: _Components_CarForm_vue__WEBPACK_IMPORTED_MODULE_3__.default
   },
   props: {
-    car: Object
+    car: Object,
+    brands: Array
   },
   computed: {
-    title: function title() {// if (this.form.company) {
+    name: function name() {
-      //     return this.form.company;
+      var out = '';
-      // }
+
-      // return this.form.lastname + ' ' + this.form.firstname;
+      if (this.brand.name) {
+        out += this.brand.name;
+
+        if (this.car_model.name) {
+          out += ' ' + this.car_model.name;
+        }
+      }
+
+      return out;
     },
     computedCar: function computedCar() {
       return {// firstname: this.form.firstname,
@@ -18322,25 +18382,28 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
   },
   data: function data() {
     return {
-      currentRoute: 'car.edit',
+      currentRoute: 'cars.edit',
       meta: {
-        link: 'cars.update',
+        form_name: 'EditCar' + this.car.id,
+        route: this.route('cars.update', this.car.id),
+        method: 'put',
         button_text: 'Änderungen speichern',
         on_success: 'Änderungen gespeichert'
       },
-      form: this.$inertia.form(_defineProperty({
+      brand: this.car.brand,
-        _method: 'PUT',
+      car_model: this.car.car_model,
+      data: _defineProperty({
         id: this.car.id,
         stammnummer: this.car.stammnummer,
         vin: this.car.vin,
         initial_date: this.car.initial_date,
         colour: this.car.colour,
         notes: this.car.notes,
-        model_id: this.car.model_id,
+        car_model_id: this.car.car_model.id,
         last_check_date: this.car.last_check_date,
         kilometers: this.car.kilometers,
         known_damage: this.car.known_damage
-      }, "notes", this.car.notes))
+      }, "notes", this.car.notes)
     };
   }
 });
@@ -23701,12 +23764,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "for": "brand",
         value: "Marke"
       }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_multiselect, {
-        modelValue: $data.brand,
+        modelValue: $data.brandSelection,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = function ($event) {
-          return $data.brand = $event;
+          return $data.brandSelection = $event;
         }),
         onSearchChange: $options.updateBrandSearch,
-        onSelect: $options.updateCarModelsList,
+        onSelect: $options.updateBrand,
         label: "name",
         "track-by": "id",
         options: $props.brands,
@@ -23727,17 +23790,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       }, 8
       /* PROPS */
-      , ["modelValue", "onSearchChange", "onSelect", "options"])]), $data.brand ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_label, {
+      , ["modelValue", "onSearchChange", "onSelect", "options"])]), $data.brandSelection ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_label, {
         "for": "model",
         value: "Modell"
       }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_multiselect, {
-        label: "name",
+        modelValue: $data.car_modelSelection,
-        "track-by": "id",
-        modelValue: $data.model,
         "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
-          return $data.model = $event;
+          return $data.car_modelSelection = $event;
         }),
         onSearchChange: $options.updateCarModelSearch,
+        onSelect: $options.updateCarModel,
+        label: "name",
+        "track-by": "id",
         options: $data.carModels,
         "class": "mt-1 block w-full",
         placeholder: "Modell auswählen"
@@ -23749,7 +23813,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             })
           }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("b", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.modelSearch), 1
           /* TEXT */
-          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" als neues " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.brand.name) + "-Modell speichern? ", 1
+          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" als neues " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.brand.name) + "-Modell speichern? ", 1
           /* TEXT */
           )])];
         }),
@@ -23758,8 +23822,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       }, 8
       /* PROPS */
-      , ["modelValue", "onSearchChange", "options"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
+      , ["modelValue", "onSearchChange", "onSelect", "options"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.model,
+        message: $data.form.errors.car_model_id,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23770,16 +23834,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         id: "stammnummer",
         type: "text",
         "class": "mt-1 block w-full",
-        modelValue: $props.form.stammnummer,
+        modelValue: $data.form.stammnummer,
         "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
-          return $props.form.stammnummer = $event;
+          return $data.form.stammnummer = $event;
         }),
         ref: "stammnummer",
         autocomplete: "stammnummer"
       }, null, 8
       /* PROPS */
       , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.stammnummer,
+        message: $data.form.errors.stammnummer,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23790,16 +23854,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         id: "vin",
         type: "text",
         "class": "mt-1 block w-full",
-        modelValue: $props.form.vin,
+        modelValue: $data.form.vin,
         "onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
-          return $props.form.vin = $event;
+          return $data.form.vin = $event;
         }),
         ref: "vin",
         autocomplete: "vin"
       }, null, 8
       /* PROPS */
       , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.vin,
+        message: $data.form.errors.vin,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23810,16 +23874,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         id: "initial_date",
         type: "text",
         "class": "mt-1 block w-full",
-        modelValue: $props.form.initial_date,
+        modelValue: $data.form.initial_date,
         "onUpdate:modelValue": _cache[7] || (_cache[7] = function ($event) {
-          return $props.form.initial_date = $event;
+          return $data.form.initial_date = $event;
         }),
         ref: "initial_date",
         autocomplete: "initial_date"
       }, null, 8
       /* PROPS */
       , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.initial_date,
+        message: $data.form.errors.initial_date,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23830,16 +23894,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         id: "last_check_date",
         type: "text",
         "class": "mt-1 block w-full",
-        modelValue: $props.form.last_check_date,
+        modelValue: $data.form.last_check_date,
         "onUpdate:modelValue": _cache[8] || (_cache[8] = function ($event) {
-          return $props.form.last_check_date = $event;
+          return $data.form.last_check_date = $event;
         }),
         ref: "last_check_date",
         autocomplete: "last_check_date"
       }, null, 8
       /* PROPS */
       , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.last_check_date,
+        message: $data.form.errors.last_check_date,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23850,16 +23914,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         id: "kilometers",
         type: "text",
         "class": "mt-1 block w-full",
-        modelValue: $props.form.kilometers,
+        modelValue: $data.form.kilometers,
         "onUpdate:modelValue": _cache[9] || (_cache[9] = function ($event) {
-          return $props.form.kilometers = $event;
+          return $data.form.kilometers = $event;
         }),
         ref: "kilometers",
         autocomplete: "kilometers"
       }, null, 8
       /* PROPS */
       , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.kilometers,
+        message: $data.form.errors.kilometers,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23870,16 +23934,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         id: "colour",
         type: "text",
         "class": "mt-1 block w-full",
-        modelValue: $props.form.colour,
+        modelValue: $data.form.colour,
         "onUpdate:modelValue": _cache[10] || (_cache[10] = function ($event) {
-          return $props.form.colour = $event;
+          return $data.form.colour = $event;
         }),
         ref: "colour",
         autocomplete: "colour"
       }, null, 8
       /* PROPS */
       , ["modelValue"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.colour,
+        message: $data.form.errors.colour,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23889,13 +23953,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("textarea", {
         "class": "mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm",
         "onUpdate:modelValue": _cache[11] || (_cache[11] = function ($event) {
-          return $props.form.known_damage = $event;
+          return $data.form.known_damage = $event;
         }),
         ref: "input"
       }, "\n                    ", 512
       /* NEED_PATCH */
-      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $props.form.known_damage]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
+      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $data.form.known_damage]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.known_damage,
+        message: $data.form.errors.known_damage,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23905,13 +23969,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("textarea", {
         "class": "mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm",
         "onUpdate:modelValue": _cache[12] || (_cache[12] = function ($event) {
-          return $props.form.notes = $event;
+          return $data.form.notes = $event;
         }),
         ref: "input"
       }, "\n                    ", 512
       /* NEED_PATCH */
-      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $props.form.notes]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
+      ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $data.form.notes]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_input_error, {
-        message: $props.form.errors.notes,
+        message: $data.form.errors.notes,
         "class": "mt-2"
       }, null, 8
       /* PROPS */
@@ -23919,7 +23983,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_action_message, {
-        on: $props.form.recentlySuccessful,
+        on: $data.form.recentlySuccessful,
         "class": "mr-3"
       }, {
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -23934,9 +23998,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       /* PROPS */
       , ["on"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_jet_button, {
         "class": {
-          'opacity-25': $props.form.processing
+          'opacity-25': $data.form.processing
         },
-        disabled: $props.form.processing
+        disabled: $data.form.processing
       }, {
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.meta.button_text), 1
@@ -24001,8 +24065,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
       return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_car_form, {
-        form: $data.form,
+        data: $data.data,
         meta: $data.meta,
+        car_model: $data.car_model,
+        brand: $data.brand,
         brands: $props.brands
       }, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
@@ -24016,7 +24082,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       }, 8
       /* PROPS */
-      , ["form", "meta", "brands"])])];
+      , ["data", "meta", "car_model", "brand", "brands"])])];
     }),
     _: 1
     /* STABLE */
@@ -24053,7 +24119,7 @@ var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNod
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_bread_crumb = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("bread-crumb");
 
-  var _component_contact_form = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("contact-form");
+  var _component_car_form = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("car-form");
 
   var _component_layout = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("layout");
 
@@ -24064,14 +24130,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         href: _ctx.route('cars')
       }, null, 8
       /* PROPS */
-      , ["href"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.car.name), 1
+      , ["href"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.name), 1
       /* TEXT */
       )])];
     }),
     "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_contact_form, {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_car_form, {
-        form: $data.form,
+        data: $data.data,
-        meta: $data.meta
+        meta: $data.meta,
+        car_model: $data.car_model,
+        brand: $data.brand,
+        brands: $props.brands
       }, {
         title: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
           return [_hoisted_3];
@@ -24084,7 +24153,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
       }, 8
       /* PROPS */
-      , ["form", "meta"])])])];
+      , ["data", "meta", "car_model", "brand", "brands"])])])];
     }),
     _: 1
     /* STABLE */

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

@@ -12,7 +12,7 @@
             <template #form>
                 <div class="col-span-6 sm:col-span-4">
                     <jet-label for="brand" value="Marke" />
-                    <multiselect v-model="brand" @SearchChange="updateBrandSearch" @select="updateCarModelsList" label="name" track-by="id" :options="brands" class="mt-1 block w-full" placeholder="Marke auswählen">
+                    <multiselect v-model="brandSelection" @SearchChange="updateBrandSearch" @select="updateBrand" label="name" track-by="id" :options="brands" class="mt-1 block w-full" placeholder="Marke auswählen">
                         <template v-slot:noResult>
                             <span @click="addBrand">
                                 <b>{{ brandSearch }}</b> als neue Marke speichern?
@@ -21,19 +21,18 @@
                     </multiselect>
                 </div>
 
-                <div v-if="brand" class="col-span-6 sm:col-span-4">
+                <div v-if="brandSelection" class="col-span-6 sm:col-span-4">
                     <jet-label for="model" value="Modell" />
-                    <multiselect label="name" track-by="id" v-model="model" @SearchChange="updateCarModelSearch" :options="carModels" class="mt-1 block w-full" placeholder="Modell auswählen">
+                    <multiselect  v-model="car_modelSelection" @SearchChange="updateCarModelSearch" @select="updateCarModel" label="name" track-by="id" :options="carModels" class="mt-1 block w-full" placeholder="Modell auswählen">
                         <template v-slot:noResult>
                             <span @click="addCarModel">
                                 <b>{{ modelSearch }}</b> als neues {{ brand.name }}-Modell speichern?
                             </span>
                         </template>
                     </multiselect>
-                    <jet-input-error :message="form.errors.model" class="mt-2" />
+                    <jet-input-error :message="form.errors.car_model_id" class="mt-2" />
                 </div>
 
-
                 <div class="col-span-6 sm:col-span-4">
                     <div class="grid grid-cols-12 gap-6">
                         <div class="col-span-12 sm:col-span-5">
@@ -114,6 +113,7 @@ import JetActionMessage from '@/Jetstream/ActionMessage'
 import JetInputError from '@/Jetstream/InputError'
 import JetFormSection from '@/Jetstream/FormSection'
 import Multiselect from 'vue-multiselect'
+import { useForm } from '@inertiajs/inertia-vue3'
 
 export default {
     components: {
@@ -127,28 +127,53 @@ export default {
         Multiselect,
     },
     props: {
-        form: Object,
+        data: Object,
         brands: Array,
         meta: Object,
+        brand: Object,
+        car_model: Object,
     },
     data() {
         return {
-            brand: this.form.brand,
             brandSearch: null,
             modelSearch: null,
             carModels: [],
-            model: this.form.model,
+            brandSelection: this.brand,
+            car_modelSelection: this.car_model,
+            form: useForm(this.meta.form_name, this.data),
         }
     },
     methods: {
         submitForm() {
-            this.form.post(route(this.meta.link, this.form.data()), {
+            this.form.submit(this.meta.method, this.meta.route);
-                preserveScroll: true,
+        },
-            });
+        updateBrand(brand) {
+            if (brand) {
+                this.brand.id = brand.id;
+                this.brand.name = brand.name;
+                this.brand.models = brand.models;
+            } else {
+                this.brand.id = null;
+                this.brand.name = null;
+                this.brand.models = [];
+            }
+            this.updateCarModelsList(brand);
+        },
+        updateCarModel(car_model) {
+            if (car_model) {
+                this.car_model.id = car_model.id;
+                this.car_model.name = car_model.name;
+                this.form.car_model_id = car_model.id;
+            } else {
+                this.car_model.id = null;
+                this.car_model.name = null;
+                this.form.car_model_id = null;
+            }
         },
         updateCarModelsList(brand) {
             this.carModels = brand.models ?? [];
-            this.model = null;
+            this.car_modelSelection = null;
+            this.updateCarModel(null);
         },
         updateBrandSearch(searchQuery, id) {
             this.brandSearch = searchQuery
@@ -157,9 +182,9 @@ export default {
             axios.post(this.route('brands.store'), {
                 name: this.brandSearch,
             }).then((response) => {
-                let newBrand = response.data;
+                this.brandSelection = response.data;
-                this.brands.push(newBrand);
+                this.brands.push(this.brandSelection);
-                this.brand = newBrand;
+                this.updateBrand(this.brandSelection);
             });
         },
         updateCarModelSearch(searchQuery, id) {
@@ -170,13 +195,19 @@ export default {
                 name: this.modelSearch,
                 brand_id: this.brand.id,
             }).then((response) => {
-                let newModel = response.data;
+                this.car_modelSelection = response.data;
-                this.carModels.push(newModel);
+                this.carModels.push(this.car_modelSelection);
-                this.model = newModel;
+                this.updateCarModel(this.car_modelSelection);
             });
         },
     },
-    computed: {
+    mounted: function () {
+        this.$nextTick(function () {
+            this.brandSelection = this.brands.find(x => x.id === this.brand.id);
+            if (this.brandSelection) {
+                this.carModels =  this.brandSelection.models ?? [];
+            }
+        })
     },
 }
 </script>

resources/js/Pages/Cars/Create.vue

@@ -8,7 +8,7 @@
         </template>
    
         <div>
-            <car-form :form="form" :meta="meta" :brands="brands">
+            <car-form :data="data" :meta="meta" :car_model="car_model" :brand="brand" :brands="brands">
                 <template #title>Neues Auto erfassen</template>
                 <template #description>...</template>
             </car-form>
@@ -33,23 +33,26 @@ export default {
     data() {
         return {
             meta: {
-                link: 'cars.store',
+                form_name: 'CreateCar',
+                route: this.route('cars.store'),
+                method: 'post',
                 button_text: 'Auto speichern',
                 on_success: 'Auto gespeichert',
             },
-            form: this.$inertia.form({
+            data: {
-                _method: 'POST',
                 id: null,
                 stammnummer: null,
                 vin: null,
                 colour: null,
-                model_id: null,
+                car_model_id: null,
                 initial_date: null,
                 last_check_date: null,
                 kilometers: null,
                 known_damage: null,
                 notes: null,
-            }),
+            },
+            brand: {id: null, name: null},
+            car_model: {id: null, name: null},
         }
     },
 }

resources/js/Pages/Cars/Edit.vue

@@ -3,18 +3,18 @@
         <template #header>
             <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                 <bread-crumb text="Autos" :href="route('cars')" />
-                {{ car.name }}
+                {{ name }}
             </h2>
         </template>
 
         <div>
             <div class="max-w-7xl py-10 sm:px-6 lg:px-8">
-                <contact-form :form="form" :meta="meta">
+                <car-form :data="data" :meta="meta" :car_model="car_model" :brand="brand" :brands="brands">
                     <template #title>Autoangaben</template>
                     <template #description>
                         Autodetails anschauen &amp; anpassen.
                     </template>
-                </contact-form>
+                </car-form>
             </div>
         </div>
     </layout>
@@ -26,6 +26,7 @@ import BreadCrumb from '@/Components/BreadCrumb.vue'
 import SimpleTable from '@/Components/SimpleTable.vue'
 import CarForm from './Components/CarForm.vue'
 
+
 export default {
     components: {
         BreadCrumb,
@@ -35,14 +36,18 @@ export default {
     },
     props: {
         car: Object,
+        brands: Array,
     },
     computed: {
-        title: function () {
+        name: function () {
-            // if (this.form.company) {
+            let out = '';
-            //     return this.form.company;
+            if (this.brand.name) {
-            // }
+                out += this.brand.name;
-
+                if (this.car_model.name) {
-            // return this.form.lastname + ' ' + this.form.firstname;
+                    out += ' ' + this.car_model.name;
+                }
+            }
+            return out;
         }, 
         computedCar: function () {
             return {
@@ -60,26 +65,29 @@ export default {
     },
     data() {
         return {
-            currentRoute: 'car.edit',
+            currentRoute: 'cars.edit',
             meta: {
-                link: 'cars.update',
+                form_name: 'EditCar' + this.car.id,
+                route: this.route('cars.update', this.car.id),
+                method: 'put',
                 button_text: 'Änderungen speichern',
                 on_success: 'Änderungen gespeichert',
             },
-            form: this.$inertia.form({
+            brand: this.car.brand,
-                _method: 'PUT',
+            car_model: this.car.car_model,
+            data: {
                 id: this.car.id,
                 stammnummer: this.car.stammnummer,
                 vin: this.car.vin,
                 initial_date: this.car.initial_date,
                 colour: this.car.colour,
                 notes: this.car.notes,
-                model_id: this.car.model_id,
+                car_model_id: this.car.car_model.id,
                 last_check_date: this.car.last_check_date,
                 kilometers: this.car.kilometers,
                 known_damage: this.car.known_damage,
                 notes: this.car.notes,
-            }),
+            },
         }
     },
 }