Skip to content

Commit 6d104c1

Browse files
dbulatovicx32dbulatovicx32
committed
dashboard editor: minor fixes
- fixed ai settings layout - fix table theme style being lost on open
1 parent a489a3b commit 6d104c1

5 files changed

Lines changed: 79 additions & 64 deletions

File tree

‎src/i18n/en-US/messages.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -601,6 +601,7 @@
601601
"generalSettings": {
602602
"aiSettingsError": "No dataset available for AI settings. Please add a dataset in the Dataset Editor.",
603603
"aiSettingsHint": "These settings are used by the AI algorithm to understand the data and provide better results. You can set the desired dataset to be investigated and columns specifid informations.",
604+
"selectDataset": "Select Dataset",
604605
"aisettings": "AI Settings",
605606
"attribute": "Attribute",
606607
"background": {

‎src/modules/documentExecution/dashboard/generalSettings/DashboardGeneralSettings.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
<q-separator />
3232
<WidgetEditor ref="widgetEditor" :dashboard-id="dashboardId" :datasets="datasets" :variables="variables" :prop-widget="customHeaderWidget" :class="{ 'editor-disabled': !menuWidgetsConfig.enableCustomHeader }"></WidgetEditor>
3333
</div>
34-
<AiSettings v-if="isEnterprise && selectedOption === 'aisettings'" :dashboard-model-prop="dashboardModel" @change="setAiModel" />
3534

3635
<q-card v-if="selectedOption === 'CrossNavigation'" class="kn-flex q-ma-md column" style="overflow: hidden">
3736
<DashboardCrossNavigation ref="crossNavRef" :dashboard-id="dashboardId" />

‎src/modules/documentExecution/dashboard/generalSettings/aisettings/DashboardAiSettings.vue‎

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,65 @@
11
<template>
2-
<div class="q-px-md q-pb-xs">
3-
<div class="row q-col-gutter-sm">
4-
<q-banner class="bg-info text-black q-mx-sm q-ml-md" rounded dense>
5-
<template v-slot:avatar> <q-icon name="info" color="primary" /> </template>{{ $t('dashboard.generalSettings.aiSettingsHint') }}
6-
</q-banner>
7-
<q-select v-if="datasets.length > 0" filled :options="datasets" v-model="selectedDataset" option-label="dsLabel" label="Select Dataset" class="col-md-6 col-sm-12 q-ml-sm" @update:model-value="updateDatasetColumns" />
8-
<q-banner v-else class="bg-warning text-black q-mx-sm q-ml-md q-mt-sm" rounded dense>
9-
<template v-slot:avatar> <q-icon name="warning" color="primary" /> </template>{{ $t('dashboard.generalSettings.aiSettingsError') }}
10-
</q-banner>
11-
<q-table dense v-if="datasets.length > 0 && selectedDataset && datasetColumns" flat :rows="datasetColumns" :columns="columns" class="col-12" :pagination="{ rowsPerPage: 20 }" row-key="name">
12-
<template #header-cell="slotProps">
13-
<q-th :props="slotProps">
14-
<span class="kn-capitalize">{{ $t(slotProps.col.label) }}</span>
15-
</q-th>
16-
</template>
17-
<template #header-cell-meaningful="slotProps">
18-
<q-th align="right">
19-
<span
20-
>{{ $t(slotProps.col.label) }}
21-
<q-icon name="help" size="xs">
22-
<q-tooltip :delay="500">{{ $t('dashboard.generalSettings.meaningfulHint') }}</q-tooltip>
23-
</q-icon>
24-
</span>
25-
</q-th>
26-
</template>
2+
<div class="q-px-md q-pb-md">
3+
<div class="row q-col-gutter-sm items-center">
4+
<div class="col-12">
5+
<q-banner class="bg-info text-black" rounded dense>
6+
<template v-slot:avatar> <q-icon name="info" color="primary" /> </template>{{ $t('dashboard.generalSettings.aiSettingsHint') }}
7+
</q-banner>
8+
</div>
9+
<div class="col-6">
10+
<q-select v-if="datasets.length > 0" filled :options="datasets" v-model="selectedDataset" option-label="dsLabel" :label="$t('dashboard.generalSettings.selectDataset')" @update:model-value="updateDatasetColumns" />
11+
<q-banner v-else class="bg-warning text-black" rounded dense>
12+
<template v-slot:avatar> <q-icon name="warning" color="primary" /> </template>{{ $t('dashboard.generalSettings.aiSettingsError') }}
13+
</q-banner>
14+
</div>
15+
<div v-if="datasets.length > 0 && selectedDataset && datasetColumns" class="col-12">
16+
<q-table dense flat :rows="datasetColumns" :columns="columns" :pagination="{ rowsPerPage: 20 }" row-key="name">
17+
<template #header-cell="slotProps">
18+
<q-th :props="slotProps">
19+
<span class="kn-capitalize">{{ $t(slotProps.col.label) }}</span>
20+
</q-th>
21+
</template>
22+
<template #header-cell-meaningful="slotProps">
23+
<q-th align="right">
24+
<span
25+
>{{ $t(slotProps.col.label) }}
26+
<q-icon name="help" size="xs">
27+
<q-tooltip :delay="500">{{ $t('dashboard.generalSettings.meaningfulHint') }}</q-tooltip>
28+
</q-icon>
29+
</span>
30+
</q-th>
31+
</template>
2732

28-
<template #body-cell-meaningful="slotProps">
29-
<q-td align="right">
30-
<q-checkbox indeterminate-value="not answered" size="xs" v-model="slotProps.row.meaningful" @update:model-value="updateRow(slotProps.rowIndex, slotProps.row.meaningful)" />
31-
</q-td>
32-
</template>
33-
<template #body-cell-dataType="slotProps">
34-
<q-td>
35-
<span>{{ getDataType(slotProps.value) }}</span>
36-
</q-td>
37-
</template>
38-
<template #body-cell-description="slotProps">
39-
<q-td :props="slotProps">
40-
<q-btn size="sm" :flat="!slotProps.row.description || slotProps.row.description == ''" round color="primary" icon="info" @click="openDescriptionDialog(slotProps.rowIndex)">
41-
<q-tooltip v-if="slotProps.row.description && slotProps.row.description !== ''" anchor="top middle" self="bottom middle" :offset="[0, 10]">
42-
{{ slotProps.row.description }}
43-
</q-tooltip>
44-
</q-btn>
45-
</q-td>
46-
</template>
47-
<template #body-cell-buttons="slotProps">
48-
<q-td :props="slotProps">
49-
<q-btn size="sm" flat round color="primary" icon="delete" @click="deleteColumn(slotProps.rowIndex)">
50-
<q-tooltip :delay="500">
51-
{{ $t('common.delete') }}
52-
</q-tooltip>
53-
</q-btn>
54-
</q-td>
55-
</template>
56-
</q-table>
33+
<template #body-cell-meaningful="slotProps">
34+
<q-td align="right">
35+
<q-checkbox indeterminate-value="not answered" size="xs" v-model="slotProps.row.meaningful" @update:model-value="updateRow(slotProps.rowIndex, slotProps.row.meaningful)" />
36+
</q-td>
37+
</template>
38+
<template #body-cell-dataType="slotProps">
39+
<q-td>
40+
<span>{{ getDataType(slotProps.value) }}</span>
41+
</q-td>
42+
</template>
43+
<template #body-cell-description="slotProps">
44+
<q-td :props="slotProps">
45+
<q-btn size="sm" :flat="!slotProps.row.description || slotProps.row.description == ''" round color="primary" icon="info" @click="openDescriptionDialog(slotProps.rowIndex)">
46+
<q-tooltip v-if="slotProps.row.description && slotProps.row.description !== ''" anchor="top middle" self="bottom middle" :offset="[0, 10]">
47+
{{ slotProps.row.description }}
48+
</q-tooltip>
49+
</q-btn>
50+
</q-td>
51+
</template>
52+
<template #body-cell-buttons="slotProps">
53+
<q-td :props="slotProps">
54+
<q-btn size="sm" flat round color="primary" icon="delete" @click="deleteColumn(slotProps.rowIndex)">
55+
<q-tooltip :delay="500">
56+
{{ $t('common.delete') }}
57+
</q-tooltip>
58+
</q-btn>
59+
</q-td>
60+
</template>
61+
</q-table>
62+
</div>
5763
</div>
5864
</div>
5965
<q-dialog v-model="descriptionDialog">

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/TableWidget/TableWidgetSettingsAccordion.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,8 @@ export default defineComponent({
147147
activeIndex: -1,
148148
styleChangedFlag: false,
149149
themePropertyChanged: false,
150-
themeId: null as number | null
150+
themeId: null as number | null,
151+
isApplyingTheme: false
151152
}
152153
},
153154
computed: {
@@ -188,11 +189,15 @@ export default defineComponent({
188189
},
189190
onStyleChanged() {
190191
this.styleChangedFlag = !this.styleChangedFlag
191-
if (this.themeId) this.themePropertyChanged = true
192+
if (this.themeId && !this.isApplyingTheme) this.themePropertyChanged = true
192193
},
193194
onThemeSelected(themeId: number | null) {
195+
this.isApplyingTheme = true
194196
this.themeId = themeId
195197
this.themePropertyChanged = false
198+
this.$nextTick(() => {
199+
this.isApplyingTheme = false
200+
})
196201
}
197202
}
198203
})

‎src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/common/style/WidgetEditorThemePicker.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { defineComponent, PropType } from 'vue'
1212
import { IWidget } from '@/modules/documentExecution/dashboard/Dashboard'
1313
import { IDashboardTheme } from '@/modules/managers/dashboardThemeManagement/DashboardThememanagement'
1414
import { emitter } from '@/modules/documentExecution/dashboard/DashboardHelpers'
15-
import { mapActions } from 'pinia'
15+
import { mapActions, mapState } from 'pinia'
1616
import { applyStylesToWidget } from '@/modules/documentExecution/dashboard/generalSettings/themes/ThemesHelper'
1717
import dashboardStore from '@/modules/documentExecution/dashboard/Dashboard.store'
1818
@@ -24,36 +24,40 @@ export default defineComponent({
2424
data() {
2525
return {
2626
widget: null as IWidget | null,
27-
themes: [] as IDashboardTheme[]
27+
isApplyingTheme: false
2828
}
2929
},
30-
computed: {},
30+
computed: {
31+
...mapState(dashboardStore, { themes: 'allThemes' })
32+
},
3133
watch: {
3234
styleChangedFlag() {
35+
if (this.isApplyingTheme) return
3336
if (this.widget) this.widget.settings.style.themeId = null
3437
}
3538
},
3639
created() {
37-
this.loadThemes()
3840
this.loadWidgetStyle()
3941
},
4042
methods: {
4143
...mapActions(dashboardStore, ['getAllThemes']),
42-
loadThemes() {
43-
this.themes = this.getAllThemes()
44-
},
4544
loadWidgetStyle() {
4645
this.widget = this.widgetModel
4746
if (this.widget?.settings.style?.themeName) delete this.widget.settings.style.themeName
4847
if (this.widget.settings.style.themeId) this.onThemeSelected(this.widget.settings.style.themeId)
4948
},
5049
onThemeSelected(value: number | null) {
50+
if (this.isApplyingTheme) return
5151
const selectedTheme = this.themes.find((theme: IDashboardTheme) => theme.id === value)
5252
if (!selectedTheme || !this.widget) return
53+
this.isApplyingTheme = true
5354
const widgetTypeForThemes = this.getWidgetTypeForThemes()
5455
applyStylesToWidget(this.widget, selectedTheme, selectedTheme.config[widgetTypeForThemes])
5556
emitter.emit('themeSelected')
5657
this.$emit('themeSelected', selectedTheme.themeName)
58+
this.$nextTick(() => {
59+
this.isApplyingTheme = false
60+
})
5761
},
5862
getWidgetTypeForThemes() {
5963
if (!this.widget) return ''

0 commit comments

Comments
 (0)