tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Begins implementation of terms child collapsing on terms list.

This commit is contained in:
Mateus Machado Luna 2018-08-09 10:21:03 -03:00
parent 82bcead23c
commit f300a51804
5 changed files with 193 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/edition/taxonomy-edition-form.vue
View File

@ -121,7 +121,7 @@
<b-tab-item :label="$i18n.get('terms')">
<!-- Terms List -->
<terms-list :taxonomy-id="taxonomyId"/>
<terms-list :taxonomy-id="taxonomyId"/>
</b-tab-item>
<b-loading

142
src/admin/components/lists/terms-list.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<div class="terms-list-header">
<div
v-if="termsList.length > 0 && !isLoadingTerms"
class="terms-list-header">
<button
class="button is-secondary"
type="button"
@ -45,34 +47,48 @@
</div>
</div>
<div class="columns">
<div class="column">
<div
:class="{ 'is-12': !isEditingTerm, 'is-8': isEditingTerm }"
class="column">
<br>
<div
class="term-item"
:class="{
'not-sortable-item': term.opened || !term.saved,
'opened-term': term.opened
'opened-term': term.opened,
'collapsed-term': term.collapsed ? term.collapsed : false
}"
:style="{'margin-left': (term.depth * 40) + 'px'}"
:style="{'margin-left': (term.depth * 40) + 'px', 'border-left-color': term.depth > 0 ? '#f2f2f2' : 'transparent'}"
v-for="(term, index) in orderedTermsList"
:key="term.id">
:key="term.id">
<span
v-if="term.depth > 0"
class="icon children-icon">
<i class="mdi mdi-24px mdi-subdirectory-arrow-right"/>
</span>
<span
class="term-name"
:class="{'is-danger': formWithErrors == term.id }">
{{ term.saved && !term.opened ? term.name : getUnsavedTermName(term) }}
</span>
<span class="has-text-gray">
{{ String(term.hasLoadedChildren) + ' | ' + String(term.hasCollapsedChildren) }}
</span>
<span
v-if="term.id != undefined"
class="label-details"
@click.prevent="isEditingTerm && term.total_children > 0 ? null : loadTerms(term.id)">
{{ term.total_children > 0 ? term.total_children + ' ' + $i18n.get('label_children_terms') : '' }}
class="label-details">
<span
class="not-saved"
v-if="!term.saved">
{{ $i18n.get('info_not_saved') }}
</span>
</span>
<span
class="children-dropdown"
v-if="!isEditingTerm && term.total_children > 0"
@click.prevent="(term.hasLoadedChildren != undefined && term.hasLoadedChildren) ? collapseTermChildren(term.id, index) : loadTerms(term.id, index)">
{{ term.total_children + ' ' + $i18n.get('label_children_terms') }}</span>
<span class="controls" >
<a
@click="addNewChildTerm(term, index)"
@ -95,9 +111,10 @@
</span>
</div>
</div>
<div
class="column edit-forms-list"
class="column is-4 edit-forms-list"
:key="index"
v-for="(term, index) in orderedTermsList"
v-show="term.opened">
@ -108,13 +125,30 @@
@onEditionCanceled="onTermEditionCanceled(term)"
@onErrorFound="formWithErrors = term.id"
:edit-form="term"/>
</div>
<b-loading
:active.sync="isLoadingTerms"
:can-cancel="false"/>
</div>
<!-- Empty state image -->
<div v-if="termsList.length <= 0 && !isLoadingTerms && !isEditingTerm">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>
<b-icon
icon="inbox"
size="is-large"/>
</p>
<p>{{ $i18n.get('info_no_terms_created_on_taxonomy') }}</p>
<button
id="button-create-term"
class="button is-secondary"
@click="addNewTerm()">
{{ $i18n.get('label_new_term') }}
</button>
</div>
</section>
</div>
<b-loading
:active.sync="isLoadingTerms"
:can-cancel="false"/>
</div>
</template>
@ -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 {

3
src/admin/scss/_variables.scss
View File

@ -238,4 +238,5 @@ $modal-z: 9999999;
visibility: visible;
transform: translate(0, 0px);
}
}
}

1
src/admin/tainacan-admin-i18n.php
View File

@ -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' ),

134
src/importer/class-tainacan-csv.php
View File

