From f300a51804dd5f46ae54a5e965709ecad04f89fc Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Thu, 9 Aug 2018 10:21:03 -0300 Subject: [PATCH] Begins implementation of terms child collapsing on terms list. --- .../edition/taxonomy-edition-form.vue | 2 +- src/admin/components/lists/terms-list.vue | 142 ++++++++++++++---- src/admin/scss/_variables.scss | 3 +- src/admin/tainacan-admin-i18n.php | 1 + src/importer/class-tainacan-csv.php | 134 ++++++++++------- 5 files changed, 193 insertions(+), 89 deletions(-) diff --git a/src/admin/components/edition/taxonomy-edition-form.vue b/src/admin/components/edition/taxonomy-edition-form.vue index c8e52bde4..8b210bc14 100644 --- a/src/admin/components/edition/taxonomy-edition-form.vue +++ b/src/admin/components/edition/taxonomy-edition-form.vue @@ -121,7 +121,7 @@ - +
-
+
-
+

+
+ :key="term.id"> + + + {{ term.saved && !term.opened ? term.name : getUnsavedTermName(term) }} + + {{ String(term.hasLoadedChildren) + ' | ' + String(term.hasCollapsedChildren) }} + - {{ term.total_children > 0 ? term.total_children + ' ' + $i18n.get('label_children_terms') : '' }} + class="label-details"> {{ $i18n.get('info_not_saved') }} - + + {{ term.total_children + ' ' + $i18n.get('label_children_terms') }}
+
@@ -108,13 +125,30 @@ @onEditionCanceled="onTermEditionCanceled(term)" @onErrorFound="formWithErrors = term.id" :edit-form="term"/> - -
-
+ +
+
+
+

+ +

+

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

