xref: /aosp_15_r20/development/tools/otagui/src/components/FileList.vue (revision 90c8c64db3049935a07c6143d7fd006e26f8ecca) 
1<template>
2  <h4> {{ label }} </h4>
3  <select
4    class="list-box"
5    :size="modelValue.length + 1"
6    v-bind="$attrs"
7    @click="selected=$event.target.value"
8  >
9    <option
10      v-for="build in modelValue"
11      :key="build"
12      :selected="build === selected"
13    >
14      {{ build }}
15    </option>
16  </select>
17  <v-row
18    class="my-2"
19  >
20    <v-col
21      cols="12"
22      md="4"
23    >
24      <v-btn
25        :disabled="!selected"
26        block
27        @click="deleteSelected"
28      >
29        Remove selected item
30      </v-btn>
31    </v-col>
32    <v-col
33      cols="12"
34      md="4"
35    >
36      <v-btn
37        v-if="movable"
38        :disabled="!selected"
39        block
40        @click="moveSelected(-1)"
41      >
42        &#128316;
43      </v-btn>
44    </v-col>
45    <v-col
46      cols="12"
47      md="4"
48    >
49      <v-btn
50        v-if="movable"
51        :disabled="!selected"
52        block
53        @click="moveSelected(1)"
54      >
55        &#128317;
56      </v-btn>
57    </v-col>
58  </v-row>
59</template>
60
61<script>
62export default {
63  props: {
64    label: {
65      type: String,
66      required: true
67    },
68    modelValue: {
69      type: Array,
70      required: true
71    },
72    movable: {
73      type: Boolean,
74      default: false
75    }
76  },
77  data() {
78    return {
79      selected: null
80    }
81  },
82  methods: {
83    deleteSelected() {
84      let deleteIndex = this.modelValue.indexOf(this.selected)
85      if (deleteIndex > 0) {
86        this.$emit(
87          "update:modelValue",
88          this.modelValue
89            .slice(0, deleteIndex)
90            .concat(
91              this.modelValue.slice(
92                deleteIndex+1,
93                this.modelValue.length
94              ))
95        )
96      } else {
97        this.$emit(
98          "update:modelValue",
99          this.modelValue.slice(1, this.modelValue.length)
100        )
101      }
102      this.selected = null
103    },
104    moveSelected(direction) {
105      let selectedIndex = this.modelValue.indexOf(this.selected)
106      if (selectedIndex + direction > this.modelValue.length ||
107        selectedIndex + direction < 0) {
108        return
109      }
110      let tempArray = Array.from(this.modelValue)
111      let temp = this.modelValue[selectedIndex]
112      tempArray[selectedIndex] = tempArray[selectedIndex + direction]
113      tempArray[selectedIndex + direction] = temp
114      this.$emit("update:modelValue", tempArray)
115    }
116  }
117}
118</script>
119
120<style scoped>
121.list-box {
122  width: 100%;
123}
124</style>