Skip to content

Commit

Permalink
feat: Add Portlet Instances Preview Drawer - MEED-6921 - Meeds-io/MIP…
Browse files Browse the repository at this point in the history
  • Loading branch information
boubaker committed Jun 4, 2024
1 parent a5b776e commit cb3c1d3
Show file tree
Hide file tree
Showing 9 changed files with 121 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -252,3 +252,5 @@ layout.portletInstance.category.userSettings.name=User Settings
layout.portletInstance.category.userSettings.description=Applications for User Settings
layout.portletInstance.category.profile.name=Profile
layout.portletInstance.category.profile.description=Applications for Profile
portlets.portletInstancesList=Instances using Links
portlets.noPortletInstancesYet=No instance is using this portlet for now
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
:keyword="keyword" />
</v-carousel-transition>
</v-card>
<portlets-item-instances-drawer />
<layout-image-illustration-preview />
<layout-analytics application-name="portletsManagement" />
</v-app>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,14 @@ export default {
data: () => ({
loading: false,
selectedCategory: null,
collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
}),
computed: {
categories() {
return this.$root.portletInstanceCategories || [];
},
filteredCategories() {
const categories = this.categories?.filter?.(c => c.name)?.slice() || [];
categories.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
categories.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
return categories;
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export default {
data: () => ({
portletInstanceToDelete: null,
categoryId: 0,
collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
}),
computed: {
loading() {
Expand Down Expand Up @@ -126,7 +125,7 @@ export default {
},
noEmptyPortletInstances() {
const portletInstances = this.portletInstances?.filter?.(t => t.name) || [];
portletInstances.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
portletInstances.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
return portletInstances;
},
filteredPortletInstances() {
Expand Down Expand Up @@ -158,13 +157,13 @@ export default {
},
applySortOnItemsUsingField(portletInstances, field, desc) {
if (field === 'name') {
portletInstances.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
portletInstances.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
} else if (field === 'disabled') {
portletInstances.sort((a, b) => (a.disabled ? 0 : 1) - (b.disabled ? 0 : 1));
} else if (field === 'categoryId') {
portletInstances.sort((a, b) => this.collator.compare(this.$root.categoriesById[a.categoryId]?.name?.toLowerCase?.(), this.$root.categoriesById[b.categoryId]?.name?.toLowerCase?.()));
portletInstances.sort((a, b) => this.$root.collator.compare(this.$root.categoriesById[a.categoryId]?.name?.toLowerCase?.(), this.$root.categoriesById[b.categoryId]?.name?.toLowerCase?.()));
} else if (field === 'contentId') {
portletInstances.sort((a, b) => this.collator.compare(this.$root.portletsById[a.contentId]?.name?.toLowerCase?.(), this.$root.portletsById[b.contentId]?.name?.toLowerCase?.()));
portletInstances.sort((a, b) => this.$root.collator.compare(this.$root.portletsById[a.contentId]?.name?.toLowerCase?.(), this.$root.portletsById[b.contentId]?.name?.toLowerCase?.()));
}
if (desc) {
portletInstances.reverse();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@
<td
align="center"
width="50px">
{{ portlet.instances }}
<v-btn
text
@click="$root.$emit('portlets-instances-drawer', portlet.contentId)">
{{ instancesCount }}
</v-btn>
</td>
<td
align="center"
Expand Down Expand Up @@ -59,6 +63,9 @@ export default {
description() {
return this.$te(this.portlet?.description) ? this.$t(this.portlet?.description) : this.portlet?.description;
},
instancesCount() {
return this.$root.portletInstances.filter(a => a.contentId === this.portlet.contentId).length || 0;
},
},
watch: {
hoverMenu() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ export default {
default: null,
},
},
data: () => ({
collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
}),
computed: {
portlets() {
return this.$root.portlets;
Expand Down Expand Up @@ -100,7 +97,7 @@ export default {
},
noEmptyPortlets() {
const portlets = this.portlets?.filter?.(t => t.name) || [];
portlets.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
portlets.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
return portlets;
},
filteredPortlets() {
Expand All @@ -121,7 +118,7 @@ export default {
},
applySortOnItemsUsingField(portlets, field, desc) {
if (field === 'name') {
portlets.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
portlets.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
}
if (desc) {
portlets.reverse();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!--

This file is part of the Meeds project (https://meeds.io/).

Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io

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>
<exo-drawer
ref="drawer"
id="portletInstancesDrawer"
v-model="drawer"
allow-expand
right>
<template #title>
{{ $t('portlets.portletInstancesList') }}
</template>
<template v-if="drawer" #content>
<div v-if="applications.length" class="my-4">
<v-list-item
v-for="application in applications"
:key="application.id"
dense>
<v-list-item-content>
<v-list-item-title class="subtitle-2 text-color">
<v-card
v-on="application.illustrationId && {
click: () => openIllustration(application)
}"
flat>
{{ application.name }}
</v-card>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action class="my-auto me-4">
<v-btn
:disabled="!application.illustrationId"
class="transparent d-flex align-center justify-center"
icon
@click="openIllustration(application)">
<v-icon class="icon-default-color">fa-eye</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</div>
<div v-else class="d-flex align-center justify-center pa-4 subtitle-1">
{{ $t('portlets.noPortletInstancesYet') }}
</div>
</template>
</exo-drawer>
</template>
<script>
export default {
data: () => ({
drawer: false,
contentId: null,
}),
computed: {
applications() {
const applications = this.contentId && this.$root.portletInstances.filter(a => a.contentId === this.contentId) || [];
applications.sort((a, b) => this.$root.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
return applications;
},
},
created() {
this.$root.$on('portlets-instances-drawer', this.open);
},
beforeDestroy() {
this.$root.$off('portlets-instances-drawer', this.open);
},
methods: {
open(contentId) {
this.contentId = contentId;
this.$nextTick().then(() => this.$refs.drawer.open());
},
openIllustration(application) {
const illustrationId = application.illustrationId;
const illustrationSrc = `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/portletInstance/${application.id}/${illustrationId}`;
this.$root.$emit('layout-illustration-preview', illustrationSrc);
},
close() {
this.$refs.drawer.close();
},
},
};
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import PortletList from './components/portlets/List.vue';
import PortletItem from './components/portlets/Item.vue';
import PortletMenu from './components/portlets/Menu.vue';

import PortletInstancesDrawer from './components/portlets/drawer/InstancesDrawer.vue';

const components = {
'portlets-management': PortletsManagement,

Expand All @@ -52,6 +54,7 @@ const components = {
'portlets-list': PortletList,
'portlets-item': PortletItem,
'portlets-item-menu': PortletMenu,
'portlets-item-instances-drawer': PortletInstancesDrawer,
};

for (const key in components) {
Expand Down
1 change: 1 addition & 0 deletions layout-webapp/src/main/webapp/vue-app/portlets/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export function init() {
portletInstances: [],
portletInstanceCategories: [],
loading: 0,
collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
},
computed: {
isMobile() {
Expand Down

0 comments on commit cb3c1d3

Please sign in to comment.