|
1 | 1 | <template> |
| 2 | + <div> |
2 | 3 | <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 |
24 | 23 | v-model="pmql" |
25 | 24 | :search-type="'collections_w_mustaches'" |
26 | 25 | class="mt-3 mb-1" |
|
31 | 30 | :placeholder="$t('PMQL')" |
32 | 31 | > |
33 | 32 | </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 for="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 for="single-columns">{{ $t("Column") }}</label> |
39 | 48 | <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 |
52 | 49 | id="single-columns" |
53 | 50 | v-model="singleField" |
54 | 51 | :options="singleFieldOptions" |
55 | 52 | data-cy="inspector-collection-single-field" |
56 | 53 | > |
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> |
60 | 56 | </div> |
61 | 57 | </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"; |
67 | 63 |
|
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: [ |
93 | 88 | { |
94 | | - text: this.$t('Variable'), |
95 | | - value: 'Variable', |
| 89 | + text: this.$t("Variable"), |
| 90 | + value: "Variable" |
96 | 91 | }, |
97 | 92 | { |
98 | | - text: this.$t('Collection'), |
99 | | - value: 'Collection', |
100 | | - }, |
| 93 | + text: this.$t("Collection"), |
| 94 | + value: "Collection" |
| 95 | + } |
101 | 96 | ], |
102 | 97 | dataSelectionDisplayOptions: [ |
103 | 98 | { |
104 | | - text: this.$t('Do not allow selection'), |
105 | | - value: 'no-selection', |
| 99 | + text: this.$t("Do not allow selection"), |
| 100 | + value: "no-selection" |
106 | 101 | }, |
107 | 102 | { |
108 | | - text: this.$t('Single field of record'), |
109 | | - value: 'single-field', |
| 103 | + text: this.$t("Single field of record"), |
| 104 | + value: "single-field" |
110 | 105 | }, |
111 | 106 | { |
112 | | - text: this.$t('Single record'), |
113 | | - value: 'single-record', |
| 107 | + text: this.$t("Single record"), |
| 108 | + value: "single-record" |
114 | 109 | }, |
115 | 110 | { |
116 | | - text: this.$t('Multiple records'), |
117 | | - value: 'multiple-records', |
118 | | - }, |
| 111 | + text: this.$t("Multiple records"), |
| 112 | + value: "multiple-records" |
| 113 | + } |
119 | 114 | ], |
120 | | - dataSelectionOptions: "no-selection", |
| 115 | + dataSelectionOptions: "no-selection", |
121 | 116 | collectionColumns: [], |
122 | 117 | singleFieldOptions: [], |
123 | 118 | 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; |
151 | 133 | } |
| 134 | + CONFIG_FIELDS.forEach((field) => (this[field] = value[field])); |
152 | 135 | }, |
| 136 | + immediate: true |
153 | 137 | }, |
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); |
159 | 141 | } |
160 | 142 | }, |
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); |
175 | 147 | }, |
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); |
182 | 161 | }, |
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); |
186 | 184 | } |
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; |
199 | 185 | } |
200 | 186 | }, |
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] of Object.entries(dataObject)) { |
| 194 | + this.singleFieldOptions.push({ text: key, value: key }); |
| 195 | + } |
| 196 | + } |
| 197 | + } |
| 198 | + } |
| 199 | +}; |
| 200 | +</script> |
0 commit comments