pojazdownik/src/components/utils/StockThumbnails.vue

<template>
  <div class="stock_thumbnails" ref="thumbnailsRef">
    <div
      v-for="(stock, stockIndex) in store.stockList"
      :key="stockIndex"
      :data-selected="store.chosenStockListIndex == stockIndex"
      draggable="true"
      @dragstart="onDragStart(stockIndex)"
      @drop="onDrop($event, stockIndex)"
      @dragover="allowDrop"
    >
      <span @click="onListItemClick(stockIndex)" :key="stock.id">
        <b :class="{ supporter: stock.supportersOnly }">
          {{ stock.type }}
        </b>

        <span>
          <img
            draggable="false"
            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.type}.png`"
            :alt="stock.type"
            :title="stock.type"
            @error="stockImageError($event, stock)"
          />
        </span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Ref, computed, nextTick, ref, watch } from "vue";
import { useStore } from "../../store";
import { IStock } from "../../types";

const store = useStore();
const emit = defineEmits(["listItemClick"]);

const thumbnailsRef = ref() as Ref<HTMLElement>;
const draggedIndex = ref(-1);

const onListItemClick = (index: number) => {
  emit("listItemClick", index);
};

const stockImageError = (e: Event, stock: IStock) => {
  (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
};

watch(
  computed(() => store.chosenStockListIndex),
  (index) => {
    if (index < 0) return;

    nextTick(() => {
      (thumbnailsRef.value as HTMLElement)
        .querySelector(`div:nth-child(${index + 1})`)
        ?.scrollIntoView({
          block: "nearest",
          inline: "start",
          behavior: "smooth",
        });
    });
  },
);

// Dragging images
const onDragStart = (vehicleIndex: number) => {
  draggedIndex.value = vehicleIndex;
};

const onDrop = (e: DragEvent, vehicleIndex: number) => {
  e.preventDefault();

  let targetEl = thumbnailsRef.value.querySelector(
    `div:nth-child(${vehicleIndex + 1})`,
  );

  if (!targetEl && draggedIndex.value != -1) return;

  const tempVehicle = store.stockList[vehicleIndex];
  store.stockList[vehicleIndex] = store.stockList[draggedIndex.value];
  store.stockList[draggedIndex.value] = tempVehicle;

  store.chosenStockListIndex = vehicleIndex;
};

const allowDrop = (e: DragEvent) => {
  e.preventDefault();
};
</script>

<style lang="scss" scoped>
.stock_thumbnails {
  display: flex;
  overflow: auto;
  background-color: #353a57;

  > div {
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    min-height: 100px;

    &[data-selected="true"] {
      background-color: rebeccapurple;
    }

    > span {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      padding: 0.5em 0;

      text-align: center;

      font-size: 0.85em;
      user-select: none;
      -moz-user-select: none;
    }
  }

  img {
    max-height: 60px;
  }
}

.supporter {
  color: salmon;
}
</style>