Rework index picker

sist2-vue/src/components/IndexPicker.vue

@@ -1,93 +1,95 @@
 <template>
-  <VueMultiselect
-      multiple
-      label="name"
-      :value="selectedIndices"
-      :options="indices"
-      :close-on-select="indices.length <= 1"
-      :placeholder="$t('indexPickerPlaceholder')"
-      @select="addItem"
-      @remove="removeItem">
-
-    <template slot="option" slot-scope="idx">
-      <b-row>
-        <b-col>
-          <span class="mr-1">{{ idx.option.name }}</span>
-          <SmallBadge pill :text="idx.option.version"></SmallBadge>
-        </b-col>
-      </b-row>
-      <b-row class="mt-1">
-        <b-col>
-          <span>{{ formatIdxDate(idx.option.timestamp) }}</span>
-        </b-col>
-      </b-row>
-    </template>
-
-  </VueMultiselect>
+  <div v-if="isMobile">
+    <b-form-select
+        :value="selectedIndicesIds"
+        @change="onSelect($event)"
+        :options="indices" multiple :select-size="6" text-field="name"
+        value-field="id"></b-form-select>
+  </div>
+  <div v-else>
+    <b-list-group id="index-picker-desktop">
+      <b-list-group-item
+          v-for="idx in indices"
+          @click="toggleIndex(idx)"
+          class="d-flex justify-content-between align-items-center list-group-item-action pointer">
+        <div class="d-flex">
+          <b-checkbox @change="toggleIndex(idx)" :checked="isSelected(idx)"></b-checkbox>
+          {{ idx.name }}
+          <span class="text-muted timestamp-text ml-2">{{ formatIdxDate(idx.timestamp) }}</span>
+        </div>
+        <b-badge class="version-badge">v{{ idx.version }}</b-badge>
+      </b-list-group-item>
+    </b-list-group>
+  </div>
 </template>
 
 <script lang="ts">
-import VueMultiselect from "vue-multiselect"
 import SmallBadge from "./SmallBadge.vue"
 import {mapActions, mapGetters} from "vuex";
-import {Index} from "@/Sist2Api";
 import Vue from "vue";
 import {format} from "date-fns";
 
 export default Vue.extend({
   components: {
-    VueMultiselect,
     SmallBadge
   },
   data() {
     return {
-      loading: true
+      loading: true,
     }
   },
   computed: {
     ...mapGetters([
       "indices", "selectedIndices"
     ]),
+    selectedIndicesIds() {
+      return this.selectedIndices.map(idx => idx.id)
+    },
+    isMobile() {
+      return window.innerWidth <= 650;
+    }
   },
   methods: {
     ...mapActions({
       setSelectedIndices: "setSelectedIndices"
     }),
-    removeItem(val: Index): void {
-      this.setSelectedIndices(this.selectedIndices.filter((item: Index) => item !== val))
-    },
-    addItem(val: Index): void {
-      this.setSelectedIndices([...this.selectedIndices, val])
+    onSelect(value) {
+      this.setSelectedIndices(this.indices.filter(idx => value.includes(idx.id)));
     },
     formatIdxDate(timestamp: number): string {
       return format(new Date(timestamp * 1000), "yyyy-MM-dd");
+    },
+    toggleIndex(index) {
+      if (this.isSelected(index)) {
+        this.setSelectedIndices(this.selectedIndices.filter(idx => idx.id != index.id));
+      } else {
+        this.setSelectedIndices([index, ...this.selectedIndices]);
+      }
+    },
+    isSelected(index) {
+      return this.selectedIndices.find(idx => idx.id == index.id) != null;
     }
   },
 })
 </script>
 
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
-
-<style>
-.multiselect__option {
-  padding: 5px 10px;
+<style scoped>
+.timestamp-text {
+  line-height: 24px;
+  font-size: 80%;
 }
 
-.multiselect__content-wrapper {
-  overflow: hidden;
+.version-badge {
+  color: #222 !important;
+  background: none;
 }
 
-.theme-black .multiselect__tags {
-  background: #37474F;
-  border: 1px solid #616161 !important
+.list-group-item {
+  padding: 0.2em 0.4em;
 }
 
-.theme-black .multiselect__input {
-  color: #dbdbdb;
-  background: #37474F;
-}
-
-.theme-black .multiselect__content-wrapper {
-  border: none
+#index-picker-desktop {
+  overflow-y: auto;
+  max-height: 132px;
 }
 </style>