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,31 +1,28 @@
 <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
-          slot="dateCell"
-          slot-scope="{date, data}"
-        >
-          <p :class="data.isSelected ? 'is-selected' : ''">
-            {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
-          </p>
-        </template>
-      </el-calendar>
-    </el-collapse-item>
-  </el-collapse>
+  <el-calendar>
+    <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+    <template
+      slot="dateCell"
+      slot-scope="{date, data}"
+    >
+      <p :class="data.isSelected ? 'is-selected' : ''">
+        {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : '' }}
+      </p>
+    </template>
+  </el-calendar>
 </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,35 +1,27 @@
 <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">
-            <el-table-column
-              prop="recordCount"
-              width="60"
+  <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">
+        <el-table-column
+          prop="recordCount"
+          width="60"
+        />
+        <el-table-column>
+          <template slot="header" slot-scope="scope">
+            <el-input
+              v-model="search"
+              size="mini"
+              :metadata="scope"
+              :placeholder="$t('table.dataTable.search')"
             />
-            <el-table-column>
-              <template slot="header" slot-scope="scope">
-                <el-input
-                  v-model="search"
-                  size="mini"
-                  :metadata="scope"
-                  :placeholder="$t('table.dataTable.search')"
-                />
-              </template>
-              <template slot-scope="{row}">
-                <span>{{ row.name }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-card>
-    </el-collapse-item>
-  </el-collapse>
+          </template>
+          <template slot-scope="{row}">
+            <span>{{ row.name }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
 </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,37 +1,29 @@
 <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">
-            <el-table-column width="40">
-              <template slot-scope="{row}">
-                <svg-icon :icon-class="row.icon" class="icon-window" />
-              </template>
-            </el-table-column>
-            <el-table-column>
-              <template slot="header" slot-scope="scope">
-                <el-input
-                  v-model="search"
-                  size="mini"
-                  :metadata="scope"
-                  :placeholder="$t('table.dataTable.search')"
-                />
-              </template>
-              <template slot-scope="{row}">
-                <span>{{ row.name }}</span>
-                <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-card>
-    </el-collapse-item>
-  </el-collapse>
+  <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">
+        <el-table-column width="40">
+          <template slot-scope="{row}">
+            <svg-icon :icon-class="row.icon" class="icon-window" />
+          </template>
+        </el-table-column>
+        <el-table-column>
+          <template slot="header" slot-scope="scope">
+            <el-input
+              v-model="search"
+              size="mini"
+              :metadata="scope"
+              :placeholder="$t('table.dataTable.search')"
+            />
+          </template>
+          <template slot-scope="{row}">
+            <span>{{ row.name }}</span>
+            <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
 </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>
-  <component
-    :is="renderDashboard"
-    :ref="dashboard.dashboardName"
-    :metadata="dashboard"
-  />
+  <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 (unsupportedDashboards.includes(this.metadata.fileName)) {
+      if (this.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,39 +1,31 @@
 <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">
-            <el-table-column width="40">
-              <template slot-scope="{row}">
-                <svg-icon :icon-class="row.icon" class="icon-window" />
-              </template>
-            </el-table-column>
-            <el-table-column>
-              <template slot="header" slot-scope="scope" class="clearfix">
-                <el-input
-                  v-model="search"
-                  size="mini"
-                  :metadata="scope"
-                  :placeholder="$t('table.dataTable.search')"
-                />
-              </template>
-              <template slot-scope="{row}">
-                <span>{{ row.displayName }}</span>
-                <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
-                <br>
-                <span class="time">{{ translateDate(row.updated) }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-card>
-    </el-collapse-item>
-  </el-collapse>
+  <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">
+        <el-table-column width="40">
+          <template slot-scope="{row}">
+            <svg-icon :icon-class="row.icon" class="icon-window" />
+          </template>
+        </el-table-column>
+        <el-table-column>
+          <template slot="header" slot-scope="scope" class="clearfix">
+            <el-input
+              v-model="search"
+              size="mini"
+              :metadata="scope"
+              :placeholder="$t('table.dataTable.search')"
+            />
+          </template>
+          <template slot-scope="{row}">
+            <span>{{ row.displayName }}</span>
+            <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
+            <br>
+            <span class="time">{{ translateDate(row.updated) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
 </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,11 +131,13 @@ export default {
     height: 100%;
     font-size: 13px;
   }
-  .el-collapse-item__header {
-    height: 60px;
-    font-weight: bold;
-    font-size: 16px;
-    text-align: center;
+  .collapse-item {
+    .el-collapse-item__header {
+      height: 60px;
+      font-weight: bold;
+      font-size: 16px;
+      text-align: center;
+    }
   }
   .three-dots{
     margin-top: 0 !important;