Init multiple selection in collection view

ducksmanager · Jul 5, 2024 · 23295d0 · 23295d0
1 parent 03e22c6
commit 23295d0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/apps/whattheduck/src/components/List.vue b/apps/whattheduck/src/components/List.vue
@@ -19,6 +19,10 @@
         :is-owned="isOwned"
         :next-item-type="nextItemType"
         @click="updateCurrentNavigationItem(key)"
+        @ionChange="toggleCheckedIssuenumber(item)"     
+        v-on-long-press.prevent="
+        toggleCheckedIssuenumber(item)
+        "
       >
         <template #fill-bar v-if="item">
           <slot name="fill-bar" :item="item" />
@@ -84,9 +88,11 @@ const props = defineProps<{
   getItemTextFn: (item: Item) => string;
   issueViewModes?: { label: string; icon: { ios: string; md: string } }[];
   filter?: { label: string; icon: { ios: string; md: string } }[];
+  isMultipleSelection?: boolean
 }>();
 
-const emit = defineEmits<(e: 'items-filtered', items: string[]) => void>();
+const emit = defineEmits<{ (e: "items-filtered", items: string[]): void; (e: "enable-multiple-selection"): void }>();
+
 
 const {
   coverId: { services: coverIdServices },
@@ -148,6 +154,11 @@ const updateCurrentNavigationItem = (key: string) => {
   }
 };
 
+const toggleCheckedIssuenumber = (item: Item ) => {
+  emit('enable-multiple-selection')
+  selectedIssuenumbers.value[item.issuenumber] = !selectedIssuenumbers.value[item.issuenumber]
+}
+
 const itemInCenterOfViewport = computed(() => {
   if (!props.items.length) {
     return undefined;

diff --git a/apps/whattheduck/src/views/IssueList.vue b/apps/whattheduck/src/views/IssueList.vue
@@ -3,14 +3,14 @@
     v-if="hasCoaData"
     :items="sortedItems"
     :get-item-text-fn="getItemTextFn"
+    :is-multiple-selection="isMultipleSelection"
+    @enable-multiple-selection="isMultipleSelection = true"
     @items-filtered="filteredIssuenumbers = $event"
   >
     <template v-if="currentIssueViewMode.id === 'list'" #row-prefix="{ item }">
       <ion-checkbox
+        v-if="isMultipleSelection"
         :checked="selectedIssuenumbers[item.issuenumber]"
-        v-if="isCoaView"
-        @ionChange="selectedIssuenumbers[item.issuenumber] = $event.detail.checked"
-        @click.stop="() => {}"
         >&nbsp;</ion-checkbox
       >
       <Condition v-if="item.condition" :value="item.condition" />
@@ -98,6 +98,11 @@ const userIssues = computed(() =>
   (issues.value || []).filter((issue) => issue.publicationcode === publicationcode.value),
 );
 
+const isMultipleSelection = ref(false)
+watch(isCoaView, () => {
+  isMultipleSelection.value = isCoaView.value;
+});
+
 type Item = NonNullable<(typeof issues)['value']>[number];
 
 const items = computed(() =>