Closes #135.
This commit is contained in:
parent
bdfe306671
commit
f1d34cd73e
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<form action="">
|
||||
<div
|
||||
class="tainacan-modal-content"
|
||||
style="width: auto">
|
||||
<header class="tainacan-modal-title">
|
||||
<h2>{{ this.$i18n.get('collections') }}</h2>
|
||||
<hr>
|
||||
</header>
|
||||
<section class="tainacan-form">
|
||||
<p>{{ $i18n.get('instruction_select_a_target_collection') }}</p>
|
||||
<div
|
||||
v-if="!isLoading"
|
||||
class="collection-types-container">
|
||||
<div
|
||||
class="collection-type"
|
||||
v-for="(collection, index) in collections"
|
||||
:key="index"
|
||||
@click="onSelectCollection(collection)">
|
||||
<h4>{{ collection.name }}</h4>
|
||||
<p>{{ collection.length > 200 ? (collection.description.substring(0,197) + '...') : collection.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'CollectionsModal',
|
||||
data(){
|
||||
return {
|
||||
collections: [],
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('collection', [
|
||||
'fetchCollections'
|
||||
]),
|
||||
onSelectCollection(collection) {
|
||||
this.$router.push(this.$routerHelper.getNewItemPath(collection.id));
|
||||
this.$parent.close();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isLoading = true;
|
||||
this.fetchCollections({ page: 1, collectionsPerPage: 96 })
|
||||
.then((res) => {
|
||||
this.collections = res.collections;
|
||||
this.isLoading = false;
|
||||
}).catch((error) => {
|
||||
this.$console.log(error);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.collection-types-container {
|
||||
|
||||
.collection-type {
|
||||
border-bottom: 1px solid $gray2;
|
||||
padding: 15px 8.3333333%;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 15px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $gray2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item v-if="!isRepositoryLevel">
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
|
@ -149,6 +149,14 @@
|
|||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item v-if="isRepositoryLevel">
|
||||
<div
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
@click="onOpenCollectionsModal">
|
||||
{{ $i18n.get('add_one_item') }}
|
||||
</div>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
|
@ -661,6 +669,7 @@
|
|||
import Pagination from '../../components/search/pagination.vue'
|
||||
import AdvancedSearch from '../../components/advanced-search/advanced-search.vue';
|
||||
import AvailableImportersModal from '../../components/other/available-importers-modal.vue';
|
||||
import CollectionsModal from '../../components/other/collections-modal.vue';
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
|
@ -795,6 +804,13 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
onOpenCollectionsModal() {
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
component: CollectionsModal,
|
||||
hasModalCard: true
|
||||
});
|
||||
},
|
||||
updateSearch() {
|
||||
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue