From 1bd9d5bc56bf0076cae85e4714471801157ec4a0 Mon Sep 17 00:00:00 2001
From: Matthieu <contact@malio.fr>
Date: Mon, 22 Jun 2026 13:37:10 +0200
Subject: [PATCH] feat(directory) : add repeatable contact block component

---
 .../components/DirectoryContactBlock.vue      | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/modules/directory/components/DirectoryContactBlock.vue

diff --git a/frontend/modules/directory/components/DirectoryContactBlock.vue b/frontend/modules/directory/components/DirectoryContactBlock.vue
new file mode 100644
index 0000000..57a5ca6
--- /dev/null
+++ b/frontend/modules/directory/components/DirectoryContactBlock.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="relative grid grid-cols-2 gap-x-8 gap-y-3 rounded bg-white p-4 shadow">
+        <h3 class="col-span-2 text-sm font-semibold text-neutral-700">
+            {{ title }}
+        </h3>
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:trash-can-outline"
+            class="absolute right-2 top-2"
+            button-class="!text-red-600"
+            :aria-label="$t('common.delete')"
+            @click="$emit('remove')"
+        />
+
+        <MalioInputText
+            :label="$t('directory.contacts.fields.lastName')"
+            :model-value="modelValue.lastName ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('lastName', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.firstName')"
+            :model-value="modelValue.firstName ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('firstName', $event)"
+        />
+        <MalioInputText
+            class="col-span-2"
+            :label="$t('directory.contacts.fields.jobTitle')"
+            :model-value="modelValue.jobTitle ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('jobTitle', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.email')"
+            :model-value="modelValue.email ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('email', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.phonePrimary')"
+            :model-value="modelValue.phonePrimary ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('phonePrimary', $event)"
+        />
+        <MalioInputText
+            :label="$t('directory.contacts.fields.phoneSecondary')"
+            :model-value="modelValue.phoneSecondary ?? ''"
+            :readonly="readonly"
+            @update:model-value="update('phoneSecondary', $event)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Contact } from '~/modules/directory/services/dto/contact'
+
+const props = defineProps<{
+    modelValue: Contact
+    title: string
+    removable?: boolean
+    readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Contact]
+    'remove': []
+}>()
+
+function update(field: keyof Contact, value: string): void {
+    emit('update:modelValue', { ...props.modelValue, [field]: value === '' ? null : value })
+}
+</script>