DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Add name to all column selector labels in reporter and make the selectors searchable

Browse Source
This commit is contained in:
Jože Fortun 2022-12-19 18:40:39 +01:00
parent e9efe5d3a9
commit 0a243ad3b7
9 changed files with 153 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/web/reporter/src/components/Common/ColumnSelector.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<vue-select
key="name"
:value="value"
:options="columns"
:get-option-label="getColumnLabel"
:placeholder="$t('general:label.none')"
:reduce="r => r.name"
append-to-body
class="column-selector bg-white"
v-on="$listeners"
/>
</template>
<script>
import { VueSelect } from 'vue-select'
export default {
components: {
VueSelect,
},
props: {
columns: {
type: Array,
required: true,
},
value: {
type: String,
default: '',
},
},
methods: {
getColumnLabel ({ name, label }) {
return `${label} (${name})`
},
},
}
</script>
<style lang="scss">
.column-selector {
min-width: 15vw !important;
max-width: 150px !important;
}
</style>

100
client/web/reporter/src/components/Common/Prefilter.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="prefilter">
<b-table-simple
v-if="render && filter.ref"
responsive
@ -23,13 +23,13 @@
class="w-auto"
@change="reRender()"
/>
<h6
<span
v-else
class="mb-0"
class="px-3"
style="min-width: 60px;"
>
{{ argIndex === 0 ? 'Where' : `${group.args[0].ref[0].toUpperCase() + group.args[0].ref.slice(1).toLowerCase()}` }}
</h6>
</span>
</td>
<template v-if="Object.keys(arg).includes('raw')">
<td>
@ -71,22 +71,11 @@
</b-input-group-prepend>
<template v-if="group.args[0].args[argIndex].args[0].args[0].value && getColumnData(group.args[0].args[argIndex].args[0].args[1]).multivalue">
<b-form-select
:options="columns"
text-field="label"
value-field="name"
style="max-width: 33%;"
<column-selector
:columns="columns"
:value="group.args[0].args[argIndex].args[0].args[1].symbol"
@change="(symbol) => setType(groupIndex, argIndex, symbol, group.args[0].args[argIndex].args[0].args[0].value['@value'])"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('general:label.none') }}
</b-form-select-option>
</template>
</b-form-select>
@input="setType(groupIndex, argIndex, $event, group.args[0].args[argIndex].args[0].args[0].value['@value'])"
/>
<b-form-select
v-model="group.args[0].args[argIndex].args[0].ref"
@ -101,22 +90,11 @@
</template>
<template v-else>
<b-form-select
:options="columns"
text-field="label"
value-field="name"
style="max-width: 33%;"
<column-selector
:value="group.args[0].args[argIndex].args[0].args[0].symbol"
@change="(symbol) => setType(groupIndex, argIndex, symbol, group.args[0].args[argIndex].args[0].args[1].value['@value'])"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('general:label.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="columns"
@input="setType(groupIndex, argIndex, $event, group.args[0].args[argIndex].args[0].args[1].value['@value'])"
/>
<b-form-select
v-model="group.args[0].args[argIndex].args[0].ref"
@ -218,7 +196,13 @@
</template>
<script>
import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
export default {
components: {
ColumnSelector,
},
props: {
filter: {
type: Object,
@ -394,27 +378,25 @@ export default {
},
setType (groupIndex, argIndex, symbol, value) {
if (symbol) {
// Get arg
if (this.filter.args[groupIndex].args[0].args[argIndex]) {
// Get type
const { kind, multivalue } = this.columns.find(({ name }) => name === symbol)
// Set type
if (kind) {
if (multivalue) {
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[0] = { value: { '@type': kind, '@value': value } }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[1] = { symbol }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].ref = 'in'
} else {
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[0] = { symbol }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[1] = { value: { '@type': kind, '@value': value } }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].ref = 'eq'
}
}
}
this.reRender()
if (!this.filter.args[groupIndex].args[0].args[argIndex]) {
return
}
// Get type
const { kind = '', multivalue } = this.columns.find(({ name }) => name === symbol) || {}
// Set type
if (multivalue) {
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[0] = { value: { '@type': kind, '@value': value } }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[1] = { symbol }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].ref = 'in'
} else {
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[0] = { symbol }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].args[1] = { value: { '@type': kind, '@value': value } }
this.filter.args[groupIndex].args[0].args[argIndex].args[0].ref = 'eq'
}
this.reRender()
},
reRender () {
@ -456,3 +438,13 @@ export default {
background-position: center;
}
</style>
<style lang="scss">
.prefilter .column-selector {
.vs__dropdown-toggle {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
</style>

20
client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Chart.vue
View File

@ -43,6 +43,7 @@
v-model="options.colorScheme"
:options="colorSchemes"
:reduce="cs => cs.value"
:placeholder="$t('general:label.default')"
label="label"
option-text="label"
option-value="value"
@ -108,20 +109,11 @@
:label="$t('display-element:chart.configurator.label-column')"
label-class="text-primary"
>
<b-form-select
<column-selector
v-model="options.labelColumn"
:options="labelColumns"
text-field="label"
value-field="name"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('display-element:chart.configurator.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="labelColumns"
style="min-width: 100% !important;"
/>
</b-form-group>
<b-form-group
@ -323,6 +315,7 @@
<script>
import base from './base'
import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
import ColumnPicker from 'corteza-webapp-reporter/src/components/Common/ColumnPicker'
import VueSelect from 'vue-select'
import { reporter, shared } from '@cortezaproject/corteza-js'
@ -331,6 +324,7 @@ const { colorschemes } = shared
export default {
components: {
VueSelect,
ColumnSelector,
ColumnPicker,
},

22
client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
View File

@ -5,20 +5,11 @@
:label="$t('display-element:metric.configurator.label-column')"
label-class="text-primary"
>
<b-form-select
<column-selector
v-model="options.valueColumn"
:options="valueColumns"
text-field="label"
value-field="name"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('display-element:metric.configurator.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="valueColumns"
style="min-width: 100% !important;"
/>
</b-form-group>
<b-row>
@ -86,8 +77,13 @@
<script>
import base from './base'
import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
export default {
components: {
ColumnSelector,
},
extends: base,
computed: {

39
client/web/reporter/src/components/Report/Datasources/Join.vue
View File

@ -68,20 +68,11 @@
:label="$t('datasources:primary.column')"
label-class="text-primary"
>
<b-form-select
<column-selector
v-model="step.join.localColumn"
:options="localColumns"
value-field="name"
text-field="label"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('general:label.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="localColumns"
style="min-width: 100% !important;"
/>
</b-form-group>
</b-col>
<b-col cols="6">
@ -90,20 +81,11 @@
:label="$t('datasources:secondary.column')"
label-class="text-primary"
>
<b-form-select
<column-selector
v-model="step.join.foreignColumn"
:options="foreignColumns"
value-field="name"
text-field="label"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('general:label.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="foreignColumns"
style="min-width: 100% !important;"
/>
</b-form-group>
</b-col>
</b-row>
@ -112,8 +94,13 @@
<script>
import base from './base.vue'
import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
export default {
components: {
ColumnSelector,
},
extends: base,
props: {

39
client/web/reporter/src/components/Report/Datasources/Link.vue
View File

@ -68,20 +68,11 @@
:label="$t('datasources:primary.column')"
label-class="text-primary"
>
<b-form-select
<column-selector
v-model="step.link.localColumn"
:options="localColumns"
value-field="name"
text-field="label"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('general:label.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="localColumns"
style="min-width: 100% !important;"
/>
</b-form-group>
</b-col>
<b-col cols="6">
@ -90,20 +81,11 @@
:label="$t('datasources:secondary.column')"
label-class="text-primary"
>
<b-form-select
<column-selector
v-model="step.link.foreignColumn"
:options="foreignColumns"
value-field="name"
text-field="label"
>
<template #first>
<b-form-select-option
value=""
>
{{ $t('general:label.none') }}
</b-form-select-option>
</template>
</b-form-select>
:columns="foreignColumns"
style="min-width: 100% !important;"
/>
</b-form-group>
</b-col>
</b-row>
@ -112,8 +94,13 @@
<script>
import base from './base.vue'
import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
export default {
components: {
ColumnSelector,
},
extends: base,
props: {

17
client/web/reporter/src/themes/corteza-base/custom.scss
View File

@ -63,13 +63,18 @@ th {
min-width: 20vw;
max-width: 300px;
.vs__search {
border: none !important;
&:not(.vs--open) .vs__selected + .vs__search {
width: 0;
padding: 0;
margin: 0;
border: none;
height: 0;
}
.vs__dropdown-toggle {
height: 100%;
border-color: $light;
border-width: 2px;
}
.vs__dropdown-option {
@ -83,11 +88,15 @@ th {
}
.vs__selected-options {
flex-wrap: nowrap;
width: 0;
}
.vs__selected {
word-break: break-all;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
}
}

6
lib/vue/src/components/input/CInputPresort.vue
View File

@ -26,7 +26,7 @@
>
<b-form-select
v-model="column.field"
:options="fields"
:options="availableFields"
text-field="label"
value-field="name"
class="rounded"
@ -161,8 +161,8 @@ export default {
]
},
sortedFields () {
return [...this.fields.sort((a, b) => a.label.localeCompare(b.label))]
availableFields () {
return this.fields.map(f => ({ ...f,label: `${f.label} (${f.name})` }))
}
},

1
locale/en/corteza-webapp-reporter/general.yaml
View File

@ -16,6 +16,7 @@ label:
save: Save
today: Today
urlPlaceholder: https://example.tld
default: Default
resourceList:
notFound: Not found
noItems: No items to show