Skip to content

Commit

Permalink
Add ability to configure columns in metric and chart blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
EmmyMay authored and Fajfa committed Mar 8, 2024
1 parent 979dbe0 commit f0d7786
Show file tree
Hide file tree
Showing 9 changed files with 164 additions and 47 deletions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<template>
<div class="d-flex">
<b-button
size="lg"
variant="light"
:size="size"
:variant="variant"
class="flex-fill"
:disabled="disabled"
@click="showModal = true"
>
{{ $t('allRecords.columns.title') }}
<slot>
{{ $t('allRecords.columns.title') }}
</slot>
</b-button>

<b-modal
Expand Down Expand Up @@ -60,6 +63,21 @@ export default {
required: true,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
size: {
type: String,
default: 'lg',
},
variant: {
type: String,
default: 'light',
},
},
data () {
Expand All @@ -70,10 +88,10 @@ export default {
}
},
created () {
this.filteredFields = this.fields.map(f => {
return { ...f.moduleField }
})
watch: {
fields (fields) {
this.filteredFields = this.module.filterFields(fields)
},
},
beforeDestroy () {
Expand Down
2 changes: 2 additions & 0 deletions client/web/compose/src/components/PageBlocks/ChartBase.vue
Original file line number Diff line number Diff line change
Expand Up @@ -162,13 +162,15 @@ export default {
this.$root.$emit(`drill-down-recordList:${recordListUniqueID}`, prefilter)
} else {
const { title } = this.block
const { fields = [] } = this.options.drillDown.recordListOptions || {}
// Open in modal
const block = new compose.PageBlockRecordList({
title: title ? `${title} - "${drillDownValue}"` : drillDownValue,
blockID: `drillDown-${chartID}`,
options: {
moduleID,
fields,
prefilter,
presort: 'createdAt DESC',
hideRecordReminderButton: true,
Expand Down
78 changes: 61 additions & 17 deletions client/web/compose/src/components/PageBlocks/ChartConfigurator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@

<b-input-group-append>
<b-button
v-b-tooltip.noninteractive.hover="{ title: $t('chart.openInBuilder'), container: '#body' }"
:disabled="!selectedChart || (!selectedChart.canUpdateChart && !selectedChart.canDeleteChart)"
v-b-tooltip.hover="{ title: $t(chartSelectorTooltip), container: '#body' }"
:disabled="selectedChart && (!selectedChart.canUpdateChart && !selectedChart.canDeleteChart)"
variant="extra-light"
class="d-flex align-items-center"
:to="{ name: 'admin.charts.edit', params: { chartID: (selectedChart || {}).chartID }, query: null }"
:to="{ name: chartExternalLink, params: { chartID: (selectedChart || {}).chartID }, query: null }"
>
<font-awesome-icon :icon="['fas', 'external-link-alt']" />
</b-button>
Expand All @@ -32,6 +32,7 @@

<template v-if="isDrillDownAvailable">
<b-form-group
:label="$t('chart.drillDown.label')"
:description="$t('chart.drillDown.description')"
label-class="d-flex align-items-center text-primary"
class="mb-1"
Expand All @@ -43,16 +44,32 @@
class="mb-2"
/>

<c-input-select
v-model="options.drillDown.blockID"
:options="drillDownOptions"
:get-option-key="getOptionKey"
:disabled="!options.drillDown.enabled"
:get-option-label="o => o.title || o.kind"
:reduce="option => option.blockID"
:clearable="true"
:placeholder="$t('chart.drillDown.openInModal')"
/>
<b-input-group>
<c-input-select
v-model="options.drillDown.blockID"
:options="drillDownOptions"
:get-option-key="getOptionKey"
:disabled="!options.drillDown.enabled"
:get-option-label="o => o.title || o.kind"
:reduce="option => option.blockID"
:clearable="true"
:placeholder="$t('chart.drillDown.openInModal')"
/>

<b-input-group-append>
<column-picker
ref="columnPicker"
:module="selectedChartModule"
:fields="selectedDrilldownFields"
:disabled="!!options.drillDown.blockID || !options.drillDown.enabled"
variant="extra-light"
size="md"
@updateFields="onUpdateFields"
>
<font-awesome-icon :icon="['fas', 'wrench']" />
</column-picker>
</b-input-group-append>
</b-input-group>
</b-form-group>
</template>
</b-tab>
Expand All @@ -61,6 +78,7 @@
import base from './base'
import { mapGetters } from 'vuex'
import { NoID } from '@cortezaproject/corteza-js'
import ColumnPicker from 'corteza-webapp-compose/src/components/Admin/Module/Records/ColumnPicker'
export default {
i18nOptions: {
Expand All @@ -69,6 +87,10 @@ export default {
name: 'Chart',
components: {
ColumnPicker,
},
extends: base,
data () {
Expand All @@ -83,6 +105,7 @@ export default {
computed: {
...mapGetters({
charts: 'chart/set',
getModuleByID: 'module/getByID',
}),
selectedChart () {
Expand All @@ -93,6 +116,14 @@ export default {
return this.charts.find(({ chartID }) => chartID === this.options.chartID)
},
chartExternalLink () {
return !this.selectedChart ? 'admin.charts' : 'admin.charts.edit'
},
chartSelectorTooltip () {
return !this.selectedChart ? 'chart.openChartList' : 'chart.openInBuilder'
},
selectedChartModuleID () {
if (!this.selectedChart) return
Expand All @@ -101,6 +132,18 @@ export default {
return moduleID
},
selectedChartModule () {
if (!this.selectedChartModuleID) return
return this.getModuleByID(this.selectedChartModuleID)
},
selectedDrilldownFields () {
if (!this.selectedChart) return []
return this.options.drillDown.recordListOptions.fields
},
isDrillDownAvailable () {
if (!this.selectedChart) return
Expand All @@ -116,15 +159,16 @@ export default {
methods: {
chartSelected () {
this.options.drillDown = {
enabled: false,
blockID: '',
}
this.block.resetDrillDown()
},
getOptionKey ({ chartID }) {
return chartID
},
onUpdateFields (fields) {
this.options.drillDown.recordListOptions.fields = fields.map(({ fieldID }) => fieldID)
},
},
}
</script>
2 changes: 2 additions & 0 deletions client/web/compose/src/components/PageBlocks/MetricBase.vue
Original file line number Diff line number Diff line change
Expand Up @@ -208,12 +208,14 @@ export default {
} else {
// Open in modal
const metricID = `${this.block.blockID}-${name.replace(/\s+/g, '-').toLowerCase()}-${moduleID}-${metricIndex}`
const { fields = [] } = this.options.metrics[metricIndex].drillDown.recordListOptions || {}
const block = new compose.PageBlockRecordList({
title: name || this.$t('metric.metricDrillDown'),
blockID: `drillDown-${metricID}`,
options: {
moduleID,
fields,
prefilter: filter,
presort: 'createdAt DESC',
hideRecordReminderButton: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@
</b-form-group>
</fieldset>

<fieldset>
<fieldset v-if="selectedMetricModule">
<h5>
{{ $t('metric.edit.metricLabel') }}
</h5>
Expand Down Expand Up @@ -262,23 +262,39 @@
>
<template #label>
{{ $t('metric.drillDown.label') }}

<b-form-checkbox
v-model="edit.drillDown.enabled"
switch
class="ml-1"
class="ml-1 mb-1"
/>
</template>

<c-input-select
v-model="edit.drillDown.blockID"
:options="drillDownOptions"
:disabled="!edit.drillDown.enabled"
:get-option-label="o => o.title || o.kind"
:reduce="option => option.blockID"
:clearable="true"
:placeholder="$t('metric.drillDown.openInModal')"
append-to-body
/>
<b-input-group>
<c-input-select
v-model="edit.drillDown.blockID"
:options="drillDownOptions"
:disabled="!edit.drillDown.enabled"
:get-option-label="o => o.title || o.kind"
:reduce="option => option.blockID"
:clearable="true"
:placeholder="$t('metric.drillDown.openInModal')"
append-to-body
/>

<b-input-group-append>
<column-picker
:module="selectedMetricModule"
:disabled="!!edit.drillDown.blockID || !edit.drillDown.enabled"
:fields="selectedDrilldownFields"
variant="extra-light"
size="md"
@updateFields="onUpdateFields"
>
<font-awesome-icon :icon="['fas', 'wrench']" />
</column-picker>
</b-input-group-append>
</b-input-group>
</b-form-group>
</fieldset>
</b-card>
Expand Down Expand Up @@ -332,6 +348,7 @@ import base from '../base'
import MStyle from './MStyle'
import { mapGetters } from 'vuex'
import MetricBase from '../MetricBase'
import ColumnPicker from 'corteza-webapp-compose/src/components/Admin/Module/Records/ColumnPicker'
import { compose, NoID } from '@cortezaproject/corteza-js'
export default {
Expand All @@ -343,6 +360,7 @@ export default {
components: {
MStyle,
MetricBase,
ColumnPicker,
},
extends: base,
Expand Down Expand Up @@ -374,15 +392,21 @@ export default {
computed: {
...mapGetters({
modules: 'module/set',
moduleByID: 'module/getByID',
getModuleByID: 'module/getByID',
}),
fields () {
if (!this.edit || !this.edit.moduleID) {
return []
}
return this.moduleByID(this.edit.moduleID).fields
return this.getModuleByID(this.edit.moduleID).fields
},
selectedDrilldownFields () {
if (!this.edit || !this.edit.drillDown.recordListOptions.fields) return []
return this.edit.drillDown.recordListOptions.fields
},
metricFields () {
Expand All @@ -405,6 +429,12 @@ export default {
drillDownOptions () {
return this.page.blocks.filter(({ blockID, kind, options = {} }) => kind === 'RecordList' && blockID !== NoID && options.moduleID === this.edit.moduleID)
},
selectedMetricModule () {
if (!this.edit.moduleID) return undefined
return this.getModuleByID(this.edit.moduleID)
},
},
watch: {
Expand Down Expand Up @@ -466,6 +496,10 @@ export default {
}
},
onUpdateFields (fields) {
this.edit.drillDown.recordListOptions.fields = fields
},
setDefaultValues () {
this.edit = undefined
this.dimensionModifiers = []
Expand Down
Loading

0 comments on commit f0d7786

Please sign in to comment.