From 5cc5e08f65b362a398b3b1faf7f942bb1abd3333 Mon Sep 17 00:00:00 2001 From: weryques Date: Fri, 27 Jul 2018 16:20:56 -0300 Subject: [PATCH] Adds search in checkbox filter modal component and other improvents (issue #83) --- .../other/checkbox-filter-modal.vue | 160 +++++++++++++++--- src/admin/tainacan-admin-i18n.php | 1 + .../filter-types/taxonomy/Checkbox.vue | 23 +-- 3 files changed, 149 insertions(+), 35 deletions(-) diff --git a/src/admin/components/other/checkbox-filter-modal.vue b/src/admin/components/other/checkbox-filter-modal.vue index 458a4444b..7c784d184 100644 --- a/src/admin/components/other/checkbox-filter-modal.vue +++ b/src/admin/components/other/checkbox-filter-modal.vue @@ -6,42 +6,48 @@

{{ this.$i18n.get('filter') }} {{ filter.name }}

-
+
-
  • - {{ `${option.name} (${option.total_children})` }} + {{ `${option.name}` }} - + + />
    • -
  • +
    • +
  • +
    +
    +

    + +

    +

    {{ $i18n.get('info_no_more_options') }}

    +
    +
    +
+ + -
+
+ +
+
    +
  • + + {{ `${option.name}` }} + +
    • +
+
@@ -72,7 +111,7 @@
-
+ @@ -97,33 +136,80 @@ itemActive: false, isColumnLoading: false, loadingComponent: undefined, + totalRemaining: {}, + hierarchicalPath: [], + searchResults: [], + optionName: '', + isSearching: false, } }, created() { this.getOptionChildren(); }, methods: { + autoComplete: _.debounce( function () { + + this.isSearching = !!this.optionName.length; + + let query = `?hideempty=0&order=asc&number=10&searchterm=${this.optionName}`; + + axios.get(`/taxonomy/${this.taxonomy_id}/terms${query}`) + .then((res) => { + this.searchResults = res.data; + }).catch((error) => { + this.$console.log(error); + }) + }, 300), + highlightHierarchyPath(){ + for(let [index, el] of this.hierarchicalPath.entries()){ + let htmlEl = this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`]; + + console.log(this.$refs[`${el.column}.${el.element}-tainacan-li-checkbox-model`].classList); + + if(index == this.hierarchicalPath.length-1){ + htmlEl.classList.add('tainacan-li-checkbox-last-active') + } else { + htmlEl.classList.add('tainacan-li-checkbox-parent-active') + } + } + }, + addToHierarchicalPath(column, element){ + this.hierarchicalPath.push({ + column: column, + element: element + }); + + this.highlightHierarchyPath(); + }, removeLevelsAfter(key){ if(key != undefined){ this.finderColumns.splice(key+1); } }, - createColumn(children) { - if (children.length > 0) { - let first = undefined; + createColumn(res, column) { + let children = res.data; + this.totalRemaining = Object.assign({}, this.totalRemaining, { + [`${column == undefined ? 0 : column+1}`]: { + remaining: res.headers['x-wp-total'], + } + }); + + let first = undefined; + + if (children.length > 0) { for (let f in this.finderColumns) { if (this.finderColumns[f][0].id == children[0].id) { first = f; break; } } + } - if (first != undefined) { - this.finderColumns.splice(first, 1, children); - } else { - this.finderColumns.push(children); - } + if (first != undefined) { + this.finderColumns.splice(first, 1, children); + } else { + this.finderColumns.push(children); } }, appendMore(options, key) { @@ -131,21 +217,26 @@ this.finderColumns[key].push(option) } }, - getOptionChildren(option, key) { + getOptionChildren(option, key, index) { + + // if(key != undefined) { + // this.addToHierarchicalPath(key, index); + // } + let parent = 0; if (option) { parent = option.id; } - let query = `?hideempty=0&order=asc&parent=${parent}&number=100`; + let query = `?hideempty=0&order=asc&parent=${parent}&number=100&offset=0`; this.isColumnLoading = true; axios.get(`/taxonomy/${this.taxonomy_id}/terms${query}`) .then(res => { this.removeLevelsAfter(key); - this.createColumn(res.data); + this.createColumn(res, key); this.isColumnLoading = false; }) @@ -223,18 +314,18 @@ display: flex; justify-content: center; cursor: pointer; - border: 1px solid #f2f2f2; + border: 1px solid $gray1; margin-top: 10px; margin-bottom: 0.2rem; } .tainacan-li-checkbox-modal:hover { - background-color: #e6f4ff; + background-color: $blue1; } .tainacan-finder-columns-container { background-color: white; - border: solid 1px #f2f2f2; + border: solid 1px $gray1; display: flex; overflow: auto; padding: 0 !important; @@ -245,7 +336,7 @@ } .tainacan-finder-column { - border-right: solid 1px #f2f2f2; + border-right: solid 1px $gray1; max-height: 400px; min-height: inherit; min-width: 200px; @@ -276,6 +367,27 @@ } } + .tainacan-search-results-container { + padding: 0 20px !important; + } + + .tainacan-modal-checkbox-search-results-body { + columns: 2; + list-style: none; + } + + .tainacan-li-no-children { + padding: 3rem 1.5rem 3rem 0.5rem; + } + + .tainacan-li-checkbox-last-active { + background-color: $blue1; + } + + .tainacan-li-checkbox-parent-active { + background-color: $gray2; + } + diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 49fe01cf9..91fbad29a 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -395,6 +395,7 @@ return apply_filters( 'tainacan-admin-i18n', [ 'info_there_are_no_metadata_to_search' => __( 'There are no metadata to search', 'tainacan' ), 'info_there_are_no_metadata_in_repository_level' => __( 'There are no metadata in repository level', 'tainacan' ), 'info_import_a_collection' => __( 'Import a collection from external sources', 'tainacan' ), + 'info_no_more_options' => __( 'No more options', 'tainacan' ), // Tainacan Metadatum Types 'tainacan-text' => __( 'Text', 'tainacan' ), diff --git a/src/classes/filter-types/taxonomy/Checkbox.vue b/src/classes/filter-types/taxonomy/Checkbox.vue index d4babb415..5d99fed3d 100644 --- a/src/classes/filter-types/taxonomy/Checkbox.vue +++ b/src/classes/filter-types/taxonomy/Checkbox.vue @@ -6,13 +6,12 @@ :value="index" class="control"> {{ option.name }}
@@ -101,15 +100,17 @@ }, methods: { getValuesTaxonomy( taxonomy ){ - return axios.get(`/taxonomy/${taxonomy}/terms?hideempty=0&order=asc&parent=0&number=${this.filter.max_options}`).then( res => { - for (let item of res.data) { - this.taxonomy = item.taxonomy; - this.options.push(item); - } - }) - .catch(error => { - this.$console.log(error); - }); + return axios.get(`/taxonomy/${taxonomy}/terms?hideempty=0&order=asc&parent=0&number=${this.filter.max_options}`) + .then( res => { + for (let item of res.data) { + this.taxonomy = item.taxonomy; + this.options.push(item); + } + + }) + .catch(error => { + this.$console.log(error); + }); }, loadOptions(){ let promise = null;