add currency format

app/Http/Controllers/CarController.php

@@ -245,7 +245,7 @@ class CarController extends Controller
                 'initial_date' => $car->initial_date_formatted,
                 'colour' => $car->colour,
                 'last_check_date' => $car->last_check_date_formatted,
-                'kilometers' => $car->kilometers,
+                'kilometers' => $car->kilometers_formatted,
                 'known_damage' => $car->known_damage,
                 'notes' => $car->notes,
                 'deleted_at' => $car->deleted_at,

app/Http/Controllers/ContactController.php

@@ -191,7 +191,7 @@ class ContactController extends Controller
                     'initial_date' => $car->initial_date_formatted,
                     'colour' => $car->colour,
                     'last_check_date' => $car->last_check_date_formatted,
-                    'kilometers' => $car->kilometers,
+                    'kilometers' => $car->kilometers_formatted,
                     'known_damage' => $car->known_damage,
                     'notes' => $car->notes,
                     'link' => route('cars.show', $car),

app/Http/Controllers/ContractController.php

@@ -80,7 +80,7 @@ class ContractController extends Controller
             'name' => $car->name,
             'colour' => $car->colour,
             'last_check_date' => $car->last_check_date_formatted,
-            'kilometers' => $car->kilometers,
+            'kilometers' => $car->kilometers_formatted,
             'initial_date' => $car->initial_date_formatted,
         ];
     }
@@ -139,7 +139,7 @@ class ContractController extends Controller
                 'is_sell_contract' => $contract->isSellContract(),
                 'type' => $contract->type,
                 'type_formatted' => $contract->type_formatted,
-                'price' => $contract->price->getAmount(),
+                'price' => (int)$contract->price->getAmount(),
                 'insurance_type' => (string)$contract->insurance_type,
                 'car' => [
                     'id' => $contract->car->id,
@@ -227,7 +227,7 @@ class ContractController extends Controller
                 'initial_date' => $contract->car->initial_date_formatted,
                 'colour' => $contract->car->colour,
                 'last_check_date' => $contract->car->last_check_date_formatted,
-                'kilometers' => $contract->car->kilometers,
+                'kilometers' => $contract->car->kilometers_formatted,
                 'known_damage' => $contract->car->known_damage,
                 'notes' => $contract->car->notes,
                 'deleted_at' => $contract->car->deleted_at,

app/Models/Car.php

@@ -32,9 +32,9 @@ class Car extends Model
         return $out;
     }
 
-    public function getKilometersAttrobute($kilometers)
+    public function getKilometersFormattedAttribute()
     {
-        return $kilometers;
+        return number_format($this->kilometers, 0, '.', '\'');
     }
 
     public function getInitialDateFormattedAttribute()

package-lock.json

@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "vue-currency-input": "^2.0.0",
                 "vue-multiselect": "^3.0.0-alpha.2",
                 "vue-unicons": "^3.2.1",
                 "vue3-datepicker": "^0.2.4",
@@ -15632,6 +15633,45 @@
             "integrity": "sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ==",
             "deprecated": "Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package."
         },
+        "node_modules/vue-currency-input": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-2.0.0.tgz",
+            "integrity": "sha512-y6KnBmz5Y/CIB3El94ax0UzSicaRMMjjknnSHlivMaEhOJwyw19sxXoPeUhsoG0fKYsvRpGiOqFmiqpmi1+zAA==",
+            "dependencies": {
+                "vue-demi": "^0.9.0"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^2.6 || ^3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/vue-currency-input/node_modules/vue-demi": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.9.1.tgz",
+            "integrity": "sha512-7s1lufRD2l369eFWPjgLvhqCRk0XzGWJsQc7K4q+0mZtixyGIvsK1Cg88P4NcaRIEiBuuN4q1NN4SZKFKwQswA==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-beta.1",
+                "vue": "^2.6.0 || >=3.0.0-rc.1"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/vue-loader": {
             "version": "16.2.0",
             "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
@@ -28605,6 +28645,22 @@
             "resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.22.1.tgz",
             "integrity": "sha512-HPKQMN7gfcUqS5SxoO0VxqLRRSPkG1H1FqglsHccz6BatBatNtm/Vyy8brApktZxNCfnAkrSVDpxg3/FNDeOgQ=="
         },
