From a6a1ce7726ce351288ed5b65d5af1141721e25b5 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 14 Aug 2026 12:25:29 +0200
Subject: [PATCH] feat(admin): add child regions section to map view and update
 localization

---
 frontend/src/i18n/locales/de/admin.json       |   2 +
 frontend/src/i18n/locales/en/admin.json       |   2 +
 .../views/admin/falukant/MapRegionsView.vue   | 103 ++++++++++++++++++
 3 files changed, 107 insertions(+)

diff --git a/frontend/src/i18n/locales/de/admin.json b/frontend/src/i18n/locales/de/admin.json
index dbd1476..d092456 100755
--- a/frontend/src/i18n/locales/de/admin.json
+++ b/frontend/src/i18n/locales/de/admin.json
@@ -265,6 +265,8 @@
                 "mapArea": "Karten-Arbeitsbereich",
                 "selectedRegion": "Ausgewählte Region",
                 "selectRegionHint": "Wähle eine Region aus der Liste oder direkt auf der Karte aus.",
+                "childRegions": "Direkte Unterregionen",
+                "noChildRegions": "Keine direkten Unterregionen zugeordnet.",
                 "unknownType": "Unbekannter Typ",
                 "coordsCompact": "X {x}, Y {y} · B {w} × H {h}",
                 "noCoords": "Keine Koordinaten gesetzt",
diff --git a/frontend/src/i18n/locales/en/admin.json b/frontend/src/i18n/locales/en/admin.json
index f32f226..492d848 100755
--- a/frontend/src/i18n/locales/en/admin.json
+++ b/frontend/src/i18n/locales/en/admin.json
@@ -320,6 +320,8 @@
                 "mapArea": "Map workspace",
                 "selectedRegion": "Selected region",
                 "selectRegionHint": "Select a region from the list or directly on the map.",
+                "childRegions": "Direct child regions",
+                "noChildRegions": "No direct child regions assigned.",
                 "unknownType": "Unknown type",
                 "coordsCompact": "X {x}, Y {y} · W {w} × H {h}",
                 "noCoords": "No coordinates set",
diff --git a/frontend/src/views/admin/falukant/MapRegionsView.vue b/frontend/src/views/admin/falukant/MapRegionsView.vue
index 7582daf..7da45ba 100755
--- a/frontend/src/views/admin/falukant/MapRegionsView.vue
+++ b/frontend/src/views/admin/falukant/MapRegionsView.vue
@@ -136,6 +136,21 @@
                 </span>
                 <span v-if="selectedRegionDirty" class="unsaved-badge">{{ $t('admin.falukant.map.unsaved') }}</span>
               </div>
+              <section class="child-regions" :aria-label="$t('admin.falukant.map.childRegions')">
+                <div class="child-regions-heading">
+                  <h4>{{ $t('admin.falukant.map.childRegions') }}</h4>
+                  <span class="child-count">{{ directChildRegions.length }}</span>
+                </div>
+                <ul v-if="directChildRegions.length" class="child-region-list">
+                  <li v-for="child in directChildRegions" :key="child.id">
+                    <button type="button" class="child-region-entry" @click="selectRegion(child)">
+                      <span class="child-region-name">{{ child.name }}</span>
+                      <span class="type-badge">{{ regionTypeName(child) }}</span>
+                    </button>
+                  </li>
+                </ul>
+                <p v-else class="no-child-regions">{{ $t('admin.falukant.map.noChildRegions') }}</p>
+              </section>
               <dl v-if="selectedRegion.map" class="coordinates-grid">
                 <div><dt>{{ $t('admin.falukant.map.coordinateX') }}</dt><dd>{{ selectedRegion.map.x }}</dd></div>
                 <div><dt>{{ $t('admin.falukant.map.coordinateY') }}</dt><dd>{{ selectedRegion.map.y }}</dd></div>
@@ -348,6 +363,12 @@ export default {
       if (this.parentRegionRequired && !this.newRegion.parentId) return false;
       return true;
     },
+    directChildRegions() {
+      if (!this.selectedRegion) return [];
+      return this.regions
+        .filter((region) => String(region.parentId) === String(this.selectedRegion.id))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    },
   },
   watch: {
     'newRegion.regionTypeId': function () {
@@ -931,6 +952,88 @@ export default {
   color: #6b5a39;
 }
 
+.child-regions {
+  margin-top: 12px;
+  border: 1px solid #dfe7ee;
+  background: #f7f9fb;
+}
+
+.child-regions-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 8px;
+  border-bottom: 1px solid #dfe7ee;
+}
+
+.child-regions-heading h4 {
+  margin: 0;
+  color: #41556a;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.child-count {
+  display: inline-grid;
+  place-items: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 10px;
+  background: #dcecff;
+  color: #1765a9;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.child-region-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.child-region-list li + li {
+  border-top: 1px solid #e5ebf0;
+}
+
+.child-region-entry {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.child-region-entry:hover,
+.child-region-entry:focus-visible {
+  background: #eaf4ff;
+  outline: 2px solid #1976d2;
+  outline-offset: -2px;
+}
+
+.child-region-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.84rem;
+  font-weight: 600;
+}
+
+.no-child-regions {
+  margin: 0;
+  padding: 8px;
+  color: #667887;
+  font-size: 0.8rem;
+}
+
 .coordinates-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));