feat: Improve Portlets and Instances Table responsive UI - MEED-6944 - …

…Meeds-io/MIPs#139
Meeds-io · May 29, 2024 · db065ec · db065ec
1 parent 9b6140b
commit db065ec
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 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
@@ -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
@@ -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
@@ -64,79 +64,88 @@ 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'),
           value: 'actions',
           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'),
           value: 'name',
           align: 'left',
           sortable: true,
           class: 'portlet-instance-name-header',
-          width: '100px'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.description'),
           value: 'description',
           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'),
           value: 'disabled',
           align: 'center',
           sortable: true,
           class: 'portlet-instance-status-header',
-          width: '60px'
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.actions'),
           value: 'actions',
           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
@@ -23,8 +23,7 @@
     <!-- Illustration -->
     <td
       v-if="!$root.isMobile"
-      align="center"
-      width="70px">
+      align="center">
       <v-img
         :src="illustrationSrc"
         max-height="30"
@@ -35,27 +34,22 @@
     <!-- 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
         @click="$root.$emit('portlet-instance-drawer', portlet.contentId, portlet.name)">
         <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
@@ -55,63 +55,96 @@ 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'),
           value: 'actions',
           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'),
           value: 'name',
           align: 'left',
           sortable: true,
           class: 'portlet-name-header',
-          width: '20%'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.description'),
           value: 'description',
           align: 'center',
           sortable: false,
           class: 'portlet-description-header',
-          width: '70%'
+          width: 'auto'
         },
         {
           text: this.$t('portlets.label.instances'),
           value: 'instances',
           align: 'center',
           sortable: false,
           class: 'portlet-instances-header',
-          width: '60px'
+          width: '75px'
         },
         {
           text: this.$t('portlets.label.actions'),
           value: 'actions',
           align: 'center',
           sortable: false,
           class: 'portlet-actions-header',
-          width: '50px'
+          width: '75px'
         },
       ];
     },