From 90a4846b29a875664bc7ae310d250fcebaca98de Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Wed, 30 Jun 2021 17:58:34 -0400
Subject: [PATCH] Style Dashboard (#954)

* Sort Dashboard

* minimal change style

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
---
 .../ADempiere/Dashboard/calendar/index.vue    |  2 +-
 .../ADempiere/Dashboard/charts/AreaChart.vue  |  2 +-
 .../ADempiere/Dashboard/charts/BarChart.vue   |  2 +-
 .../ADempiere/Dashboard/charts/LineChart.vue  |  2 +-
 .../ADempiere/Dashboard/charts/PieChart.vue   |  2 +-
 .../Dashboard/charts/RaddarChart.vue          |  2 +-
 .../Dashboard/charts/WaterfallChart.vue       |  2 +-
 .../ADempiere/Dashboard/docstatus/index.vue   |  2 +-
 src/components/ADempiere/Dashboard/index.vue  | 94 +++++++++++++++----
 .../ADempiere/Dashboard/recentItems/index.vue |  2 +-
 .../Dashboard/userfavorites/index.vue         |  2 +-
 src/store/modules/ADempiere/dashboard.js      |  6 +-
 src/views/dashboard/admin/index.vue           | 17 +++-
 13 files changed, 105 insertions(+), 32 deletions(-)

diff --git a/src/components/ADempiere/Dashboard/calendar/index.vue b/src/components/ADempiere/Dashboard/calendar/index.vue
index 112e4c31..319e6aa0 100644
--- a/src/components/ADempiere/Dashboard/calendar/index.vue
+++ b/src/components/ADempiere/Dashboard/calendar/index.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-calendar style="max-height: 40vh;">
+  <el-calendar>
     <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
     <template
       slot="dateCell"
diff --git a/src/components/ADempiere/Dashboard/charts/AreaChart.vue b/src/components/ADempiere/Dashboard/charts/AreaChart.vue
index 46996bda..73e13631 100644
--- a/src/components/ADempiere/Dashboard/charts/AreaChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/AreaChart.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Dashboard/charts/BarChart.vue b/src/components/ADempiere/Dashboard/charts/BarChart.vue
index 10460f2c..37e37759 100644
--- a/src/components/ADempiere/Dashboard/charts/BarChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/BarChart.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Dashboard/charts/LineChart.vue b/src/components/ADempiere/Dashboard/charts/LineChart.vue
index 6388a2aa..6389a63a 100644
--- a/src/components/ADempiere/Dashboard/charts/LineChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/LineChart.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Dashboard/charts/PieChart.vue b/src/components/ADempiere/Dashboard/charts/PieChart.vue
index 6a6dd6df..ec71c625 100644
--- a/src/components/ADempiere/Dashboard/charts/PieChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/PieChart.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Dashboard/charts/RaddarChart.vue b/src/components/ADempiere/Dashboard/charts/RaddarChart.vue
index b0417932..bd5d2ec7 100644
--- a/src/components/ADempiere/Dashboard/charts/RaddarChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/RaddarChart.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Dashboard/charts/WaterfallChart.vue b/src/components/ADempiere/Dashboard/charts/WaterfallChart.vue
index 607cdb12..783adaf9 100644
--- a/src/components/ADempiere/Dashboard/charts/WaterfallChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/WaterfallChart.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <div :class="className" :style="{height:height,width:width + 'max-height: 40vh;'}" />
+  <div :class="className" :style="{height:height,width:width}" />
 </template>
 
 <script>
diff --git a/src/components/ADempiere/Dashboard/docstatus/index.vue b/src/components/ADempiere/Dashboard/docstatus/index.vue
index 3c5a3194..557c88c4 100644
--- a/src/components/ADempiere/Dashboard/docstatus/index.vue
+++ b/src/components/ADempiere/Dashboard/docstatus/index.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never" style="max-height: 40vh;">
+  <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
     <div class="recent-items">
       <el-table :data="dataResult" max-height="455" @row-click="handleClick">
         <el-table-column
diff --git a/src/components/ADempiere/Dashboard/index.vue b/src/components/ADempiere/Dashboard/index.vue
index dc8e463f..7d5baca3 100644
--- a/src/components/ADempiere/Dashboard/index.vue
+++ b/src/components/ADempiere/Dashboard/index.vue
@@ -16,28 +16,36 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-collapse
+  <el-card
     v-if="!unsupportedDashboards.includes(dashboard.fileName)"
-    v-model="activeDashboard"
-    accordion
+    style="height: auto;"
   >
-    <el-collapse-item
-      :name="dashboard.name"
-      :disabled="!dashboard.isCollapsible"
-      class="custom-collapse-item"
-    >
-      <template slot="title">
-        <span class="custom-title">
-          {{ dashboard.name }}
-        </span>
-      </template>
-      <component
-        :is="renderDashboard"
-        :ref="dashboard.name"
-        :metadata="dashboard"
-      />
-    </el-collapse-item>
-  </el-collapse>
+    <div class="clearfix">
+      <el-row :gutter="2">
+        <el-col :span="isEmptyValue(title) ? 22 : 23">
+          <el-button type="text" class="label-dashboard" @click="metadata.isCollapsible = !metadata.isCollapsible">
+            {{ labelDashboard }}
+          </el-button>
+        </el-col>
+        <el-col v-if="isEmptyValue(title)" :span="1">
+          <el-button type="text" icon="el-icon-files" @click="sendMain(metadata)" />
+        </el-col>
+        <el-col :span="1">
+          <el-button type="text" :icon="!metadata.isCollapsible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="metadata.isCollapsible = !metadata.isCollapsible" />
+        </el-col>
+      </el-row>
+    </div>
+    <transition name="el-zoom-in-top">
+      <div v-show="metadata.isCollapsible" class="dashboard-transitio">
+        <component
+          :is="renderDashboard"
+          :ref="dashboard.name"
+          :metadata="metadata"
+          :height="'450px'"
+        />
+      </div>
+    </transition>
+  </el-card>
 </template>
 
 <script>
@@ -47,6 +55,10 @@ export default {
     metadata: {
       type: Object,
       required: true
+    },
+    title: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -112,6 +124,18 @@ export default {
       }
       return dashboard
       // return () => import(`@/components/ADempiere/Dashboard/${this.metadata.fileName}`)
+    },
+    labelDashboard() {
+      if (this.isEmptyValue(this.title)) {
+        return this.dashboard.name
+      }
+      return this.title
+    }
+  },
+  methods: {
+    sendMain(dashboard) {
+      this.$store.commit('setMainDashboard', dashboard)
+      this.$forceUpdate()
     }
   }
 }
