test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show group by data based on group by options

Browse Source
This commit is contained in:
Shariq Ansari 2024-06-01 18:20:41 +05:30
parent 6a74cbdfd4
commit 91f60ae4c4
3 changed files with 96 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/ListViews/ListRows.vue
View File

@ -5,10 +5,13 @@
<div
class="my-2 flex items-center gap-2 text-base font-medium text-gray-800"
>
<div>{{ __('Status') }} -</div>
<div>{{ __(group.label) }} -</div>
<div class="flex items-center gap-1">
<IndicatorIcon :class="group.color" />
<div>{{ group.group }}</div>
<component v-if="group.icon" :is="group.icon" />
<div v-if="group.group == ' '" class="text-gray-500">
{{ __('Empty') }}
</div>
<div v-else>{{ group.group }}</div>
</div>
</div>
</ListGroupHeader>
@ -37,7 +40,6 @@
</template>
<script setup>
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import { ListRows, ListRow, ListGroupHeader, ListGroupRows } from 'frappe-ui'
import { ref, computed, watch } from 'vue'

73
frontend/src/pages/Deals.vue
View File

@ -64,6 +64,7 @@
<script setup>
import CustomActions from '@/components/CustomActions.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import DealsIcon from '@/components/Icons/DealsIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import DealsListView from '@/components/ListViews/DealsListView.vue'
@ -81,7 +82,7 @@ import {
} from '@/utils'
import { Breadcrumbs } from 'frappe-ui'
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import { ref, computed, h } from 'vue'
const breadcrumbs = [{ label: __('Deals'), route: { name: 'Deals' } }]
@ -104,7 +105,49 @@ const viewControls = ref(null)
// Rows
const rows = computed(() => {
if (!deals.value?.data?.data) return []
let listRows = deals.value.data.data.map((deal) => {
if (route.params.viewType === 'group_by') {
if (!deals.value?.data.group_by_field?.name) return []
return getGroupedByRows(
deals.value?.data.data,
deals.value?.data.group_by_field
)
} else {
return parseRows(deals.value?.data.data)
}
})
function getGroupedByRows(listRows, groupByField) {
let groupedRows = []
groupByField.options?.forEach((option) => {
let filteredRows = []
if (!option) {
filteredRows = listRows.filter((row) => !row[groupByField.name])
} else {
filteredRows = listRows.filter((row) => row[groupByField.name] == option)
}
let groupDetail = {
label: groupByField.label,
group: option || __(' '),
collapsed: false,
rows: parseRows(filteredRows),
}
if (groupByField.name == 'status') {
groupDetail.icon = () =>
h(IndicatorIcon, {
class: getDealStatus(option)?.iconColorClass,
})
}
groupedRows.push(groupDetail)
})
return groupedRows || listRows
}
function parseRows(rows) {
return rows.map((deal) => {
let _rows = {}
deals.value.data.rows.forEach((row) => {
_rows[row] = deal[row]
@ -180,31 +223,5 @@ const rows = computed(() => {
})
return _rows
})
if (route.params.viewType === 'group_by') {
return getGroupedByRows(listRows)
}
return listRows
})
function getGroupedByRows(listRows) {
let groupedRows = []
listRows.forEach((row) => {
if (!groupedRows.some((group) => group.group === row.status.label)) {
groupedRows.push({
group: row.status.label,
color: getDealStatus(row.status.label)?.iconColorClass,
collapsed: false,
rows: [],
})
}
groupedRows.filter((group) => {
if (group.group === row.status.label) {
group.rows.push(row)
}
})
})
return groupedRows || listRows
}
</script>

72
frontend/src/pages/Leads.vue
View File

@ -65,6 +65,7 @@
<script setup>
import CustomActions from '@/components/CustomActions.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import LeadsListView from '@/components/ListViews/LeadsListView.vue'
@ -82,7 +83,7 @@ import {
} from '@/utils'
import { createResource, Breadcrumbs } from 'frappe-ui'
import { useRouter, useRoute } from 'vue-router'
import { ref, computed, reactive } from 'vue'
import { ref, computed, reactive, h } from 'vue'
const breadcrumbs = [{ label: __('Leads'), route: { name: 'Leads' } }]
@ -106,7 +107,49 @@ const viewControls = ref(null)
// Rows
const rows = computed(() => {
if (!leads.value?.data?.data) return []
let listRows = leads.value?.data.data.map((lead) => {
if (route.params.viewType === 'group_by') {
if (!leads.value?.data.group_by_field?.name) return []
return getGroupedByRows(
leads.value?.data.data,
leads.value?.data.group_by_field
)
} else {
return parseRows(leads.value?.data.data)
}
})
function getGroupedByRows(listRows, groupByField) {
let groupedRows = []
groupByField.options?.forEach((option) => {
let filteredRows = []
if (!option) {
filteredRows = listRows.filter((row) => !row[groupByField.name])
} else {
filteredRows = listRows.filter((row) => row[groupByField.name] == option)
}
let groupDetail = {
label: groupByField.label,
group: option || __(' '),
collapsed: false,
rows: parseRows(filteredRows),
}
if (groupByField.name == 'status') {
groupDetail.icon = () =>
h(IndicatorIcon, {
class: getLeadStatus(option)?.iconColorClass,
})
}
groupedRows.push(groupDetail)
})
return groupedRows || listRows
}
function parseRows(rows) {
return rows.map((lead) => {
let _rows = {}
leads.value?.data.rows.forEach((row) => {
_rows[row] = lead[row]
@ -186,31 +229,6 @@ const rows = computed(() => {
})
return _rows
})
if (route.params.viewType === 'group_by') {
return getGroupedByRows(listRows)
}
return listRows
})
function getGroupedByRows(listRows) {
let groupedRows = []
listRows.forEach((row) => {
if (!groupedRows.some((group) => group.group === row.status.label)) {
groupedRows.push({
group: row.status.label,
color: getLeadStatus(row.status.label)?.iconColorClass,
collapsed: false,
rows: [],
})
}
groupedRows.filter((group) => {
if (group.group === row.status.label) {
group.rows.push(row)
}
})
})
return groupedRows || listRows
}
let newLead = reactive({