Commit 64ba7f80 authored by Yoran Hillion's avatar Yoran Hillion
Browse files

feat: Adds carousel mode for embedded sets

parent d952ea48
......@@ -224,6 +224,7 @@ export const en_US = {
failure: "Could not affiliate {username} with this project",
},
item: {
backToSet: "Back to set",
copyOf: "Copy of",
count: "no item | 1 item | {count} items",
create: "Add item",
......@@ -241,6 +242,7 @@ export const en_US = {
metadata: "Metadata",
none: "No item.",
plural: "Items",
shareLink: "Visualize the @.lower:item.label in Pount",
update: "Update item",
updated: "The item has been updated",
viewer: "Viewer",
......@@ -584,8 +586,10 @@ export const en_US = {
update: "Update set",
destroy: "Delete set",
share: "Share",
shareModalText: "Select the items you want to share with the set.",
shareAllItems: "Share all items.",
shareCarousel: "Carousel mode",
shareLink: "Visualize the @.lower:set.label in Pount",
shareModalText: "Select the items you want to share with the set.",
empty: "This set does not contain any item yet.",
none: "No set.",
cant_read: "You do not have permission to see these items.",
......
......@@ -231,6 +231,7 @@ export const fr_FR = {
failure: "{username} n'a pas pu être ajouté aux membres de ce projet",
},
item: {
backToSet: "Revenir à l'ensemble",
copyOf: "Copie de",
count: "aucun élément | 1 élément | {count} éléments",
create: "Nouvel élément",
......@@ -248,6 +249,7 @@ export const fr_FR = {
metadata: "Métadonnées",
none: "Aucun élément.",
plural: "Éléments",
shareLink: "Visualiser l'@.lower:item.label dans Pount",
update: "Modifier l'élément",
updated: "L'élément a bien été mis à jour",
viewer: "Visionneuse",
......@@ -599,8 +601,10 @@ export const fr_FR = {
destroy: "Supprimer l'ensemble",
destroy_text: "Cela supprimera l'ensemble définitivement. Étes-vous sûr(e) ?",
share: "Partager",
shareModalText: "Veuillez séléctionner les éléments de l'ensemble à partager.",
shareAllItems: "Partager tous les éléments.",
shareCarousel: "Mode carousel",
shareLink: "Visualiser l'@.lower:set.label sur Pount",
shareModalText: "Veuillez séléctionner les éléments de l'ensemble à partager.",
empty: "Cet ensemble ne contient aucun élément pour l'instant.",
none: "Aucun ensemble.",
cant_read: "Vous n'avez pas la permission de voir le contenu de cet ensemble.",
......
......@@ -27,9 +27,7 @@
<v-card-title>
{{ $t('set.share') }}
</v-card-title>
<v-card-text>
<pre v-text="integrationCode" />
</v-card-text>
<pre class="px-6 pb-5" v-text="integrationCode" />
<v-card-actions>
<v-spacer />
<v-btn
......@@ -107,7 +105,7 @@ export default {
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>`;
return `<a href="${process.env.VUE_APP_URL}/p/items/${this.item.id}">${this.$t('item.shareLink')}</a>\n<iframe height="1000" width="100%" src="${process.env.VUE_APP_URL}/embed/items/${this.item.id}"></iframe>`;
},
tabs() {
const tabs = [
......
......@@ -103,6 +103,11 @@ export default {
required: false,
default: false,
},
from: {
type: String,
required: false,
default: 'set',
},
mode: {
type: String,
required: false,
......@@ -127,15 +132,18 @@ export default {
title: this.currentItem.title,
subtitles: [
`${this.$t('item.createdBy')} ${this.currentItem.creator.name}`,
...this.mode === 'set'
...this.from === 'set'
? [{
value: this.currentItem.set.title,
value: this.embed ? this.$t('item.backToSet') : this.currentItem.set.title,
to: {
name: `${this.embed ? 'embedSet' : 'SetPublic'}`,
name: `${this.embed ? 'embedSet' : 'setPublic'}`,
params: {
setId: this.currentItem.set.id,
},
...this.embed && this.item_ids ? { query: { item_ids: this.item_ids } } : {},
query: {
...this.embed && this.item_ids ? { item_ids: this.item_ids } : {},
...this.embed && this.mode ? { mode: this.mode } : {},
},
},
...this.embed ? {} : { label: this.$t('set.label') }
}] : [],
......
......@@ -34,10 +34,14 @@
v-model="shareAllItems"
:label="$t('set.shareAllItems')"
/>
<v-switch
v-model="shareModeCarousel"
:label="$t('set.shareCarousel')"
/>
<v-data-table
class="flex-shrink-0"
v-model="shareSelectedItems"
:items="publicItems.pageContent"
:items="publicItems"
:headers="shareItemsHeaders"
:show-select="!shareAllItems"
disable-sort
......@@ -45,9 +49,7 @@
/>
</v-col>
<v-col cols="6">
<pre>
{{ integrationCode }}
</pre>
<pre v-text="integrationCode" />
</v-col>
</v-row>
<v-card-actions>
......@@ -106,12 +108,13 @@ export default {
removing: false,
isShareOpen: false,
shareAllItems: true,
shareModeCarousel: false,
shareSelectedItems: [],
}
},
computed: {
...mapState('set', { set: 'current' }),
...mapState('community', { publicItems: 'itemList' }),
...mapState('community', ['itemList']),
itemHeader() {
return {
thumbnail: this.set.thumbnails.m,
......@@ -160,15 +163,26 @@ export default {
},
];
},
publicItems() {
return this.itemList.pageContent;
},
integrationCode() {
const sharedItems = this.shareSelectedItems.map((item) => item.id).join()
return `<iframe height="1000" width="100%" src="${process.env.VUE_APP_URL}/embed/sets/${this.set.id}${this.shareAllItems ? '' : `?item_ids=${sharedItems}`}"></iframe>`;
const params = [
...this.shareModeCarousel ? ['mode=carousel'] : [],
...this.shareAllItems ? [] : [`item_ids=${sharedItems}`],
].join('&');
return `<a href="${process.env.VUE_APP_URL}/p/sets/${this.set.id}">${this.$t('set.shareLink')}</a>\n<iframe height="1000" width="100%" src="${process.env.VUE_APP_URL}/embed/sets/${this.set.id}${params.length ? '?' : ''}${params}"></iframe>`;
},
},
watch: {
shareAllItems: function() {
this.shareSelectedItems = [];
},
shareModeCarousel: function() {
this.shareSelectedItems = [];
},
},
methods: {
...mapActions('layout', ['setExtraLinks']),
......@@ -190,6 +204,8 @@ export default {
},
onShareClose() {
this.shareSelectedItems = [];
this.shareAllItems = true;
this.shareModeCarousel = false;
this.isShareOpen = false;
},
},
......
......@@ -21,16 +21,59 @@
</v-toolbar-title>
</v-toolbar>
<template v-if="currentSet.items.length">
<crud-list-public
:items="crudListItems"
<template v-if="mode === 'carousel'">
<div class="mx-2">
<v-carousel>
<v-carousel-item
v-for="(item, index) in crudListItems"
:key="index"
:src="item.thumbnail"
:to="item.to"
>
<v-sheet
v-if="!item.thumbnail"
color="secondary"
height="100%"
>
<v-row
class="fill-height"
justify="center"
align="center"
no-gutters
>
<div class="black--text text-h3 text-center pa-2">{{ item.title }}</div>
</v-row>
</v-sheet>
<v-row
v-else
class="fill-height"
justify="center"
align="center"
no-gutters
>
<v-sheet
class="primary--text text-h3 text-center pa-2"
color="rgba(0, 0, 0, 0.3)"
>
{{ item.title }}
</v-sheet>
</v-row>
</v-carousel-item>
</v-carousel>
</div>
</template>
<template v-else>
<crud-list-public
:items="crudListItems"
class="mt-2"
/>
<v-pagination
v-if="itemList.pageCount > 1"
v-model="page"
class="mt-4"
:length="itemList.pageCount"
/>
/>
<v-pagination
v-if="itemList.pageCount > 1"
v-model="page"
class="mt-4"
:length="itemList.pageCount"
/>
</template>
</template>
<p
v-else
......@@ -60,6 +103,11 @@ export default {
required: false,
default: false,
},
mode: {
type: String,
required: false,
default: '',
},
item_ids: {
type: String,
required: false,
......@@ -93,11 +141,11 @@ export default {
id: item.id,
title: this.textTruncate(item.title, 50),
description: this.textTruncate(this.stripHtml(item.description), 150),
thumbnail: item.thumbnails.m,
thumbnail: item.thumbnails.embed,
to: {
name: `${this.embed ? 'embedItem' : 'itemPublic'}`,
params: { itemId: item.id },
...this.embed ? { query: { mode: 'set', ...this.$route.query } } : {}
...this.embed ? { query: { from: 'set', ...this.$route.query } } : {}
},
}));
},
......@@ -125,7 +173,7 @@ export default {
beforeRouteEnter(to, from, next) {
next((vm) => {
store
.dispatch('community/loadSet', { setId: to.params.setId, ...vm.embed ? { itemIds: to.query.item_ids } : {} });
.dispatch('community/loadSet', { setId: to.params.setId, ...vm.embed ? { itemIds: to.query.item_ids } : {}, ...vm.mode === 'carousel' ? { size: 0 } : {} });
});
},
beforeRouteLeave(to, from, next) {
......
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