From 9daa6fb48be4da4cb2d3a069afc442ef5904071c Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Wed, 29 May 2024 13:03:42 +0100
Subject: [PATCH] feat: Improve Portlets and Instances Table responsive UI -
 MEED-6944 - Meeds-io/MIPs#139 (#86)

---
 .../components/instances/Categories.vue       |  1 +
 .../portlets/components/instances/Item.vue    | 42 +++----------
 .../portlets/components/instances/List.vue    | 63 ++++++++++---------
 .../portlets/components/portlets/Item.vue     | 14 ++---
 .../portlets/components/portlets/List.vue     | 51 ++++++++++++---
 5 files changed, 88 insertions(+), 83 deletions(-)

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 439078bef..d1033fdd1 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
@@ -21,6 +21,7 @@
 <template>
   <v-list
     :loading="loading"
+    min-width="225"
     nav
     dense>
     <v-list-item class="pe-0">
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue
index 49d44866d..bfda1a22c 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue
@@ -23,17 +23,14 @@
     <!-- Illustration -->
     <td
       v-if="!$root.isMobile"
-      align="center"
-      width="70px">
+      align="center">
       <layout-image-illustration
         :value="portletInstance"
         object-type="portletInstance"
         default-src="/layout/images/portlets/DefaultPortlet.png" />
     </td>
     <!-- name -->
-    <td
-      :width="$root.isMobile && '100%' || 'auto'"
-      align="left">
+    <td align="left">
       <v-card
         v-sanitized-html="name"
         class="transparent"
@@ -42,35 +39,22 @@
     </td>
     <!-- description -->
     <td
-      v-if="!$root.isMobile"
+      v-if="!$vuetify.breakpoint.lgAndDown"
       align="left"
       v-sanitized-html="description"></td>
     <td
       v-if="!$root.isMobile"
-      align="center"
-      width="100px">
-      {{ categoryName }}
-    </td>
-    <td
-      v-if="!$root.isMobile"
-      align="center"
-      width="100px">
-      {{ portletName }}
-    </td>
-    <td
-      v-if="!$root.isMobile"
-      align="center"
-      width="50px">
+      align="center">
       <v-switch
         v-model="enabled"
         :loading="loading"
         :aria-label="enabled && $t('portlets.label.disableInstance') || $t('portlets.label.enableInstance')"
-        class="mt-0 mx-auto"
+        class="mt-0 mx-auto width-fit-content"
         @click="changeStatus" />
     </td>
     <td
-      align="center"
-      width="50px">
+      v-if="!$root.isMobile"
+      align="center">
       <portlets-instance-menu :portlet-instance="portletInstance" />
     </td>
   </tr>
