wagons viewer

filter.vue

<template>
  <div>
    <!-- Filter: RPS -->
    <v-select
      v-model="park.selectWagon.rps"
      :items="rpsOptions"
      label="RPS"
      dense
      item-text="groupName"
      item-value="groupId"
      clearable
      :disabled="isModelSelected"
    />

    <!-- Filter: Freight, Body, etc. (Displayed after RPS selection) -->
    <template v-if="park.selectWagon.rps !== null && filteredWagons.length > 0">
      <v-select
        v-model="park.selectWagon.freight"
        :items="freightOptions"
        label="Freight"
        dense
        item-text="value"
        item-value="value"
        clearable
        :disabled="isModelSelected"
        @change="updateSelectedWagon"
      />

      <v-select
        v-model="park.selectWagon.body"
        :items="bodyOptions"
        label="Body"
        dense
        item-text="value"
        item-value="value"
        clearable
        :disabled="isModelSelected"
        @change="updateSelectedWagon"
      />

      <v-select
        v-model="park.selectWagon.bl"
        :items="blOptions"
        label="BL"
        dense
        item-text="value"
        item-value="value"
        clearable
        :disabled="isModelSelected"
        @change="updateSelectedWagon"
      />

      <!-- Display a list of remaining models after filtering -->
      <template v-if="filteredWagons.length > 1 && !park.selectedModelId">
        <p>
          Осталось несколько моделей. Пожалуйста, выберите модель из списка:
        </p>
        <v-select
          :items="filteredWagons"
          label="Выберите модель"
          dense
          item-text="model"
          item-value="model"
          @change="selectWagonByModel"
        />
      </template>
    </template>

    <!-- Search: Model (Autocomplete) -->
    <v-autocomplete
      v-model="park.selectedModelId"
      :items="allWagonModels"
      label="Поиск по номеру модели"
      outlined
      dense
      clearable
      @change="selectWagonByModel"
    />

    <!-- Debugging: Display selected wagon data -->
    <pre>{{ park.selectWagon }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      park: {
        selectWagon: {},
        selectedModelId: null,
        wagons: [
          {
            groupName: 'PW',
            groupId: 6,
            groupList: [
              {
                id: 1,
                rps: 6,
                name: 'first',
                model: '11-111',
                hotspots: [
                  {
                    hotspotId: 1,
                    name: 'freight',
                    value: '111',
                  },
                  {
                    hotspotId: 2,
                    name: 'body',
                    value: '150',
                  },
                  {
                    hotspotId: 8,
                    name: 'bl',
                    value: '1900',
                  },
                ],
              },
              {
                id: 2,
                rps: 6,
                name: 'second',
                model: '22-111',
                hotspots: [
                  {
                    hotspotId: 1,
                    name: 'freight',
                    value: '101',
                  },
                  {
                    hotspotId: 2,
                    name: 'body',
                    value: '100',
                  },
                  {
                    hotspotId: 8,
                    name: 'bl',
                    value: '1500',
                  },
                ],
              },
            ],
          },
          {
            groupName: 'CN',
            groupId: 4,
            groupList: [
              {
                id: 3,
                rps: 4,
                name: 'three',
                model: '11-333',
                hotspots: [
                  {
                    hotspotId: 1,
                    name: 'freight', // Changed to match the example, or use a more generic "грузоподьемность"
                    value: '111',
                  },
                  {
                    hotspotId: 2,
                    name: 'body', // Changed to match the example, or use a more generic "обьем кузова"
                    value: '100',
                  },
                  {
                    hotspotId: 8,
                    name: 'bl', // Changed to match the example, or use a more generic "длина"
                    value: '1900',
                  },
                ],
              },
              {
                id: 4,
                rps: 4,
                name: 'four',
                model: '22-444',
                hotspots: [
                  {
                    hotspotId: 1,
                    name: 'freight', // Changed to match the example
                    value: '101',
                  },
                  {
                    hotspotId: 2,
                    name: 'body', // Changed to match the example
                    value: '100',
                  },
                  {
                    hotspotId: 8,
                    name: 'bl', // Changed to match the example
                    value: '1500',
                  },
                ],
              },
              {
                id: 5,
                rps: 4,
                name: 'five',
                model: '22-333',
                hotspots: [
                  {
                    hotspotId: 1,
                    name: 'freight', // Changed to match the example, or use a more generic "грузоподьемность"
                    value: '111',
                  },
                  {
                    hotspotId: 2,
                    name: 'body', // Changed to match the example, or use a more generic "обьем кузова"
                    value: '100',
                  },
                  {
                    hotspotId: 8,
                    name: 'bl', // Changed to match the example, or use a more generic "длина"
                    value: '1900',
                  },
                ],
              },
            ],
          },
        ],
      },
    }
  },
  computed: {
    rpsOptions() {
      return this.park.wagons.map((group) => ({
        groupName: group.groupName,
        groupId: group.groupId,
      }))
    },

    selectedRpsWagons() {
      if (!this.park.selectWagon.rps) {
        return []
      }
      const selectedGroup = this.park.wagons.find(
        (group) => group.groupId === this.park.selectWagon.rps
      )
      return selectedGroup ? selectedGroup.groupList : []
    },

    filteredWagons() {
      let wagons = this.selectedRpsWagons

      if (this.park.selectWagon.freight) {
        wagons = wagons.filter((wagon) =>
          wagon.hotspots.some(
            (hotspot) =>
              hotspot.name === 'freight' &&
              hotspot.value === this.park.selectWagon.freight
          )
        )
      }

      if (this.park.selectWagon.body) {
        wagons = wagons.filter((wagon) =>
          wagon.hotspots.some(
            (hotspot) =>
              hotspot.name === 'body' &&
              hotspot.value === this.park.selectWagon.body
          )
        )
      }

      if (this.park.selectWagon.bl) {
        wagons = wagons.filter((wagon) =>
          wagon.hotspots.some(
            (hotspot) =>
              hotspot.name === 'bl' &&
              hotspot.value === this.park.selectWagon.bl
          )
        )
      }

      return wagons
    },

    freightOptions() {
      return this.selectedRpsWagons.reduce((acc, wagon) => {
        const freightHotspot = wagon.hotspots.find(
          (hotspot) => hotspot.name === 'freight'
        )
        if (freightHotspot) {
          if (!acc.find((option) => option.value === freightHotspot.value)) {
            acc.push({ name: freightHotspot.name, value: freightHotspot.value })
          }
        }
        return acc
      }, [])
    },

    bodyOptions() {
      return this.selectedRpsWagons.reduce((acc, wagon) => {
        const bodyHotspot = wagon.hotspots.find(
          (hotspot) => hotspot.name === 'body'
        )
        if (bodyHotspot) {
          if (!acc.find((option) => option.value === bodyHotspot.value)) {
            acc.push({ name: bodyHotspot.name, value: bodyHotspot.value })
          }
        }
        return acc
      }, [])
    },

    blOptions() {
      return this.selectedRpsWagons.reduce((acc, wagon) => {
        const blHotspot = wagon.hotspots.find(
          (hotspot) => hotspot.name === 'bl'
        )
        if (blHotspot) {
          if (!acc.find((option) => option.value === blHotspot.value)) {
            acc.push({ name: blHotspot.name, value: blHotspot.value })
          }
        }
        return acc
      }, [])
    },

    allWagonModels() {
      const models = []
      this.park.wagons.forEach((group) => {
        group.groupList.forEach((wagon) => {
          models.push(wagon.model)
        })
      })
      return [...new Set(models)] // Remove duplicates
    },

    isModelSelected() {
      return !!this.park.selectedModelId
    },
  },
  methods: {
    updateSelectedWagon() {
      // This method now selects a wagon from the *filtered* list.
      if (this.filteredWagons.length === 1) {
        this.park.selectWagon = {
          ...this.filteredWagons[0],
          rps: this.park.selectWagon.rps,
        }
        this.park.selectedModelId = this.park.selectWagon.model // Optionally set the model id
      } else {
        // Clear the selected wagon if more than one or zero wagons remain
        // Keep rps selection
        this.park.selectWagon = { rps: this.park.selectWagon.rps }
        this.park.selectedModelId = null
      }
    },

    selectWagonByModel(model) {
      if (!model) {
        this.park.selectWagon = {}
        this.park.selectedModelId = null // Clear the selection
        return
      }

      let foundWagon = null

      this.park.wagons.forEach((group) => {
        group.groupList.forEach((wagon) => {
          if (wagon.model === model) {
            foundWagon = { ...wagon, rps: group.groupId } // Include RPS
          }
        })
      })

      if (foundWagon) {
        this.park.selectWagon = foundWagon
        this.park.selectWagon.rps = foundWagon.rps
        this.park.selectWagon.freight =
          foundWagon.hotspots.find((h) => h.name === 'freight')?.value || null
        this.park.selectWagon.body =
          foundWagon.hotspots.find((h) => h.name === 'body')?.value || null
        this.park.selectWagon.bl =
          foundWagon.hotspots.find((h) => h.name === 'bl')?.value || null

        this.park.selectedModelId = foundWagon.model
      } else {
        this.park.selectWagon = {} // Clear if not found
        this.park.selectedModelId = null
      }
    },
  },
}
</script>