How to deselect an item from a list of products when selecting another? Only one can be marked at a time

[faridsa]

Hi, I have a fabric listing that can be ordered with custom prints, that requires a multi-step process. in the first step the fabric and its quantity are selected, in the second the prints and their quantities. Now, if in the first step after selecting a fabric I want to change to another, I need the first item selected to be automatically unchecked.

I'm creating the catalog with vue3 and pinia to manage the state and everything works fine except the automatic deselection mechanism.

To be clearer, I add screenshots
Step one: selecting a fabric shows selected status accurately

Step 2: when selecting another fabric, the order totalizer on the left correctly shows the new selection, but the fabric module is not automatically deselected

fabric module is a shared component which is defined as:

<template>
  <article class="flex flex-col justify-center p-2 mx-auto" :id="id">
    <div class="relative mb-4 overflow-hidden image w-68 h-75 rounded-3xl">
      <ImgFade class="w-full h-full" :alt="item.title" :src="item.image" />
      <div id="details" class="rounded-3xl">
        <p class="w-full mb-2 text-center">{{ item.composition }}</p>
        <p class="w-full mb-2 text-center">Ancho: {{ item.wide }} m.</p>
      </div>
      <div id="selection" class="rounded-3xl" :class="{ selected: status.isSelected }">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          class="mx-auto"
          width="56"
          height="56"
        >
          <title>Tu selección</title>
          <path
            d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z"
            style="
              fill: none;
              stroke: currentColor;
              stroke-miterlimit: 10;
              stroke-width: 32px;
            "
          />
          <polyline
            points="352 176 217.6 336 160 272"
            style="
              fill: none;
              stroke: currentColor;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-width: 32px;
            "
          />
        </svg>
      </div>
    </div>
    <div class="description">
      <h3 class="pr-1 mb-2 font-semibold">{{ item.name }}</h3>
      <p class="flex justify-between pr-1 text-sm text-gray-400">
        <span>Precio x mt</span>
        <span v-if="prices.price">${{ prices.price.toLocaleString("es-AR") }}</span>
      </p>
      <form
        class="grid grid-cols-2 gap-4 pr-1 text-sm text-gray-400"
        @submit.prevent="addToOrder"
      >
        <div
          class="flex items-center justify-between w-full p-3 leading-none bg-white border rounded-3xl border-neutral-300"
        >
          <button
            class="px-1 border-r border-gray-400 btn-invisible hover:text-black"
            @click.prevent="decrementCounter"
          >
            -
          </button>
          <input
            id="qty"
            class="w-6 p-0 text-center bg-gray-white focus:border-none"
            v-model="counter.count"
          />
          <button
            class="px-1 border-l border-gray-400 btn-invisible hover:text-black"
            @click.prevent="incrementCounter"
            preserveScroll
          >
            +
          </button>
        </div>
        <button
          class="w-full p-3 border btn btn-light border-neutral-300"
          :disabled="isDisabled"
          type="submit"
        >
          Agregar
        </button>
      </form>
    </div>
  </article>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import ImgFade from "@/Components/ImgFade.vue";
import { useOrderStore } from "../stores/customOrder.js";
//get store
const data = useOrderStore();

const props = defineProps({
  item: Object,
  id: String,
});

const counter = reactive({ count: 0 });
const status = reactive({ isSelected: false });
const prices = reactive({
  price: props.item.price ? parseInt(props.item.price.step1) : 0,
});

function incrementCounter() {
  if (counter.count + 1 < props.item.stock) {
    counter.count += 1;
  } else {
    alert("Este es el stock máximo disponible en estos momentos");
  }

  checkPrice();
}

function decrementCounter() {
  if (counter.count > 1) {
    counter.count -= 1;
  } else {
    counter.count = 0;
  }
  checkPrice();
}

const isDisabled = computed(() => {
  return counter.count < 1 ? true : false;
});

function addToOrder(item) {
  if (counter.count >= 1) {
    status.isSelected = true;
  }
  item = props.item;
  item.qty = counter.count;
  item.price = prices.price;

  item.subtotal = prices.price * parseInt(counter.count);

  data.addFabric(item);
}

function checkPrice() {
  if (counter.count == 1) {
    prices.price = parseInt(props.item.price.step1);
  }
  if (counter.count > 5 && counter.count < 11) {
    prices.price = parseInt(props.item.price.step2);
  }
  if (counter.count > 10 && counter.count < 26) {
    prices.price = parseInt(props.item.price.step3);
  }
  if (counter.count > 25 && counter.count < 51) {
    prices.price = parseInt(props.item.price.step4);
  }
  if (counter.count > 50) {
    prices.price = parseInt(props.item.price.step5);
  }
}
</script>

<style scoped>
#details {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  color: white;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-content: center;
  left: 0;
  opacity: 0;
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.5s linear;
  width: 100%;
}
.image:hover #details {
  opacity: 1;
  z-index: 100;
}