@@ -144,4 +168,34 @@ export default {
       color: #303133;
     }
   }
+  .el-card__header {
+    border: 1px solid #36a3f7;
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+  }
+  .dashboard-transitio {
+    margin: 0px;
+    width: 100%;
+    padding-right: 2%;
+    border-radius: 4px;
+    text-align: center;
+    color: #fff;
+    box-sizing: border-box;
+    height: 500px;
+    overflow: auto;
+  }
+  .label-dashboard{
+    color: black;
+    width: 95%;
+    text-align: inherit;
+    font-weight: 500;
+    font-size: large;
+    padding-left: 1%;
+  }
+</style>
+<style>
+  .el-card__body {
+    padding: 5px;
+  }
 </style>
diff --git a/src/components/ADempiere/Dashboard/recentItems/index.vue b/src/components/ADempiere/Dashboard/recentItems/index.vue
index 72d16e5e..bca5985a 100644
--- a/src/components/ADempiere/Dashboard/recentItems/index.vue
+++ b/src/components/ADempiere/Dashboard/recentItems/index.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never" style="max-height: 40vh;">
+  <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
     <div class="recent-items">
       <el-table :data="dataResult" max-height="455" @row-click="handleClick">
         <el-table-column width="40">
diff --git a/src/components/ADempiere/Dashboard/userfavorites/index.vue b/src/components/ADempiere/Dashboard/userfavorites/index.vue
index e889dbe9..0f59286a 100644
--- a/src/components/ADempiere/Dashboard/userfavorites/index.vue
+++ b/src/components/ADempiere/Dashboard/userfavorites/index.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never" style="max-height: 40vh;">
+  <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
     <div class="recent-items">
       <el-table :data="dataResult" max-height="455" @row-click="handleClick">
         <el-table-column width="40">
diff --git a/src/store/modules/ADempiere/dashboard.js b/src/store/modules/ADempiere/dashboard.js
index 606508e7..3b52cabd 100644
--- a/src/store/modules/ADempiere/dashboard.js
+++ b/src/store/modules/ADempiere/dashboard.js
@@ -23,7 +23,8 @@ import { getCurrentRole } from '@/utils/auth'
 const dashboard = {
   state: {
     dashboard: [],
-    recentItems: []
+    recentItems: [],
+    mainashboard: {}
   },
   mutations: {
     addDashboard(state, payload) {
@@ -34,6 +35,9 @@ const dashboard = {
     },
     setRecentItems(state, payload) {
       state.recentItems = payload
+    },
+    setMainDashboard(state, payload) {
+      state.mainashboard = payload
     }
   },
   actions: {
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index b6ebe2d4..70bd07b1 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="dashboard-editor-container">
     <el-row :gutter="8">
+      <el-col :span="24" style="padding-right:8px;margin-bottom:2px;">
+        <dashboard
+          :metadata="mainashboard"
+          :title="mainashboard.name"
+        />
+      </el-col>
       <template v-for="(dashboardAttributes, index) in dashboardList">
-        <el-col :key="index" :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" style="padding-right:8px;margin-bottom:2px;">
+        <el-col v-if="index > 0" :key="index" :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" style="padding-right:8px;margin-bottom:2px;">
           <dashboard :metadata="dashboardAttributes" />
         </el-col>
       </template>
@@ -33,11 +39,17 @@ export default {
     },
     getterRol() {
       return this.$store.getters.getRoleUuid
+    },
+    mainashboard() {
+      return this.$store.state.dashboard.mainashboard
     }
   },
   watch: {
     getterRol(value) {
       this.getDashboardListFromServer()
+    },
+    mainashboard(value) {
+      this.getDashboardListFromServer()
     }
   },
   mounted() {
@@ -50,6 +62,9 @@ export default {
         roleUuid: this.currentRole.uuid
       })
         .then(response => {
+          if (this.isEmptyValue(this.mainashboard)) {
+            this.$store.commit('setMainDashboard', response.dashboardsList[1])
+          }
           this.dashboardList = response.dashboardsList
           this.$forceUpdate()
         })