Begins new Taxonomy form and Terms list layout on admin side. #775.
This commit is contained in:
mateuswetah
parent
b5b1e033f1
commit
4957003c4d
|
|
@ -2380,9 +2380,9 @@
|
|||
}
|
||||
},
|
||||
"buefy": {
|
||||
"version": "0.9.22",
|
||||
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.22.tgz",
|
||||
"integrity": "sha512-rA9Bf7+2lZupL1PlQU60o7cc0Og4MRz9it5LZlKOIwPENM1uEOjH48EFnNFniLyxIcz6vln0EicS96GsVCFx1Q==",
|
||||
"version": "0.9.23",
|
||||
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.23.tgz",
|
||||
"integrity": "sha512-zkmTOUDlh7xx0ID8cSw3Wtm97nkTGU992TcIBBTC41rjKHjJTyQn9fYr8oqvVaCTLNVJmdPnnjDCuYZtHoDEog==",
|
||||
"requires": {
|
||||
"bulma": "0.9.4"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"apexcharts": "^3.37.1",
|
||||
"axios": "^1.1.3",
|
||||
"blurhash": "^2.0.5",
|
||||
"buefy": "^0.9.22",
|
||||
"buefy": "^0.9.23",
|
||||
"bulma": "^0.9.4",
|
||||
"conditioner-core": "^2.3.3",
|
||||
"countup.js": "^2.5.0",
|
||||
|
|
|
|||
|
|
@ -6,10 +6,7 @@
|
|||
{ path: $routerHelper.getTaxonomiesPath(), label: $i18n.get('taxonomies') },
|
||||
{ path: '', label: (taxonomy != null && taxonomy.name != undefined) ? taxonomy.name : $i18n.get('taxonomy') }
|
||||
]"/>
|
||||
<b-tabs
|
||||
@change="onChangeTab($event)"
|
||||
v-model="tabIndex">
|
||||
<b-tab-item :label="$i18n.get('taxonomy')">
|
||||
|
||||
<form
|
||||
v-if="taxonomy != null && taxonomy != undefined && (($route.name == 'TaxonomyCreationForm' && $userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy.current_user_can_edit))"
|
||||
class="tainacan-form"
|
||||
|
|
@ -77,35 +74,6 @@
|
|||
extra-classes="tainacan-repository-tooltip"/>
|
||||
</label>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
|
||||
<!-- Status -------------------------------- -->
|
||||
<b-field
|
||||
:addons="false"
|
||||
:label="$i18n.get('label_status')"
|
||||
:type="editFormErrors['status'] != undefined ? 'is-danger' : ''"
|
||||
:message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('taxonomies', 'status')"
|
||||
:message="$i18n.getHelperMessage('taxonomies', 'status')"
|
||||
extra-classes="tainacan-repository-tooltip"/>
|
||||
<div class="status-radios">
|
||||
<b-radio
|
||||
v-model="form.status"
|
||||
v-for="(statusOption, index) of $statusHelper.getStatuses()"
|
||||
:key="index"
|
||||
:native-value="statusOption.slug">
|
||||
<span class="icon has-text-gray">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-18px"
|
||||
:class="$statusHelper.getIcon(statusOption.slug)"/>
|
||||
</span>
|
||||
{{ statusOption.name }}
|
||||
</b-radio>
|
||||
</div>
|
||||
</b-field>
|
||||
|
||||
<!-- Slug -------------------------------- -->
|
||||
<b-field
|
||||
|
|
@ -151,6 +119,53 @@
|
|||
</div>
|
||||
</b-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
|
||||
<!-- Status -------------------------------- -->
|
||||
<b-field
|
||||
:addons="false"
|
||||
:label="$i18n.get('label_status')"
|
||||
:type="editFormErrors['status'] != undefined ? 'is-danger' : ''"
|
||||
:message="editFormErrors['status'] != undefined ? editFormErrors['status'] : ''">
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('taxonomies', 'status')"
|
||||
:message="$i18n.getHelperMessage('taxonomies', 'status')"
|
||||
extra-classes="tainacan-repository-tooltip"/>
|
||||
<div class="status-radios">
|
||||
<b-radio
|
||||
v-model="form.status"
|
||||
v-for="(statusOption, index) of $statusHelper.getStatuses()"
|
||||
:key="index"
|
||||
:native-value="statusOption.slug">
|
||||
<span class="icon has-text-gray">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-18px"
|
||||
:class="$statusHelper.getIcon(statusOption.slug)"/>
|
||||
</span>
|
||||
{{ statusOption.name }}
|
||||
</b-radio>
|
||||
</div>
|
||||
</b-field>
|
||||
|
||||
<!-- Terms List -->
|
||||
<b-field
|
||||
:addons="false"
|
||||
:label="$i18n.get('terms')">
|
||||
<help-button
|
||||
:title="$i18n.get('terms')"
|
||||
:message="$i18n.get('info_taxonomy_terms_list')"
|
||||
extra-classes="tainacan-repository-tooltip"/>
|
||||
|
||||
<terms-list
|
||||
:key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'"
|
||||
@isEditingTermUpdate="isEditingTermUpdate"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:taxonomy-slug="taxonomySlug"
|
||||
:current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/>
|
||||
</b-field>
|
||||
|
||||
<!-- Hook for extra Form options -->
|
||||
<template v-if="hasEndLeftForm">
|
||||
<form
|
||||
|
|
@ -162,7 +177,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<div class="field is-grouped form-submit">
|
||||
<footer class="footer field is-grouped form-submit">
|
||||
<div
|
||||
v-if="$route.query.recent"
|
||||
class="control">
|
||||
|
|
@ -207,7 +222,7 @@
|
|||
@click.prevent="onSubmit"
|
||||
class="button">{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
|
||||
<div v-if="!isLoading && (($route.name == 'TaxonomyCreationForm' && !$userCaps.hasCapability('tnc_rep_edit_taxonomies')) || ($route.name == 'TaxonomyEditionForm' && taxonomy && taxonomy.current_user_can_edit != undefined && !taxonomy.current_user_can_edit))">
|
||||
|
|
@ -223,22 +238,10 @@
|
|||
</section>
|
||||
</div>
|
||||
|
||||
</b-tab-item>
|
||||
|
||||
<b-tab-item :label="$i18n.get('terms')">
|
||||
<!-- Terms List -->
|
||||
<terms-list
|
||||
:key="shouldReloadTermsList ? 'termslistreloaded' : 'termslist'"
|
||||
@isEditingTermUpdate="isEditingTermUpdate"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:taxonomy-slug="taxonomySlug"
|
||||
:current-user-can-edit-taxonomy="taxonomy ? taxonomy.current_user_can_edit : false"/>
|
||||
</b-tab-item>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoadingTaxonomy"
|
||||
:can-cancel="false"/>
|
||||
</b-tabs>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -569,5 +572,56 @@
|
|||
color: var(--tainacan-info-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 14px var(--tainacan-one-column);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
background-color: var(--tainacan-gray1);
|
||||
width: calc(100% - var(--tainacan-sidebar-width, 3.25em));
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition: bottom 0.5s ease, width 0.2s linear;
|
||||
|
||||
.footer-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.update-info-section {
|
||||
color: var(--tainacan-info-color);
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.help {
|
||||
display: inline-flex;
|
||||
font-size: 1.0em;
|
||||
margin-top: 0;
|
||||
margin-left: 24px;
|
||||
|
||||
.tainacan-help-tooltip-trigger {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
padding: 13px 0.5em;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
|
||||
.update-info-section {
|
||||
margin-left: auto;margin-bottom: 0.75em;
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:is="isModal ? 'header' : 'div'"
|
||||
class="tainacan-page-title"
|
||||
:class="{ 'tainacan-modal-title': isModal }">
|
||||
<h2>{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
|
||||
<h2 style="width: 60%">{{ form & form.id && form.id != 'new' ? $i18n.get("title_term_edit") : $i18n.get("title_term_creation") }}</h2>
|
||||
<a
|
||||
v-if="form && form.url != undefined && form.url!= ''"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -5,11 +5,14 @@
|
|||
class="terms-list-header">
|
||||
<button
|
||||
v-if="currentUserCanEditTaxonomy"
|
||||
class="button is-secondary"
|
||||
class="is-inline-block add-link link-style"
|
||||
type="button"
|
||||
@click="addNewTerm(0)"
|
||||
:disabled="isEditingTerm && isLoadingTerms">
|
||||
{{ $i18n.get('label_new_term') }}
|
||||
<span class="icon is-small">
|
||||
<i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_new_term') }}
|
||||
</button>
|
||||
<b-field class="order-area">
|
||||
<label class="label">{{ $i18n.get('label_sort') }}</label>
|
||||
|
|
@ -21,6 +24,7 @@
|
|||
trap-focus>
|
||||
<button
|
||||
:aria-label="$i18n.get('label_sorting_direction')"
|
||||
type="button"
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span
|
||||
|
|
@ -76,16 +80,13 @@
|
|||
:disabled="isEditingTerm"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingTerms"
|
||||
:can-cancel="false"/>
|
||||
<div
|
||||
style="font-size: 0.875em;"
|
||||
:class="{ 'is-12': !isEditingTerm, 'is-8-fullhd is-7-fullscreen is-6-desktop is-5-tablet': isEditingTerm }"
|
||||
class="column">
|
||||
<br>
|
||||
|
||||
<div style="font-size: 0.875em; padding: 0px;">
|
||||
|
||||
<!-- Basic list, without hierarchy, used during search -->
|
||||
<template v-if="isSearching">
|
||||
|
|
@ -132,18 +133,26 @@
|
|||
{{ $i18n.get('label_view_more') + ' (' + Number(totalTerms - localTerms.length) + ' ' + $i18n.get('terms') + ')' }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="column is-4-fullhd is-5-fullscreen is-6-desktop is-7-tablet edit-forms-list"
|
||||
v-if="isEditingTerm">
|
||||
|
||||
<b-modal
|
||||
v-model="isEditingTerm"
|
||||
:width="768"
|
||||
trap-focus
|
||||
aria-role="dialog"
|
||||
aria-modal
|
||||
:can-cancel="['outside', 'escape']"
|
||||
custom-class="tainacan-modal"
|
||||
:close-button-aria-label="$i18n.get('close')">
|
||||
<term-edition-form
|
||||
:style="{ 'top': termEditionFormTop + 'px'}"
|
||||
:taxonomy-id="taxonomyId"
|
||||
:is-modal="true"
|
||||
@onEditionFinished="onTermEditionFinished($event)"
|
||||
@onEditionCanceled="onTermEditionCanceled($event)"
|
||||
@onErrorFound="formWithErrors = editTerm.id"
|
||||
:original-form="editTerm" />
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
<!-- Empty state image -->
|
||||
<div v-if="termsList.length <= 0 && !isLoadingTerms && !isEditingTerm">
|
||||
<section class="section">
|
||||
|
|
@ -585,10 +594,6 @@ export default {
|
|||
border-top: 1px solid var(--tainacan-gray1);
|
||||
}
|
||||
|
||||
.edit-forms-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1007,6 +1007,7 @@ return apply_filters( 'tainacan-i18n', [
|
|||
'info_non_located_item' => __( 'This item does not have any location based on this metadata.', 'tainacan' ),
|
||||
'info_metadata_section_hidden_conditional' => __( 'Section disabled due to a conditional metadatum value.', 'tainacan' ),
|
||||
'info_create_select_metadatum_for_conditional_section' => __( 'For configuring conditional sections, first create one select type metadatum to use its values as rules for displaing this section. The metadatum should be inside another metadatum section.', 'tainacan' ),
|
||||
'info_taxonomy_terms_list' => __( 'The list of terms that are managed by this taxonomy. They will be used as values for the taxonomy metadata.', 'tainacan' ),
|
||||
|
||||
/* Activity actions */
|
||||
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue