diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
index 2f2ae1158..65b36464c 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -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
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
index 24b59a4f7..3b5ec1819 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
@@ -43,6 +43,7 @@
:keyword="keyword" />
+
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
index 700a80d2c..15310fcd0 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
@@ -32,7 +32,6 @@ export default {
data: () => ({
loading: false,
selectedCategory: null,
- collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
}),
computed: {
categories() {
@@ -40,7 +39,7 @@ export default {
},
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;
},
},
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue
index 2963c483e..aef6b5d3d 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue
@@ -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() {
@@ -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() {
@@ -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();
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Item.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Item.vue
index 6b1156c46..b3b53277e 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Item.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Item.vue
@@ -26,7 +26,11 @@
- {{ portlet.instances }}
+
+ {{ instancesCount }}
+
|
a.contentId === this.portlet.contentId).length || 0;
+ },
},
watch: {
hoverMenu() {
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
index 1fcffe413..e252b3b0f 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
@@ -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;
@@ -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() {
@@ -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();
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue
new file mode 100644
index 000000000..dbfd0fa79
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue
@@ -0,0 +1,99 @@
+
+
+
+
+ {{ $t('portlets.portletInstancesList') }}
+
+
+
+
+
+
+
+ {{ application.name }}
+
+
+
+
+
+ fa-eye
+
+
+
+
+
+ {{ $t('portlets.noPortletInstancesYet') }}
+
+
+
+
+
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/initComponents.js b/layout-webapp/src/main/webapp/vue-app/portlets/initComponents.js
index 3566775ec..7f70ffe06 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/initComponents.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/initComponents.js
@@ -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,
@@ -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) {
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/main.js b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
index 0bdb20a64..5f5225362 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
@@ -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() {
|