From 37cfc035a3eebca148ab2664ea5ef69cc22b56e8 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 1 Oct 2024 12:15:31 +0200
Subject: [PATCH] Implement gender icon renderbox for vue components

---
 .../vuejs/_components/Entity/GenderIconRenderBox.vue  | 11 +++++++++++
 .../vuejs/_components/Entity/PersonRenderBox.vue      |  6 ++++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
new file mode 100644
index 000000000..2aeb123c7
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
@@ -0,0 +1,11 @@
+<template>
+<i :class="gender.icon"></i>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    gender: Object
+})
+
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 100dc9caf..732efd689 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -37,8 +37,8 @@
             </div>
 
             <p v-if="options.addInfo === true" class="moreinfo">
-              <i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
-
+<!--              <i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>-->
+              <gender-icon-render-box :gender="person.gender"></gender-icon-render-box>
               <time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
                 {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
               </time>
@@ -180,6 +180,7 @@
 <script>
 import {dateToISO, ISOToDate} from 'ChillMainAssets/chill/js/date';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import GenderIconRenderBox from 'ChillMainAssets/vuejs/_components/Entity/GenderIconRenderBox.vue'
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
@@ -190,6 +191,7 @@ export default {
   name: "PersonRenderBox",
   components: {
     AddressRenderBox,
+    GenderIconRenderBox,
     Confidential,
     BadgeEntity,
     PersonText,