Style Dashboard (#954)

* Sort Dashboard

* minimal change style

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

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"

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>

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>

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>

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>

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>

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>

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

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"
+    style="height: auto;"
-    accordion
   >
-    <el-collapse-item
+    <div class="clearfix">
-      :name="dashboard.name"
+      <el-row :gutter="2">
-      :disabled="!dashboard.isCollapsible"
+        <el-col :span="isEmptyValue(title) ? 22 : 23">
-      class="custom-collapse-item"
+          <el-button type="text" class="label-dashboard" @click="metadata.isCollapsible = !metadata.isCollapsible">
-    >
+            {{ labelDashboard }}
-      <template slot="title">
+          </el-button>
-        <span class="custom-title">
+        </el-col>
-          {{ dashboard.name }}
+        <el-col v-if="isEmptyValue(title)" :span="1">
-        </span>
+          <el-button type="text" icon="el-icon-files" @click="sendMain(metadata)" />
-      </template>
+        </el-col>
-      <component
+        <el-col :span="1">
-        :is="renderDashboard"
+          <el-button type="text" :icon="!metadata.isCollapsible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="metadata.isCollapsible = !metadata.isCollapsible" />
-        :ref="dashboard.name"
+        </el-col>
-        :metadata="dashboard"
+      </el-row>
-      />
+    </div>
-    </el-collapse-item>
+    <transition name="el-zoom-in-top">
-  </el-collapse>
+      <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>

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">

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">

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: {

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()
         })