jinql
/
vue-element-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
pull/3759/head
Leonel Matos 2020-01-24 16:26:07 -04:00 committed by Yamel Senih
parent c6c23f31fb
commit 44940dee0e
6 changed files with 148 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/ADempiere/Dashboard/calendar/index.vue
View File

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

59
src/components/ADempiere/Dashboard/docstatus/index.vue
View File

@ -1,35 +1,27 @@
<template> <template>
<el-collapse v-model="activeDocuments" accordion> <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
<el-collapse-item name="documents"> <div class="recent-items">
<template slot="title"> <el-table :data="search.length ? filterResult(search) : documents" max-height="455" @row-click="handleClick">
<i class="el-icon-document" style="margin-right: 4px;margin-left: 10px;" /> <el-table-column
{{ $t('profile.PendingDocuments') }} prop="recordCount"
</template> width="60"
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never"> />
<div class="recent-items"> <el-table-column>
<el-table :data="search.length ? filterResult(search) : documents" max-height="455" @row-click="handleClick"> <template slot="header" slot-scope="scope">
<el-table-column <el-input
prop="recordCount" v-model="search"
width="60" size="mini"
:metadata="scope"
:placeholder="$t('table.dataTable.search')"
/> />
<el-table-column> </template>
<template slot="header" slot-scope="scope"> <template slot-scope="{row}">
<el-input <span>{{ row.name }}</span>
v-model="search" </template>
size="mini" </el-table-column>
:metadata="scope" </el-table>
:placeholder="$t('table.dataTable.search')" </div>
/> </el-card>
</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>
<script> <script>
@ -37,9 +29,14 @@ import { getPendingDocumentsFromServer } from '@/api/ADempiere/data'
export default { export default {
name: 'PendingDocuments', name: 'PendingDocuments',
props: {
metadata: {
type: Object,
required: true
}
},
data() { data() {
return { return {
activeDocuments: 'documents',
documents: [], documents: [],
search: '' search: ''
} }

65
src/components/ADempiere/Dashboard/favourites/index.vue
View File

@ -1,37 +1,29 @@
<template> <template>
<el-collapse v-model="activeFavorites" accordion> <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
<el-collapse-item name="favorites"> <div class="recent-items">
<template slot="title"> <el-table :data="search.length ? filterResult(search) : favorites" max-height="455" @row-click="handleClick">
<i class="el-icon-time" style="margin-right: 4px;margin-left: 10px;" /> <el-table-column width="40">
{{ $t('profile.favorites') }} <template slot-scope="{row}">
</template> <svg-icon :icon-class="row.icon" class="icon-window" />
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never"> </template>
<div class="recent-items"> </el-table-column>
<el-table :data="search.length ? filterResult(search) : favorites" max-height="455" @row-click="handleClick"> <el-table-column>
<el-table-column width="40"> <template slot="header" slot-scope="scope">
<template slot-scope="{row}"> <el-input
<svg-icon :icon-class="row.icon" class="icon-window" /> v-model="search"
</template> size="mini"
</el-table-column> :metadata="scope"
<el-table-column> :placeholder="$t('table.dataTable.search')"
<template slot="header" slot-scope="scope"> />
<el-input </template>
v-model="search" <template slot-scope="{row}">
size="mini" <span>{{ row.name }}</span>
:metadata="scope" <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
:placeholder="$t('table.dataTable.search')" </template>
/> </el-table-column>
</template> </el-table>
<template slot-scope="{row}"> </div>
<span>{{ row.name }}</span> </el-card>
<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> </template>
<script> <script>
@ -40,9 +32,14 @@ import { convertAction } from '@/utils/ADempiere/dictionaryUtils'
export default { export default {
name: 'Favorites', name: 'Favorites',
props: {
metadata: {
type: Object,
required: true
}
},
data() { data() {
return { return {
activeFavorites: 'favorites',
favorites: [], favorites: [],
isLoaded: true, isLoaded: true,
search: '', search: '',

40
src/components/ADempiere/Dashboard/index.vue
View File

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

69
src/components/ADempiere/Dashboard/recentItems/index.vue
View File

@ -1,39 +1,31 @@
<template> <template>
<el-collapse v-model="activeRecentItems" accordion> <el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never">
<el-collapse-item name="recentItems"> <div class="recent-items">
<template slot="title"> <el-table :data="search.length ? filterResult(search) : recentItems" max-height="455" @row-click="handleClick">
<i class="el-icon-time" style="margin-right: 4px;margin-left: 10px;" /> <el-table-column width="40">
{{ $t('profile.recentItems') }} <template slot-scope="{row}">
</template> <svg-icon :icon-class="row.icon" class="icon-window" />
<el-card class="box-card" :body-style="{ padding: '0px' }" shadow="never"> </template>
<div class="recent-items"> </el-table-column>
<el-table :data="search.length ? filterResult(search) : recentItems" max-height="455" @row-click="handleClick"> <el-table-column>
<el-table-column width="40"> <template slot="header" slot-scope="scope" class="clearfix">
<template slot-scope="{row}"> <el-input
<svg-icon :icon-class="row.icon" class="icon-window" /> v-model="search"
</template> size="mini"
</el-table-column> :metadata="scope"
<el-table-column> :placeholder="$t('table.dataTable.search')"
<template slot="header" slot-scope="scope" class="clearfix"> />
<el-input </template>
v-model="search" <template slot-scope="{row}">
size="mini" <span>{{ row.displayName }}</span>
:metadata="scope" <el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag>
:placeholder="$t('table.dataTable.search')" <br>
/> <span class="time">{{ translateDate(row.updated) }}</span>
</template> </template>
<template slot-scope="{row}"> </el-table-column>
<span>{{ row.displayName }}</span> </el-table>
<el-tag class="action-tag">{{ $t(`views.${row.action}`) }}</el-tag> </div>
<br> </el-card>
<span class="time">{{ translateDate(row.updated) }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-collapse-item>
</el-collapse>
</template> </template>
<script> <script>
@ -41,9 +33,14 @@ import { getRecentItems as getRecentItemsFromServer } from '@/api/ADempiere'
import { convertAction } from '@/utils/ADempiere/dictionaryUtils' import { convertAction } from '@/utils/ADempiere/dictionaryUtils'
export default { export default {
name: 'RecentItems', name: 'RecentItems',
props: {
metadata: {
type: Object,
required: true
}
},
data() { data() {
return { return {
activeRecentItems: 'recentItems',
recentItems: [], recentItems: [],
isLoaded: true, isLoaded: true,
search: '', search: '',

12
src/components/ADempiere/Dropdown/index.vue
View File

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