Rework index picker

sist2-vue/package-lock.json

@@ -23,7 +23,6 @@
         "vue-color": "^2.8.1",
         "vue-i18n": "^8.24.4",
         "vue-masonry-wall": "^0.3.2",
-        "vue-multiselect": "^2.1.6",
         "vue-router": "^3.2.0",
         "vue-simple-suggest": "^1.11.1",
         "vuex": "^3.4.0"
@@ -13604,15 +13603,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/vue-multiselect": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
-      "integrity": "sha512-s7jmZPlm9FeueJg1RwJtnE9KNPtME/7C8uRWSfp9/yEN4M8XcS/d+bddoyVwVnvFyRh9msFo0HWeW0vTL8Qv+w==",
-      "engines": {
-        "node": ">= 4.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/vue-observe-visibility": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
@@ -26376,11 +26366,6 @@
         "vue-observe-visibility": "^0.4.6"
       }
     },
-    "vue-multiselect": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
-      "integrity": "sha512-s7jmZPlm9FeueJg1RwJtnE9KNPtME/7C8uRWSfp9/yEN4M8XcS/d+bddoyVwVnvFyRh9msFo0HWeW0vTL8Qv+w=="
-    },
     "vue-observe-visibility": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",

sist2-vue/package.json

@@ -22,7 +22,6 @@
     "vue-color": "^2.8.1",
     "vue-i18n": "^8.24.4",
     "vue-masonry-wall": "^0.3.2",
-    "vue-multiselect": "^2.1.6",
     "vue-router": "^3.2.0",
     "vue-simple-suggest": "^1.11.1",
     "vuex": "^3.4.0"

sist2-vue/src/components/IndexPicker.vue

@@ -1,93 +1,95 @@
 <template>
-  <VueMultiselect
+  <div v-if="isMobile">
-      multiple
+    <b-form-select
-      label="name"
+        :value="selectedIndicesIds"
-      :value="selectedIndices"
+        @change="onSelect($event)"
-      :options="indices"
+        :options="indices" multiple :select-size="6" text-field="name"
-      :close-on-select="indices.length <= 1"
+        value-field="id"></b-form-select>
-      :placeholder="$t('indexPickerPlaceholder')"
+  </div>
-      @select="addItem"
+  <div v-else>
-      @remove="removeItem">
+    <b-list-group id="index-picker-desktop">
-
+      <b-list-group-item
-    <template slot="option" slot-scope="idx">
+          v-for="idx in indices"
-      <b-row>
+          @click="toggleIndex(idx)"
-        <b-col>
+          class="d-flex justify-content-between align-items-center list-group-item-action pointer">
-          <span class="mr-1">{{ idx.option.name }}</span>
+        <div class="d-flex">
-          <SmallBadge pill :text="idx.option.version"></SmallBadge>
+          <b-checkbox @change="toggleIndex(idx)" :checked="isSelected(idx)"></b-checkbox>
-        </b-col>
+          {{ idx.name }}
-      </b-row>
+          <span class="text-muted timestamp-text ml-2">{{ formatIdxDate(idx.timestamp) }}</span>
-      <b-row class="mt-1">
+        </div>
-        <b-col>
+        <b-badge class="version-badge">v{{ idx.version }}</b-badge>
-          <span>{{ formatIdxDate(idx.option.timestamp) }}</span>
+      </b-list-group-item>
-        </b-col>
+    </b-list-group>
-      </b-row>
+  </div>
-    </template>
-
-  </VueMultiselect>
 </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 {
+    onSelect(value) {
-      this.setSelectedIndices(this.selectedIndices.filter((item: Index) => item !== val))
+      this.setSelectedIndices(this.indices.filter(idx => value.includes(idx.id)));
-    },
-    addItem(val: Index): void {
-      this.setSelectedIndices([...this.selectedIndices, val])
     },
     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 scoped>
-
+.timestamp-text {
-<style>
+  line-height: 24px;
-.multiselect__option {
+  font-size: 80%;
-  padding: 5px 10px;
 }
 
-.multiselect__content-wrapper {
+.version-badge {
-  overflow: hidden;
+  color: #222 !important;
+  background: none;
 }
 
-.theme-black .multiselect__tags {
+.list-group-item {
-  background: #37474F;
+  padding: 0.2em 0.4em;
-  border: 1px solid #616161 !important
 }
 
-.theme-black .multiselect__input {
+#index-picker-desktop {
-  color: #dbdbdb;
+  overflow-y: auto;
-  background: #37474F;
+  max-height: 132px;
-}
-
-.theme-black .multiselect__content-wrapper {
-  border: none
 }
 </style>