started corpus indexes filters #1801

2023-03-01 18:41:25 +01:00
parent 7dbb43e0ed
commit 249d7fdb02
4 changed files with 180 additions and 49 deletions
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div
+      v-for="(opts, key) in options"
+      :key="key"
+    >
+      <v-select
+        :id="key"
+        type="select"
+        :placeholder="key"
+        append-to-body
+        :calculate-position="dropDownMenuPos"
+        :options="opts"
+        :clearable="true"
+        @input="onClickIndexItem"
+      >
+        <template v-slot:option="option">
+          <span v-html="option.label" />
+        </template>
+      </v-select>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { createPopper } from '@popperjs/core'
+
+export default {
+  name: 'EdIndexes',
+  props: {
+    indexes: Object
+  },
+  data: () => ({
+    options: {},
+    persons_selected: '',
+    objects_selected: '',
+    places_selected: ''
+  }),
+  created () {
+    this.parseIndexesToOptions()
+  },
+  // watch: {
+  //   loadedtextsuuids (n, o) {
+  //     console.log('EdToc watch loadedtxtsuuids', o, n)
+  //   }
+  // },
+  methods: {
+    parseIndexesToOptions () {
+      console.log('EdIndexes parseIndexesToOptions', this.indexes)
+      Object.keys(this.indexes).forEach(key => {
+        // console.log('OPTION', key)
+        this.options[key] = []
+        Object.keys(this.indexes[key]).forEach(uuid => {
+          // console.log('OPTIONS ITEM', key, uuid)
+          this.options[key].push({
+            code: uuid,
+            label: `${this.indexes[key][uuid].title} [${this.indexes[key][uuid].quantity}]`
+          })
+        })
+        if (!this.options[key].length) {
+          delete this.options[key]
+        }
+      })
+    },
+    dropDownMenuPos (dropdownList, component, { width }) {
+      /**
+       * We need to explicitly define the dropdown width since
+       * it is usually inherited from the parent with CSS.
+       */
+      dropdownList.style.width = width
+
+      /**
+       * Here we position the dropdownList relative to the $refs.toggle Element.
+       *
+       * The 'offset' modifier aligns the dropdown so that the $refs.toggle and
+       * the dropdownList overlap by 1 pixel.
+       *
+       * The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
+       * wrapper so that we can set some styles for when the dropdown is placed
+       * above.
+       */
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: 'top',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, -1]
+            }
+          },
+          {
+            name: 'toggleClass',
+            enabled: true,
+            phase: 'write',
+            fn ({ state }) {
+              component.$el.classList.toggle('drop-up', state.placement === 'top')
+            }
+          }]
+      })
+
+      /**
+       * To prevent memory leaks Popper needs to be destroyed.
+       * If you return function, it will be called just before dropdown is removed from DOM.
+       */
+      return () => popper.destroy()
+    },
+    onClickIndexItem (o) {
+      // this.page_selected = o
+      // this.$emit('onClickPaginationItem', o)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>