feat: Group and household deletion tooltips (#4414)

mealie-recipes · Oct 22, 2024 · bf2a697 · bf2a697
1 parent 61511d1
commit bf2a697
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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>