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

Breaks several components into async imported ones. #794.

This commit is contained in:
mateuswetah 2024-01-31 15:42:58 -03:00
parent 3d77ee8266
commit c71129a597
11 changed files with 79 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/admin/components/edition/item-edition-form.vue
View File

@ -733,7 +733,7 @@
</template>
<script>
import { nextTick } from 'vue';
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames';
@ -765,7 +765,8 @@ export default {
ItemThumbnailEditionForm,
ItemDocumentEditionForm,
ItemAttachmentsEditionForm,
ItemFormFooterButtons
ItemFormFooterButtons,
TainacanFormItem: defineAsyncComponent(() => import('../metadata-types/tainacan-form-item.vue')),
},
mixins: [ formHooks, itemMetadataMixin ],
beforeRouteLeave ( to, from, next ) {

34
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

@ -86,32 +86,22 @@
</template>
<script>
import TainacanFilterNumeric from './numeric/TainacanFilterNumeric.vue';
import TainacanFilterDate from './date/TainacanFilterDate.vue';
import TainacanFilterSelectbox from './selectbox/TainacanFilterSelectbox.vue';
import TainacanFilterAutocomplete from './autocomplete/TainacanFilterAutocomplete.vue';
import TainacanFilterCheckbox from './checkbox/TainacanFilterCheckbox.vue';
import TainacanFilterTaginput from './taginput/TainacanFilterTaginput.vue';
import TainacanFilterTaxonomyCheckbox from './taxonomy/TainacanFilterCheckbox.vue';
import TainacanFilterTaxonomyTaginput from './taxonomy/TainacanFilterTaginput.vue';
import TainacanFilterDateInterval from './date-interval/TainacanFilterDateInterval.vue';
import TainacanFilterNumericInterval from './numeric-interval/TainacanFilterNumericInterval.vue';
import TainacanFilterNumericListInterval from './numeric-list-interval/TainacanFilterNumericListInterval.vue';
import { defineAsyncComponent } from 'vue';
export default {
name: 'TainacanFilterItem',
components: {
TainacanFilterNumeric,
TainacanFilterDate,
TainacanFilterSelectbox,
TainacanFilterAutocomplete,
TainacanFilterCheckbox,
TainacanFilterTaginput,
TainacanFilterTaxonomyCheckbox,
TainacanFilterTaxonomyTaginput,
TainacanFilterDateInterval,
TainacanFilterNumericInterval,
TainacanFilterNumericListInterval
TainacanFilterNumeric: defineAsyncComponent(() => import('./numeric/TainacanFilterNumeric.vue')),
TainacanFilterDate: defineAsyncComponent(() => import('./date/TainacanFilterDate.vue')),
TainacanFilterSelectbox: defineAsyncComponent(() => import('./selectbox/TainacanFilterSelectbox.vue')),
TainacanFilterAutocomplete: defineAsyncComponent(() => import('./autocomplete/TainacanFilterAutocomplete.vue')),
TainacanFilterCheckbox: defineAsyncComponent(() => import('./checkbox/TainacanFilterCheckbox.vue')),
TainacanFilterTaginput: defineAsyncComponent(() => import('./taginput/TainacanFilterTaginput.vue')),
TainacanFilterTaxonomyCheckbox: defineAsyncComponent(() => import('./taxonomy/TainacanFilterCheckbox.vue')),
TainacanFilterTaxonomyTaginput: defineAsyncComponent(() => import('./taxonomy/TainacanFilterTaginput.vue')),
TainacanFilterDateInterval: defineAsyncComponent(() => import('./date-interval/TainacanFilterDateInterval.vue')),
TainacanFilterNumericInterval: defineAsyncComponent(() => import('./numeric-interval/TainacanFilterNumericInterval.vue')),
TainacanFilterNumericListInterval: defineAsyncComponent(() => import('./numeric-list-interval/TainacanFilterNumericListInterval.vue'))
},
props: {
filter: Object,

8
src/views/admin/components/lists/items-list.vue
View File

@ -1979,12 +1979,10 @@
</template>
<script>
import { nextTick } from 'vue';
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex';
import CustomDialog from '../other/custom-dialog.vue';
import ItemCopyDialog from '../other/item-copy-dialog.vue';
import BulkEditionModal from '../modals/bulk-edition-modal.vue';
import Masonry from 'masonry-layout';
import { dateInter } from "../../js/mixins";
@ -2330,7 +2328,7 @@ export default {
openBulkEditionModal(){
this.$buefy.modal.open({
parent: this,
component: BulkEditionModal,
component: defineAsyncComponent(() => import('../modals/bulk-edition-modal.vue')),
props: {
modalTitle: this.$i18n.get('info_editing_items_in_bulk'),
totalItems: Object.keys(this.queryAllItemsSelected).length ? this.totalItems : this.selectedItems.length,
@ -2367,7 +2365,7 @@ export default {
this.$buefy.modal.open({
parent: this,
component: ItemCopyDialog,
component: defineAsyncComponent(() => import('../other/item-copy-dialog.vue')),
canCancel: false,
props: {
icon: 'items',

5
src/views/admin/components/metadata-types/compound/TainacanCompound.vue
View File

@ -121,10 +121,13 @@
</template>
<script>
import { nextTick } from 'vue';
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions } from 'vuex';
export default {
components: {
TainacanFormItem: defineAsyncComponent(() => import('../tainacan-form-item.vue')),
},
props: {
itemMetadatum: Object,
value: [String, Number, Array],

15
src/views/admin/components/metadata-types/tainacan-form-item.vue
View File

@ -166,10 +166,23 @@
</template>
<script>
import { nextTick } from 'vue';
import { nextTick, defineAsyncComponent } from 'vue';
export default {
name: 'TainacanFormItem',
components:{
TainacanText: defineAsyncComponent(() => import('./text/TainacanText.vue')),
TainacanTextarea: defineAsyncComponent(() => import('./textarea/TainacanTextarea.vue')),
TainacanSelectbox: defineAsyncComponent(() => import('./selectbox/TainacanSelectbox.vue')),
TainacanNumeric: defineAsyncComponent(() => import('./numeric/TainacanNumeric.vue')),
TainacanDate: defineAsyncComponent(() => import('./date/TainacanDate.vue')),
TainacanRelationship: defineAsyncComponent(() => import('./relationship/TainacanRelationship.vue')),
TainacanTaxonomy: defineAsyncComponent(() => import('./taxonomy/TainacanTaxonomy.vue')),
TainacanCompound: defineAsyncComponent(() => import('./compound/TainacanCompound.vue')),
TainacanUser: defineAsyncComponent(() => import('./user/TainacanUser.vue')),
TainacanGeocoordinate: defineAsyncComponent(() => import('./geocoordinate/TainacanGeoCoordinate.vue')),
TainacanURL: defineAsyncComponent(() => import('./url/TainacanURL.vue'))
},
props: {
itemMetadatum: Object,
isCollapsed: true,

1
src/views/admin/components/metadata-types/taxonomy/TainacanTaxonomy.vue
View File

@ -5,7 +5,6 @@
v-model:value="valueComponent"
:disabled="disabled || isFetchingTerms"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
:allow-select-to-create="allowSelectToCreate"
:allow-new="allowNewFromOptions"
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : $i18n.get('instruction_type_existing_term')"
:taxonomy-id="taxonomyId"

14
src/views/admin/components/modals/bulk-edition-modal.vue
View File

@ -314,9 +314,23 @@
<script>
import { mapActions, mapGetters } from 'vuex';
import { defineAsyncComponent } from 'vue';
export default {
name: "BulkEditionModal",
components:{
TainacanText: defineAsyncComponent(() => import('../metadata-types/text/TainacanText.vue')),
TainacanTextarea: defineAsyncComponent(() => import('../metadata-types/textarea/TainacanTextarea.vue')),
TainacanSelectbox: defineAsyncComponent(() => import('../metadata-types/selectbox/TainacanSelectbox.vue')),
TainacanNumeric: defineAsyncComponent(() => import('../metadata-types/numeric/TainacanNumeric.vue')),
TainacanDate: defineAsyncComponent(() => import('../metadata-types/date/TainacanDate.vue')),
TainacanRelationship: defineAsyncComponent(() => import('../metadata-types/relationship/TainacanRelationship.vue')),
TainacanTaxonomy: defineAsyncComponent(() => import('../metadata-types/taxonomy/TainacanTaxonomy.vue')),
TainacanCompound: defineAsyncComponent(() => import('../metadata-types/compound/TainacanCompound.vue')),
TainacanUser: defineAsyncComponent(() => import('../metadata-types/user/TainacanUser.vue')),
TainacanGeocoordinate: defineAsyncComponent(() => import('../metadata-types/geocoordinate/TainacanGeoCoordinate.vue')),
TainacanURL: defineAsyncComponent(() => import('../metadata-types/url/TainacanURL.vue'))
},
props: {
modalTitle: String,
totalItems: Number,

31
src/views/admin/js/admin-main.js
View File

@ -33,21 +33,6 @@ import FloatingVue from 'floating-vue';
import cssVars from 'css-vars-ponyfill';
import VueBlurHash from 'another-vue3-blurhash';
// Metadata Types
import TainacanText from '../components/metadata-types/text/TainacanText.vue';
import TainacanTextarea from '../components/metadata-types/textarea/TainacanTextarea.vue';
import TainacanSelectbox from '../components/metadata-types/selectbox/TainacanSelectbox.vue';
import TainacanNumeric from '../components/metadata-types/numeric/TainacanNumeric.vue';
import TainacanDate from '../components/metadata-types/date/TainacanDate.vue';
import TainacanRelationship from '../components/metadata-types/relationship/TainacanRelationship.vue';
import TainacanTaxonomy from '../components/metadata-types/taxonomy/TainacanTaxonomy.vue';
import TainacanCompound from '../components/metadata-types/compound/TainacanCompound.vue';
import TainacanUser from '../components/metadata-types/user/TainacanUser.vue';
import TainacanGeoCoordinate from '../components/metadata-types/geocoordinate/TainacanGeoCoordinate.vue'
import TainacanURL from '../components/metadata-types/url/TainacanURL.vue';
import TainacanFormItem from '../components/metadata-types/tainacan-form-item.vue';
// Remaining imports
import AdminPage from '../admin.vue'
import HelpButton from '../components/other/help-button.vue';
@ -204,22 +189,6 @@ export default (element) => {
}
}
/* Metadata */
app.component('tainacan-text', TainacanText);
app.component('tainacan-textarea', TainacanTextarea);
app.component('tainacan-selectbox', TainacanSelectbox);
app.component('tainacan-numeric', TainacanNumeric);
app.component('tainacan-date', TainacanDate);
app.component('tainacan-relationship', TainacanRelationship);
app.component('tainacan-taxonomy', TainacanTaxonomy);
app.component('tainacan-compound', TainacanCompound);
app.component('tainacan-user', TainacanUser);
app.component('tainacan-geocoordinate', TainacanGeoCoordinate);
app.component('tainacan-url', TainacanURL);
// Metadadum parent containers
app.component('tainacan-form-item', TainacanFormItem);
/* Others */
app.component('help-button', HelpButton);
app.component('tainacan-title', TainacanTitle);

34
src/views/gutenberg-blocks/blocks/faceted-search/theme.js
View File

@ -98,6 +98,23 @@ export default (element) => {
possibleViewModes.push(possibleDefaultViewMode);
const VueItemsList = createApp({
created() {
blockElement.setAttribute('aria-live', 'polite');
blockElement.classList.add('theme-items-list'); // This used to be on the component, but as Vue now do not renders the component inside a div...
},
mounted() {
blockElement.classList.add('has-mounted');
},
beforeMount() {
// Loads params if passed previously
if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]);
for (let key of Object.keys(existingQueries))
this.$route.query[key] = existingQueries[key];
}
},
render: () => h(ThemeSearch, {
collectionId: getDataAttribute(blockElement, 'collection-id'),
termId: getDataAttribute(blockElement, 'term-id'),
@ -131,23 +148,6 @@ export default (element) => {
showInlineViewModeOptions: isParameterTrue(getDataAttribute(blockElement, 'show-inline-view-mode-options')),
showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes'))
}),
beforeMount() {
// Loads params if passed previously
if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]);
for (let key of Object.keys(existingQueries))
this.$route.query[key] = existingQueries[key];
}
},
created() {
blockElement.setAttribute('aria-live', 'polite');
blockElement.classList.add('theme-items-list'); // This used to be on the component, but as Vue now do not renders the component inside a div...
},
mounted() {
blockElement.classList.add('has-mounted');
}
});
VueItemsList.use(store);

15
src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
View File

@ -690,21 +690,16 @@
</template>
<script>
import { nextTick } from 'vue';
import { nextTick, defineAsyncComponent } from 'vue';
import { mapActions, mapGetters } from 'vuex';
import FiltersTagsList from '../../../admin/components/search/filters-tags-list.vue';
import ItemsPagination from '../../../admin/components/search/items-pagination.vue'
import AdvancedSearch from '../../../admin/components/search/advanced-search.vue';
import ExposersModal from '../../../admin/components/modals/exposers-modal.vue';
import CustomDialog from '../../../admin/components/other/custom-dialog.vue';
export default {
name: 'ThemeSearch',
components: {
FiltersTagsList,
FiltersTagsList: defineAsyncComponent(() => import('../../../admin/components/search/filters-tags-list.vue')),
ItemsPagination,
AdvancedSearch,
ExposersModal
AdvancedSearch: defineAsyncComponent(() => import('../../../admin/components/search/advanced-search.vue')),
},
props: {
// Source settings
@ -1301,7 +1296,7 @@
openExposersModal() {
this.$buefy.modal.open({
parent: this,
component: ExposersModal,
component: defineAsyncComponent(() => import('../../../admin/components/modals/exposers-modal.vue')),
hasModalCard: true,
props: {
collectionId: this.collectionId,
@ -1586,7 +1581,7 @@
openMetatadaSortingWarningDialog({ offerCheckbox }) {
this.$buefy.modal.open({
parent: this,
component: CustomDialog,
component: defineAsyncComponent(() => import('../../../admin/components/other/custom-dialog.vue')),
props: {
icon: 'alert',
title: this.$i18n.get('label_warning'),

14
src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
View File

@ -66,6 +66,12 @@ export default (element) => {
if ( blockElement && blockElement.classList && !blockElement.classList.contains('has-mounted') ) {
const VueItemSubmission = createApp({
created() {
blockElement.classList.add('tainacan-item-submission-form'); // This used to be on the component, but as Vue now do not renders the component inside a div...
},
mounted() {
blockElement.classList.add('has-mounted');
},
render: () => h(ItemSubmissionForm, {
collectionId: getDataAttribute(blockElement, 'collection-id'),
hideFileModalButton: isParameterTrue(getDataAttribute(blockElement,'hide-file-modal-button')),
@ -96,13 +102,7 @@ export default (element) => {
return {};
}
})(),
}),
created() {
blockElement.classList.add('tainacan-item-submission-form'); // This used to be on the component, but as Vue now do not renders the component inside a div...
},
mounted() {
blockElement.classList.add('has-mounted');
}
})
});
VueItemSubmission.use(store);