Commit d952ea48 authored by Yoran Hillion's avatar Yoran Hillion
Browse files

feat: Adds share option to items

parent 4ec1d0b2
......@@ -53,6 +53,7 @@ export const initialPublicState = {
m: null,
l: null,
},
viewer: {},
},
itemList: {
pageContent: [],
......
<template>
<v-container class="d-flex flex-column">
<v-card
flat
tile
>
<div class="d-flex">
<avatar
class="ml-4 mt-4"
:name="item.title"
:image="item.thumbnails.m"
:size="64"
/>
<div class="d-flex flex-column">
<v-card-title>
{{ item.title }}
</v-card-title>
<v-card-subtitle>
<div>{{ $t('item.createdBy') }} {{ item.creator.name }}</div>
<div>{{ $t('set.label') }}: <router-link :to="setPath">{{ item.set.title }}</router-link></div>
<div>{{ visibility }}</div>
</v-card-subtitle>
</div>
<v-spacer></v-spacer>
<div class="d-flex flex-column justify-end">
<v-btn
v-if="item.canEdit"
text
tile
@click="duplicate"
>
<v-icon color="secondary">mdi-content-copy</v-icon>
</v-btn>
<v-btn
v-if="item.canEdit"
text
tile
class="align-self-end"
@click="removing = true"
>
<v-icon color="error">mdi-delete-outline</v-icon>
</v-btn>
</div>
</div>
</v-card>
<crud-item-header
:thumbnail="itemHeader.thumbnail"
:title="itemHeader.title"
:subtitles="itemHeader.subtitles"
:can-share="item.canEdit"
:disable-share="!item.canBeShared"
@share="isShareOpen = true"
:can-duplicate="item.canEdit"
@duplicate="duplicate"
:can-delete="item.canEdit"
@delete="removing = true"
/>
<confirm-box
:is-open.sync="removing"
:object="$t('item.designate')"
@cancel="removing = false"
@confirm="deleteItem"
/>
<v-dialog
v-model="isShareOpen"
:width="isMobile ? '100%' : '60%'"
persistent
>
<v-card>
<v-card-title>
{{ $t('set.share') }}
</v-card-title>
<v-card-text>
<pre v-text="integrationCode" />
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="secondary"
tile
elevation="0"
@click="isShareOpen = false"
>
{{ $t('btn.close') }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-tabs
v-if="!isMobile"
class="mt-2 flex-grow-0"
......@@ -69,8 +63,8 @@
import store from '@/store';
import { mapState, mapActions } from 'vuex';
import MobileMixin from '@/mixins/MobileMixin';
import Avatar from '@/components/common/Avatar';
import ConfirmBox from '@/components/common/ConfirmBox';
import CrudItemHeader from '@/components/crud/CrudItemHeader';
export default {
name: 'Item',
......@@ -78,8 +72,8 @@ export default {
MobileMixin,
],
components: {
Avatar,
ConfirmBox,
CrudItemHeader,
},
props: {
itemId: {
......@@ -90,16 +84,31 @@ export default {
data() {
return {
removing: false,
isShareOpen: false,
}
},
computed: {
...mapState('item', { item: 'current' }),
itemHeader() {
return {
title: this.item.title,
thumbnail: this.item.thumbnails.m,
subtitles: [
`${this.$t('item.createdBy')} ${this.item.creator.name}`,
{ label: this.$t('set.label'), value: this.item.set.title, to: this.setPath },
this.visibility,
],
};
},
setPath() {
return `/sets/${this.item.set.id}/items`
},
visibility() {
return this.$t(`visibility.${this.item.isPublic ? 'public' : 'restricted'}`)
},
integrationCode() {
return `<iframe height="1000" width="100%" src="${process.env.VUE_APP_URL}/embed/items/${this.item.id}"></iframe>`;
},
tabs() {
const tabs = [
{
......@@ -168,3 +177,9 @@ export default {
height: 100%;
}
</style>
<style scoped>
pre {
white-space: normal;
}
</style>
......@@ -103,6 +103,11 @@ export default {
required: false,
default: false,
},
mode: {
type: String,
required: false,
default: '',
},
item_ids: {
type: String,
required: false,
......@@ -122,16 +127,18 @@ export default {
title: this.currentItem.title,
subtitles: [
`${this.$t('item.createdBy')} ${this.currentItem.creator.name}`,
{
value: this.currentItem.set.title,
to: {
name: `${this.embed ? 'embedSet' : 'SetPublic'}`,
params: {
setId: this.currentItem.set.id,
...this.mode === 'set'
? [{
value: this.currentItem.set.title,
to: {
name: `${this.embed ? 'embedSet' : 'SetPublic'}`,
params: {
setId: this.currentItem.set.id,
},
...this.embed && this.item_ids ? { query: { item_ids: this.item_ids } } : {},
},
...this.embed && this.item_ids ? { query: { item_ids: this.item_ids } } : {},
},
...this.embed ? {} : { label: this.$t('set.label') } },
...this.embed ? {} : { label: this.$t('set.label') }
}] : [],
],
description: this.currentItem.description,
citation: this.currentItem.citation,
......
......@@ -97,7 +97,7 @@ export default {
to: {
name: `${this.embed ? 'embedItem' : 'itemPublic'}`,
params: { itemId: item.id },
...this.embed ? { query: this.$route.query } : {}
...this.embed ? { query: { mode: 'set', ...this.$route.query } } : {}
},
}));
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment