feat: check all in shopping list view (#3786)

Co-authored-by: Olly Welch <mail@ollywelch.com>

frontend/lang/messages/en-US.json

@@ -809,7 +809,10 @@
     "linked-recipes-count": "No Linked Recipes|One Linked Recipe|{count} Linked Recipes",
     "items-checked-count": "No items checked|One item checked|{count} items checked",
     "no-label": "No Label",
-    "completed-on": "Completed on {date}"
+    "completed-on": "Completed on {date}",
+    "are-you-sure-you-want-to-check-all-items": "Are you sure you want to check all items?",
+    "are-you-sure-you-want-to-uncheck-all-items": "Are you sure you want to uncheck all items?",
+    "are-you-sure-you-want-to-delete-checked-items": "Are you sure you want to delete all checked items?"
   },
   "sidebar": {
     "all-recipes": "All Recipes",

frontend/pages/shopping-lists/_id.vue

@@ -1,5 +1,17 @@
 <template>
   <v-container v-if="shoppingList" class="md-container">
+    <BaseDialog v-model="checkAllDialog" :title="$tc('general.confirm')" @confirm="checkAll">
+      <v-card-text>{{ $t('shopping-list.are-you-sure-you-want-to-check-all-items') }}</v-card-text>
+    </BaseDialog>
+
+    <BaseDialog v-model="uncheckAllDialog" :title="$tc('general.confirm')" @confirm="uncheckAll">
+      <v-card-text>{{ $t('shopping-list.are-you-sure-you-want-to-uncheck-all-items') }}</v-card-text>
+    </BaseDialog>
+
+    <BaseDialog v-model="deleteCheckedDialog" :title="$tc('general.confirm')" @confirm="deleteChecked">
+      <v-card-text>{{ $t('shopping-list.are-you-sure-you-want-to-delete-checked-items') }}</v-card-text>
+    </BaseDialog>
+
     <BasePageTitle divider>
       <template #header>
         <v-container>
@@ -164,10 +176,16 @@
               text: $tc('shopping-list.uncheck-all-items'),
               event: 'uncheck',
             },
+            {
+              icon: $globals.icons.checkboxOutline,
+              text: $tc('shopping-list.check-all-items'),
+              event: 'check',
+            },
           ]"
           @edit="edit = true"
-          @delete="deleteChecked"
-          @uncheck="uncheckAll"
+          @delete="openDeleteChecked"
+          @uncheck="openUncheckAll"
+          @check="openCheckAll"
           @sort-by-labels="sortByLabels"
           @copy-plain="copyListItems('plain')"
           @copy-markdown="copyListItems('markdown')"
@@ -256,7 +274,7 @@
 <script lang="ts">
 import draggable from "vuedraggable";
 
-import { defineComponent, useRoute, computed, ref, onUnmounted, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, useRoute, computed, ref, toRefs, onUnmounted, useContext, reactive } from "@nuxtjs/composition-api";
 import { useIdle, useToggle } from "@vueuse/core";
 import { useCopyList } from "~/composables/use-copy";
 import { useUserApi } from "~/composables/api";
@@ -303,6 +321,12 @@ export default defineComponent({
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
     const id = route.value.params.id;
 
+    const state = reactive({
+      checkAllDialog: false,
+      uncheckAllDialog: false,
+      deleteCheckedDialog: false,
+    });
+
     // ===============================================================
     // Shopping List Actions
 
@@ -448,8 +472,34 @@ export default defineComponent({
 
     // =====================================
     // Check / Uncheck All
+    function openCheckAll() {
+      if (shoppingList.value?.listItems?.some((item) => !item.checked)) {
+        state.checkAllDialog = true;
+      }
+    }
+
+    function checkAll() {
+      state.checkAllDialog = false;
+      let hasChanged = false;
+      shoppingList.value?.listItems?.forEach((item) => {
+        if (!item.checked) {
+          hasChanged = true;
+          item.checked = true;
+        }
+      });
+      if (hasChanged) {
+        updateListItems();
+      }
+    }
+
+    function openUncheckAll() {
+      if (shoppingList.value?.listItems?.some((item) => item.checked)) {
+        state.uncheckAllDialog = true;
+      }
+    }
 
     function uncheckAll() {
+      state.uncheckAllDialog = false;
       let hasChanged = false;
       shoppingList.value?.listItems?.forEach((item) => {
         if (item.checked) {
@@ -462,6 +512,12 @@ export default defineComponent({
       }
     }
 
+    function openDeleteChecked() {
+      if (shoppingList.value?.listItems?.some((item) => item.checked)) {
+        state.deleteCheckedDialog = true;
+      }
+    }
+
     function deleteChecked() {
       const checked = shoppingList.value?.listItems?.filter((item) => item.checked);
 
@@ -953,6 +1009,7 @@ export default defineComponent({
     }
 
     return {
+      ...toRefs(state),
       addRecipeReferenceToList,
       updateListItems,
       allLabels,
@@ -963,6 +1020,7 @@ export default defineComponent({
       createListItem,
       createListItemData,
       deleteChecked,
+      openDeleteChecked,
       deleteListItem,
       edit,
       getLabelColor,
@@ -988,6 +1046,9 @@ export default defineComponent({
       sortByLabels,
       toggleShowChecked,
       uncheckAll,
+      openUncheckAll,
+      checkAll,
+      openCheckAll,
       updateIndexUnchecked,
       updateIndexUncheckedByLabel,
       allUnits,