Skip to content
GitLab
Commit 4ec1d0b2 authored by Yoran Hillion's avatar Yoran Hillion
Browse files

refactor: public et and item pages are used for embed version

parent a061282e
Hide whitespace changes
Inline Side-by-side
src/components/embed/EmbedItem.vue deleted 100644 → 0
View file @ a061282e
<template>
<div>
<crud-item-header
:thumbnail="item.thumbnail"
:title="item.title"
:subtitles="item.subtitles"
/>
<v-sheet
class="mt-2 d-flex flex-column"
:height="currentItem.viewer.component === 'Model' ? 910 : undefined"
>
<v-toolbar flat>
<v-toolbar-title>
{{ $t('item.description') }}
</v-toolbar-title>
</v-toolbar>
<div
v-html="!!item.description ? item.description : item.citation"
class="pa-2"
/>
<v-row class="fill-height" no-gutters>
<v-col
v-if="hasVisual"
:class="isMobile ? 'mb-1' : 'mr-1'"
class="d-flex flex-column"
:cols="isMobile ? '12' : '8'"
>
<v-toolbar flat class="flex-grow-0">
<v-toolbar-title>
{{ $t('item.file') }}
</v-toolbar-title>
<v-spacer />
<v-btn
v-if="currentItem.viewer.isDownloadable"
tile
elevation="0"
color="secondary"
:href="fileView.url"
>
{{ $t('file.download') }}
</v-btn>
</v-toolbar>
<div class="pa-2 flex-grow-1">
<component
:is="component"
:file="fileView"
/>
</div>
</v-col>
<v-col class="d-flex flex-column">
<v-toolbar flat class="flex-grow-0">
<v-toolbar-title>
{{ $t('item.metadata') }}
</v-toolbar-title>
</v-toolbar>
<div class="pa-2">
<dl>
<template
v-for="data in item.metadata"
>
<dt :key="`metadata-title-${data.id}`">{{ data.name | capitalize }}</dt>
<dd :key="`metadata-value-${data.id}`">
<ul v-if="Array.isArray(data.value) && data.value.length > 1">
<li
v-for="(value, index) in data.value"
:key="`${data.name}-${index}`"
>
{{ value }}
</li>
</ul>
<template v-else>
{{ Array.isArray(data.value) ? data.value[0] : data.value }}
</template>
</dd>
</template>
</dl>
</div>
</v-col>
</v-row>
</v-sheet>
</div>
</template>
<script>
import store from '@/store';
import { mapState, mapGetters, mapActions } from 'vuex';
import MobileMixin from '@/mixins/MobileMixin';
import CrudItemHeader from '@/components/crud/CrudItemHeader';
export default {
name: 'ItemPublic',
mixins: [
MobileMixin,
],
props: {
itemId: {
type: String,
required: true,
},
},
components: {
CrudItemHeader,
},
computed: {
...mapState('community', ['currentItem']),
...mapGetters('community', ['fileView']),
item() {
return {
thumbnail: this.currentItem.thumbnails.m,
title: this.currentItem.title,
subtitles: [
`${this.$t('item.createdBy')} ${this.currentItem.creator.name}`,
{ value: 'Retourner au set', to: { name: 'embedSet', params: { setId: this.currentItem.set.id } } },
],
description: this.currentItem.description,
citation: this.currentItem.citation,
metadata: this.currentItem.metadata,
};
},
component() {
return this.currentItem.viewer.component
? () => import(`@/components/renderer/file/${this.currentItem.viewer.component}`)
: null;
},
hasVisual() {
return !!this.currentItem.viewer.fileId
},
},
filters: {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
},
},
methods: {
...mapActions('community', ['resetPublicState']),
},
beforeRouteEnter(to, from, next) {
store
.dispatch('community/loadItem', to.params.itemId)
.then(() => next());
},
beforeRouteLeave(to, from, next) {
this.resetPublicState();
next();
},
};
</script>
<style lang="scss" scoped>
dt {
font-weight: bold;
}
dd {
margin-left: 20px;
&.bullet{
display: list-item;
list-style-type: disc;
list-style-position: inside;
}
}
</style>
src/components/embed/EmbedSet.vue deleted 100644 → 0
View file @ a061282e
<template>
<div>
<crud-item-header
:thumbnail="set.thumbnail"
:title="set.title"
:subtitles="set.subtitles"
/>
<v-sheet>
<v-toolbar flat>
<v-toolbar-title>
{{ $t('project.description') }}
</v-toolbar-title>
</v-toolbar>
<div
class="px-2"
v-html="set.description"
/>
<v-toolbar flat>
<v-toolbar-title>
{{ $t('item.plural') }}
</v-toolbar-title>
</v-toolbar>
<template v-if="currentSet.items.length">
<crud-list-public
:items="crudListItems"
/>
<v-pagination
v-if="itemList.pageCount > 1"
v-model="page"
class="mt-4"
:length="itemList.pageCount"
/>
</template>
<p
v-else
class="pa-2"
v-text="$tc('item.count', 0)"
/>
</v-sheet>
</div>
</template>
<script>
import store from '@/store';
import { mapState, mapActions } from 'vuex';
import CrudItemHeader from '@/components/crud/CrudItemHeader';
import CrudListPublic from '@/components/crud/CrudListPublic';
export default {
name: 'EmbedSet',
props: {
setId: {
type: String,
required: true,
},
},
components: {
CrudItemHeader,
CrudListPublic,
},
data: () => ({
item_ids: '',
page: 1,
}),
computed: {
...mapState('community', ['currentSet', 'itemList']),
set() {
return {
thumbnail: this.currentSet.thumbnails.m,
title: this.currentSet.title,
subtitles: [
`${this.$t('set.publisher')}: ${this.currentSet.publisher}`,
],
description: this.currentSet.description,
};
},
crudListItems() {
return this.itemList.pageContent
.map((item) => ({
id: item.id,
title: this.textTruncate(item.title, 50),
description: this.textTruncate(this.stripHtml(item.description), 150),
thumbnail: item.thumbnails.m,
to: { name: 'embedItem', params: { itemId: item.id } },
}));
},
},
watch: {
page: function(page) {
this.loadPage(page);
},
},
methods: {
...mapActions('community', ['loadItemList', 'resetPublicState']),
loadPage(page) {
let payload = { page, size: 8, setId: this.currentSet.id };
const { item_ids } = this;
if (this.item_ids) payload = { item_ids, ...payload };
this.loadItemList(payload);
},
stripHtml(content) {
return content.replace(/<\/?[^>]+>/ig, " ");
},
textTruncate(content, size) {
return content.length > size ? `${content.slice(0, size-1)}...` : content;
},
},
mounted() {
const { item_ids } = this.$router.currentRoute.query;
this.item_ids = item_ids;
},
beforeRouteEnter(to, from, next) {
store
.dispatch('community/loadSet', { setId: to.params.setId, itemIds: to.query.item_ids })
.then(() => next());
},
beforeRouteLeave(to, from, next) {
this.resetPublicState();
next();
},
};
</script>
src/router/index.js
View file @ 4ec1d0b2
......@@ -114,8 +114,12 @@ export const routes = [
{
path: '/embed/sets/:setId',
name: 'embedSet',
props: true,
component: () => import(/* webpackChunkName: "embed" */ '@/components/embed/EmbedSet'),
props: (route) => ({
embed: true,
...route.params,
...route.query,
}),
component: () => import(/* webpackChunkName: "embed" */ '@/views/sets/SetPublic'),
meta: {
layout: 'Without',
},
......@@ -123,8 +127,14 @@ export const routes = [
{
path: '/embed/items/:itemId',
name: 'embedItem',
props: true,
component: () => import(/* webpackChunkName: "embed" */ '@/components/embed/EmbedItem'),
props: (route) => {
return {
embed: true,
...route.params,
...route.query,
};
},
component: () => import(/* webpackChunkName: "embed" */ '@/views/items/ItemPublic'),
meta: {
layout: 'Without',
},
......
src/views/items/ItemPublic.vue
View file @ 4ec1d0b2
<template>
<v-container class="d-flex flex-column">
<component :is="embed ? 'div' : 'v-container'">
<crud-item-header
:thumbnail="item.thumbnail"
:title="item.title"
......@@ -78,10 +78,11 @@
</v-col>
</v-row>
</v-sheet>
</v-container>
</component>
</template>
<script>
import { VContainer } from 'vuetify/lib';
import store from '@/store';
import { mapState, mapGetters, mapActions } from 'vuex';
import MobileMixin from '@/mixins/MobileMixin';
......@@ -97,8 +98,19 @@ export default {
type: String,
required: true,
},
embed: {
type: Boolean,
required: false,
default: false,
},
item_ids: {
type: String,
required: false,
default: '',
},
},
components: {
VContainer,
CrudItemHeader,
},
computed: {
......@@ -110,7 +122,16 @@ export default {
title: this.currentItem.title,
subtitles: [
`${this.$t('item.createdBy')} ${this.currentItem.creator.name}`,
{ label: this.$t('set.label'), value: this.currentItem.set.title, to: { name: 'setPublic', params: { setId: this.currentItem.set.id } } },
{
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 ? {} : { label: this.$t('set.label') } },
],
description: this.currentItem.description,
citation: this.currentItem.citation,
......
src/views/sets/Set.vue
View file @ 4ec1d0b2
......@@ -162,7 +162,7 @@ export default {
},
integrationCode() {
const sharedItems = this.shareSelectedItems.map((item) => item.id).join()
return `<iframe src="${process.env.VUE_APP_URL}/embed/sets/${this.set.id}${this.shareAllItems ? '' : `?item_ids=${sharedItems}`}"></iframe>`;
return `<iframe height="1000" width="100%" src="${process.env.VUE_APP_URL}/embed/sets/${this.set.id}${this.shareAllItems ? '' : `?item_ids=${sharedItems}`}"></iframe>`;
},
},
watch: {
......
src/views/sets/SetPublic.vue
View file @ 4ec1d0b2
<template>
<v-container>
<component :is="embed ? 'div' : 'v-container'">
<crud-item-header
:thumbnail="set.thumbnail"
:title="set.title"
......@@ -38,10 +38,11 @@
v-text="$tc('item.count', 0)"
/>
</v-sheet>
</v-container>
</component>
</template>
<script>
import { VContainer } from 'vuetify/lib';
import store from '@/store';
import { mapState, mapActions } from 'vuex';
import CrudItemHeader from '@/components/crud/CrudItemHeader';
......@@ -54,8 +55,19 @@ export default {
type: String,
required: true,
},
embed: {
type: Boolean,
required: false,
default: false,
},
item_ids: {
type: String,
required: false,
default: '',
},
},
components: {
VContainer,
CrudItemHeader,
CrudListPublic,
},
......@@ -70,7 +82,7 @@ export default {
title: this.currentSet.title,
subtitles: [
`${this.$t('set.publisher')}: ${this.currentSet.publisher}`,
{ label: this.$t('project.label'), value: this.currentSet.project.name, to: { name: 'projectPublic', params: { projectId: this.currentSet.project.id } } },
...this.embed ? [] : [{ label: this.$t('project.label'), value: this.currentSet.project.name, to: { name: 'projectPublic', params: { projectId: this.currentSet.project.id } } }],
],
description: this.currentSet.description,
};
......@@ -82,7 +94,11 @@ export default {
title: this.textTruncate(item.title, 50),
description: this.textTruncate(this.stripHtml(item.description), 150),
thumbnail: item.thumbnails.m,
to: { name: 'itemPublic', params: { itemId: item.id } },
to: {
name: `${this.embed ? 'embedItem' : 'itemPublic'}`,
params: { itemId: item.id },
...this.embed ? { query: this.$route.query } : {}
},
}));
},
},
......@@ -94,7 +110,10 @@ export default {
methods: {
...mapActions('community', ['loadItemList', 'resetPublicState']),
loadPage(page) {
this.loadItemList({ page, size: 8, setId: this.currentSet.id })
let payload = { page, size: 8, setId: this.currentSet.id };
const { item_ids } = this;
if (this.item_ids) payload = { item_ids, ...payload };
this.loadItemList(payload);
},
stripHtml(content) {
return content.replace(/<\/?[^>]+>/ig, " ");
......@@ -104,9 +123,10 @@ export default {
},
},
beforeRouteEnter(to, from, next) {
store
.dispatch('community/loadSet', { setId: to.params.setId })
.then(() => next());
next((vm) => {
store
.dispatch('community/loadSet', { setId: to.params.setId, ...vm.embed ? { itemIds: to.query.item_ids } : {} });
});
},
beforeRouteLeave(to, from, next) {
this.resetPublicState();
......
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