From 043f5acf0ddc69b0fece8e09dc8bf90593185cf7 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 16 Apr 2021 20:33:02 +0200
Subject: [PATCH] removed BaseSelectize and ZoneSelectize components

---
 app/src/components/BaseSelectize.vue | 151 ---------------------------
 app/src/components/ZoneSelectize.vue |  98 -----------------
 2 files changed, 249 deletions(-)
 delete mode 100644 app/src/components/BaseSelectize.vue
 delete mode 100644 app/src/components/ZoneSelectize.vue

diff --git a/app/src/components/BaseSelectize.vue b/app/src/components/BaseSelectize.vue
deleted file mode 100644
index 5dc6a7ce..00000000
--- a/app/src/components/BaseSelectize.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <div class="selectize-base">
-    <b-input-group>
-      <b-input-group-prepend is-text>
-        <icon iname="search-plus" />
-        <span class="ml-1">{{ label }}</span>
-      </b-input-group-prepend>
-      <b-form-input
-        :class="visible ? null : 'collapsed'"
-        aria-controls="collapse" :aria-expanded="visible ? 'true' : 'false'"
-        @focus="onInputFocus" @blur="onInputBlur" @keydown="onInputKeydown"
-        v-model="search" ref="input"
-      />
-    </b-input-group>
-
-    <b-collapse ref="collapse" v-model="visible">
-      <b-list-group tabindex="-1" @mouseover="onChoiceListOver" v-if="visible">
-        <b-list-group-item
-          v-for="(item, index) in filteredChoices" :key="item"
-          tabindex="-1" :active="index === focusedIndex" ref="choiceList"
-          @mousedown.prevent @mouseup.prevent="onSelect(item)"
-        >
-          {{ item | filter(format) }}
-        </b-list-group-item>
-      </b-list-group>
-    </b-collapse>
-  </div>
-</template>
-
-<script>
-// FIXME add accessibility to ChoiceList
-
-export default {
-  name: 'BaseSelectize',
-
-  props: {
-    choices: { type: Array, required: true },
-    label: { type: String, default: null },
-    // FIXME find a better way to pass filters
-    format: { type: Function, default: null }
-  },
-
-  data: () => ({
-    visible: false,
-    search: '',
-    focusedIndex: 0
-  }),
-
-  computed: {
-    filteredChoices () {
-      const search = this.search.toLowerCase()
-      return this.choices.filter(item => {
-        return item.toLowerCase().includes(search)
-      }).sort()
-    }
-  },
-
-  methods: {
-    onInputFocus ({ relatedTarget }) {
-      this.visible = true
-      this.focusedIndex = 0
-      // timeout needed else scrollIntoView won't work
-      if (!this.$refs.choiceList) return
-      setTimeout(() => {
-        this.$refs.choiceList[0].scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })
-      }, 50)
-    },
-
-    onInputBlur ({ relatedTarget }) {
-      if (!this.$refs.collapse.$el.contains(relatedTarget)) {
-        this.visible = false
-      }
-    },
-
-    onInputKeydown (e) {
-      const { key } = e
-      const choicesLen = this.filteredChoices.length
-      if (choicesLen < 1) return
-
-      if (key === 'ArrowDown') {
-        e.preventDefault()
-        if (this.focusedIndex <= choicesLen) {
-          this.focusedIndex++
-        }
-      } else if (key === 'ArrowUp') {
-        e.preventDefault()
-        if (this.focusedIndex > 0) {
-          this.focusedIndex--
-        }
-      } else if (key === 'Enter') {
-        this.onSelect(this.filteredChoices[this.focusedIndex])
-        this.focusedIndex = 0
-      } else {
-        this.focusedIndex = 0
-      }
-      const elemToFocus = this.$refs.choiceList[this.focusedIndex]
-      if (elemToFocus) {
-        elemToFocus.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })
-      }
-    },
-
-    onChoiceListOver ({ target }) {
-      const index = this.$refs.choiceList.indexOf(target)
-      if (index > -1) {
-        this.focusedIndex = index
-      }
-    },
-
-    onSelect (item) {
-      this.$emit('selected', { item, index: this.choices.indexOf(item) })
-    }
-  },
-
-  filters: {
-    filter: function (text, func) {
-      if (func) return func(text)
-      else return text
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.collapse {
-  position: relative;
-  width: 100%;
-}
-// disable collapse animation
-.collapsing {
-    -webkit-transition: none;
-    transition: none;
-    display: none;
-}
-
-.list-group {
-  margin-top: .5rem;
-  max-height: 10rem;
-  overflow-y: auto;
-  position: absolute;
-  z-index: 10;
-  width: 100%;
-}
-
-.list-group-item {
-  padding-top: 0;
-  padding-bottom: 0;
-  min-height: 2rem;
-  line-height: 1.75rem;
-  cursor: pointer;
-}
-</style>
diff --git a/app/src/components/ZoneSelectize.vue b/app/src/components/ZoneSelectize.vue
deleted file mode 100644
index 9361d0a1..00000000
--- a/app/src/components/ZoneSelectize.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template lang="html">
-  <div class="selectize-zone">
-    <div id="selected-items" v-if="selected.length > 0">
-      <b-button-group size="sm" v-for="item in filteredSelected" :key="item">
-        <b-button :to="itemRoute ? {name: itemRoute, params: {name: item}} : null" class="item-btn btn-light btn-outline-dark">
-          <icon :iname="itemIcon" /> {{ item | filter(format) }}
-        </b-button>
-        <b-button
-          v-if="!removable || removable(item)"
-          class="remove-btn btn-outline-dark" variant="warning"
-          @click="onRemove(item)"
-        >
-          <icon :title="$t('delete')" iname="minus" />
-        </b-button>
-      </b-button-group>
-    </div>
-
-    <base-selectize
-      v-if="choices.length"
-      :choices="choices"
-      :format="format"
-      :label="label"
-      @selected="$emit('change', { ...$event, action: 'add' })"
-    />
-  </div>
-</template>
-
-<script>
-import BaseSelectize from '@/components/BaseSelectize'
-
-export default {
-  name: 'ZoneSelectize',
-
-  props: {
-    itemIcon: { type: String, default: null },
-    itemRoute: { type: String, default: null },
-    selected: { type: Array, required: true },
-    // needed by SelectizeBase
-    choices: { type: Array, required: true },
-    label: { type: String, default: null },
-    format: { type: Function, default: null },
-    removable: { type: Function, default: null }
-  },
-
-  data: () => ({
-    visible: false,
-    search: '',
-    focusedIndex: 0
-  }),
-
-  computed: {
-    filteredSelected () {
-      return [...this.selected].sort()
-    }
-  },
-
-  methods: {
-    onRemove (item) {
-      this.$emit('change', { item, index: this.selected.indexOf(item), action: 'remove' })
-    }
-  },
-
-  filters: {
-    filter: function (text, func) {
-      if (func) return func(text)
-      else return text
-    }
-  },
-
-  components: {
-    BaseSelectize
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-#selected-items {
-  margin-bottom: .75rem;
-  display: flex;
-  flex-wrap: wrap;
-
-  .btn-group {
-    margin-right: .5rem;
-    margin-bottom: .5rem;
-
-    .item-btn {
-      .icon {
-        margin-right: .25rem;
-      }
-    }
-  }
-}
-
-.fa-minus {
-  position: relative;
-  top: 1px;
-}
-</style>