add favorites list in dashboard view (#182)

Is nice it jus is nice to have a way for update this automatically

src/api/ADempiere/data.js

@@ -319,6 +319,10 @@ export function getContextInfoValueFromServer({ uuid, query }) {
   return Instance.call(this).getContextInfoValue({ uuid: uuid, query: query })
 }
 
+export function getFavoritesFromServer(userUuid) {
+  return Instance.call(this).requestFavorites(userUuid)
+}
+
 export function requestReportViews({ tableName, processUuid }) {
   return Instance.call(this).requestReportViews({ tableName: tableName, processUuid: processUuid })
 }

src/components/ADempiere/Favorites/index.vue

@@ -0,0 +1,124 @@
+<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>
+</template>
+
+<script>
+export default {
+  name: 'Favorites',
+  data() {
+    return {
+      activeFavorites: 'favorites',
+      favorites: [],
+      isLoaded: true,
+      search: '',
+      accentRegexp: /[\u0300-\u036f]/g
+    }
+  },
+  computed: {
+    getterFavoritesList() {
+      return this.$store.getters.getFavoritesList
+    },
+    cachedViews() {
+      return this.$store.getters.cachedViews
+    }
+  },
+  mounted() {
+    this.getFavoritesList()
+    this.subscribeChanges()
+  },
+  methods: {
+    getFavoritesList() {
+      this.$store.dispatch('getFavoritesFromServer')
+        .then(response => {
+          this.favorites = response
+          this.isLoaded = false
+        }).catch(error => {
+          console.log(error)
+        })
+    },
+    subscribeChanges() {
+      this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'setFavorites') {
+          this.recentItems = this.getterFavoritesList
+        }
+      })
+    },
+    handleClick(row) {
+      this.$router.push({ name: row.uuid })
+    },
+    filterResult(search) {
+      return this.favorites.filter(item => this.ignoreAccent(item.name).toLowerCase().includes(this.ignoreAccent(search.toLowerCase())))
+    },
+    ignoreAccent(s) {
+      if (!s) { return '' }
+      return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    },
+    translateDate(value) {
+      return this.$d(new Date(value), 'long', this.language)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .search_recent {
+    width: 50%!important;
+    float: right;
+  }
+	.header {
+		padding-bottom: 10px;
+	}
+	.recent-items {
+		height: 455px;
+		overflow: auto;
+	}
+  .time {
+    float: left;
+    font-size: 11px;
+    color: #999;
+  }
+  .card-box {
+    cursor: pointer;
+  }
+  .card-content {
+    font-size: 15px;
+  }
+  .icon-window {
+    font-size: x-large;
+    color: #36a3f7;
+  }
+  .action-tag {
+    float: right;
+  }
+</style>

src/components/ADempiere/RecentItems/index.vue

@@ -1,35 +1,38 @@
 <template>
-  <el-card class="box-card">
+  <el-collapse v-model="activeRecentItems" accordion>
-    <div slot="header" class="clearfix">
+    <el-collapse-item name="recentItems">
-      <span> {{ $t('profile.recentItems') }} </span>
+      <template slot="title">
-      <el-input
+        <i class="el-icon-time" style="margin-right: 4px;margin-left: 10px;" /> {{ $t('profile.recentItems') }}
-        v-model="search"
+      </template>
-        size="mini"
+      <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
-        :placeholder="$t('table.dataTable.search')"
+        <div class="recent-items">
-        class="search_recent"
+          <el-table :data="search.length ? filterResult(search) : recentItems" max-height="455" @row-click="handleClick">
-      />
+            <el-table-column width="40">
-    </div>
+              <template slot-scope="{row}">
-    <div class="recent-items">
+                <svg-icon :icon-class="row.icon" class="icon-window" />
-      <el-table
+              </template>
-        :data="search.length ? filterResult(search) : recentItems"
+            </el-table-column>
-        @row-click="handleClick"
+            <el-table-column>
-      >
+              <template slot="header" slot-scope="scope" class="clearfix">
-        <el-table-column width="40">
+                <el-input
-          <template slot-scope="{row}">
+                  v-model="search"
-            <svg-icon :icon-class="row.icon" class="icon-window" />
+                  size="mini"
-          </template>
+                  :metadata="scope"
-        </el-table-column>
+                  :placeholder="$t('table.dataTable.search')"
-        <el-table-column :label="$t('profile.recentItems')">
+                />
-          <template slot-scope="{row}">
+              </template>
-            <span>{{ row.displayName }}</span>
+              <template slot-scope="{row}">
-            <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
+                <span>{{ row.displayName }}</span>
-            <br>
+                <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
-            <span class="time">{{ translateDate(row.updated) }}</span>
+                <br>
-          </template>
+                <span class="time">{{ translateDate(row.updated) }}</span>
-        </el-table-column>
+              </template>
-      </el-table>
+            </el-table-column>
-    </div>
+          </el-table>
-  </el-card>
+        </div>
+      </el-card>
+    </el-collapse-item>
+  </el-collapse>
 </template>
 
 <script>
@@ -38,6 +41,7 @@ export default {
   name: 'RecentItems',
   data() {
     return {
+      activeRecentItems: 'recentItems',
       recentItems: [],
       isLoaded: true,
       search: '',

src/lang/ADempiere/en.js

@@ -232,6 +232,7 @@ export default {
   profile: {
     aboutMe: 'About Me',
     recentItems: 'Recent Items',
+    favorites: 'Favorites',
     recentItemsName: 'Name Recent Items',
     role: 'Role',
     availableRoles: 'Available roles',

src/lang/ADempiere/es.js

@@ -207,6 +207,7 @@ export default {
   profile: {
     aboutMe: 'Sobre Mi',
     recentItems: 'Artículos Recientes',
+    favorites: 'Favoritos',
     recentItemsName: 'Nombre Ítems Recientes',
     role: 'Rol',
     availableRoles: 'Roles disponibles',

src/store/modules/ADempiere/data.js

@@ -6,6 +6,7 @@ import {
   getDefaultValueFromServer,
   convertValueFromGRPC,
   getContextInfoValueFromServer,
+  getFavoritesFromServer,
   requestPrintFormats
 } from '@/api/ADempiere'
 import { convertValuesMapToObject, isEmptyValue, showMessage, convertAction } from '@/utils/ADempiere'
@@ -16,6 +17,7 @@ const data = {
     recordSelection: [], // record data and selection
     recordDetail: [],
     recentItems: [],
+    favorites: [],
     inGetting: [],
     contextInfoField: [],
     printFormatList: []
@@ -62,6 +64,9 @@ const data = {
     setRecentItems(state, payload) {
       state.recentItems = payload
     },
+    setFavorites(state, payload) {
+      state.favorites = payload
+    },
     setPageNumber(state, payload) {
       payload.data.pageNumber = payload.pageNumber
     },
@@ -617,6 +622,29 @@ const data = {
           })
       })
     },
+    getFavoritesFromServer({ commit, rootGetters }) {
+      const userUuid = rootGetters['user/getUserUuid']
+      return new Promise((resolve, reject) => {
+        getFavoritesFromServer(userUuid)
+          .then(response => {
+            const favorites = response.getFavoritesList().map(favorite => {
+              return {
+                uuid: favorite.getMenuuuid(),
+                name: favorite.getMenuname(),
+                description: favorite.getMenudescription(),
+                referenceUuid: favorite.getReferenceuuid(),
+                action: convertAction(favorite.getAction()).name,
+                icon: convertAction(favorite.getAction()).icon
+              }
+            })
+            commit('setFavorites', favorites)
+            resolve(favorites)
+          })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
     /**
      * TODO: Add support to tab children
      * @param {object} objectParams
@@ -903,6 +931,9 @@ const data = {
     getRecentItems: (state) => {
       return state.recentItems
     },
+    getFavoritesList: (state) => {
+      return state.favorites
+    },
     getLanguageList: (state) => (roleUuid) => {
       return state.recordSelection.find(
         record => record.containerUuid === roleUuid

src/views/dashboard/admin/index.vue

@@ -30,6 +30,9 @@
       <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
         <recent-items />
       </el-col>
+      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
+        <favorites />
+      </el-col>
       <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <todo-list />
       </el-col>
@@ -51,6 +54,7 @@ import BarChart from './components/BarChart'
 import TodoList from './components/TodoList'
 import BoxCard from './components/BoxCard'
 import RecentItems from '@/components/ADempiere/RecentItems'
+import Favorites from '@/components/ADempiere/Favorites'
 
 const lineChartData = {
   newVisitis: {
@@ -83,7 +87,8 @@ export default {
     // TransactionTable,
     TodoList,
     BoxCard,
-    RecentItems
+    RecentItems,
+    Favorites
   },
   data() {
     return {