From e23b8ac8f7e641cd909c3491b3d6eefda46a38fa Mon Sep 17 00:00:00 2001
From: danielswiatek <daniel.swiatek@codeanker.de>
Date: Sun, 8 Sep 2024 00:06:45 +0200
Subject: [PATCH] refactor: Add intl-tel-input package for phone number input

---
 frontend/package.json                         |  1 +
 .../BasicInputs/BasicInputPhoneNumber.vue     | 92 +++++++++++++++++++
 .../components/UIComponents/KontaktItem.vue   |  3 +-
 .../forms/person/FormContactGeneral.vue       |  4 +-
 package-lock.json                             |  7 ++
 5 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/BasicInputs/BasicInputPhoneNumber.vue

diff --git a/frontend/package.json b/frontend/package.json
index 8c3ffb4e..50481dd3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "@vueuse/core": "^10.6.1",
     "crypto-js": "^4.2.0",
     "http2-proxy": "^5.0.53",
+    "intl-tel-input": "^24.4.0",
     "remixicon": "^3.5.0",
     "socket.io-client": "^4.7.2",
     "vue": "^3.4.18",
diff --git a/frontend/src/components/BasicInputs/BasicInputPhoneNumber.vue b/frontend/src/components/BasicInputs/BasicInputPhoneNumber.vue
new file mode 100644
index 00000000..f5dbfa78
--- /dev/null
+++ b/frontend/src/components/BasicInputs/BasicInputPhoneNumber.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import intlTelInput from 'intl-tel-input/intlTelInputWithUtils'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import useValidationModel from '../../composables/useValidationModel'
+
+import BasicFormGroup from './components/BasicFormGroup.vue'
+import { type BasicInputDefaultProps } from './defaultProps'
+
+const props = withDefaults(
+  defineProps<
+    BasicInputDefaultProps<string> & {
+      inputClass?: string
+      disableValidation?: boolean
+    }
+  >(),
+  {
+    type: 'number',
+    autocapitalize: 'off',
+    inputClass: '',
+    disableValidation: false,
+  }
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', eventArgs: string | undefined): void
+  (event: 'focus'): void
+  (event: 'blur'): void
+}>()
+const { model, errorMessage } = props.disableValidation
+  ? {
+      model: useVModel(props, 'modelValue', emit),
+      errorMessage: undefined,
+    }
+  : useValidationModel(props, emit)
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let intl: any = null
+const phone = ref()
+onMounted(async () => {
+  // await import('intl-tel-input/build/js/utils.js')
+  intl = intlTelInput(phone.value, {
+    separateDialCode: true,
+    strictMode: true,
+    initialCountry: 'de',
+    autoPlaceholder: 'off',
+  })
+})
+
+onUnmounted(() => {
+  intl?.destroy()
+})
+</script>
+
+<template>
+  <BasicFormGroup
+    :id="id"
+    :name="name"
+    :label="label"
+    :required="required"
+    :error-message="errorMessage"
+  >
+    <div class="intl-tel-wrapper">
+      <input
+        :id="id || name || label"
+        ref="phone"
+        :value="model"
+        type="tel"
+        :placeholder="placeholder || label || name"
+        :class="inputClass"
+        :name="id || name || label"
+        :disabled="disabled"
+      />
+    </div>
+    <template #label>
+      <slot name="label"></slot>
+    </template>
+  </BasicFormGroup>
+</template>
+
+<style lang="scss">
+@import 'intl-tel-input/build/css/intlTelInput.css';
+.intl-tel-wrapper {
+  .iti {
+    @apply block w-full;
+    .form-control {
+      @apply block w-full;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/components/UIComponents/KontaktItem.vue b/frontend/src/components/UIComponents/KontaktItem.vue
index 0a02538c..a85a08f6 100644
--- a/frontend/src/components/UIComponents/KontaktItem.vue
+++ b/frontend/src/components/UIComponents/KontaktItem.vue
@@ -3,6 +3,7 @@ import { TrashIcon } from '@heroicons/vue/24/outline'
 import { ref, watch } from 'vue'
 
 import BasicCheckbox from '../BasicInputs/BasicCheckbox.vue'
+import BasicInputPhoneNumber from '../BasicInputs/BasicInputPhoneNumber.vue'
 
 import BasicInput from '@/components/BasicInputs/BasicInput.vue'
 import type { TKontaktSchema } from '@codeanker/api'
@@ -45,7 +46,7 @@ watch(
       placeholder="Nachname eingeben"
       required
     />
-    <BasicInput
+    <BasicInputPhoneNumber
       v-model="kontakt.telefon"
       label="Mobiltelefonnummer"
       placeholder="Mobiltelefonnummer eingeben"
diff --git a/frontend/src/components/forms/person/FormContactGeneral.vue b/frontend/src/components/forms/person/FormContactGeneral.vue
index c7bf9fb8..71746b0e 100644
--- a/frontend/src/components/forms/person/FormContactGeneral.vue
+++ b/frontend/src/components/forms/person/FormContactGeneral.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 
 import BasicInput from '@/components/BasicInputs/BasicInput.vue'
+import BasicInputPhoneNumber from '@/components/BasicInputs/BasicInputPhoneNumber.vue'
 
 export interface IContact {
   email: string
@@ -37,9 +38,8 @@ const model = computed({
       placeholder="Email-Adresse"
       required
     />
-    <BasicInput
+    <BasicInputPhoneNumber
       v-model="model.telefon"
-      type="tel"
       label="Telefonnummer"
       placeholder="Telefonnummer"
       required
diff --git a/package-lock.json b/package-lock.json
index fae2598f..d3c54eaa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -133,6 +133,7 @@
         "@vueuse/core": "^10.6.1",
         "crypto-js": "^4.2.0",
         "http2-proxy": "^5.0.53",
+        "intl-tel-input": "^24.4.0",
         "remixicon": "^3.5.0",
         "socket.io-client": "^4.7.2",
         "vue": "^3.4.18",
@@ -6620,6 +6621,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-tel-input": {
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/intl-tel-input/-/intl-tel-input-24.4.0.tgz",
+      "integrity": "sha512-2ownVbJ//ccQSoZM6uEIe3THWiIuQqY+NSFTW89ttMzazSSEJVFUtsnxOKQcytwg8ZtcsFh2of/PhcuiZDNzBQ==",
+      "license": "MIT"
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",