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')"> <b-tab-item :label="$i18n.get('terms')">
<!-- Terms List --> <!-- Terms List -->
<terms-list :taxonomy-id="taxonomyId"/> <terms-list :taxonomy-id="taxonomyId"/>
</b-tab-item> </b-tab-item>
<b-loading <b-loading

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

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<div class="terms-list-header"> <div
v-if="termsList.length > 0 && !isLoadingTerms"
class="terms-list-header">
<button <button
class="button is-secondary" class="button is-secondary"
type="button" type="button"
@ -45,34 +47,48 @@
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">
<div class="column"> <div
:class="{ 'is-12': !isEditingTerm, 'is-8': isEditingTerm }"
class="column">
<br> <br>
<div <div
class="term-item" class="term-item"
:class="{ :class="{
'not-sortable-item': term.opened || !term.saved, '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" 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 <span
class="term-name" class="term-name"
:class="{'is-danger': formWithErrors == term.id }"> :class="{'is-danger': formWithErrors == term.id }">
{{ term.saved && !term.opened ? term.name : getUnsavedTermName(term) }} {{ term.saved && !term.opened ? term.name : getUnsavedTermName(term) }}
</span> </span>
<span class="has-text-gray">
{{ String(term.hasLoadedChildren) + ' | ' + String(term.hasCollapsedChildren) }}
</span>
<span <span
v-if="term.id != undefined" v-if="term.id != undefined"
class="label-details" 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') : '' }}
<span <span
class="not-saved" class="not-saved"
v-if="!term.saved"> v-if="!term.saved">
{{ $i18n.get('info_not_saved') }} {{ $i18n.get('info_not_saved') }}
</span> </span>
</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" > <span class="controls" >
<a <a
@click="addNewChildTerm(term, index)" @click="addNewChildTerm(term, index)"
@ -95,9 +111,10 @@
</span> </span>
</div> </div>
</div> </div>
<div <div
class="column edit-forms-list" class="column is-4 edit-forms-list"
:key="index" :key="index"
v-for="(term, index) in orderedTermsList" v-for="(term, index) in orderedTermsList"
v-show="term.opened"> v-show="term.opened">
@ -108,13 +125,30 @@
@onEditionCanceled="onTermEditionCanceled(term)" @onEditionCanceled="onTermEditionCanceled(term)"
@onErrorFound="formWithErrors = term.id" @onErrorFound="formWithErrors = term.id"
:edit-form="term"/> :edit-form="term"/>
</div> </div>
<b-loading
:active.sync="isLoadingTerms"
:can-cancel="false"/>
</div> </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> </div>
</template> </template>
@ -133,7 +167,8 @@ export default {
orderedTermsList: [], orderedTermsList: [],
order: 'asc', order: 'asc',
termEditionFormTop: 0, termEditionFormTop: 0,
searchQuery: '' searchQuery: '',
termsColapses: []
} }
}, },
props: { props: {
@ -372,13 +407,21 @@ export default {
term.opened = (this.orderedTermsList[term.id].opened === undefined ? false : this.orderedTermsList[term.id].opened); 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); 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.orderedTermsList.push(JSON.parse(JSON.stringify(term)));
}
this.buildOrderedTermsList(term.id, termDepth + 1); this.buildOrderedTermsList(term.id, termDepth + 1);
} }
}, },
generateOrderedTerms() { generateOrderedTerms() {
this.termsColapses = JSON.parse(JSON.stringify(this.orderedTermsList));
this.orderedTermsList = new Array(); this.orderedTermsList = new Array();
this.buildOrderedTermsList(0, 0); this.buildOrderedTermsList(0, 0);
}, },
@ -389,17 +432,41 @@ export default {
else else
return term.name; 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; this.isLoadingTerms = true;
let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : ''; let search = (this.searchQuery != undefined && this.searchQuery != '') ? { searchterm: this.searchQuery } : '';
this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order}) this.fetchChildTerms({ parentId: parentId, taxonomyId: this.taxonomyId, fetchOnly: '', search: search, all: '', order: this.order})
.then(() => { .then(() => {
// Fill this.form data with current data.
this.isLoadingTerms = false; if (parentIndex != undefined && parentIndex > 0) {
this.orderedTermsList[parentIndex].hasLoadedChildren = true;
}
this.generateOrderedTerms(); this.generateOrderedTerms();
this.isLoadingTerms = false;
}) })
.catch((error) => { .catch((error) => {
this.isLoadingTerms = false;
this.$console.log(error); this.$console.log(error);
}); });
} }
@ -460,15 +527,15 @@ export default {
} }
} }
.term-item { .term-item {
font-size: 14px; font-size: 14px;
padding: 0 0.75rem; padding: 0 0 0 0.75rem;
min-height: 40px; min-height: 40px;
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: space-between;
border-left: 1px solid transparent;
&:hover { &:hover {
background-color: $gray1 !important; background-color: $gray1 !important;
@ -481,14 +548,16 @@ export default {
} }
} }
.handle { .children-icon {
padding-right: 6em; color: $blue2;
position: absolute;
left: -25px;
} }
.term-name { .term-name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
font-weight: bold;
margin-left: 0.4em; margin-left: 0.4em;
margin-right: 0.4em; margin-right: 0.4em;
display: inline-block; display: inline-block;
@ -501,20 +570,26 @@ export default {
.label-details { .label-details {
font-weight: normal; font-weight: normal;
color: $gray3; color: $gray3;
margin-right: auto;
} }
.not-saved { .not-saved {
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
color: $danger; color: $danger;
} }
.children-dropdown {
margin-left: auto;
color: $blue4;
cursor: pointer;
padding-right: 1rem;
white-space: nowrap;
overflow: hidden;
}
.controls { .controls {
position: absolute;
right: 0;
visibility: hidden; visibility: hidden;
opacity: 0.0; opacity: 0.0;
background-color: $gray2; background-color: $gray2;
padding: 0.4375rem 0.875rem; padding: 0.4375rem 0.875rem;
margin-left: auto;
a { a {
margin: 0 0.375rem; margin: 0 0.375rem;
@ -533,9 +608,6 @@ export default {
cursor: default; cursor: default;
background-color: $blue1; background-color: $blue1;
.term-name {
color: $blue3;
}
&:before { &:before {
content: ''; content: '';
display: block; display: block;
@ -555,6 +627,10 @@ export default {
border-color: transparent transparent transparent $gray1; border-color: transparent transparent transparent $gray1;
} }
} }
&.collapsed-term {
display: none;
}
} }
.edit-forms-list { .edit-forms-list {

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

@ -238,4 +238,5 @@ $modal-z: 9999999;
visibility: visible; visibility: visible;
transform: translate(0, 0px); 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_draft' => __( 'No draft taxonomy found.', 'tainacan' ),
'info_no_taxonomy_trash' => __( 'No taxonomy in trash.', 'tainacan' ), 'info_no_taxonomy_trash' => __( 'No taxonomy in trash.', 'tainacan' ),
'info_no_taxonomy_created' => __( 'No taxonomy was created in this repository.', '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_created' => __( 'No item was created in this collection.', 'tainacan' ),
'info_no_item_draft' => __( 'No draft item found.', 'tainacan' ), 'info_no_item_draft' => __( 'No draft item found.', 'tainacan' ),
'info_no_item_trash' => __( 'No item in trash.', '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; return false;
} }
public function options_form() { public function options_form() {
$form = '<div class="field">';
$form .= '<label class="label">' . __('Delimiter', 'tainacan') . '</label>'; ob_start();
$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">'; <span class="help-wrapper">
$form .= '<label class="b-radio radio is-small">'; <a class="help-button has-text-secondary">
$form .= '<input type="radio" name="encode" value="iso88591" '. $iso . ' />'; <span class="icon is-small">
$form .= '<span class="check"></span>'; <i class="mdi mdi-help-circle-outline" />
$form .= '<span class="control-label">'; </span>
$form .= __('ISO 8859-1', 'tainacan') . '</span></label>'; </a>
$form .= '</div>'; <div class="help-tooltip">
<div class="help-tooltip-header">
$form .= '</div>'; <h5>Sooper Looper</h5>
</div>
$form .= '<div class="field">'; <div class="help-tooltip-body">
$form .= '<label class="label">' . __('Enclosure character', 'tainacan') . '</label>'; <p>alou alou</p>
$form .= '<div class="control">'; </div>
$form .= '<input type="text" class="input" size="1" name="enclosure" value="' . $this->get_option('enclosure') . '" />'; </div>
$form .= '</div>'; </span>
$form .= '</div>';
<?php
$form .= '<div class="field">';
$form .= '<label class="label">' . __('Server path', 'tainacan') . '</label>';
$form .= '<div class="control">'; return ob_get_clean();
$form .= '<input type="text" class="input" size="1" name="server_path" value="' . $this->get_option('server_path') . '" />';
$form .= '</div>';
$form .= '</div>';
return $form;
} }
// 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 * get the encode option and return as expected