add support to dashboard collapsible and open by default (#265)

* add support to dashboard collapsible and open by default

* change component definition of dynamic dashboard

src/components/ADempiere/Dashboard/calendar/index.vue

@@ -1,10 +1,4 @@
 <template>
-  <el-collapse v-model="activeCalendar" accordion>
-    <el-collapse-item name="calendar">
-      <template slot="title">
-        <i class="el-icon-date" style="margin-right: 4px;margin-left: 10px;" />
-        {{ $t('route.calendar') }}
-      </template>
   <el-calendar>
     <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
     <template
@@ -16,16 +10,19 @@
       </p>
     </template>
   </el-calendar>
-    </el-collapse-item>
-  </el-collapse>
 </template>
 
 <script>
 export default {
   name: 'Calendar',
+  props: {
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      activeCalendar: 'calendar',
       value: new Date()
     }
   }

src/components/ADempiere/Dashboard/docstatus/index.vue

@@ -1,10 +1,4 @@
 <template>
-  <el-collapse v-model="activeDocuments" accordion>
-    <el-collapse-item name="documents">
-      <template slot="title">
-        <i class="el-icon-document" style="margin-right: 4px;margin-left: 10px;" />
-        {{ $t('profile.PendingDocuments') }}
-      </template>
   <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
     <div class="recent-items">
       <el-table :data="search.length ? filterResult(search) : documents" max-height="455" @row-click="handleClick">
@@ -28,8 +22,6 @@
       </el-table>
     </div>
   </el-card>
-    </el-collapse-item>
-  </el-collapse>
 </template>
 
 <script>
@@ -37,9 +29,14 @@ import { getPendingDocumentsFromServer } from '@/api/ADempiere/data'
 
 export default {
   name: 'PendingDocuments',
+  props: {
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      activeDocuments: 'documents',
       documents: [],
       search: ''
     }

src/components/ADempiere/Dashboard/favourites/index.vue

@@ -1,10 +1,4 @@
 <template>
-  <el-collapse v-model="activeFavorites" accordion>
-    <el-collapse-item name="favorites">
-      <template slot="title">
-        <i class="el-icon-time" style="margin-right: 4px;margin-left: 10px;" />
-        {{ $t('profile.favorites') }}
-      </template>
   <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
     <div class="recent-items">
       <el-table :data="search.length ? filterResult(search) : favorites" max-height="455" @row-click="handleClick">
@@ -30,8 +24,6 @@
       </el-table>
     </div>
   </el-card>
-    </el-collapse-item>
-  </el-collapse>
 </template>
 
 <script>
@@ -40,9 +32,14 @@ import { convertAction } from '@/utils/ADempiere/dictionaryUtils'
 
 export default {
   name: 'Favorites',
+  props: {
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      activeFavorites: 'favorites',
       favorites: [],
       isLoaded: true,
       search: '',

src/components/ADempiere/Dashboard/index.vue

@@ -1,9 +1,24 @@
 <template>
+  <el-collapse
+    v-if="!unsupportedDashboards.includes(dashboard.fileName)"
+    v-model="activeDashboard"
+    accordion
+  >
+    <el-collapse-item
+      :name="dashboard.dashboardName"
+      :disabled="!dashboard.isCollapsible"
+      class="custom-collapse-item"
+    >
+      <template slot="title">
+        <span class="custom-title"> {{ dashboard.dashboardName }}</span>
+      </template>
       <component
         :is="renderDashboard"
         :ref="dashboard.dashboardName"
         :metadata="dashboard"
       />
+    </el-collapse-item>
+  </el-collapse>
 </template>
 
 <script>
@@ -18,15 +33,16 @@ export default {
   },
   data() {
     return {
-      dashboard: this.metadata
+      dashboard: this.metadata,
+      unsupportedDashboards: ['activities', 'views', 'performance'],
+      activeDashboard: this.metadata.isOpenByDefault ? this.metadata.dashboardName : undefined
     }
   },
   computed: {
     // load the component that is indicated in the attributes of received property
     renderDashboard() {
       // TODO: Add support to this list of currently unsupported dashboards
-      const unsupportedDashboards = ['activities', 'views', 'performance']
+      if (this.unsupportedDashboards.includes(this.metadata.fileName)) {
-      if (unsupportedDashboards.includes(this.metadata.fileName)) {
         return
       }
       if (this.metadata.fileName === 'userfavorites') {
@@ -39,6 +55,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .custom-title {
+    padding: 10px;
+  }
   .dashboard-editor-container {
     padding: 32px;
     background-color: rgb(240, 242, 245);
@@ -57,4 +76,9 @@ export default {
       margin-bottom: 32px;
     }
   }
+  .custom-collapse-item.is-disabled {
+    .custom-title {
+      color: #303133;
+    }
+  }
 </style>

src/components/ADempiere/Dashboard/recentItems/index.vue

@@ -1,10 +1,4 @@
 <template>
-  <el-collapse v-model="activeRecentItems" accordion>
-    <el-collapse-item name="recentItems">
-      <template slot="title">
-        <i class="el-icon-time" style="margin-right: 4px;margin-left: 10px;" />
-        {{ $t('profile.recentItems') }}
-      </template>
   <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
     <div class="recent-items">
       <el-table :data="search.length ? filterResult(search) : recentItems" max-height="455" @row-click="handleClick">
@@ -32,8 +26,6 @@
       </el-table>
     </div>
   </el-card>
-    </el-collapse-item>
-  </el-collapse>
 </template>
 
 <script>
@@ -41,9 +33,14 @@ import { getRecentItems as getRecentItemsFromServer } from '@/api/ADempiere'
 import { convertAction } from '@/utils/ADempiere/dictionaryUtils'
 export default {
   name: 'RecentItems',
+  props: {
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      activeRecentItems: 'recentItems',
       recentItems: [],
       isLoaded: true,
       search: '',

src/components/ADempiere/Dropdown/index.vue

@@ -131,12 +131,14 @@ export default {
     height: 100%;
     font-size: 13px;
   }
+  .collapse-item {
     .el-collapse-item__header {
       height: 60px;
       font-weight: bold;
       font-size: 16px;
       text-align: center;
     }
+  }
   .three-dots{
     margin-top: 0 !important;
     overflow: hidden;