Fix item picker select/unselect all when filtered

cortezaproject · Jan 8, 2025 · 7eb367a · 7eb367a
1 parent 8e2a2fc
commit 7eb367a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 36 deletions.
diff --git a/lib/vue/src/components/itemPicker/CItemPicker.vue b/lib/vue/src/components/itemPicker/CItemPicker.vue
@@ -9,15 +9,14 @@
       <b-card-header
         class="p-0"
       >
-
-      <c-input-search
-        v-if="!hideFilter"
-        v-model.trim="query"
-        :disabled="_disabledFilter"
-        :placeholder="labels.searchPlaceholder"
-      />
-
+        <c-input-search
+          v-if="!hideFilter"
+          v-model.trim="query"
+          :disabled="_disabledFilter"
+          :placeholder="labels.searchPlaceholder"
+        />
       </b-card-header>
+
       <b-card-body
         class="d-flex p-0"
       >
@@ -32,21 +31,22 @@
               class="d-flex align-items-center"
             >
               <label
-                class="text-primary mb-0"
+                class="text-primary mb-0 py-1"
               >
                 {{ labels.availableItems }}
               </label>
               <b-button
-                data-test-id="link-select-all"
                 v-show="filteredAvailable.length && !disabled"
-                variant="link"
-                class="ml-auto px-0 text-muted"
+                data-test-id="link-select-all"
+                variant="outline-light"
+                class="ml-auto border-0 text-muted"
                 @click="selectAll()"
               >
                 {{ labels.selectAllItems }}
               </b-button>
             </div>
           </b-card-header>
+
           <b-card-body
             class="overflow-auto py-0 pl-0 pr-2"
           >
@@ -82,11 +82,11 @@
                   >
                     <template
                       v-for="(_, slot) of $scopedSlots"
-                      v-slot:[slot]="scope"
+                      #[slot]="scope"
                     >
                       <slot
                         :name="slot"
-                        :textField="textField"
+                        :text-field="textField"
                         :disabled="disabled"
                         :disabled-dragging="isDraggable"
                         :disabled-sorting="disabledSorting"
@@ -109,6 +109,7 @@
             </b-list-group>
           </b-card-body>
         </b-card>
+
         <b-card
           no-body
           class="h-100 pl-sm-0 col-sm-6 col-12 p-0"
@@ -120,21 +121,22 @@
               class="d-flex align-items-center"
             >
               <label
-                class="text-primary mb-0"
+                class="text-primary mb-0 py-1"
               >
                 {{ labels.selectedItems }}
               </label>
               <b-button
-                data-test-id="link-unselect-all"
                 v-show="filteredSelected.length && !disabled"
-                variant="link"
-                class="ml-auto px-0 text-muted"
+                data-test-id="link-unselect-all"
+                variant="outline-light"
+                class="ml-auto border-0 text-muted"
                 @click="unselectAll()"
               >
                 {{ labels.unselectAllItems }}
               </b-button>
             </div>
           </b-card-header>
+
           <b-card-body
             class="overflow-auto py-0 pl-2 pr-0"
           >
@@ -171,11 +173,11 @@
                   >
                     <template
                       v-for="(_, slot) of $scopedSlots"
-                      v-slot:[slot]="scope"
+                      #[slot]="scope"
                     >
                       <slot
                         :name="slot"
-                        :textField="textField"
+                        :text-field="textField"
                         :disabled="disabled"
                         :disabled-dragging="isDraggable"
                         :disabled-sorting="disabledSorting"
@@ -356,7 +358,7 @@ export default {
 
         // satisfy v-model
         this.$emit('input', value)
-      }
+      },
     },
 
     options: {
@@ -407,16 +409,8 @@ export default {
     },
 
     selectAll () {
-      if (this.disabledSorting) {
-        // sorting disabled, just reuse list from the frozen list
-        this.selected = [...this.frozen()]
-      } else {
-        // sorting enabled, push all items left in available
-        // at the end of the list
-        this.selected.push(...this.available)
-      }
-
-      this.available = []
+      this.selected.push(...this.filteredAvailable)
+      this.available = this.frozen().filter(i => !this.selected.includes(i))
     },
 
     select: throttle(function (item) {
@@ -435,8 +429,7 @@ export default {
     }, 300),
 
     unselectAll () {
-      this.available = [...this.frozen()]
-      this.selected = []
+      this.filteredSelected.forEach(this.unselect)
     },
 
     unselect (item) {

diff --git a/lib/vue/src/components/itemPicker/CItemPickerItem.vue b/lib/vue/src/components/itemPicker/CItemPickerItem.vue
@@ -21,14 +21,15 @@
     </b>
     <b-button
       v-if="_hideIcons"
+      v-b-tooltip.noninteractive.hover="{ title: selected ? 'Unselect' : 'Select', container: '#body' , delay: 1000 }"
       :data-test-id="`button-${selected ? 'unselect' : 'select'}`"
-      variant="link"
-      class="text-decoration-none d-flex align-items-center align-baseline ml-auto px-2"
+      variant="outline-light"
+      class="d-flex align-items-center ml-auto p-2 border-0"
+      @click.prevent.stop="$emit(selected ? 'unselect' : 'select')"
     >
       <font-awesome-icon
         :icon="[selected ? 'far' : 'fas', selected ? 'eye' : 'eye-slash']"
         class="text-muted"
-        @click="$emit(selected ? 'unselect' : 'select')"
       />
     </b-button>
   </div>