From 08a1c00e95c7d56e73ae7de77766f4f139d77fed Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Wed, 29 May 2024 18:25:17 +0100
Subject: [PATCH] feat: Add CTAs to create instance from Portlets Tab -
 MEED-6919 - Meeds-io/MIPs#139 (#90)

---
 .../locale/portlet/LayoutEditor_en.properties |   3 +-
 .../instances/drawer/InstanceDrawer.vue       |  17 ++-
 .../portlets/components/portlets/Item.vue     |   3 +
 .../portlets/components/portlets/List.vue     |  16 +++
 .../portlets/components/portlets/Menu.vue     | 131 ++++++++++++++++++
 .../portlets/drawer/InstancesDrawer.vue       |  19 ++-
 .../webapp/vue-app/portlets/initComponents.js |   2 +
 .../src/main/webapp/vue-app/portlets/main.js  |   7 +
 8 files changed, 191 insertions(+), 7 deletions(-)
 create mode 100644 layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Menu.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 b5c653346..9d0fa0aec 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -282,6 +282,7 @@ layout.portletInstanceUpdatedSuccessfully=Portlet Instance updated successfully
 
 portlets.portletInstancesList=Instances using {0}
 portlets.previewInstance=Preview the instance
-portlets.noPortletInstancesYet=No instance is using this portlet for now
+portlets.noPortletInstancesYet=Create your first instance using this portlet
 portlets.instancePreview=Preview
 portlets.uploadPreviewTitle=Upload an illustration for portlet instance
+portlets.label.createInstance=Create instance
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/drawer/InstanceDrawer.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/drawer/InstanceDrawer.vue
index d91337bdb..14588b921 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/drawer/InstanceDrawer.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/drawer/InstanceDrawer.vue
@@ -24,6 +24,7 @@
     id="portletInstanceDrawer"
     v-model="drawer"
     :loading="saving"
+    :go-back-button="goBackButton"
     allow-expand
     right>
     <template #title>
@@ -83,7 +84,7 @@
           class="mt-4" />
         <portlets-instance-portlet-input
           v-model="contentId"
-          :disabled="!isNew"
+          :disabled="!isNew || disableSelectedPortlet"
           class="mt-4" />
         <div class="d-flex align-center mt-4">
           <v-switch
@@ -134,6 +135,8 @@ export default {
     illustrationUploadId: null,
     lang: eXo.env.portal.language,
     spaceApplication: false,
+    goBackButton: false,
+    disableSelectedPortlet: false,
     saving: false,
     isNew: false,
   }),
