Enh/variant card handles

cypress/e2e/participant/default-tests/playButtonGames.cy.js

@@ -14,7 +14,7 @@ describe('Testing play through of vocab, cva, letter, and multichoice games as a
       cy.visit(`/game/${game.id}`, { timeout: 2 * timeout });
 
       // Long timeout is needed for picture vocab
-      cy.get(game.startBtn, { timeout: 8 * timeout })
+      cy.get(game.startBtn, { timeout: 10 * timeout })
         .should('be.visible')
         .click();
 

src/components/TaskPicker.vue

@@ -42,7 +42,7 @@
                   :data-task-id="element.task.id"
                   style="cursor: grab"
                 >
-                  <VariantCard :variant="element" />
+                  <VariantCard :variant="element" @select="selectCard" />
                 </div>
               </transition-group>
             </VueDraggableNext>
@@ -79,7 +79,7 @@
                   :data-task-id="element.task.id"
                   style="cursor: grab"
                 >
-                  <VariantCard :variant="element" :update-variant="updateVariant" />
+                  <VariantCard :variant="element" :update-variant="updateVariant" @select="selectCard" />
                 </div>
               </transition-group>
             </VueDraggableNext>
@@ -280,6 +280,27 @@ watch(selectedVariants, (variants) => {
 const removeCard = (variant) => {
   selectedVariants.value = selectedVariants.value.filter((selectedVariant) => selectedVariant.id !== variant.id);
 };
+const selectCard = (variant) => {
+  // Check if this variant is already in the list
+  const cardVariantId = variant.id;
+  const index = _findIndex(selectedVariants.value, (element) => element.id === cardVariantId);
+  if (index === -1) {
+    // If this variant is not already selected, check if the taskId is already selected.
+    // If so, warn but add regardless.
+    const selectedTasks = selectedVariants.value.map((selectedVariant) => selectedVariant.task.id);
+    if (selectedTasks.includes(variant.task.id)) {
+      toast.add({
+        severity: 'warn',
+        summary: 'Task Selected',
+        detail: 'There is a task with that Task ID already selected.',
+        life: 3000,
+      });
+    }
+    selectedVariants.value.push(variant);
+  } else {
+    debounceToast();
+  }
+};
 const moveCardUp = (variant) => {
   const index = _findIndex(selectedVariants.value, (currentVariant) => currentVariant.id === variant.id);
   if (index === 0) return;

src/components/VariantCard.vue

@@ -65,6 +65,15 @@
         </PvOverlayPanel>
       </div>
     </div>
+    <div class="mr-0 pl-0 flex flex-column">
+      <PvButton
+        v-if="!hasControls"
+        class="surface-hover border-1 border-300 border-circle m-0 hover:bg-primary p-0 m-2"
+        @click="handleSelect"
+        data-cy="select-variant"
+        ><i class="pi pi-chevron-right text-primary hover:text-white-alpha-90 p-2" style="font-size: 1rem"></i
+      ></PvButton>
+    </div>
   </div>
   <!---------- end card without buttons ----- >-->
   <div v-else :id="variant.id" :class="isActive()">
@@ -265,11 +274,14 @@ const backupImage = '/src/assets/roar-logo.png';
 const showContent = ref(false);
 const op = ref(null);
 const visible = ref(false);
-const emit = defineEmits(['remove', 'moveUp', 'moveDown']);
+const emit = defineEmits(['remove', 'select', 'moveUp', 'moveDown']);
 
 const handleRemove = () => {
   emit('remove', props.variant);
 };
+const handleSelect = () => {
+  emit('select', props.variant);
+};
 const handleMoveUp = () => {
   emit('moveUp', props.variant);
 };