+ +
+
+
+
@@ -133,7 +167,8 @@ export default { orderedTermsList: [], order: 'asc', termEditionFormTop: 0, - searchQuery: '' + searchQuery: '', + termsColapses: [] } }, props: { @@ -372,13 +407,21 @@ export default { term.opened = (this.orderedTermsList[term.id].opened === undefined ? false : this.orderedTermsList[term.id].opened); term.saved = (this.orderedTermsList[term.id].saved === undefined ? true : this.orderedTermsList[term.id].saved); } - if (term.taxonomy != null) + if (term.taxonomy != null) { + let termCollapseIndex = this.termsColapses.findIndex(aTerm => aTerm.id == term.id); + if (termCollapseIndex >= 0) { + term.collapsed = this.termsColapses[termCollapseIndex].collapsed; + term.hasLoadedChildren = this.termsColapses[termCollapseIndex].hasLoadedChildren; + term.hasCollapsedChildren = this.termsColapses[termCollapseIndex].hasCollapsedChildren; + } this.orderedTermsList.push(JSON.parse(JSON.stringify(term))); + } this.buildOrderedTermsList(term.id, termDepth + 1); } }, generateOrderedTerms() { + this.termsColapses = JSON.parse(JSON.stringify(this.orderedTermsList)); this.orderedTermsList = new Array(); this.buildOrderedTermsList(0, 0); }, @@ -389,17 +432,41 @@ export default { else return term.name; }, - loadTerms(parentId) { - + collapseTermChildren(parentId, parentIndex) { + console.log(this.orderedTermsList[parentIndex].hasCollapsedChildren ) + if (this.orderedTermsList[parentIndex].hasCollapsedChildren != undefined && !this.orderedTermsList[parentIndex].hasCollapsedChildren) { + for (let i = 0; i < this.orderedTermsList.length; i++) { + if (this.orderedTermsList[i].parent == parentId) { + this.$set(this.orderedTermsList[i], 'collapsed', false); + this.collapseTermChildren(this.orderedTermsList[i].id, i); + } + } + this.$set(this.orderedTermsList[parentIndex], 'hasCollapsedChildren', true); + } else { + for (let i = 0; i < this.orderedTermsList.length; i++) { + if (this.orderedTermsList[i].parent == parentId) { + this.$set(this.orderedTermsList[i], 'collapsed', true); + this.collapseTermChildren(this.orderedTermsList[i].id, i); + } + } + this.$set(this.orderedTermsList[parentIndex], 'hasCollapsedChildren', false); + } + }, + loadTerms(parentId, parentIndex) { + this.isLoadingTerms = true; let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : ''; this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order}) .then(() => { - // Fill this.form data with current data. - this.isLoadingTerms = false; + + if (parentIndex != undefined && parentIndex > 0) { + this.orderedTermsList[parentIndex].hasLoadedChildren = true; + } this.generateOrderedTerms(); + this.isLoadingTerms = false; }) .catch((error) => { + this.isLoadingTerms = false; this.$console.log(error); }); } @@ -460,15 +527,15 @@ export default { } } - - .term-item { font-size: 14px; - padding: 0 0.75rem; + padding: 0 0 0 0.75rem; min-height: 40px; display: flex; position: relative; align-items: center; + justify-content: space-between; + border-left: 1px solid transparent; &:hover { background-color: $gray1 !important; @@ -481,14 +548,16 @@ export default { } } - .handle { - padding-right: 6em; + .children-icon { + color: $blue2; + position: absolute; + left: -25px; } + .term-name { text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; - font-weight: bold; margin-left: 0.4em; margin-right: 0.4em; display: inline-block; @@ -501,20 +570,26 @@ export default { .label-details { font-weight: normal; color: $gray3; + margin-right: auto; } .not-saved { font-style: italic; font-weight: bold; color: $danger; } + .children-dropdown { + margin-left: auto; + color: $blue4; + cursor: pointer; + padding-right: 1rem; + white-space: nowrap; + overflow: hidden; + } .controls { - position: absolute; - right: 0; visibility: hidden; opacity: 0.0; background-color: $gray2; padding: 0.4375rem 0.875rem; - margin-left: auto; a { margin: 0 0.375rem; @@ -533,9 +608,6 @@ export default { cursor: default; background-color: $blue1; - .term-name { - color: $blue3; - } &:before { content: ''; display: block; @@ -555,6 +627,10 @@ export default { border-color: transparent transparent transparent $gray1; } } + + &.collapsed-term { + display: none; + } } .edit-forms-list { diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss index 594cad761..5454af88e 100644 --- a/src/admin/scss/_variables.scss +++ b/src/admin/scss/_variables.scss @@ -238,4 +238,5 @@ $modal-z: 9999999; visibility: visible; transform: translate(0, 0px); } -} \ No newline at end of file +} + diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index ee429cc87..caa23ffb9 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -327,6 +327,7 @@ return apply_filters( 'tainacan-admin-i18n', [ 'info_no_taxonomy_draft' => __( 'No draft taxonomy found.', 'tainacan' ), 'info_no_taxonomy_trash' => __( 'No taxonomy in trash.', 'tainacan' ), 'info_no_taxonomy_created' => __( 'No taxonomy was created in this repository.', 'tainacan' ), + 'info_no_terms_created_on_taxonomy' => __( 'No term was created for this taxonomy.', 'tainacan' ), 'info_no_item_created' => __( 'No item was created in this collection.', 'tainacan' ), 'info_no_item_draft' => __( 'No draft item found.', 'tainacan' ), 'info_no_item_trash' => __( 'No item in trash.', 'tainacan' ), diff --git a/src/importer/class-tainacan-csv.php b/src/importer/class-tainacan-csv.php index 6f055adcd..0a175672c 100644 --- a/src/importer/class-tainacan-csv.php +++ b/src/importer/class-tainacan-csv.php @@ -168,64 +168,90 @@ class CSV extends Importer { return false; } - public function options_form() { - $form = '
'; - $form .= ''; - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= '
'; - - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= '
'; - - $form .= '
'; - $form .= ''; - - $utf8 = ( !$this->get_option('encode') || $this->get_option('encode') === 'utf8' ) ? 'checked' : ''; - $iso = ( !$this->get_option('encode') && $this->get_option('encode') === 'iso88591' ) ? 'checked' : ''; - - $form .= '
'; - $form .= ''; - $form .= '
'; + + ob_start(); + ?> - $form .= '
'; - $form .= ''; - $form .= '
'; - - $form .= '
'; - - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= '
'; - - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= ''; - $form .= '
'; - $form .= '
'; - - return $form; - + + + + + + +
+
+
Sooper Looper
+
+
+

alou alou

+
+
+ + + '; + // $form .= ''; + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= '
'; + + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= '
'; + + // $form .= '
'; + // $form .= ''; + + // $utf8 = ( !$this->get_option('encode') || $this->get_option('encode') === 'utf8' ) ? 'checked' : ''; + // $iso = ( !$this->get_option('encode') && $this->get_option('encode') === 'iso88591' ) ? 'checked' : ''; + + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + + // $form .= '
'; + + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= '
'; + + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= ''; + // $form .= '
'; + // $form .= '
'; + + // return $form; + + // } /** * get the encode option and return as expected