Skip to content

Commit 39d087b

Browse files
sreenathsJohanAhlen
sreenaths
authored and
JohanAhlen
committed
[ui] Vue 3 - Migrated VariableSubstitution components
1 parent a1eec24 commit 39d087b

File tree

2 files changed

+169
-126
lines changed

2 files changed

+169
-126
lines changed

‎desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/VariableSubstitution.vue‎

Lines changed: 131 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,11 @@
3232
</template>
3333

3434
<script lang="ts">
35+
import { defineComponent, PropType } from 'vue';
36+
3537
import { cloneDeep } from 'lodash';
36-
import Vue from 'vue';
37-
import Component from 'vue-class-component';
38-
import { Prop, Watch } from 'vue-property-decorator';
3938
4039
import { Variable, VariableIndex, VariableOption } from './types';
41-
import './VariableSubstitution.scss';
4240
import { IdentifierLocation } from 'parse/types';
4341
import DataCatalogEntry, { FieldSourceMeta } from 'catalog/DataCatalogEntry';
4442
import { noop } from 'utils/hueUtils';
@@ -117,124 +115,149 @@
117115
} catch (err) {}
118116
};
119117
120-
@Component
121-
export default class VariableSubstitution extends Vue {
122-
@Prop({ required: false, default: {} })
123-
initialVariables?: { [name: string]: Variable };
124-
@Prop()
125-
locations?: IdentifierLocation[];
118+
export default defineComponent({
119+
props: {
120+
initialVariables: {
121+
type: Object as PropType<{ [name: string]: Variable }>,
122+
required: false,
123+
default: {}
124+
},
125+
locations: {
126+
type: Object as PropType<IdentifierLocation[]>,
127+
required: false,
128+
default: undefined
129+
}
130+
},
126131
127-
knownVariables: { [name: string]: KnownVariable } = {};
132+
emits: ['variables-changed'],
128133
129-
get activeVariables(): Variable[] {
130-
const active = Object.values(this.knownVariables).filter(variable => variable.active);
131-
active.sort((a, b) => a.index - b.index);
132-
return active;
133-
}
134+
data(): {
135+
knownVariables: { [name: string]: KnownVariable };
136+
} {
137+
return {
138+
knownVariables: {}
139+
};
140+
},
134141
135-
mounted(): void {
136-
if (this.initialVariables) {
137-
Object.values(this.initialVariables).forEach((variable, index) => {
138-
const cloned = <KnownVariable>cloneDeep(variable);
139-
cloned.active = true;
140-
cloned.index = index;
141-
this.$set(this.knownVariables, cloned.name, cloned);
142-
});
142+
computed: {
143+
activeVariables(): Variable[] {
144+
const active = Object.values(this.knownVariables).filter(variable => variable.active);
145+
active.sort((a, b) => a.index - b.index);
146+
return active;
143147
}
144-
}
148+
},
145149
146-
@Watch('activeVariables')
147-
notifyVariableChange(): void {
148-
this.$emit(
149-
'variables-changed',
150-
this.activeVariables.reduce((result, variable) => {
151-
result[variable.name] = variable;
152-
return result;
153-
}, <VariableIndex>{})
154-
);
155-
}
150+
watch: {
151+
activeVariables(): void {
152+
this.$emit(
153+
'variables-changed',
154+
this.activeVariables.reduce((result, variable) => {
155+
result[variable.name] = variable;
156+
return result;
157+
}, <VariableIndex>{})
158+
);
159+
},
160+
locations(locations?: IdentifierLocation[]): void {
161+
const toDeactivate = new Set<string>(Object.keys(this.knownVariables));
156162
157-
@Watch('locations', { immediate: true })
158-
updateFromLocations(locations?: IdentifierLocation[]): void {
159-
const toDeactivate = new Set<string>(Object.keys(this.knownVariables));
160-
161-
if (locations) {
162-
locations
163-
.filter(location => location.type === 'variable' && location.value)
164-
.forEach(location => {
165-
const match = location.value && location.value.match(LOCATION_VALUE_REGEX);
166-
if (!match) {
167-
return;
168-
}
169-
170-
const name = match[1];
171-
let variable = this.knownVariables[name];
172-
if (variable) {
173-
toDeactivate.delete(variable.name);
174-
if (!variable.active) {
175-
this.$set(variable, 'active', true);
163+
if (locations) {
164+
locations
165+
.filter(location => location.type === 'variable' && location.value)
166+
.forEach(location => {
167+
const match = location.value && location.value.match(LOCATION_VALUE_REGEX);
168+
if (!match) {
169+
return;
176170
}
177-
} else {
178-
variable = {
179-
meta: { type: 'text', placeholder: '', options: [] },
180-
sample: [],
181-
sampleUser: [],
182-
step: '',
183-
type: 'text',
184-
value: '',
185-
name: name,
186-
active: true,
187-
index: Object.keys(this.knownVariables).length + 1
188-
};
189-
this.$set(this.knownVariables, name, variable);
190-
}
191-
192-
// Case for ${name=1} or ${name=a,b,c}
193-
if (match[2]) {
194-
const optionStrings = match[2].split(',');
195-
196-
// When it's just one option it's a placeholder only
197-
if (optionStrings.length === 1) {
198-
const option = parseOption(optionStrings[0]);
199-
if (variable.meta.placeholder !== option.value) {
200-
this.$set(variable.meta, 'placeholder', option.value);
171+
172+
const name = match[1];
173+
let variable = this.knownVariables[name];
174+
if (variable) {
175+
toDeactivate.delete(variable.name);
176+
if (!variable.active) {
177+
variable.active = true;
178+
this.$forceUpdate();
201179
}
202-
variable.meta.options = [];
203180
} else {
204-
variable.type = 'select';
205-
variable.meta.placeholder = '';
206-
variable.meta.options = optionStrings.map(parseOption);
181+
variable = {
182+
meta: { type: 'text', placeholder: '', options: [] },
183+
sample: [],
184+
sampleUser: [],
185+
step: '',
186+
type: 'text',
187+
value: '',
188+
name: name,
189+
active: true,
190+
index: Object.keys(this.knownVariables).length + 1
191+
};
192+
this.knownVariables[name] = variable;
193+
this.$forceUpdate();
207194
}
208-
} else {
209-
if (variable.type === 'select') {
210-
// Revert to last known type if options are removed
211-
if (variable.catalogEntry) {
212-
updateFromDataCatalog(variable, variable.catalogEntry);
195+
196+
// Case for ${name=1} or ${name=a,b,c}
197+
if (match[2]) {
198+
const optionStrings = match[2].split(',');
199+
200+
// When it's just one option it's a placeholder only
201+
if (optionStrings.length === 1) {
202+
const option = parseOption(optionStrings[0]);
203+
if (variable.meta.placeholder !== option.value) {
204+
variable.meta.placeholder = option.value;
205+
this.$forceUpdate();
206+
}
207+
variable.meta.options = [];
213208
} else {
214-
variable.type = 'text';
209+
variable.type = 'select';
210+
variable.meta.placeholder = '';
211+
variable.meta.options = optionStrings.map(parseOption);
212+
}
213+
} else {
214+
if (variable.type === 'select') {
215+
// Revert to last known type if options are removed
216+
if (variable.catalogEntry) {
217+
updateFromDataCatalog(variable, variable.catalogEntry);
218+
} else {
219+
variable.type = 'text';
220+
}
215221
}
222+
variable.meta.placeholder = '';
223+
variable.meta.options = [];
216224
}
217-
variable.meta.placeholder = '';
218-
variable.meta.options = [];
219-
}
220-
221-
if (location.colRef && location.resolveCatalogEntry) {
222-
location
223-
.resolveCatalogEntry()
224-
.then(async entry => {
225-
await updateFromDataCatalog(variable, entry);
226-
})
227-
.catch(noop);
228-
}
229-
});
230-
}
231225
232-
toDeactivate.forEach(name => {
233-
const variable = this.knownVariables[name];
234-
if (variable) {
235-
this.$set(variable, 'active', false);
226+
if (location.colRef && location.resolveCatalogEntry) {
227+
location
228+
.resolveCatalogEntry()
229+
.then(async entry => {
230+
await updateFromDataCatalog(variable, entry);
231+
})
232+
.catch(noop);
233+
}
234+
});
236235
}
237-
});
236+
237+
toDeactivate.forEach(name => {
238+
const variable = this.knownVariables[name];
239+
if (variable) {
240+
variable.active = false;
241+
this.$forceUpdate();
242+
}
243+
});
244+
}
245+
},
246+
247+
mounted(): void {
248+
if (this.initialVariables) {
249+
Object.values(this.initialVariables).forEach((variable, index) => {
250+
const cloned = <KnownVariable>cloneDeep(variable);
251+
cloned.active = true;
252+
cloned.index = index;
253+
this.knownVariables[cloned.name] = cloned;
254+
this.$forceUpdate();
255+
});
256+
}
238257
}
239-
}
258+
});
240259
</script>
260+
261+
<style lang="scss">
262+
@import './VariableSubstitution.scss';
263+
</style>

‎desktop/core/src/desktop/js/apps/editor/components/variableSubstitution/VariableSubstitutionKoBridge.vue‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,27 +26,43 @@
2626
</template>
2727

2828
<script lang="ts">
29-
import Vue from 'vue';
30-
import Component from 'vue-class-component';
31-
import { Prop } from 'vue-property-decorator';
32-
import { wrap } from 'vue/webComponentWrapper';
29+
import { defineComponent, PropType } from 'vue';
30+
31+
import { wrap } from 'vue/webComponentWrap';
3332
3433
import { Variable } from './types';
3534
import VariableSubstitution from './VariableSubstitution.vue';
3635
import SubscriptionTracker from 'components/utils/SubscriptionTracker';
3736
import { IdentifierLocation } from 'parse/types';
3837
import { POST_FROM_LOCATION_WORKER_EVENT } from 'sql/sqlWorkerHandler';
3938
40-
@Component({
41-
components: { VariableSubstitution }
42-
})
43-
export default class VariableSubstitutionKoBridge extends Vue {
44-
@Prop()
45-
initialVariables?: Variable[];
39+
const VariableSubstitutionKoBridge = defineComponent({
40+
components: {
41+
VariableSubstitution
42+
},
43+
44+
props: {
45+
initialVariables: {
46+
type: Object as PropType<Variable[]>,
47+
default: undefined
48+
}
49+
},
4650
47-
locations: IdentifierLocation[] = [];
51+
setup(): {
52+
subTracker: SubscriptionTracker;
53+
} {
54+
return {
55+
subTracker: new SubscriptionTracker()
56+
};
57+
},
4858
49-
subTracker = new SubscriptionTracker();
59+
data(): {
60+
locations: IdentifierLocation[];
61+
} {
62+
return {
63+
locations: []
64+
};
65+
},
5066
5167
mounted(): void {
5268
this.subTracker.subscribe(
@@ -57,15 +73,19 @@
5773
}
5874
}
5975
);
60-
}
76+
},
6177
62-
onVariablesChanged(variables: Variable[]): void {
63-
this.$el.dispatchEvent(
64-
new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
65-
);
78+
methods: {
79+
onVariablesChanged(variables: Variable[]): void {
80+
this.$el.dispatchEvent(
81+
new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
82+
);
83+
}
6684
}
67-
}
85+
});
6886
6987
export const COMPONENT_NAME = 'variable-substitution-ko-bridge';
7088
wrap(COMPONENT_NAME, VariableSubstitutionKoBridge);
89+
90+
export default VariableSubstitutionKoBridge;
7191
</script>

0 commit comments

Comments
 (0)