zero prices fixes

src/views/ZeroPricesView.vue

@@ -17,10 +17,17 @@ const handleToggle = ({ id, merch_uuid, checked }) => {
   }
 }
 
+const handleSelectAll = () => {
+  toDelete.value = zeroPrices.value.map(item => ({
+    id: item.id,
+    merch_uuid: item.merch_uuid
+  }))
+}
+
 const fetchZeroPrices = async () => {
   try {
     const response = await getZeroPrices()
-    zeroPrices.value = response.data
+    zeroPrices.value = Array.isArray(response.data) ? response.data : []
   } catch (error) {
     console.error(error)
   }
@@ -43,10 +50,18 @@ onMounted(() => {
   </div>
   <div v-else>
     <div class="sticky-search-container">
-      <ZeroPricesToolbar :selected="toDelete" @deleted="handleDeleted" />
+      <ZeroPricesToolbar
+        :selected="toDelete"
+        @deleted="handleDeleted"
+        @selectAll="handleSelectAll"
+      />
     </div>
     <div v-for="item in zeroPrices" :key="item.created_at">
-      <ZeroPriceCard :zero-price="item" @toggle="handleToggle" />
+      <ZeroPriceCard
+        :zero-price="item"
+        @toggle="handleToggle"
+        :checked="toDelete.some(t => t.id === item.id)"
+      />
     </div>
   </div>
 </template>

src/views/ZeroPricesView/ZeroPriceCard.vue

@@ -1,21 +1,22 @@
 <script setup>
-import { ref } from 'vue'
-
 const props = defineProps({
   zeroPrice: {
     type: Object,
     required: true,
   },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const isChecked = ref(false)
 const emit = defineEmits(['toggle'])
-const handleCheckboxChange = () => {
-  isChecked.value = !isChecked.value
+
+const handleCheckboxChange = (newValue) => {
   emit('toggle', {
     id: props.zeroPrice.id,
     merch_uuid: props.zeroPrice.merch_uuid,
-    checked: isChecked.value,
+    checked: newValue,
   })
 }
 </script>
@@ -24,7 +25,7 @@ const handleCheckboxChange = () => {
   <div class="zeroPriceCard mt-10">
     <n-grid responsive="screen" item-responsive cols="4" :x-gap="16" :y-gap="16" class="shift">
       <n-gi>
-        <n-checkbox :checked="isChecked" @update:checked="handleCheckboxChange">
+        <n-checkbox :checked="checked" @update:checked="handleCheckboxChange">
           <strong>Delete</strong>
         </n-checkbox>
       </n-gi>

src/views/ZeroPricesView/ZeroPricesToolbar.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 
 const messages = useMessage()
 const { deleteZeroPrices } = useZeroPrices()
-const emit = defineEmits(['deleted'])
+const emit = defineEmits(['deleted', 'selectAll'])
 
 const handleDelete = async () => {
   try {
@@ -22,6 +22,11 @@ const handleDelete = async () => {
     messages.error("Error deleting selected prices")
   }
 }
+
+const handleSelectAll = async () => {
+  emit('selectAll')
+}
+
 </script>
 
 <template>
@@ -32,6 +37,9 @@ const handleDelete = async () => {
     <div v-else class="toolbar-item">
       {{ props.selected.length }} items selected
     </div>
+    <div class="toolbar-item">
+      <span @click="handleSelectAll">Click here to select all</span>
+    </div>
 
     <div class="toolbar-item">
       <n-button