@@ -94,18 +78,6 @@ export default {
     enabled() {
       return !this.portletInstance?.disabled;
     },
-    category() {
-      return this.$root.portletInstanceCategories?.find?.(c => c.id === this.portletInstance.categoryId);
-    },
-    categoryName() {
-      return this.category?.name;
-    },
-    portlet() {
-      return this.$root.portlets?.find?.(p => p.contentId === this.portletInstance.contentId);
-    },
-    portletName() {
-      return this.portlet?.name;
-    },
     name() {
       return this.$te(this.portletInstance?.name) ? this.$t(this.portletInstance?.name) : this.portletInstance?.name;
     },
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 b076c5961..7437bc863 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
@@ -64,14 +64,39 @@ export default {
       return !!this.$root.loading;
     },
     headers() {
-      return this.$root.isMobile && [
+      return (this.$root.isMobile && [
         {
           text: this.$t('portlets.label.name'),
           value: 'name',
           align: 'left',
           sortable: true,
           class: 'portlet-instance-name-header',
-          width: '20%'
+          width: '100%'
+        },
+      ]) || (this.$vuetify.breakpoint.lgAndDown && [
+        {
+          text: '',
+          value: 'illustrationId',
+          align: 'center',
+          sortable: false,
+          class: 'portlet-instance-illustration-header',
+          width: '75px'
+        },
+        {
+          text: this.$t('portlets.label.name'),
+          value: 'name',
+          align: 'left',
+          sortable: true,
+          class: 'portlet-instance-name-header',
+          width: 'auto'
+        },
+        {
+          text: this.$t('portlets.label.status'),
+          value: 'disabled',
+          align: 'center',
+          sortable: true,
+          class: 'portlet-instance-status-header',
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.actions'),
@@ -79,16 +104,16 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-instance-actions-header',
-          width: '50px'
+          width: '75px'
         },
-      ] || [
+      ]) || [
         {
           text: '',
           value: 'illustrationId',
           align: 'center',
           sortable: false,
           class: 'portlet-instance-illustration-header',
-          width: '60px'
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.name'),
@@ -96,7 +121,7 @@ export default {
           align: 'left',
           sortable: true,
           class: 'portlet-instance-name-header',
-          width: '100px'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.description'),
@@ -104,23 +129,7 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-instance-description-header',
-          width: '70%'
-        },
-        {
-          text: this.$t('portlets.label.category'),
-          value: 'categoryId',
-          align: 'center',
-          sortable: true,
-          class: 'portlet-instance-category-header',
-          width: '100px'
-        },
-        {
-          text: this.$t('portlets.label.portlet'),
-          value: 'contentId',
-          align: 'center',
-          sortable: true,
-          class: 'portlet-instance-portlet-header',
-          width: '100px'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.status'),
@@ -128,7 +137,7 @@ export default {
           align: 'center',
           sortable: true,
           class: 'portlet-instance-status-header',
-          width: '60px'
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.actions'),
@@ -136,7 +145,7 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-instance-actions-header',
-          width: '50px'
+          width: '75px'
         },
       ];
     },
@@ -180,10 +189,6 @@ export default {
         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.$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.$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 b124d5248..09185c5a7 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
@@ -23,8 +23,7 @@
     <!-- Illustration -->
     <td
       v-if="!$root.isMobile"
-      align="center"
-      width="70px">
+      align="center">
       <v-img
         :src="illustrationSrc"
         max-height="30"
@@ -35,17 +34,14 @@
     <!-- name -->
     <td
       v-sanitized-html="name"
-      :width="$root.isMobile && '100%' || 'auto'"
       align="left">
     </td>
     <!-- description -->
     <td
-      v-if="!$root.isMobile"
+      v-if="!$vuetify.breakpoint.lgAndDown"
       align="left"
       v-sanitized-html="description"></td>
-    <td
-      align="center"
-      width="50px">
+    <td align="center">
       <v-btn
         icon
         x-small
@@ -53,9 +49,7 @@
         <span class="text-font-size text-color">{{ instancesCount }}</span>
       </v-btn>
     </td>
-    <td
-      align="center"
-      width="50px">
+    <td v-if="!$root.isMobile" align="center">
       <portlets-menu :portlet="portlet" />
     </td>
   </tr>
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 0c17046aa..797bd81ac 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
@@ -55,14 +55,47 @@ export default {
       return !!this.$root.loading;
     },
     headers() {
-      return this.$root.isMobile && [
+      return (this.$root.isMobile && [
         {
           text: this.$t('portlets.label.name'),
           value: 'name',
           align: 'left',
           sortable: true,
           class: 'portlet-name-header',
-          width: '20%'
+          width: '100%'
+        },
+        {
+          text: this.$t('portlets.label.instances'),
+          value: 'instances',
+          align: 'center',
+          sortable: false,
+          class: 'portlet-instances-header',
+          width: '75px'
+        },
+      ]) || (this.$vuetify.breakpoint.lgAndDown && [
+        {
+          text: '',
+          value: 'illustrationId',
+          align: 'center',
+          sortable: false,
+          class: 'portlet-illustration-header',
+          width: '75px'
+        },
+        {
+          text: this.$t('portlets.label.name'),
+          value: 'name',
+          align: 'left',
+          sortable: true,
+          class: 'portlet-name-header',
+          width: 'auto'
+        },
+        {
+          text: this.$t('portlets.label.instances'),
+          value: 'instances',
+          align: 'center',
+          sortable: false,
+          class: 'portlet-instances-header',
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.actions'),
@@ -70,16 +103,16 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-actions-header',
-          width: '50px'
+          width: '75px'
         },
-      ] || [
+      ]) || [
         {
           text: '',
           value: 'illustrationId',
           align: 'center',
           sortable: false,
           class: 'portlet-illustration-header',
-          width: '60px'
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.name'),
@@ -87,7 +120,7 @@ export default {
           align: 'left',
           sortable: true,
           class: 'portlet-name-header',
-          width: '20%'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.description'),
@@ -95,7 +128,7 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-description-header',
-          width: '70%'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.instances'),
@@ -103,7 +136,7 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-instances-header',
-          width: '60px'
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.actions'),
@@ -111,7 +144,7 @@ export default {
           align: 'center',
           sortable: false,
           class: 'portlet-actions-header',
-          width: '50px'
+          width: '75px'
         },
       ];
     },