add favorites list in dashboard view (#182)

Is nice it jus is nice to have a way for update this automatically
2019-11-26 15:03:53 -04:00 · 2019-11-26 15:03:53 -04:00 · 85bb211490
parent 557e82489e
commit 85bb211490
7 changed files with 202 additions and 32 deletions
--- a/src/api/ADempiere/data.js
+++ b/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 })
 }
--- a/src/components/ADempiere/Favorites/index.vue
+++ b/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>
--- a/src/components/ADempiere/RecentItems/index.vue
+++ b/src/components/ADempiere/RecentItems/index.vue
@ -1,35 +1,38 @@
 <template>
-  <el-card class="box-card">
-    <div slot="header" class="clearfix">
-      <span> {{ $t('profile.recentItems') }} </span>
-      <el-input
-        v-model="search"
-        size="mini"
-        :placeholder="$t('table.dataTable.search')"
-        class="search_recent"
-      />
-    </div>
-    <div class="recent-items">
-      <el-table
-        :data="search.length ? filterResult(search) : recentItems"
-        @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 :label="$t('profile.recentItems')">
-          <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 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>
 </template>

 <script>
@ -38,6 +41,7 @@ export default {
  name: 'RecentItems',
  data() {
    return {
+      activeRecentItems: 'recentItems',
      recentItems: [],
      isLoaded: true,
      search: '',
--- a/src/lang/ADempiere/en.js
+++ b/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',
--- a/src/lang/ADempiere/es.js
+++ b/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',
--- a/src/store/modules/ADempiere/data.js
+++ b/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
--- a/src/views/dashboard/admin/index.vue
+++ b/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 {