@@ -159,13 +162,19 @@ export default {
     this.$root.$off('portlet-instance-edit', this.open);
   },
   methods: {
-    open(instance) {
+    open(instance, goBackButton, contentId) {
       this.$root.$emit('close-alert-message');
       this.isNew = !instance;
+      this.goBackButton = goBackButton;
+      this.disableSelectedPortlet = !!contentId;
       this.instance = instance || {};
       this.instanceId = instance?.id || null;
-      this.categoryId = instance?.categoryId || null;
-      this.contentId = instance?.contentId || null;
+      if (instance) {
+        this.categoryId = instance.categoryId || null;
+      } else {
+        this.categoryId = this.$root?.selectedCategoryId;
+      }
+      this.contentId = instance?.contentId || contentId;
       this.spaceApplication = instance?.spaceApplication || false;
       this.title = instance?.name || null;
       this.titleTranslations = {};
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 4e57f54fd..9f99cadc4 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
@@ -49,6 +49,9 @@
         <span class="text-font-size text-color">{{ instancesCount }}</span>
       </v-btn>
     </td>
+    <td v-if="!$root.isMobile" align="center">
+      <portlets-item-menu :portlet="portlet" />
+    </td>
   </tr>
 </template>
 <script>
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 4212d86eb..a467dd6eb 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
@@ -97,6 +97,14 @@ export default {
           class: 'portlet-instances-header',
           width: '75px'
         },
+        {
+          text: this.$t('portlets.label.actions'),
+          value: 'actions',
+          align: 'center',
+          sortable: false,
+          class: 'portlet-actions-header',
+          width: '75px'
+        },
       ]) || [
         {
           text: '',
@@ -130,6 +138,14 @@ export default {
           class: 'portlet-instances-header',
           width: '75px'
         },
+        {
+          text: this.$t('portlets.label.actions'),
+          value: 'actions',
+          align: 'center',
+          sortable: false,
+          class: 'portlet-actions-header',
+          width: '75px'
+        },
       ];
     },
     noEmptyPortlets() {
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Menu.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Menu.vue
new file mode 100644
index 000000000..97aab3ac7
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/Menu.vue
@@ -0,0 +1,131 @@
+<!--
+
+  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>
+  <v-menu
+    v-model="menu"
+    :left="!$vuetify.rtl"
+    :right="$vuetify.rtl"
+    :content-class="menuId"
+    offset-y>
+    <template #activator="{ on, attrs }">
+      <v-btn
+        :aria-label="$t('portlets.menu.open')"
+        icon
+        small
+        class="mx-auto"
+        v-bind="attrs"
+        v-on="on">
+        <v-icon size="16" class="icon-default-color">fas fa-ellipsis-v</v-icon>
+      </v-btn>
+    </template>
+    <v-hover v-if="menu" @input="hoverMenu = $event">
+      <v-list
+        class="pa-0"
+        dense
+        @mouseout="menu = false"
+        @focusout="menu = false">
+        <v-list-item-group v-model="listItem">
+          <v-list-item
+            dense
+            @click="$root.$emit('portlet-instance-add', null, false, portlet.contentId)">
+            <v-icon size="13">
+              fa-plus
+            </v-icon>
+            <v-list-item-title class="ps-2">
+              {{ $t('portlets.label.createInstance') }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-hover>
+  </v-menu>
+</template>
+<script>
+export default {
+  props: {
+    portlet: {
+      type: Object,
+      default: null,
+    },
+  },
+  data: () => ({
+    menu: false,
+    hoverMenu: false,
+    listItem: null,
+    menuId: `PortletMenu${parseInt(Math.random() * 10000)}`,
+  }),
+  computed: {
+    portletId() {
+      return this.portlet?.id;
+    },
+    name() {
+      return this.$te(this.portlet?.name) ? this.$t(this.portlet?.name) : this.portlet?.name;
+    },
+    editLayoutLink() {
+      return `/portal/administration/layout-editor?portletContentId=${this.portletId}`;
+    },
+  },
+  watch: {
+    listItem() {
+      if (this.menu) {
+        this.menu = false;
+        this.listItem = null;
+      }
+    },
+    menu() {
+      if (this.menu) {
+        this.$root.$emit('portlet-menu-opened', this.portletId);
+      } else {
+        this.$root.$emit('portlet-menu-closed', this.portletId);
+      }
+    },
+    hoverMenu() {
+      if (!this.hoverMenu) {
+        window.setTimeout(() => {
+          if (!this.hoverMenu) {
+            this.menu = false;
+          }
+        }, 200);
+      }
+    },
+  },
+  created() {
+    this.$root.$on('portlet-menu-opened', this.checkMenuStatus);
+    document.addEventListener('click', this.closeMenuOnClick);
+  },
+  beforeDestroy() {
+    this.$root.$off('portlet-menu-opened', this.checkMenuStatus);
+    document.removeEventListener('click', this.closeMenuOnClick);
+  },
+  methods: {
+    closeMenuOnClick(e) {
+      if (e.target && !e.target.closest(`.${this.menuId}`)) {
+        this.menu = false;
+      }
+    },
+    checkMenuStatus(portletId) {
+      if (this.menu && portletId !== this.portlet.id) {
+        this.menu = false;
+      }
+    },
+  },
+};
+</script>
\ No newline at end of file
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
index 36a397e80..713f35ac0 100644
--- 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
@@ -30,6 +30,13 @@
     </template>
     <template v-if="drawer" #content>
       <div v-if="applications.length" class="my-4">
+        <v-btn
+          :aria-label="$t('layout.portletInstance.add')"
+          :class="$root.isMobile && 'px-0'"
+          class="btn btn-primary text-truncate mb-6 mx-4"
+          @click="$root.$emit('portlet-instance-add', null, true, contentId)">
+          {{ $t('layout.portletInstance.add') }}
+        </v-btn>
         <v-list-item
           v-for="application in applications"
           :key="application.id"
@@ -63,8 +70,16 @@
           </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 v-else class="d-flex flex-column align-center justify-center pa-4 subtitle-1">
+        <v-icon size="40" class="icon-default-color">fa-braille</v-icon>
+        <span class="text-sub-title my-4">{{ $t('portlets.noPortletInstancesYet') }}</span>
+        <v-btn
+          :aria-label="$t('layout.portletInstance.add')"
+          :class="$root.isMobile && 'px-0'"
+          class="btn btn-primary text-truncate"
+          @click="$root.$emit('portlet-instance-add', null, true, contentId)">
+          {{ $t('layout.portletInstance.add') }}
+        </v-btn>
       </div>
     </template>
   </exo-drawer>
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 4a8b0b52d..857d070cf 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/initComponents.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/initComponents.js
@@ -41,6 +41,7 @@ import PortletInput from './components/instances/form/PortletInput.vue';
 
 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';
 
@@ -66,6 +67,7 @@ const components = {
 
   'portlets-list': PortletList,
   'portlets-item': PortletItem,
+  'portlets-item-menu': PortletMenu,
   'portlets-item-instances-drawer': PortletInstancesDrawer,
 };
 
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 951914c1f..cd2b23a9b 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
@@ -47,6 +47,7 @@ export function init() {
           portlets: [],
           portletInstances: [],
           portletInstanceCategories: [],
+          selectedCategoryId: null,
           loading: 0,
           collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
         }),
@@ -74,12 +75,17 @@ export function init() {
           this.$root.$on('portlet-instance-deleted', this.refreshPortletInstances);
           this.$root.$on('portlet-instance-category-saved', this.refreshPortletInstanceCategories);
           this.$root.$on('portlet-instance-category-deleted', this.refreshPortletInstanceCategories);
+          this.$root.$on('portlet-instance-category-deleted', this.refreshPortletInstances);
+          this.$root.$on('portlet-instance-category-selected', this.selectCategory);
 
           this.refreshPortlets();
           this.refreshPortletInstances();
           this.refreshPortletInstanceCategories();
         },
         methods: {
+          selectCategory(categoryId) {
+            this.selectedCategoryId = categoryId;
+          },
           refreshPortlets() {
             this.loading++;
             return this.$portletService.getPortlets()
@@ -99,6 +105,7 @@ export function init() {
             this.loading++;
             return this.$portletInstanceCategoryService.getPortletInstanceCategories()
               .then(data => this.portletInstanceCategories = data || [])
+              .then(() => this.portletInstanceCategories = data || [])
               .finally(() => this.loading--);
           },
         },