Skip to content

Commit

Permalink
feat: Review UX to add node page - MEED-6835 - Meeds-io/MIPs#137 (#139)
Browse files Browse the repository at this point in the history 
This PR allows to review the ui/ux to add or edit node.
  • Loading branch information
@SaraBoutej
SaraBoutej committed Jul 22, 2024
1 parent 8a40394 commit c3ade22
Show file tree
Hide file tree
Showing 10 changed files with 346 additions and 298 deletions.
5 changes: 5 additions & 0 deletions layout-webapp/src/main/resources/locale/portlet/SiteNavigation_en.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,12 @@ siteNavigation.label.invalidLink=Invalid link
siteNavigation.label.enterUrl=Enter URL
siteNavigation.label.newTab=New tab
siteNavigation.label.sameTab=Same tab
siteNavigation.label.choosePage=Choose a page
siteNavigation.label.chooseSite=From any site
siteNavigation.label.openSameTab=Open in same tab
siteNavigation.label.pageTemplate=Select page template
siteNavigation.label.blankTemplate=Blank Templates
siteNavigation.label.defaultTemplate=Default Templates
siteNavigation.label.selectExistingPage=Select an existing page from
siteNavigation.label.sitesSuggester.searchPlaceholder=Enter a site name
siteNavigation.label.sitesSuggester.noData=No data
Expand Down
202 changes: 27 additions & 175 deletions ...e-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,44 +40,7 @@
<v-card class="mx-4 my-4 px-2 py-2 elevation-0">
<v-form
v-model="isValidForm">
<template>
<span class="font-weight-bold text-start text-truncate-2 text-color body-2">{{ $t('siteNavigation.label.selectElementType') }}</span>
<v-select
v-model="elementType"
:items="elementTypes"
item-text="text"
item-value="value"
dense
class="caption pt-1 mb-5"
outlined />
</template>
<template>
<span class="font-weight-bold text-start text-truncate-2 text-color body-2 mt-8">{{ $t('siteNavigation.label.selectOpenType') }}</span>
<v-select
v-model="target"
:items="targetTypes"
item-text="text"
item-value="value"
dense
class="caption pt-1 mb-5"
outlined />
</template>
<template v-if="isLinkElement">
<span class="font-weight-bold text-start text-color body-2 mt-8">{{ $t('siteNavigation.label.link') }}</span>
<v-text-field
v-model="link"
:placeholder="$t('siteNavigation.label.enterUrl') "
:rules="linkRules"
class="pt-0"
type="text"
required
outlined
dense />
</template>
<site-navigation-page-element
v-else
:element-type="elementType"
:selected-page="selectedPage" />
<site-navigation-page-element />
</v-form>
</v-card>
</template>
Expand All @@ -93,7 +56,7 @@
:loading="loading"
:disabled="disabled"
class="btn btn-primary ms-2"
@click="saveElement">
@click="createElement">
{{ $t('siteNavigation.label.btn.save') }}
</v-btn>
</div>
Expand All @@ -108,58 +71,22 @@ export default {
return {
elementType: 'PAGE',
target: 'SAME_TAB',
link: '',
linkRules: [url => !!(url?.match(/^((https?:\/\/)?(www\.)?[a-zA-Z0-9:._\\/+=-]+\.[^\s]{2,})|(javascript:)|(\/portal\/)/))
|| ( !url?.length && this.$t('siteNavigation.required.error.message') || this.$t('siteNavigation.label.invalidLink'))],
navigationNode: null,
elementName: null,
elementTitle: null,
pageTemplate: 'empty',
selectedPage: null,
loading: false,
resetDrawer: true,
editMode: false,
pageToEdit: false,
isValidForm: true,
};
},
computed: {
elementTypes() {
return [
{
text: this.$t('siteNavigation.label.newPage'),
value: 'PAGE',
},
{
text: this.$t('siteNavigation.label.existingPage'),
value: 'existingPage',
},
{
text: this.$t('siteNavigation.label.link'),
value: 'LINK',
},
];
},
targetTypes() {
return [
{
text: this.$t('siteNavigation.label.sameTab'),
value: 'SAME_TAB',
},
{
text: this.$t('siteNavigation.label.newTab'),
value: 'NEW_TAB',
},
];
},
isLinkElement() {
return this.elementType === 'LINK';
},
drawerTitle() {
return this.editMode && this.$t('siteNavigation.label.editElement') || this.$t('siteNavigation.addElementDrawer.title');
return this.$t('siteNavigation.addElementDrawer.title');
},
disabled() {
return !this.isValidForm || this.isLinkElement && !this.link || this.elementType === 'existingPage' && !this.selectedPage || false;
return !this.isValidForm || !this.pageTemplate || false;
},
},
created() {
Expand All @@ -169,35 +96,12 @@ export default {
this.$root.$on('existing-page-selected', this.changeSelectedPage);
},
methods: {
open(elementName, elementTitle, navigationNode, editMode) {
open(elementName, elementTitle, navigationNode) {
this.resetDrawer = true;
this.elementName = elementName;
this.elementTitle = elementTitle;
this.navigationNode = navigationNode;
this.target = navigationNode?.target;
this.editMode = editMode;
if (editMode && this.navigationNode?.pageKey) {
const pageRef = this.navigationNode.pageKey.ref ||`${ this.navigationNode.pageKey.site.typeName}::${ this.navigationNode.pageKey.site.name}::${this.navigationNode.pageKey.name}`;
this.$pageLayoutService.getPage(pageRef)
.then((page) => {
this.selectedPage = {
pageRef,
displayName: page.state.displayName || page.key.name,
};
this.pageToEdit = page;
this.elementType = page.state?.type === 'LINK' && 'LINK' || 'existingPage';
this.link = page?.state?.link;
this.$nextTick().then(() => {
this.$refs.siteNavigationAddElementDrawer.open();
this.$nextTick()
.then(() => {
this.$root.$emit('set-selected-page', page.state);
});
});
});
} else {
this.$refs.siteNavigationAddElementDrawer.open();
}
this.$refs.siteNavigationAddElementDrawer.open();
},
close() {
if (this.resetDrawer) {
Expand All @@ -211,10 +115,6 @@ export default {
},
reset() {
this.selectedPage = null;
this.pageToEdit = null;
this.elementType = 'PAGE';
this.link = '';
this.target = 'SAME_TAB';
this.$root.$emit('reset-element-drawer');
},
changePageTemplate(pageTemplate) {
Expand All @@ -223,80 +123,32 @@ export default {
changeSelectedPage(selectedPage) {
this.selectedPage = selectedPage;
},
saveElement() {
if (this.editMode) {
this.updateElement();
} else {
this.createElement();
}
},
createElement() {
if (this.elementType === 'existingPage') {
const pageRef = this.selectedPage?.pageRef;
this.$root.$emit('save-node-with-page', {
'pageRef': pageRef,
'nodeTarget': this.target,
'pageType': this.elementType
});
this.loading = false;
} else {
this.loading = true;
this.$pageLayoutService.createPage(
this.elementName,
this.elementTitle,
this.navigationNode.siteKey.name,
this.navigationNode.siteKey.type,
this.elementType, this.elementType === 'LINK' && this.link || null,
this.elementType === 'PAGE' && this.pageTemplate?.id || null
)
.then((createdPage) => {
const pageRef = createdPage?.key?.ref || `${createdPage?.key.site.typeName}::${createdPage?.key.site.name}::${createdPage?.pageContext?.key.name}`;
this.$root.$emit('save-node-with-page', {
'pageRef': pageRef,
'nodeTarget': this.target,
'pageType': this.elementType,
'createdPage': createdPage,
'openEditLayout': this.elementType === 'PAGE',
});
return createdPage;
}).then(page => {
this.$root.$emit('page-layout-created', page, this.pageTemplate);
}).catch(() => {
this.$root.$emit('alert-message', this.$t('siteNavigation.label.pageCreation.error'), 'error');
}).finally(() => this.loading = false);
}
},
updateElement() {
if (this.elementType === 'LINK') {
if (this.pageToEdit?.type === 'LINK') {
this.updatePageLink();
} else {
this.createElement();
}
} else if (this.elementType === 'PAGE') {
this.createElement();
} else if (this.elementType === 'existingPage') {
const pageRef = this.selectedPage?.pageRef;
this.loading = true;
this.$pageLayoutService.createPage(
this.elementName,
this.elementTitle,
this.navigationNode.siteKey.name,
this.navigationNode.siteKey.type,
this.elementType,
'',
this.pageTemplate?.id || null
).then((createdPage) => {
const pageRef = createdPage?.key?.ref || `${createdPage?.key.site.typeName}::${createdPage?.key.site.name}::${createdPage?.pageContext?.key.name}`;
this.$root.$emit('save-node-with-page', {
'pageRef': pageRef,
'nodeTarget': this.target,
'pageType': this.elementType
'pageType': this.elementType,
'createdPage': createdPage,
'openEditLayout': true,
});
}
return createdPage;
}).then(page => {
this.$root.$emit('page-layout-created', page, this.pageTemplate);
}).catch(() => {
this.$root.$emit('alert-message', this.$t('siteNavigation.label.pageCreation.error'), 'error');
}).finally(() => this.loading = false);
},
updatePageLink() {
const pageRef = this.pageToEdit?.key?.ref || `${this.pageToEdit?.key.site.typeName}::${this.pageToEdit?.key.site.name}::${this.pageToEdit?.key.name}`;
this.$pageLayoutService.updatePageLink(pageRef, this.link)
.then(() => {
this.$root.$emit('save-node-with-page', {
'pageRef': pageRef,
'nodeTarget': this.target,
'pageType': this.elementType
});
}).catch(() => {
this.$root.$emit('alert-message', this.$t('siteNavigation.label.pageUpdate.error'), 'error');
});
}
}
};
</script>
</script>
29 changes: 10 additions & 19 deletions ...common-layout-components/components/site-navigation/SiteNavigationExistingPageElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,14 @@
Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
-->
<template>
<div>
<span class="font-weight-bold text-start text-truncate-2 text-color body-2 mt-8">{{ $t('siteNavigation.label.selectExistingPage') }}</span>
<v-flex class="mt-4 text-left">
<v-chip
:class="allSitesChipClass"
@click="allSites = true">
<span class="text-truncate">
{{ $t('siteNavigation.label.allSites') }}
</span>
</v-chip>
<v-chip
:class="selectSiteChipClass"
@click="allSites = false">
<span class="text-truncate">
{{ $t('siteNavigation.label.selectSite') }}
</span>
</v-chip>
</v-flex>
<div class="ms-8">
<div class="d-flex align-center justify-space-between flex-grow-1">
<span>{{ $t('siteNavigation.label.choosePage') }}</span>
<v-checkbox
v-model="allSites"
:label="$t('siteNavigation.label.chooseSite')"
class="mt-0" />
</div>
<site-navigation-site-suggester
v-if="!allSites"
v-model="selectedSiteNavigation"
Expand All @@ -44,7 +34,8 @@
:page="selectedPage"
:all-sites="allSites"
:site-type="selectedSiteNavigation?.siteType"
:site-name="selectedSiteNavigation?.name" />
:site-name="selectedSiteNavigation?.name"
class="mb-8" />
</div>
</template>

Expand Down
Loading

0 comments on commit c3ade22

Please sign in to comment.