Poprawka drag&drop

src/components/InputsSection.vue

@@ -35,6 +35,19 @@
           </select>
         </div>
 
+        <div class="input_list type">
+          <select
+            id="cargo-list"
+            v-model="store.cargoOptions"
+          >
+            <option :value="null" disabled>Wybierz wagon</option>
+
+            <option v-for="cargo in store.cargoOptions" >
+              {{ cargo }}
+            </option>
+          </select>
+        </div>
+
         <div class="input_ready-stock">
           <button class="btn" @click="setReadyStockList(true)"><b>REALNE ZESTAWIENIA</b></button>
           <ready-stock-list />
@@ -68,13 +81,8 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const isReadyStockListOpen = ref(false);
-
-    provide('isReadyStockListOpen', isReadyStockListOpen);
-
     return {
       store,
-      isReadyStockListOpen,
     };
   },
 
@@ -115,7 +123,7 @@ export default defineComponent({
     },
 
     setReadyStockList(bool = false) {
-      this.isReadyStockListOpen = bool;
+      this.store.isRealStockListCardOpen = bool;
     },
 
     onVehicleSelect(type: 'loco' | 'car') {

src/components/ListSection.vue

@@ -53,7 +53,7 @@
         <div class="warning" v-if="warnings.tooManyLocos.value">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
       </div> -->
 
-      <ul ref="list" data-ignore-outside="1">
+      <ul ref="list"  >
         <li v-if="store.stockList.length == 0" class="list-empty">
           <div class="item-content">Lista pojazdów jest pusta!</div>
         </li>
@@ -65,7 +65,7 @@
           :data-id="i"
           tabindex="0"
           @focus="onListItemFocus(i)"
-          :ref="`item-${i}`"
+          ref="itemRefs"
         >
           <div
             class="item-content"
@@ -147,8 +147,10 @@ export default defineComponent({
 
       const attr = targetNode.attributes.getNamedItem('data-ignore-outside');
 
-      if (!attr && targetNode.tagName.toLowerCase() != 'select' && targetNode.tagName.toLowerCase() != 'option')
+      if (!attr && !/select|option/i.test(targetNode.tagName)) {
+        console.log(targetNode.tagName);
         this.store.chosenStockListIndex = -1;
+      }
     });
   },
 
@@ -198,7 +200,7 @@ export default defineComponent({
     onListItemFocus(vehicleID: number) {
       const vehicle = this.store.stockList[vehicleID];
 
-      this.store.chosenStockListIndex = vehicleID;
+      // this.store.chosenStockListIndex = vehicleID;
 
       if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
 
@@ -323,17 +325,13 @@ export default defineComponent({
     onDrop(e: DragEvent, vehicleIndex: number) {
       e.preventDefault();
 
-      let targetEl: Element | null = this.$refs[`item-${vehicleIndex}`] as Element;
+      let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
 
       if (!targetEl) return;
 
-      const dataID = targetEl.attributes.getNamedItem('data-id')?.textContent;
+      const tempVehicle = this.store.stockList[vehicleIndex];
 
-      if (!dataID) return;
-
-      const tempVehicle = this.store.stockList[Number(dataID)];
-
-      this.store.stockList[Number(dataID)] = this.store.stockList[this.draggedVehicleID];
+      this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
       this.store.stockList[this.draggedVehicleID] = tempVehicle;
     },
 

src/components/ReadyStockList.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="ready-stock-list" v-if="isOpen">
+  <div class="ready-stock-list" v-if="store.isRealStockListCardOpen">
     <div class="top-sticky">
-      <button class="btn btn--text exit" @click="exit">&lt; POWRÓT</button>
+      <button class="btn btn--text exit" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
 
       <div class="header">
         <h1>
@@ -65,7 +65,6 @@ export default defineComponent({
   data: () => ({
     responseStatus: 'loading',
     isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
-    isOpen: false,
 
     readyStockList: {} as ReadyStockList,
     searchedReadyStockName: '',
@@ -97,10 +96,6 @@ export default defineComponent({
       return new URL(`./dir/${name}.png`, import.meta.url).href;
     },
 
-    exit() {
-      this.isOpen = false;
-    },
-
     openPreview(e: Event, type: string, number: string) {
       e.preventDefault();
 
@@ -134,7 +129,7 @@ export default defineComponent({
         this.addVehicle(vehicle);
       });
 
-      this.exit();
+      this.store.isRealStockListCardOpen = false;
     },
 
     addVehicle(vehicle: Vehicle | null) {

src/store.ts

@@ -29,6 +29,7 @@ export const useStore = defineStore({
       vehiclePreviewSrc: '',
 
       isRandomizerCardOpen: false,
+      isRealStockListCardOpen: false,
 
 
     } as IStore),

src/types.ts

@@ -23,6 +23,7 @@ export interface IStore {
   vehiclePreviewSrc: string;
 
   isRandomizerCardOpen: boolean;
+  isRealStockListCardOpen: boolean;
 }
 
 export interface IVehicleData {
@@ -75,3 +76,4 @@ export interface IStock {
   imgSrc: string;
 }
 
+