started corpus indexes filters #1801

assets/css/app.scss

@@ -953,6 +953,18 @@ section[role="main-content"]{
         // }
       }
 
+      div#indexes-filters{
+        // height:$pager_h;
+        overflow: hidden;
+        box-sizing: content-box;
+        padding:1em 0 0 1.5em;
+        select{
+          option{
+            padding:0;
+          }
+        }
+      }
+
       div#page-nav{
         height:$pager_h;
         overflow: hidden;

src/components/Content/EdIndexes.vue

@@ -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>

src/pages/Edition.vue

@@ -109,6 +109,11 @@
         :loadedtextsuuids="textsuuids"
         @onClickTocItem="onClickTocItem"
       />
+      <EdIndexes
+        v-if="indexes"
+        id="indexes-filters"
+        :indexes="indexes"
+      />
       <EdPagination
         v-if="pagination"
         id="page-nav"
@@ -129,6 +134,7 @@ import { mapState, mapActions } from 'vuex'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
 import EdText from '../components/Content/EdText'
 import EdToc from '../components/Content/EdToc'
+import EdIndexes from '../components/Content/EdIndexes'
 import EdPagination from '../components/Content/EdPagination'
 
 export default {
@@ -143,6 +149,7 @@ export default {
     MainContentLayout,
     EdText,
     EdToc,
+    EdIndexes,
     EdPagination
   },
   data: () => ({
@@ -150,6 +157,7 @@ export default {
     editionid: null,
     textid: null,
     extract: null,
+    extractid: null,
     texts: [],
     textsuuids: [],
     metainfotitle: undefined,
@@ -172,6 +180,8 @@ export default {
     toc: null,
     flattoc: null,
     //
+    indexes: null,
+    //
     pagination: null,
     //
     navopened: false
@@ -272,8 +282,8 @@ export default {
           console.log('Edition Corpus/setTocs', this.editionid, state.Corpus.editionsbyuuid)
           this.toc = state.Corpus.editionsbyuuid[this.editionid].toc
         }
-        if (mutation.type === 'Corpus/buildFlatTocs') {
-          console.log('Edition Corpus/buildFlatTocs', this.editionid, state.Corpus.editionsbyuuid)
+        if (mutation.type === 'Corpus/buildFlatTocsAndFilters') {
+          console.log('Edition Corpus/buildFlatTocsAndFilters', this.editionid, state.Corpus.editionsbyuuid)
           this.flattoc = state.Corpus.editionsbyuuid[this.editionid].flattoc
           // launch infinitloading
           this.inifinite_load_id += 1
@@ -282,6 +292,8 @@ export default {
           // get the first item
           // will be replaced by front page of edition
           if (!this.textid) { this.textid = this.flattoc[1] }
+          //
+          this.indexes = state.Corpus.editionsbyuuid[this.editionid].indexes
         }
         if (mutation.type === 'Corpus/setPaginations') {
           // console.log('Edition state.Coprus.editionsbyuuid', this.editionid, state.Corpus.editionsbyuuid)
@@ -302,6 +314,7 @@ export default {
       // get the first item
       // will be replaced by front page of edition
       if (!this.textid) { this.textid = this.toc[0].children[0].uuid }
+      this.indexes = this.editionsbyuuid[this.editionid].indexes
       this.pagination = this.editionsbyuuid[this.editionid].pagination
     }
   },

src/store/modules/corpus.js

@@ -41,24 +41,51 @@ export default {
       })
       // console.log('corpus editionsbyuuid', state.editionsbyuuid)
     },
-    buildFlatTocs (state, eeuid) {
-      let recurseFlatToc = (state, eduuid, a) => {
-        // console.log('recurseFlatToc', a)
+    buildFlatTocsAndFilters (state) {
+      let recurseToc = (state, eduuid, a) => {
+        // console.log('recurseToc', a)
         a.forEach((item, i) => {
           if (item) {
+            // flatToc
             state.editionsbyuuid[eduuid].flattoc.push(item.uuid)
             state.numTocsItem++
+
+            // filters
+            let indexes = item.indexes[0]
+            for (const key in indexes) {
+              // loop through indexes (objects, persons, places)
+              if (Object.hasOwnProperty.call(indexes, key)) {
+                indexes[key].forEach(element => {
+                  // loop through index elements
+                  if (!(element.uuid in state.editionsbyuuid[eduuid].indexes[key])) {
+                    state.editionsbyuuid[eduuid].indexes[key][element.uuid] = element
+                  }
+                })
+              }
+            }
+
+            // recursive loop
             if (item.children && item.children.length) {
-              recurseFlatToc(state, eduuid, item.children)
+              recurseToc(state, eduuid, item.children)
             }
           }
         })
       }
       state.editionsuuids.forEach((eduuid, i) => {
-        // console.log('buildFlatTocs', i, eduuid)
+        // console.log('buildFlatTocsAndFilters', i, eduuid)
         state.editionsbyuuid[eduuid].flattoc = []
-        recurseFlatToc(state, eduuid, state.editionsbyuuid[eduuid].toc)
-        // console.log('buildFlatTocs DONE', eduuid, state.editionsbyuuid[eduuid].flattoc)
+        state.editionsbyuuid[eduuid].indexes = {
+          objects: {},
+          persons: {},
+          places: {}
+        }
+        recurseToc(state, eduuid, state.editionsbyuuid[eduuid].toc)
+        console.log('buildFlatTocsAndFilters DONE',
+          eduuid,
+          `places: ${Object.keys(state.editionsbyuuid[eduuid].indexes['places']).length}`,
+          `objects: ${Object.keys(state.editionsbyuuid[eduuid].indexes['objects']).length}`,
+          `persons: ${Object.keys(state.editionsbyuuid[eduuid].indexes['persons']).length}`,
+          state.editionsbyuuid[eduuid].indexes)
       })
       console.log('numTocsItem', state.numTocsItem)
     },
@@ -73,6 +100,7 @@ export default {
       console.info('corpusLoaded')
       state.corpusLoaded = true
     }
+
   },
 
   // actions
@@ -84,11 +112,6 @@ export default {
           .then(({ data }) => {
             // console.log('getCorpuses authors data', data)
             commit('setAuthors', data.content)
-            // get the texts list for each corpus (aka author)
-            // let authorsUuids = []
-            // for (let author of data.content) {
-            //   authorsUuids.push(author.uuid)
-            // }
             dispatch('getEditionsList', data.content)
               .then((editionslist) => {
                 console.log('all texts returned: editionslist', editionslist)
@@ -99,9 +122,7 @@ export default {
                   .then((tocslist) => {
                     console.log('all tocs returned: tocslist', tocslist)
                     commit('setTocs', tocslist)
-                    // this.methods.testMethod()
-                    // dispatch('buildFlatTocs')
-                    commit('buildFlatTocs')
+                    commit('buildFlatTocsAndFilters')
                     dispatch('getEditionsPaginations')
                       .then((paginationslist) => {
                         console.log('all paginations returned: paginationslist', paginationslist)
@@ -188,38 +209,6 @@ export default {
           })
       }))
     }
-    // ,
-    // buildFlatTocs ({ dispatch, commit, state }) {
-    //   state.editionsuuids.forEach((eduuid, i) => {
-    //     // console.log('buildFlatTocs', i, eduuid)
-    //     dispatch('recurseFlatToc', state.editionsbyuuid[eduuid].toc)
-    //       .then((ft) => {
-    //         console.log('buildFlatTocs DONE', eduuid, ft)
-    //         state.editionsbyuuid[eduuid].flattoc = ft
-    //       })
-    //   })
-    // },
-    // recurseFlatToc ({ dispatch, commit, state }, a) {
-    //   // console.log('recurseFlatToc', a)
-    //   let na = []
-    //   // a.forEach((item, i) => {
-    //   return Promise.all(a.map(function (item) {
-    //     console.log('item', item)
-    //     na.push(item.uuid)
-    //     if (item.children && item.children.length) {
-    //       return dispatch('recurseFlatToc', item.children)
-    //         .then((nna) => {
-    //           console.log('recurseFlatToc: na, nna', na, nna)
-    //           na.concat(nna)
-    //         })
-    //     }
-    //     //  else {
-    //     //   return na
-    //     // }
-    //   }))
-    //   // })
-    //   // return na
-    // }
   },
   methods: {
     testMethod () {