Improve control panel (Home screen) (#1825)

* Improve control panel (Home screen) * Add Translations * minimal changes
solop-develop · Jan 4, 2024 · d0e627d · d0e627d
1 parent fe504c8
commit d0e627d
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 16 deletions.
diff --git a/config/default.json b/config/default.json
@@ -83,5 +83,8 @@
   "noticeManagement": {
     "endpoint": "/notice-management"
   },
+  "trialBalanceDrillable": {
+    "endpoint": "/trial-balance-drillable"
+  },
   "theme": "src/themes/default"
 }
diff --git a/src/lang/ADempiere/en/page/settings.js b/src/lang/ADempiere/en/page/settings.js
@@ -26,7 +26,10 @@ const settings = {
   sidebarLogo: 'Logotipo de la barra lateral',
   tagsView: 'Habilitar Tags-View',
   theme: 'Color del tema',
-  title: 'Configuración'
+  title: 'Configuración',
+  pageStyleSettings: 'Page Style Settings',
+  mainDashboardCard: 'Main Dashboard Card',
+  numberColumnsDashboard: 'Number of Columns in Dashboard'
 }
 
 export default settings
diff --git a/src/lang/ADempiere/es/page/settings.js b/src/lang/ADempiere/es/page/settings.js
@@ -26,7 +26,10 @@ const settings = {
   sidebarLogo: 'Logotipo de la barra lateral',
   tagsView: 'Habilitar Tags-View',
   theme: 'Color del tema',
-  title: 'Configuración'
+  title: 'Configuración',
+  pageStyleSettings: 'Configuración de Estilo de Página',
+  mainDashboardCard: 'Tarjeta Principal del Dashboard',
+  numberColumnsDashboard: 'Numero de Columnas en Dashboard'
 }
 
 export default settings
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
@@ -7,6 +7,7 @@ const { showSettings, tagsView, fixedHeader, showNavar, sidebarLogo, supportPiny
 
 const state = {
   theme: variables.theme,
+  colNum: 8,
   showSettings,
   tagsView,
   fixedHeader: !isEmptyValue(localStorage.getItem('fixedHeader')) ? convertStringToBoolean(localStorage.getItem('fixedHeader')) : fixedHeader,
@@ -39,7 +40,7 @@ const getters = {
     return state.autoSave
   },
   getFullGridMode: (state) => {
-    return state.fullGridMode
+    return state.fullGridMocolNumde
   },
   getFixedHeader: (state) => {
     return state.fixedHeader

diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -3,7 +3,6 @@
   line-height: 1.4em;
   color: #4d4d4d;
   min-width: 230px;
-  max-width: 550px;
   margin: 0 auto ;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
@@ -44,11 +44,7 @@
       <template v-for="(dashboardAttributes, index) in listDashboard">
         <el-col
           :key="index"
-          :xs="{ span: 24 }"
-          :sm="{ span: 24 }"
-          :md="{ span: 24 }"
-          :lg="{ span: 8 }"
-          :xl="{ span: 8 }"
+          :span="colNum"
           style="padding-right:8px;margin-bottom:2px;"
         >
           <dashboard-definition
@@ -59,24 +55,106 @@
         </el-col>
       </template>
       <el-col
-        :xs="{ span: 24 }"
-        :sm="{ span: 24 }"
-        :md="{ span: 24 }"
-        :lg="{ span: 8 }"
-        :xl="{ span: 8 }"
+        :span="colNum"
         style="padding-right:8px;margin-bottom:2px;"
       >
         <todo
           :metadata="mainDashboard"
           :title="mainDashboard.name"
+          style="margin: 0px;width: 100% !important;"
         />
       </el-col>
     </el-row>
+    <el-button
+      plain
+      type="primary"
+      icon="el-icon-setting"
+      class="button-base-icon"
+      style="position: fixed;top: 50%;right: 0%;font-size: 30px;"
+      @click="showSettings = !showSettings"
+    />
+
+    <el-drawer
+      :visible.sync="showSettings"
+      :with-header="true"
+    >
+      <span
+        slot="title"
+      >
+        <p style="text-align: center;margin: 0px;font-size: large;">
+          <b>
+            {{ $t('page.settings.pageStyleSettings') }}
+          </b>
+        </p>
+      </span>
+      <el-card
+        style="padding: 10px 20px!important;"
+        :body-style="{ padding: '10px 20px', height: '100% !important' }"
+      >
+        <el-descriptions :column="1">
+          <!-- <el-descriptions-item :label="$t('page.settings.theme')">
+            <theme-picker @change="themeChange" />
+          </el-descriptions-item> -->
+          <el-descriptions-item
+            :label="$t('page.settings.tagsView')"
+          >
+            <el-switch v-model="tagsView" />
+            <br>
+            <br>
+          </el-descriptions-item>
+          <el-descriptions-item
+            :label="$t('page.settings.sidebarLogo')"
+          >
+            <el-switch v-model="sidebarLogo" />
+            <br>
+            <br>
+          </el-descriptions-item>
+          <el-descriptions-item
+            :label="$t('page.settings.mainDashboardCard')"
+          >
+            <el-select
+              v-model="panelMain"
+            >
+              <el-option
+                v-for="item in listDashboard"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+            <br>
+            <br>
+          </el-descriptions-item>
+          <el-descriptions-item
+            :label="$t('page.settings.numberColumnsDashboard')"
+          >
+            <el-select
+              v-model="colNum"
+            >
+              <el-option
+                v-for="item in numColDashboard"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <br>
+            <br>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { defineComponent, computed, onMounted, watch } from '@vue/composition-api'
+import {
+  defineComponent,
+  onMounted,
+  computed,
+  watch,
+  ref
+} from '@vue/composition-api'
 
 import store from '@/store'
 import language from '@/lang'
@@ -86,6 +164,8 @@ import PanelGroup from '@/views/dashboard/admin/components/PanelGroup.vue'
 import UserInfo from '@/views/profile/components/InfoUser.vue'
 import Todo from '@/views/dashboard/admin/components/TodoList/index.vue'
 import notices from '@/components/ADempiere/Dashboard/notices'
+import RightPanel from '@/components/RightPanel'
+import ThemePicker from '@/components/ThemePicker'
 
 // Utils and Helper Methods
 import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
@@ -97,11 +177,94 @@ export default defineComponent({
     Todo,
     notices,
     UserInfo,
+    RightPanel,
+    ThemePicker,
     PanelGroup,
     DashboardDefinition
   },
 
   setup() {
+    const showSettings = ref(false)
+
+    const colNum = computed({
+      // getter
+      get() {
+        return store.state.settings.colNum
+      },
+      // setter
+      set(newValue) {
+        // Note: we are using destructuring assignment syntax here.
+        store.dispatch('settings/changeSetting', {
+          key: 'colNum',
+          value: newValue
+        })
+      }
+    })
+
+    const numColDashboard = ref([
+      {
+        value: 24,
+        label: 1
+      },
+      {
+        value: 12,
+        label: 2
+      },
+      {
+        value: 8,
+        label: 3
+      },
+      {
+        value: 6,
+        label: 4
+      }
+    ])
+
+    const tagsView = computed({
+      // getter
+      get() {
+        return store.state.settings.tagsView
+      },
+      // setter
+      set(newValue) {
+        // Note: we are using destructuring assignment syntax here.
+        store.dispatch('settings/changeSetting', {
+          key: 'tagsView',
+          value: newValue
+        })
+      }
+    })
+
+    const panelMain = computed({
+      // getter
+      get() {
+        return store.getters.getStoredMainDashboard.id
+      },
+      // setter
+      set(dashboard) {
+        // Note: we are using destructuring assignment syntax here.
+        if (dashboard) {
+          const currentDashboard = listDashboard.value.find(list => list.id === dashboard)
+          store.dispatch('mainDashboard', currentDashboard)
+        }
+      }
+    })
+
+    const sidebarLogo = computed({
+      // getter
+      get() {
+        return store.getters['settings/getSidebarLogo']
+      },
+      // setter
+      set(newValue) {
+        // Note: we are using destructuring assignment syntax here.
+        store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: newValue
+        })
+      }
+    })
+
     const dashboardsList = computed(() => {
       return store.getters.getStoredDashboardsList
     })
@@ -153,6 +316,13 @@ export default defineComponent({
       store.dispatch('getDashboardListFromServer')
     }
 
+    function themeChange(val) {
+      store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
+
     watch(roleUuid, (newValue, oldValue) => {
       loadDashboardsList()
     })
@@ -168,7 +338,14 @@ export default defineComponent({
       mainDashboard,
       listDashboard,
       panelNotice,
-      currentRole
+      currentRole,
+      showSettings,
+      sidebarLogo,
+      tagsView,
+      colNum,
+      numColDashboard,
+      panelMain,
+      themeChange
     }
   }
 })