From cb3c1d3dddfcb52acc44d180dd8bffc3ffb4982e Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 28 May 2024 18:43:31 +0100
Subject: [PATCH] feat: Add Portlet Instances Preview Drawer - MEED-6921 -
 Meeds-io/MIPs#139 (#84)

---
 .../locale/portlet/LayoutEditor_en.properties |  2 +
 .../components/PortletsManagement.vue         |  1 +
 .../components/instances/Categories.vue       |  3 +-
 .../portlets/components/instances/List.vue    |  9 +-
 .../portlets/components/portlets/Item.vue     |  9 +-
 .../portlets/components/portlets/List.vue     |  7 +-
 .../portlets/drawer/InstancesDrawer.vue       | 99 +++++++++++++++++++
 .../webapp/vue-app/portlets/initComponents.js |  3 +
 .../src/main/webapp/vue-app/portlets/main.js  |  1 +
 9 files changed, 121 insertions(+), 13 deletions(-)
 create mode 100644 layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue

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" />
       </v-carousel-transition>
     </v-card>
+    <portlets-item-instances-drawer />
     <layout-image-illustration-preview />
     <layout-analytics application-name="portletsManagement" />
   </v-app>
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 @@
     <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"
@@ -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() {
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 @@
+<!--
+
+ 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>
\ 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() {