Skip to content

Commit f8d3f0f

Browse files
fagublafagubla
committed
FOUR-21710:The options in the select list disappears to record list with collection configured
1 parent af55fdd commit f8d3f0f

File tree

2 files changed

+155
-158
lines changed

2 files changed

+155
-158
lines changed

‎src/components/inspector/collection-data-source.vue‎

Lines changed: 153 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
<template>
2+
<div>
23
<div>
3-
<div>
4-
<label for="collectionsource">{{ $t("Source of Record List") }}</label>
5-
<b-form-select
6-
id="collectionsource"
7-
v-model="sourceOptions"
8-
:options="sourceDisplayOptions"
9-
data-cy="inspector-collection-data-source"
10-
@change="displayOptionChange"
11-
/>
12-
<small class="mt-3 form-text text-muted">{{
13-
$t("A record list can display the data of a defined variable or a collection")
14-
}}</small>
15-
</div>
16-
<div class="mt-2" v-if="sourceOptions === 'Collection'">
17-
18-
<CollectionRecordsList
19-
v-model="collectionFields"
20-
:record-pmql="pmql"
21-
@change="collectionChanged"/>
22-
23-
<pmql-input
4+
<label for="collectionsource">{{ $t("Source of Record List") }}</label>
5+
<b-form-select
6+
id="collectionsource"
7+
v-model="sourceOptions"
8+
:options="sourceDisplayOptions"
9+
data-cy="inspector-collection-data-source"
10+
@change="displayOptionChange"
11+
/>
12+
<small class="mt-3 form-text text-muted">
13+
{{ $t("A record list can display the data of a defined variable or a collection") }}
14+
</small>
15+
</div>
16+
<div v-if="sourceOptions === 'Collection'" class="mt-2">
17+
<CollectionRecordsList
18+
v-model="collectionFields"
19+
:record-pmql="pmql"
20+
@change="collectionChanged"
21+
/>
22+
<pmql-input
2423
v-model="pmql"
2524
:search-type="'collections_w_mustaches'"
2625
class="mt-3 mb-1"
@@ -31,172 +30,171 @@
3130
:placeholder="$t('PMQL')"
3231
>
3332
</pmql-input>
34-
<small class="mt-3 form-text text-muted">{{
35-
$t("Leave this field empty to show all the records of the collection")
36-
}}</small>
37-
<label class="mt-3" id="data-selection">{{ $t("Data Selection") }}</label>
38-
33+
<small class="mt-3 form-text text-muted">
34+
{{ $t("Leave this field empty to show all the records of the collection") }}
35+
</small>
36+
<label id="data-selection" class="mt-3">{{ $t("Data Selection") }}</label>
37+
<b-form-select
38+
id="data-selection"
39+
v-model="dataSelectionOptions"
40+
:options="dataSelectionDisplayOptions"
41+
data-cy="inspector-collection-data-selection"
42+
/>
43+
<small class="mt-3 form-text text-muted">
44+
{{ $t("The user can select specific data to be stored into a variable") }}
45+
</small>
46+
<div v-if="dataSelectionOptions === 'single-field'" class="mt-3">
47+
<label id="single-columns">{{ $t("Column") }}</label>
3948
<b-form-select
40-
id="data-selection"
41-
v-model="dataSelectionOptions"
42-
:options="dataSelectionDisplayOptions"
43-
data-cy="inspector-collection-data-selection"
44-
/>
45-
<small class="mt-3 form-text text-muted">{{
46-
$t("The user can select specific data to be stored into a variable")
47-
}}</small>
48-
49-
<div class="mt-3" v-if="dataSelectionOptions === 'single-field'">
50-
<label id="single-columns">{{ $t('Column') }}</label>
51-
<b-form-select
5249
id="single-columns"
5350
v-model="singleField"
5451
:options="singleFieldOptions"
5552
data-cy="inspector-collection-single-field"
5653
>
57-
<option disabled value="">{{ $t("Select a column") }}</option>
58-
</b-form-select>
59-
</div>
54+
<option disabled value="">{{ $t("Select a column") }}</option>
55+
</b-form-select>
6056
</div>
6157
</div>
62-
</template>
63-
<script>
64-
65-
import CollectionRecordsList from "./collection-records-list.vue"
66-
import { cloneDeep } from "lodash";
58+
</div>
59+
</template>
60+
<script>
61+
import { cloneDeep } from "lodash";
62+
import CollectionRecordsList from "./collection-records-list.vue";
6763
68-
const CONFIG_FIELDS = [
69-
"collectionFields",
70-
"collectionFieldsColumns",
71-
"pmql",
72-
"sourceOptions",
73-
"variableStore",
74-
"dataSelectionOptions",
75-
"singleField"
76-
];
77-
export default {
78-
components: {
79-
CollectionRecordsList
80-
},
81-
props: ["value", "screenType"],
82-
data() {
83-
return {
84-
fields: [],
85-
sourceOptions: "Variable",
86-
submitCollectionCheck: true,
87-
sourceDisplayOptions: [],
88-
collectionFields: [],
89-
collectionFieldsColumns: [],
90-
variableStore: null,
91-
pmql: null,
92-
sourceDisplayOptions: [
64+
const CONFIG_FIELDS = [
65+
"collectionFields",
66+
"collectionFieldsColumns",
67+
"pmql",
68+
"sourceOptions",
69+
"variableStore",
70+
"dataSelectionOptions",
71+
"singleField"
72+
];
73+
export default {
74+
components: {
75+
CollectionRecordsList
76+
},
77+
props: ["value", "screenType"],
78+
data() {
79+
return {
80+
fields: [],
81+
sourceOptions: "Variable",
82+
submitCollectionCheck: true,
83+
collectionFields: [],
84+
collectionFieldsColumns: [],
85+
variableStore: null,
86+
pmql: null,
87+
sourceDisplayOptions: [
9388
{
94-
text: this.$t('Variable'),
95-
value: 'Variable',
89+
text: this.$t("Variable"),
90+
value: "Variable"
9691
},
9792
{
98-
text: this.$t('Collection'),
99-
value: 'Collection',
100-
},
93+
text: this.$t("Collection"),
94+
value: "Collection"
95+
}
10196
],
10297
dataSelectionDisplayOptions: [
10398
{
104-
text: this.$t('Do not allow selection'),
105-
value: 'no-selection',
99+
text: this.$t("Do not allow selection"),
100+
value: "no-selection"
106101
},
107102
{
108-
text: this.$t('Single field of record'),
109-
value: 'single-field',
103+
text: this.$t("Single field of record"),
104+
value: "single-field"
110105
},
111106
{
112-
text: this.$t('Single record'),
113-
value: 'single-record',
107+
text: this.$t("Single record"),
108+
value: "single-record"
114109
},
115110
{
116-
text: this.$t('Multiple records'),
117-
value: 'multiple-records',
118-
},
111+
text: this.$t("Multiple records"),
112+
value: "multiple-records"
113+
}
119114
],
120-
dataSelectionOptions: "no-selection",
115+
dataSelectionOptions: "no-selection",
121116
collectionColumns: [],
122117
singleFieldOptions: [],
123118
singleField: null
124-
};
125-
},
126-
methods: {
127-
displayOptionChange() {
128-
this.collectionFields = [];
129-
this.collectionFieldsColumns = [];
130-
this.pmql = null;
131-
this.$root.$emit("collection-changed", true);
132-
},
133-
collectionChanged(data) {
134-
if (Array.isArray(data)) {
135-
const [firstItem] = data;
136-
const collectionId = firstItem?.collection_id;
137-
if(collectionId !== this.collectionFields.collectionId) {
138-
this.$root.$emit("collection-changed", true);
139-
}
140-
}
141-
},
142-
getCollectionColumns(records) {
143-
const [firstRecord] = records?.dataRecordList || [];
144-
145-
if (firstRecord?.data) {
146-
const dataObject = firstRecord.data;
147-
148-
for (const [key, value] of Object.entries(dataObject)) {
149-
this.singleFieldOptions.push({ text: key, value: key });
150-
}
119+
};
120+
},
121+
computed: {
122+
options() {
123+
return Object.fromEntries(
124+
CONFIG_FIELDS.map((field) => [field, this[field]])
125+
);
126+
}
127+
},
128+
watch: {
129+
value: {
130+
handler(value) {
131+
if (!value) {
132+
return;
151133
}
134+
CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
152135
},
136+
immediate: true
153137
},
154-
computed: {
155-
options() {
156-
return Object.fromEntries(
157-
CONFIG_FIELDS.map((field) => [field, this[field]])
158-
);
138+
sourceOptions: {
139+
handler(changeOption) {
140+
this.$root.$emit("record-list-option", changeOption);
159141
}
160142
},
161-
watch: {
162-
value: {
163-
handler(value) {
164-
if (!value) {
165-
return;
166-
}
167-
CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
168-
},
169-
immediate: true
170-
},
171-
sourceOptions: {
172-
handler(changeOption) {
173-
this.$root.$emit("record-list-option", changeOption);
174-
}
143+
collectionFields: {
144+
handler(collectionFieldsData) {
145+
this.getCollectionColumns(collectionFieldsData);
146+
this.$root.$emit("record-list-collection", collectionFieldsData);
175147
},
176-
collectionFields: {
177-
handler(collectionFieldsData) {
178-
this.getCollectionColumns(collectionFieldsData);
179-
this.$root.$emit("record-list-collection", collectionFieldsData);
180-
},
181-
deep: true
148+
deep: true
149+
},
150+
pmql: {
151+
handler(newPmql) {
152+
this.$root.$emit("change-pmql", newPmql);
153+
}
154+
},
155+
submitCollectionCheck(newValue) {
156+
this.submitCollectionCheck = newValue;
157+
},
158+
options: {
159+
handler() {
160+
this.$emit("input", this.options);
182161
},
183-
pmql: {
184-
handler(newPmql) {
185-
this.$root.$emit("change-pmql", newPmql);
162+
deep: true
163+
},
164+
dataSelectionOptions() {
165+
this.singleField = null;
166+
}
167+
},
168+
mounted() {
169+
this.$root.$emit("record-list-option", this.sourceOptions);
170+
},
171+
methods: {
172+
displayOptionChange() {
173+
this.collectionFields = [];
174+
this.collectionFieldsColumns = [];
175+
this.pmql = null;
176+
this.$root.$emit("collection-changed", true);
177+
},
178+
collectionChanged(data) {
179+
if (Array.isArray(data)) {
180+
const [firstItem] = data;
181+
const collectionId = firstItem?.collection_id;
182+
if (collectionId !== this.collectionFields.collectionId) {
183+
this.$root.$emit("collection-changed", true);
186184
}
187-
},
188-
submitCollectionCheck(newValue) {
189-
this.submitCollectionCheck = newValue;
190-
},
191-
options: {
192-
handler() {
193-
this.$emit("input", this.options);
194-
},
195-
deep: true
196-
},
197-
dataSelectionOptions() {
198-
this.singleField = null;
199185
}
200186
},
201-
};
202-
</script>
187+
getCollectionColumns(records) {
188+
const [firstRecord] = records?.dataRecordList || [];
189+
190+
if (firstRecord?.data) {
191+
const dataObject = firstRecord.data;
192+
193+
for (const [key, value] of Object.entries(dataObject)) {
194+
this.singleFieldOptions.push({ text: key, value: key });
195+
}
196+
}
197+
}
198+
}
199+
};
200+
</script>

‎src/components/inspector/column-setup.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -360,10 +360,9 @@ export default {
360360
mounted() {
361361
this.initData();
362362
this.$root.$on("record-list-option", (val) => {
363-
this.$nextTick(()=>{
364-
this.isCollection = (val === "Collection") ? true : false;
363+
this.$nextTick(() => {
364+
this.isCollection = val === "Collection";
365365
});
366-
367366
});
368367
this.$root.$on("record-list-collection", (collectionData) => {
369368
this.getCollectionColumns(collectionData);

0 commit comments

Comments
 (0)