@ -168,64 +168,90 @@ class CSV extends Importer {
return false;
}
public function options_form() {
$form = '<div class="field">';
$form .= '<label class="label">' . __('Delimiter', 'tainacan') . '</label>';
$form .= '<div class="control">';
$form .= '<input type="text" class="input" name="delimiter" value="' . $this->get_option('delimiter') . '" />';
$form .= '</div>';
$form .= '</div>';
$form .= '<div class="field">';
$form .= '<label class="label">' . __('Multivalued metadata delimiter', 'tainacan') . '</label>';
$form .= '<div class="control">';
$form .= '<input type="text" class="input" name="multivalued_delimiter" value="' . $this->get_option('multivalued_delimiter') . '" />';
$form .= '</div>';
$form .= '</div>';
$form .= '<div class="field">';
$form .= '<label class="label">' . __('Encoding', 'tainacan') . '</label>';
$utf8 = ( !$this->get_option('encode') || $this->get_option('encode') === 'utf8' ) ? 'checked' : '';
$iso = ( !$this->get_option('encode') && $this->get_option('encode') === 'iso88591' ) ? 'checked' : '';
$form .= '<div class="field">';
$form .= '<label class="b-radio radio is-small">';
$form .= '<input type="radio" name="encode" value="utf8" '. $utf8 . ' />';
$form .= '<span class="check"></span>';
$form .= '<span class="control-label">';
$form .= __('UTF8', 'tainacan') . '</span></label>';
$form .= '</div>';
ob_start();
?>
$form .= '<div class="field">';
$form .= '<label class="b-radio radio is-small">';
$form .= '<input type="radio" name="encode" value="iso88591" '. $iso . ' />';
$form .= '<span class="check"></span>';
$form .= '<span class="control-label">';
$form .= __('ISO 8859-1', 'tainacan') . '</span></label>';
$form .= '</div>';
$form .= '</div>';
$form .= '<div class="field">';
$form .= '<label class="label">' . __('Enclosure character', 'tainacan') . '</label>';
$form .= '<div class="control">';
$form .= '<input type="text" class="input" size="1" name="enclosure" value="' . $this->get_option('enclosure') . '" />';
$form .= '</div>';
$form .= '</div>';
$form .= '<div class="field">';
$form .= '<label class="label">' . __('Server path', 'tainacan') . '</label>';
$form .= '<div class="control">';
$form .= '<input type="text" class="input" size="1" name="server_path" value="' . $this->get_option('server_path') . '" />';
$form .= '</div>';
$form .= '</div>';
return $form;
<span class="help-wrapper">
<a class="help-button has-text-secondary">
<span class="icon is-small">
<i class="mdi mdi-help-circle-outline" />
</span>
</a>
<div class="help-tooltip">
<div class="help-tooltip-header">
<h5>Sooper Looper</h5>
</div>
<div class="help-tooltip-body">
<p>alou alou</p>
</div>
</div>
</span>
<?php
return ob_get_clean();
}
// public function options_form() {
// $form = '<div class="field">';
// $form .= '<label class="label">' . __('Delimiter', 'tainacan') . '</label>';
// $form .= '<div class="control">';
// $form .= '<input type="text" class="input" name="delimiter" value="' . $this->get_option('delimiter') . '" />';
// $form .= '</div>';
// $form .= '</div>';
// $form .= '<div class="field">';
// $form .= '<label class="label">' . __('Multivalued metadata delimiter', 'tainacan') . '</label>';
// $form .= '<div class="control">';
// $form .= '<input type="text" class="input" name="multivalued_delimiter" value="' . $this->get_option('multivalued_delimiter') . '" />';
// $form .= '</div>';
// $form .= '</div>';
// $form .= '<div class="field">';
// $form .= '<label class="label">' . __('Encoding', 'tainacan') . '</label>';
// $utf8 = ( !$this->get_option('encode') || $this->get_option('encode') === 'utf8' ) ? 'checked' : '';
// $iso = ( !$this->get_option('encode') && $this->get_option('encode') === 'iso88591' ) ? 'checked' : '';
// $form .= '<div class="field">';
// $form .= '<label class="b-radio radio is-small">';
// $form .= '<input type="radio" name="encode" value="utf8" '. $utf8 . ' />';
// $form .= '<span class="check"></span>';
// $form .= '<span class="control-label">';
// $form .= __('UTF8', 'tainacan') . '</span></label>';
// $form .= '</div>';
// $form .= '<div class="field">';
// $form .= '<label class="b-radio radio is-small">';
// $form .= '<input type="radio" name="encode" value="iso88591" '. $iso . ' />';
// $form .= '<span class="check"></span>';
// $form .= '<span class="control-label">';
// $form .= __('ISO 8859-1', 'tainacan') . '</span></label>';
// $form .= '</div>';
// $form .= '</div>';
// $form .= '<div class="field">';
// $form .= '<label class="label">' . __('Enclosure character', 'tainacan') . '</label>';
// $form .= '<div class="control">';
// $form .= '<input type="text" class="input" size="1" name="enclosure" value="' . $this->get_option('enclosure') . '" />';
// $form .= '</div>';
// $form .= '</div>';
// $form .= '<div class="field">';
// $form .= '<label class="label">' . __('Server path', 'tainacan') . '</label>';
// $form .= '<div class="control">';
// $form .= '<input type="text" class="input" size="1" name="server_path" value="' . $this->get_option('server_path') . '" />';
// $form .= '</div>';
// $form .= '</div>';
// return $form;
// }
/**
* get the encode option and return as expected