Skip to content

Commit

Permalink
feat: Allow to Select a Space when previewing a Space Template Page -…
Browse files Browse the repository at this point in the history
… MEED-7675 - Meeds-io/MIPs#165 (#249)

This change will add a button to allow preview a space template page
with a selected space as a context.
  • Loading branch information
boubaker authored and exo-swf committed Nov 4, 2024
1 parent e543f34 commit c603093
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -350,3 +350,6 @@ layout.globalPageBackground=Page Background

layout.newPortletChoice=New Portlet
layout.existingPortletChoice=Existing Portlet
layout.previewAsASpace=View as a space
layout.searchForASpace=Search for a space
layout.noSpaceFound=No matching space found
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,8 @@ export function getStyle(container, options) {
}

export function getApplicationContent(navUri, applicationStorageId, applicationMode) {
return fetch(`/portal${navUri}?maximizedPortletId=${applicationStorageId}&showMaxWindow=true&hideSharedLayout=true&maximizedPortletMode=${applicationMode || 'VIEW'}`, {
const options = eXo.env.portal.previewSpaceId && `&previewSpaceId=${eXo.env.portal.previewSpaceId}` || '';
return fetch(`/portal${navUri}?maximizedPortletId=${applicationStorageId}&showMaxWindow=true&hideSharedLayout=true&maximizedPortletMode=${applicationMode || 'VIEW'}${options}`, {
credentials: 'include',
method: 'GET',
redirect: 'manual'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,11 @@
class="me-3" />
<layout-editor-toolbar-page-properties-button
class="me-3" />
<layout-editor-toolbar-page-space-preview-button
v-if="$root.isSpaceSiteTemplate"
class="me-3" />
<layout-editor-toolbar-page-preview-button
v-if="!pageTemplateId"
v-else-if="!pageTemplateId"
class="me-3" />
<layout-editor-toolbar-mobile-preview-button
class="me-3" />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<!--
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 - 2024 Meeds Association [email protected]
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
-->
<template>
<v-menu
v-model="menu"
:close-on-content-click="false"
:close-on-click="false"
content-class="pagePreviewMenu"
transition="slide-x-reverse-transition"
bottom
offset-y
left>
<template #activator="{on, attrs}">
<v-btn
v-bind="attrs"
v-on="on"
:title="$t('layout.previewDraftPage')"
:loading="saving"
:aria-label="$t('layout.previewDraftPage')"
class="me-3"
icon
@click.stop.prevent="menu = true">
<v-icon size="20" class="icon-default-color">fa-eye</v-icon>
</v-btn>
</template>
<v-card
class="d-flex flex-column white pa-5"
width="450"
max-width="450">
<span>{{ $t('layout.previewAsASpace') }}</span>
<identity-suggester
v-model="space"
:search-options="searchOptions"
:labels="suggesterLabels"
include-spaces />
<div class="d-flex justify-end align-center">
<v-btn
class="btn"
@click="menu = false">
{{ $t('layout.cancel') }}
</v-btn>
<v-btn
class="btn-primary ms-4"
elevation="0"
@click.stop.prevent="previewPage">
{{ $t('layout.preview') }}
</v-btn>
</div>
</v-card>
</v-menu>
</template>
<script>
export default {
data: () => ({
menu: false,
saving: false,
space: null,
searchOptions: {
filterType: 'member'
},
}),
computed: {
draftPageUrl() {
return `/portal${this.$root.draftNodeUri}?previewSpaceId=${this.space?.spaceId || ''}&mask=true`;
},
suggesterLabels() {
return {
placeholder: this.$t('layout.searchForASpace'),
noDataLabel: this.$t('layout.noSpaceFound'),
};
},
},
watch: {
menu() {
if (this.menu) {
document.addEventListener('mousedown', this.closeMenu);
} else {
document.removeEventListener('mousedown', this.closeMenu);
}
},
},
beforeDestroy() {
document.removeEventListener('mousedown', this.closeMenu);
},
methods: {
previewPage() {
this.menu = false;
this.saving = true;
this.$root.$on('layout-draft-saved', this.openPreviewPage);
this.$root.$on('layout-draft-save-error', this.stopLoading);
this.$root.$emit('layout-save-draft');
},
stopLoading() {
this.saving = false;
},
openPreviewPage() {
this.$root.$off('layout-draft-saved', this.openPreviewPage);
this.saving = false;
window.open(this.draftPageUrl, '_blank');
},
closeMenu(event) {
if (this.menu && !event?.target?.closest?.('.menuable__content__active')) {
window.setTimeout(() => {
this.menu = false;
},200);
}
},
},
};
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import SaveTemplateButton from './components/toolbar/actions/SaveTemplateButton.
import HistoryButtons from './components/toolbar/actions/HistoryButtons.vue';
import MobilePreviewButton from './components/toolbar/actions/MobilePreviewButton.vue';
import PagePreviewButton from './components/toolbar/actions/PagePreviewButton.vue';
import PageSpacePreviewButton from './components/toolbar/actions/PageSpacePreviewButton.vue';
import PagePropertiesButton from './components/toolbar/actions/PagePropertiesButton.vue';

import BorderRadiusSelector from './components/form/BorderRadiusSelector.vue';
Expand Down Expand Up @@ -81,6 +82,7 @@ const components = {
'layout-editor-toolbar-save-template-button': SaveTemplateButton,
'layout-editor-toolbar-history-buttons': HistoryButtons,
'layout-editor-toolbar-page-preview-button': PagePreviewButton,
'layout-editor-toolbar-page-space-preview-button': PageSpacePreviewButton,
'layout-editor-toolbar-page-properties-button': PagePropertiesButton,
'layout-editor-toolbar-mobile-preview-button': MobilePreviewButton,
'layout-editor-content': Content,
Expand Down
3 changes: 3 additions & 0 deletions layout-webapp/src/main/webapp/vue-app/layout-editor/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,9 @@ export function init() {
pageId() {
return this.$root.page?.state?.storageId?.replace?.('page_', '');
},
isSpaceSiteTemplate() {
return this.pageRef?.toLowerCase?.()?.indexOf('group_template::') === 0;
},
},
watch: {
movingParentId() {
Expand Down

0 comments on commit c603093

Please sign in to comment.