From bf2a69735db376b564045f5a67c2c0aa6352a53f Mon Sep 17 00:00:00 2001
From: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:45:21 +0200
Subject: [PATCH] feat: Group and household deletion tooltips (#4414)

---
 frontend/lang/messages/en-US.json             |  4 ++-
 frontend/pages/admin/manage/groups/index.vue  | 35 +++++++++++--------
 .../pages/admin/manage/households/index.vue   | 35 +++++++++++--------
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 99d4814ad..0166401c7 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -1271,7 +1271,9 @@
     "debug-openai-services": "Debug OpenAI Services",
     "debug-openai-services-description": "Use this page to debug OpenAI services. You can test your OpenAI connection and see the results here. If you have image services enabled, you can also provide an image.",
     "run-test": "Run Test",
-    "test-results": "Test Results"
+    "test-results": "Test Results",
+    "group-delete-note": "Groups with users or households cannot be deleted",
+    "household-delete-note": "Households with users cannot be deleted"
   },
   "profile": {
     "welcome-user": "👋 Welcome, {0}!",
diff --git a/frontend/pages/admin/manage/groups/index.vue b/frontend/pages/admin/manage/groups/index.vue
index 28673593d..7f52b12d3 100644
--- a/frontend/pages/admin/manage/groups/index.vue
+++ b/frontend/pages/admin/manage/groups/index.vue
@@ -47,20 +47,27 @@
           {{ item.users.length }}
         </template>
         <template #item.actions="{ item }">
-          <v-btn
-            :disabled="item && (item.households.length > 0 || item.users.length > 0)"
-            class="mr-1"
-            icon
-            color="error"
-            @click.stop="
-              confirmDialog = true;
-              deleteTarget = item.id;
-            "
-          >
-            <v-icon>
-              {{ $globals.icons.delete }}
-            </v-icon>
-          </v-btn>
+          <v-tooltip bottom :disabled="!(item && (item.households.length > 0 || item.users.length > 0))">
+            <template #activator="{ on, attrs }">
+              <div v-bind="attrs" v-on="on" >
+                <v-btn
+                  :disabled="item && (item.households.length > 0 || item.users.length > 0)"
+                  class="mr-1"
+                  icon
+                  color="error"
+                  @click.stop="
+                    confirmDialog = true;
+                    deleteTarget = item.id;
+                  "
+                >
+                  <v-icon>
+                    {{ $globals.icons.delete }}
+                  </v-icon>
+                </v-btn>
+              </div>
+            </template>
+            <span>{{ $tc("admin.group-delete-note") }}</span>
+          </v-tooltip>
         </template>
       </v-data-table>
       <v-divider></v-divider>
diff --git a/frontend/pages/admin/manage/households/index.vue b/frontend/pages/admin/manage/households/index.vue
index 122ba20b1..98426310f 100644
--- a/frontend/pages/admin/manage/households/index.vue
+++ b/frontend/pages/admin/manage/households/index.vue
@@ -63,20 +63,27 @@
           {{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
         </template>
         <template #item.actions="{ item }">
-          <v-btn
-            :disabled="item && item.users.length > 0"
-            class="mr-1"
-            icon
-            color="error"
-            @click.stop="
-              confirmDialog = true;
-              deleteTarget = item.id;
-            "
-          >
-            <v-icon>
-              {{ $globals.icons.delete }}
-            </v-icon>
-          </v-btn>
+          <v-tooltip bottom :disabled="!(item && item.users.length > 0)">
+            <template #activator="{ on, attrs }">
+              <div v-bind="attrs" v-on="on" >
+                <v-btn
+                  :disabled="item && item.users.length > 0"
+                  class="mr-1"
+                  icon
+                  color="error"
+                  @click.stop="
+                    confirmDialog = true;
+                    deleteTarget = item.id;
+                  "
+                >
+                  <v-icon>
+                    {{ $globals.icons.delete }}
+                  </v-icon>
+                </v-btn>
+              </div>
+            </template>
+            <span>{{ $tc("admin.household-delete-note") }}</span>
+          </v-tooltip>
         </template>
       </v-data-table>
       <v-divider></v-divider>