Enhance child management features in Falukant module

- Added new translations for gender, baptism status, and child details in both German and English localization files, improving user experience.
- Integrated ChildDetailsDialog component into FamilyView for displaying detailed information about children.
- Updated the showChildDetails method to utilize the new dialog for better user interaction.
- Modified button styles for improved visual feedback when setting heirs.

frontend/src/dialogues/falukant/ChildDetailsDialog.vue

@@ -0,0 +1,141 @@
+<template>
+    <DialogWidget
+        ref="dialog"
+        :title="$t('falukant.family.children.details.title')"
+        :isTitleTranslated="true"
+        :show-close="true"
+        :buttons="[{ text: 'message.close', action: 'close' }]"
+        :modal="true"
+        @close="closeDialog"
+        width="500px"
+        name="ChildDetailsDialog"
+    >
+        <div v-if="child" class="child-details">
+            <table class="details-table">
+                <tr>
+                    <td>{{ $t('falukant.family.children.name') }}</td>
+                    <td>
+                        <span v-if="child.hasName">{{ child.name }}</span>
+                        <span v-else class="no-name">{{ $t('falukant.family.children.notBaptized') }}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td>{{ $t('falukant.family.children.age') }}</td>
+                    <td>{{ child.age }}</td>
+                </tr>
+                <tr>
+                    <td>{{ $t('falukant.family.children.gender') }}</td>
+                    <td>{{ $t(`falukant.titles.${child.gender}.noncivil`) }}</td>
+                </tr>
+                <tr>
+                    <td>{{ $t('falukant.family.children.heir') }}</td>
+                    <td>
+                        <span v-if="child.isHeir" class="heir-badge">{{ $t('falukant.family.children.isHeir') }}</span>
+                        <span v-else>{{ $t('falukant.family.children.notHeir') }}</span>
+                    </td>
+                </tr>
+            </table>
+            <div v-if="!child.hasName" class="baptism-notice">
+                <p>{{ $t('falukant.family.children.baptismNotice') }}</p>
+                <button @click="goToBaptism" class="baptism-button">
+                    {{ $t('falukant.family.children.baptism') }}
+                </button>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: 'ChildDetailsDialog',
+    components: {
+        DialogWidget
+    },
+    data() {
+        return {
+            child: null
+        };
+    },
+    methods: {
+        open(child) {
+            this.child = child;
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.child = null;
+        },
+        goToBaptism() {
+            this.$refs.dialog.close();
+            this.$router.push({
+                name: 'ChurchView'
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.child-details {
+    padding: 1rem;
+}
+
+.details-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+}
+
+.details-table td {
+    padding: 0.5rem;
+    border-bottom: 1px solid #ddd;
+}
+
+.details-table td:first-child {
+    font-weight: bold;
+    width: 40%;
+}
+
+.no-name {
+    color: #999;
+    font-style: italic;
+}
+
+.heir-badge {
+    display: inline-block;
+    padding: 4px 8px;
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 4px;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.baptism-notice {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    text-align: center;
+}
+
+.baptism-notice p {
+    margin-bottom: 0.5rem;
+}
+
+.baptism-button {
+    padding: 8px 16px;
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.baptism-button:hover {
+    background-color: #1976D2;
+}
+</style>
+

frontend/src/i18n/locales/de/falukant.json

@@ -405,8 +405,10 @@
                 "title": "Kinder",
                 "name": "Name",
                 "age": "Alter",
+                "gender": "Geschlecht",
                 "heir": "Erbe",
                 "isHeir": "Erbe",
+                "notHeir": "Nicht Erbe",
                 "setAsHeir": "Als Erben festlegen",
                 "heirSetSuccess": "Das Kind wurde erfolgreich als Erbe festgelegt.",
                 "heirSetError": "Fehler beim Festlegen des Erben.",
@@ -414,7 +416,12 @@
                 "none": "Keine Kinder vorhanden.",
                 "detailButton": "Details anzeigen",
                 "addChild": "Kind hinzufügen",
-                "baptism": "Taufen"
+                "baptism": "Taufen",
+                "notBaptized": "Noch nicht getauft",
+                "baptismNotice": "Dieses Kind wurde noch nicht getauft und hat daher noch keinen Namen.",
+                "details": {
+                    "title": "Kind-Details"
+                }
             },
             "lovers": {
                 "title": "Liebhaber",

frontend/src/i18n/locales/en/falukant.json

@@ -207,8 +207,10 @@
                 "title": "Children",
                 "name": "Name",
                 "age": "Age",
+                "gender": "Gender",
                 "heir": "Heir",
                 "isHeir": "Heir",
+                "notHeir": "Not Heir",
                 "setAsHeir": "Set as Heir",
                 "heirSetSuccess": "The child has been successfully set as heir.",
                 "heirSetError": "Error setting heir.",
@@ -216,7 +218,12 @@
                 "none": "No children available.",
                 "detailButton": "Show Details",
                 "addChild": "Add Child",
-                "baptism": "Baptize"
+                "baptism": "Baptize",
+                "notBaptized": "Not yet baptized",
+                "baptismNotice": "This child has not been baptized yet and therefore has no name.",
+                "details": {
+                    "title": "Child Details"
+                }
             }
         }
     }

frontend/src/views/falukant/FamilyView.vue

@@ -168,6 +168,7 @@
             </div>
 
         </div>
+        <ChildDetailsDialog ref="childDetailsDialog" />
     </div>
 </template>
 
@@ -175,6 +176,7 @@
 import StatusBar from '@/components/falukant/StatusBar.vue'
 import MessageDialog from '@/dialogues/standard/MessageDialog.vue'
 import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue'
+import ChildDetailsDialog from '@/dialogues/falukant/ChildDetailsDialog.vue'
 
 import apiClient from '@/utils/axios.js'
 import { mapState } from 'vuex'
@@ -184,7 +186,8 @@ export default {
     components: {
         StatusBar,
         MessageDialog,
-        ErrorDialog
+        ErrorDialog,
+        ChildDetailsDialog
     },
     data() {
         return {
@@ -245,7 +248,7 @@ export default {
         },
 
         showChildDetails(child) {
-            console.log('Show details for child:', child);
+            this.$refs.childDetailsDialog?.open(child);
         },
 
         async setAsHeir(child) {
@@ -494,7 +497,7 @@ h2 {
 
 .set-heir-button {
     padding: 4px 8px;
-    background-color: #2196F3;
+    background-color: #28a745;
     color: white;
     border: none;
     border-radius: 4px;
@@ -503,6 +506,6 @@ h2 {
 }
 
 .set-heir-button:hover {
-    background-color: #1976D2;
+    background-color: #218838;
 }
 </style>