fix phone's i18n and ui (#2284)

* should be Phone/Téléphone without "numéro de..."

* remove copy/paste, use phone icon, and make the chip clickable

* move callPhoneNumber() to utils and fix phone column

* phone column add chip margin

* contact info: fix chip positioning

* use gap instead of margin

* prettier fix

Author: J43fura

frontend/src/components/Mining/ContactInformationSidebar.vue

@@ -120,25 +120,16 @@
             {{ $t('contact.telephone') }}
           </td>
           <td>
-            <div v-if="!editingContact">
-              <template
+            <div v-if="!editingContact" class="flex flex-wrap gap-1">
+              <Chip
                 v-for="(phone, index) in contact.telephone"
                 :key="index"
-              >
-                <div class="p-1">
-                  <Button
-                    rounded
-                    text
-                    icon="pi pi-copy"
-                    size="small"
-                    :aria-label="t('copy')"
-                    @click="copyPhoneNumber(phone ?? undefined)"
-                  />
-                  <a :href="`tel:${phone}`">
-                    <Chip :key="index" :label="phone" />
-                  </a>
-                </div>
-              </template>
+                :label="phone"
+                :href="`tel:${phone}`"
+                icon="pi pi-phone"
+                class="cursor-pointer"
+                @click="callPhoneNumber(phone)"
+              />
             </div>
             <Textarea
               v-else
@@ -468,16 +459,15 @@ function cancelContactInformations() {
 }
 
 function copyContact(email: string, name?: string) {
-  showNotification('success', $t('contact.contact_copied'), $t('contact.contact_email_copied'));
+  showNotification(
+    'success',
+    $t('contact.contact_copied'),
+    $t('contact.contact_email_copied'),
+  );
   navigator.clipboard.writeText(
     name && name !== '' ? `${name} <${email}>` : `<${email}>`,
   );
 }
-
-function copyPhoneNumber(phone: string) {
-  showNotification('success', t('phone_copied'), t('contact_phone_copied'));
-  navigator.clipboard.writeText(phone);
-}
 </script>
 <i18n lang="json">
 {

frontend/src/components/Mining/Table/MiningTable.vue

@@ -610,19 +610,17 @@
         <InputText v-model="filterModel.value" />
       </template>
       <template #body="{ data }">
-        <template v-for="(phone, index) in data.telephone" :key="index">
-          <Button
-            rounded
-            text
-            icon="pi pi-copy"
-            size="small"
-            class="text-2xl flex-none -m-1"
-            :aria-label="t('copy')"
-            @click="copyPhoneNumber(phone ?? undefined)"
+        <div class="flex flex-wrap gap-1">
+          <Chip
+            v-for="(phone, index) in data.telephone"
+            :key="index"
+            :label="phone"
+            :href="`tel:${phone}`"
+            icon="pi pi-phone"
+            class="cursor-pointer"
+            @click="callPhoneNumber(phone)"
           />
-          <a :href="`tel:${phone}`">{{ phone }}</a>
-          <span v-if="index < data.telephone.length - 1">, </span>
-        </template>
+        </div>
       </template>
     </Column>
 
@@ -1102,24 +1100,6 @@ onNuxtReady(async () => {
   isLoading.value = false;
 });
 
-function showNotification(
-  severity: 'info' | 'warn' | 'error' | 'success' | 'secondary' | 'contrast',
-  summary: string,
-  detail: string,
-) {
-  $toast.add({
-    severity,
-    summary,
-    detail,
-    life: 3000,
-  });
-}
-
-function copyPhoneNumber(phone: string) {
-  showNotification('success', $t('contact.phone_copied'), $t('contact.contact_phone_copied'));
-  navigator.clipboard.writeText(phone);
-}
-
 onUnmounted(() => {
   $screenStore.destroy();
   $contactsStore.$reset();

frontend/src/i18n/messages.json

@@ -85,7 +85,7 @@
       "family_name": "Family Name",
       "alternate_name": "Alternate Names",
       "alternate_email": "Alternate emails",
-      "telephone": "Phone number",
+      "telephone": "Phone",
       "location": "Location",
       "works_for": "Works for",
       "job_title": "Job Title",
@@ -212,7 +212,7 @@
       "family_name": "Nom de famille",
       "alternate_name": "Autres noms",
       "alternate_email": "Adresses e-mail alternatives",
-      "telephone": "Numéro de téléphone",
+      "telephone": "Téléphone",
       "location": "Localisation",
       "works_for": "Travaille pour",
       "job_title": "Titre du poste",
@@ -245,8 +245,8 @@
         "chat": "Chat",
         "role": "Role"
       },
-    "phone_copied": "Numéro de téléphone copié",
-    "contact_phone_copied": "Numéro de téléphone a été copié dans votre presse-papiers"
+      "phone_copied": "Numéro de téléphone copié",
+      "contact_phone_copied": "Numéro de téléphone a été copié dans votre presse-papiers"
     },
     "mining": {
       "toast_canceled_title": "Extraction annulée",

frontend/src/utils/contacts.ts

@@ -196,3 +196,7 @@ export async function removeContactsFromDatabase(
     });
   if (error) throw error;
 }
+
+export function callPhoneNumber(phone: string) {
+  window.location.href = `tel:${phone}`;
+}