#selection {
  background-color: transparent;
  border: 0.5rem solid #fdcb1f;
  color: #fdcb1f;
  display: none;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-content: center;
  left: 0rem;
  opacity: 0;
  padding: 1rem;
  position: absolute;
  right: 0rem;
  top: 0rem;
  transition: all 0.5s linear;
  width: 100%;
  z-index: 150;
}

#selection.selected {
  display: flex;
  opacity: 1;
}
</style>

and pinia customOrder.js is like:

import { defineStore } from 'pinia'
import { useForm } from "@inertiajs/inertia-vue3";

export const useOrderStore = defineStore('custom-order', {
    state: () => {
        return {
            fabric: [],
            patterns: [],
        }
    },
    getters: {
        getFabric() {
            return this.fabric;
        },
        getPatterns() {
            return this.patterns;
        },
        getOptions() {
            return this.pattern_options;
        },
        getSubtotal() {
            if (this.fabric.subtotal > 0) {
                return this.fabric.subtotal
            }
            return 0;
        },
        getTotalMeters() {
            return this.fabric.qty
        }
    },
    actions: {
        addFabric(item) {
            this.fabric = item;
        },
        removeFabric() {
            this.fabric = [];
        },
        addPattern(item) {
            if (this.patterns.length < 31) {
                this.patterns.push(item);
            } else {
                alert('Ya has seleccionado el máximo de estampas posibles para este pedido.');
            }

        },
        removePattern(item) {
            this.patterns = this.patterns.filter(pattern => pattern.id !== item.id);
            console.log(this.patterns.length)
            if (this.patterns.length === 0) {
                this.patterns = [];
            }
        },
        addOptions(item) {
            let index = this.patterns.findIndex(pattern => pattern.id === item.id);
            if (index !== -1) {
                this.patterns[index].qty = item.qty;
                this.patterns[index].scale = item.scale;
                this.patterns[index].orientation = item.orientation;
            }
        },
        removeOptions(item) {
            let index = this.patterns.findIndex(pattern => pattern.id === item.id);
            if (index !== -1) {
                this.patterns[index].qty = null;
                this.patterns[index].scale = null;
                this.patterns[index].orientation = null;
            }
        },
        checkPatternSum() {
            return this.patterns.reduce((acc, item) => acc + parseInt(item.qty), 0);
        },
        checkPatternCompletion() {
            let error = 0;
            this.patterns.forEach(pattern => {
                if (!parseInt(pattern.qty) > 0 || !pattern.scale || !pattern.orientation) {
                    error ++;
                } 
            });
            return (error == 0);
        },
        canAddToCart() {
            return this.checkPatternCompletion();
        },
        addToCart() {
            const form = useForm({
                fabric: this.fabric,
                patterns: this.patterns
            });

            form.post(`/cart/fabric`);
            this.fabric = [];
            this.patterns = [];
            
        }
    }
});

I can't figure out how to notify the active module that another one has been selected and replaced it, so I will really appreciate any suggestion.

[ChrisGV04]

Hi @faridsa!

As with almost any problem, there might be several ways to solve it. I believe that a simple way to achieve it is by using the currently selected state that you have inside of your customOrder.js pinia store inside of the FabricModule component with a computed property that checks if itself is the selected fabric.

<script setup>
import { computed } from 'vue';
import { useOrderStore } from '../stores/customOrder.js';

const data = useOrderStore();

// ... All of your logic

// This is no longer needed. Use the isSelected computed property instead
// ❌ const status = reactive({ isSelected: false });

// Computed property that checks if itself is the selected fabric by comparing it to the
// selected fabric from the pinia store
const isSelected = computed(() => data.fabric && data.fabric.id === props.id);

function addToOrder(item) {
  // This is no longer needed 👇
  if (counter.count >= 1) {
    status.isSelected = true;
  }
  // 👆

  // ... The rest of the logic
}
</script>

<template>
  <article class="flex flex-col justify-center p-2 mx-auto" :id="id">
    <div class="relative mb-4 overflow-hidden image w-68 h-75 rounded-3xl">
      <!-- ... -->

      <!-- Replace the status.isSelected for the computed isSelected property -->
      <div id="selection" class="rounded-3xl" :class="{ selected: isSelected }">
        <!-- ... -->
      </div>
    </div>
    <!-- ... -->
  </article>
</template>

If you have any questions or need help with that methodology, I'm glad to help.

[faridsa]

I will Try you suggestion, it seems very straightforward!
I will report back, thank you so much

[ChrisGV04]

Sure thing! I'll be here if you have any questions

[faridsa]

Thank @ChrisGV04. Your solution is defintively simple and clean. It works perfectly and I used it, furthermore to reset the previously selected counter.
You make my day!

[ChrisGV04]

That's great! 😄 I'm glad to help.
Good luck on your project!