Exporter modal in collection page (#160)
This commit is contained in:
weryques
parent
ac8a8e2a08
commit
caf7e22cc6
|
|
@ -102,9 +102,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pre>
|
||||
{{ exporterSession }}
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -122,7 +119,6 @@
|
|||
selectedMapping: undefined,
|
||||
selectedCollection: undefined,
|
||||
sendEmail: '0',
|
||||
emailLoading: false,
|
||||
runButtonLoading: false,
|
||||
exporterSession: {},
|
||||
formErrorMessage: '',
|
||||
|
|
@ -192,53 +188,28 @@
|
|||
}
|
||||
},
|
||||
updateExporter(attributeName){
|
||||
let exporterSessionUpdated = {
|
||||
body: {},
|
||||
id: this.exporterSession.id,
|
||||
};
|
||||
|
||||
if(attributeName === 'collection.id'){
|
||||
let exporterSessionUpdated = {
|
||||
body: {
|
||||
collection: {
|
||||
id: this.selectedCollection,
|
||||
},
|
||||
},
|
||||
id: this.exporterSession.id,
|
||||
};
|
||||
|
||||
this.updateExporterSession(exporterSessionUpdated)
|
||||
.then(exporterSessionUpdated => this.verifyError(exporterSessionUpdated));
|
||||
let collection = attributeName.split('.');
|
||||
|
||||
exporterSessionUpdated.body[`${collection[0]}`] = {};
|
||||
exporterSessionUpdated.body[`${collection[0]}`][`${collection[1]}`] = this.selectedCollection;
|
||||
} else if (attributeName === 'mapping_selected'){
|
||||
let exporterSessionUpdate = {
|
||||
body: {
|
||||
mapping_selected: this.selectedMapping ? this.selectedMapping : this.selectedMapping,
|
||||
},
|
||||
id: this.exporterSession.id,
|
||||
};
|
||||
|
||||
this.updateExporterSession(exporterSessionUpdate)
|
||||
.then(exporterSessionUpdated => this.verifyError(exporterSessionUpdated));
|
||||
|
||||
exporterSessionUpdated.body[`${attributeName}`] = this.selectedMapping ? this.selectedMapping : this.selectedMapping;
|
||||
} else if (attributeName === 'send_email'){
|
||||
|
||||
let exporterSessionUpdate = {
|
||||
body: {
|
||||
send_email: this.sendEmail,
|
||||
},
|
||||
id: this.exporterSession.id,
|
||||
};
|
||||
|
||||
this.emailLoading = true;
|
||||
|
||||
this.updateExporterSession(exporterSessionUpdate)
|
||||
.then(exporterSessionUpdated => {
|
||||
this.verifyError(exporterSessionUpdated);
|
||||
this.emailLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.emailLoading = false;
|
||||
});
|
||||
exporterSessionUpdated.body[`${attributeName}`] = this.sendEmail;
|
||||
}
|
||||
|
||||
this.updateExporterSession(exporterSessionUpdated)
|
||||
.then(exporterSessionUpdated => this.verifyError(exporterSessionUpdated));
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.selectedCollection = this.$route.query.sourceCollection;
|
||||
this.exporterType = this.$route.params.exporterSlug;
|
||||
|
||||
this.isLoading = true;
|
||||
|
|
|
|||
|
|
@ -5,22 +5,37 @@
|
|||
:class="{'is-menu-compressed': isMenuCompressed, 'is-repository-level' : isRepositoryLevel}">
|
||||
<h1 v-if="isRepositoryLevel">{{ repositoryName }}</h1>
|
||||
<h1 v-else>{{ $i18n.get('collection') + '' }} <span class="has-text-weight-bold">{{ collectionName }}</span></h1>
|
||||
<a
|
||||
:href="collectionURL"
|
||||
target="_blank"
|
||||
v-if="!isRepositoryLevel"
|
||||
class="button"
|
||||
id="view-collection-button">
|
||||
|
||||
<div>
|
||||
<a
|
||||
@click="openAvailableExportersModal"
|
||||
class="button"
|
||||
id="exporter-collection-button"
|
||||
v-if="!isRepositoryLevel">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-export"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
:href="collectionURL"
|
||||
target="_blank"
|
||||
v-if="!isRepositoryLevel"
|
||||
class="button"
|
||||
id="view-collection-button">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-see"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_view_collection') }}
|
||||
</a>
|
||||
{{ $i18n.get('label_view_collection') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import AvailableExportersModal from '../other/available-exporters-modal.vue';
|
||||
|
||||
export default {
|
||||
name: 'TainacanRepositorySubheader',
|
||||
|
|
@ -49,7 +64,18 @@ export default {
|
|||
...mapGetters('collection', [
|
||||
'getCollectionName',
|
||||
'getCollectionURL'
|
||||
])
|
||||
]),
|
||||
openAvailableExportersModal(){
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
component: AvailableExportersModal,
|
||||
hasModalCard: true,
|
||||
props: {
|
||||
sourceCollection: this.collectionId,
|
||||
hideWhenManualCollection: true
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.isRepositoryLevel) {
|
||||
|
|
@ -119,6 +145,16 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
#exporter-collection-button {
|
||||
border: none;
|
||||
border-radius: 0px !important;
|
||||
height: 42px !important;
|
||||
right: 0;
|
||||
position: relative;
|
||||
background-color: $turquoise4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
top: 102px;
|
||||
padding-left: 4.166666667% !important;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<form action="">
|
||||
<div
|
||||
class="tainacan-modal-content"
|
||||
style="width: auto">
|
||||
<header class="tainacan-modal-title">
|
||||
<h2>{{ this.$i18n.get('exporters') }}</h2>
|
||||
<hr>
|
||||
</header>
|
||||
<section class="tainacan-form">
|
||||
<p>{{ $i18n.get('instruction_select_an_exporter_type') }}</p>
|
||||
<div class="exporter-types-container">
|
||||
<div
|
||||
class="exporter-type"
|
||||
v-for="exporterType in availableExporters"
|
||||
:key="exporterType.slug"
|
||||
v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
|
||||
@click="onSelectExporter(exporterType)">
|
||||
<h4>{{ exporterType.name }}</h4>
|
||||
<p>{{ exporterType.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'AvailableExportersModal',
|
||||
props: {
|
||||
sourceCollection: Number,
|
||||
hideWhenManualCollection: false
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
availableExporters: [],
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('exporter', [
|
||||
'fetchAvailableExporters'
|
||||
]),
|
||||
onSelectExporter(exporterType) {
|
||||
this.$router.push({ path: this.$routerHelper.getExporterEditionPath(exporterType.slug), query: { sourceCollection: this.sourceCollection } });
|
||||
this.$parent.close();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.isLoading = true;
|
||||
this.fetchAvailableExporters()
|
||||
.then((data) => {
|
||||
this.availableExporters = data;
|
||||
this.isLoading = false;
|
||||
}).catch((error) => {
|
||||
this.$console.log(error);
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.exporter-types-container {
|
||||
|
||||
.exporter-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>
|
||||
Loading…
Reference in New Issue