+        "vue-currency-input": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-2.0.0.tgz",
+            "integrity": "sha512-y6KnBmz5Y/CIB3El94ax0UzSicaRMMjjknnSHlivMaEhOJwyw19sxXoPeUhsoG0fKYsvRpGiOqFmiqpmi1+zAA==",
+            "requires": {
+                "vue-demi": "^0.9.0"
+            },
+            "dependencies": {
+                "vue-demi": {
+                    "version": "0.9.1",
+                    "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.9.1.tgz",
+                    "integrity": "sha512-7s1lufRD2l369eFWPjgLvhqCRk0XzGWJsQc7K4q+0mZtixyGIvsK1Cg88P4NcaRIEiBuuN4q1NN4SZKFKwQswA==",
+                    "requires": {}
+                }
+            }
+        },
         "vue-loader": {
             "version": "16.2.0",
             "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",

package.json

@@ -27,6 +27,7 @@
         "vue-loader": "^16.1.2"
     },
     "dependencies": {
+        "vue-currency-input": "^2.0.0",
         "vue-multiselect": "^3.0.0-alpha.2",
         "vue-unicons": "^3.2.1",
         "vue3-datepicker": "^0.2.4",

resources/js/Components/CurrencyInput.vue

@@ -0,0 +1,20 @@
+<template>
+  <input ref="inputRef" type="text" :value="formattedValue">
+</template>
+
+<script>
+import useCurrencyInput from 'vue-currency-input'
+
+export default {
+  name: 'CurrencyInput',
+  props: {
+    modelValue: Number,
+    options: Object
+  },
+  setup (props) {
+    const { formattedValue, inputRef } = useCurrencyInput(props.options)
+
+    return { inputRef, formattedValue }
+  }
+}
+</script>

resources/js/Components/Payments/CreateModal.vue

@@ -14,7 +14,7 @@
 
                     <div class="col-span-6 sm:col-span-4">
                         <jet-label for="amount" value="Betrag" />
-                        <jet-input id="amount" type="text" class="mt-1 block w-full" v-model="form.amount" ref="amount" autocomplete="amount" />
+                        <currency-input v-model="form.amount" :options="currencyOptions" id="price" class="w-full mt-1 block border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" ref="amount"/>
                         <jet-input-error :message="form.errors.amount" class="mt-2" />
                     </div>
 
@@ -35,7 +35,6 @@
             </jet-button>
         </template>
     </dialog-modal>
-    <!-- <multiselect class="mt-1 block w-full" @select="updateTypeSelection" v-model="typeSelection" deselect-label="Kann nicht entfernt werden" track-by="key" label="label" placeholder="Versicherung auswählen" :options="types" :searchable="false" :allow-empty="false" /> -->
 </template>
 
 <script>
@@ -47,6 +46,7 @@ import Datepicker from 'vue3-datepicker'
 import { useForm } from '@inertiajs/inertia-vue3'
 import { ref } from 'vue'
 import DialogModal from '@/Jetstream/DialogModal.vue'
+import CurrencyInput from '@/Components/CurrencyInput'
 
 export default {
     components: {
@@ -56,6 +56,7 @@ export default {
         JetInputError,
         DialogModal,
         Datepicker,
+        CurrencyInput,
     },
     props: {
         id: Number,
@@ -70,6 +71,12 @@ export default {
                 type: '1',
                 contract_id: this.id,
             }),
+            currencyOptions: {
+                currency: 'CHF',
+                locale: 'de-CH',
+                exportValueAsInteger: true,
+                hideGroupingSeparatorOnFocus: false,
+            },
         }
     },
     methods: {

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

@@ -55,7 +55,7 @@
 
     <div class="col-span-6 sm:col-span-4">
         <jet-label for="kilometers" value="Kilometerstand" />
-        <jet-input id="kilometers" type="text" class="mt-1 block w-full" v-model="form.kilometers" ref="kilometers" autocomplete="kilometers" />
+        <currency-input v-model="form.kilometers" :options="currencyOptions" id="kilometers" class="w-full mt-1 block border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" ref="kilometers" />
         <jet-input-error :message="form.errors.kilometers" class="mt-2" />
     </div>
 
@@ -87,6 +87,7 @@ import JetActionMessage from '@/Jetstream/ActionMessage'
 import JetInputError from '@/Jetstream/InputError'
 import Multiselect from 'vue-multiselect'
 import Datepicker from 'vue3-datepicker'
+import CurrencyInput from '@/Components/CurrencyInput'
 
 export default {
     components: {
@@ -96,6 +97,7 @@ export default {
         JetActionMessage,
         Multiselect,
         Datepicker,
+        CurrencyInput,
     },
     props: {
         form: Object,
@@ -110,6 +112,14 @@ export default {
             carModels: [],
             brandSelection: this.brand,
             car_modelSelection: this.car_model,
+            currencyOptions: {
+                currency: 'CHF',
+                locale: 'de-CH',
+                exportValueAsInteger: true,
+                hideGroupingSeparatorOnFocus: false,
+                precision: 0,
+                currencyDisplay: 'hidden',
+            },
         }
     },
     methods: {

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

@@ -19,7 +19,7 @@
 
                     <div class="col-span-6 sm:col-span-4">
                         <jet-label for="price" value="Betrag" />
-                        <jet-input id="price" type="text" class="mt-1 block w-full" v-model="form.price" ref="price" autocomplete="price" />
+                        <currency-input v-model="form.price" :options="currencyOptions" id="price" class="w-full mt-1 block border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" ref="price"/>
                         <jet-input-error :message="form.errors.price" class="mt-2" />
                     </div>
 
@@ -55,6 +55,7 @@ import JetInputError from '@/Jetstream/InputError'
 import JetFormSection from '@/Jetstream/FormSection'
 import Datepicker from 'vue3-datepicker'
 import { useForm } from '@inertiajs/inertia-vue3'
+import CurrencyInput from '@/Components/CurrencyInput'
 
 export default {
     components: {
@@ -65,6 +66,7 @@ export default {
         JetInputError,
         JetActionMessage,
         Datepicker,
+        CurrencyInput,
     },
     props: {
         data: Object,
@@ -74,6 +76,12 @@ export default {
     data() {
         return {
             form: useForm(this.meta.form_name, this.data),
+            currencyOptions: {
+                currency: 'CHF',
+                locale: 'de-CH',
+                exportValueAsInteger: true,
+                hideGroupingSeparatorOnFocus: false,
+            },
         }
     },
     methods: {