Skip to content

Commit e2c3694

Browse files
sreenathsJohanAhlen
sreenaths
authored and
JohanAhlen
committed
[ui] Vue 3 - Migrated FacetSelector component
1 parent 25b4815 commit e2c3694

File tree

1 file changed

+132
-96
lines changed

1 file changed

+132
-96
lines changed

‎desktop/core/src/desktop/js/components/FacetSelector.vue

Lines changed: 132 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -55,111 +55,147 @@
5555
</template>
5656

5757
<script lang="ts">
58-
import { Prop, Watch } from 'vue-property-decorator';
58+
import { defineComponent, PropType } from 'vue';
59+
5960
import I18n from '../utils/i18n';
6061
import DropdownPanel from './dropdown/DropdownPanel.vue';
6162
import HueButton from './HueButton.vue';
6263
import HueLink from './HueLink.vue';
63-
import Vue from 'vue';
64-
import Component from 'vue-class-component';
65-
import { Facet, SearchFacet } from './FacetSelector';
66-
67-
@Component({
68-
components: { DropdownPanel, HueButton, HueLink },
69-
methods: { I18n }
70-
})
71-
export default class StatusFacet extends Vue {
72-
@Prop({ required: false, default: () => ({}) })
73-
valueLabels!: FacetLabels;
74-
@Prop({ required: false, default: null })
75-
fieldLabel?: string;
76-
@Prop({ required: true })
77-
facet!: Facet;
78-
@Prop({ required: false, default: false })
79-
disabled!: boolean;
80-
@Prop({ required: false, default: false })
81-
filterEnabled!: boolean;
82-
83-
selectedValues: string[] = [];
84-
previousSelection: string[] = [];
85-
86-
lastKnownValues?: string[];
87-
88-
@Watch('facet.values')
89-
initSelection(): void {
90-
const newValues = this.facet.values.map(val => val.key);
91-
if (!this.lastKnownValues) {
92-
// Select all initially
93-
this.selectedValues = newValues;
94-
this.previousSelection = newValues;
95-
} else {
96-
// Keep previous selection on change
97-
const selected = new Set(this.selectedValues);
98-
99-
// Select any new values that might have appeared
100-
const oldValues = new Set(this.lastKnownValues);
101-
102-
this.selectedValues = newValues.filter(
103-
newValue => selected.has(newValue) || !oldValues.has(newValue)
104-
);
64+
import { Facet, SearchFacet, FacetValueLabels } from './FacetSelector';
65+
66+
export default defineComponent({
67+
components: {
68+
DropdownPanel,
69+
HueButton,
70+
HueLink
71+
},
72+
73+
props: {
74+
valueLabels: {
75+
type: Object as PropType<FacetValueLabels>,
76+
required: false,
77+
default: () => ({})
78+
},
79+
fieldLabel: {
80+
type: Object as PropType<string | null>,
81+
required: false,
82+
default: null
83+
},
84+
facet: {
85+
type: Object as PropType<Facet>,
86+
required: true
87+
},
88+
disabled: {
89+
type: Boolean,
90+
required: false,
91+
default: false
92+
},
93+
filterEnabled: {
94+
type: Boolean,
95+
required: false,
96+
default: false
10597
}
106-
this.lastKnownValues = newValues;
107-
}
108-
109-
clear(): void {
110-
this.selectedValues = this.facet.values.map(val => val.key);
111-
this.$emit('facet-removed', this.facet.facetField);
112-
}
113-
114-
get allSelected(): boolean {
115-
return this.selectedValues.length === this.facet.values.length;
116-
}
117-
118-
set allSelected(val: boolean) {
119-
if (val) {
120-
this.selectedValues = this.facet.values.map(val => val.key);
121-
} else {
122-
this.selectedValues = [];
98+
},
99+
100+
emits: ['facet-removed', 'facet-changed'],
101+
102+
data(): {
103+
selectedValues: string[];
104+
previousSelection: string[];
105+
106+
lastKnownValues?: string[];
107+
} {
108+
return {
109+
selectedValues: [],
110+
previousSelection: []
111+
};
112+
},
113+
114+
computed: {
115+
allSelected: {
116+
get(): boolean {
117+
return this.selectedValues.length === this.facet.values.length;
118+
},
119+
set(val: boolean) {
120+
if (val) {
121+
this.selectedValues = this.facet.values.map(val => val.key);
122+
} else {
123+
this.selectedValues = [];
124+
}
125+
}
126+
},
127+
128+
applyDisabled(): boolean {
129+
return !this.selectedValues.length;
130+
},
131+
132+
label(): string {
133+
if (this.allSelected) {
134+
return `${this.fieldLabel || this.facet.facetField}: ${I18n('All')}`;
135+
}
136+
if (this.selectedValues.length === 1) {
137+
return `${this.fieldLabel || this.facet.facetField}: ${
138+
this.valueLabels[this.selectedValues[0]] || this.selectedValues[0]
139+
}`;
140+
}
141+
if (this.selectedValues.length === 0) {
142+
return `${this.fieldLabel || this.facet.facetField}: ${I18n('None')}`;
143+
}
144+
return `${this.fieldLabel || this.facet.facetField}: ${I18n('Multiple')}`;
123145
}
124-
}
125-
126-
get applyDisabled(): boolean {
127-
return !this.selectedValues.length;
128-
}
129-
130-
get label(): string {
131-
if (this.allSelected) {
132-
return `${this.fieldLabel || this.facet.facetField}: ${I18n('All')}`;
133-
}
134-
if (this.selectedValues.length === 1) {
135-
return `${this.fieldLabel || this.facet.facetField}: ${
136-
this.valueLabels[this.selectedValues[0]] || this.selectedValues[0]
137-
}`;
138-
}
139-
if (this.selectedValues.length === 0) {
140-
return `${this.fieldLabel || this.facet.facetField}: ${I18n('None')}`;
141-
}
142-
return `${this.fieldLabel || this.facet.facetField}: ${I18n('Multiple')}`;
143-
}
144-
145-
cancel(closePanel: () => void): void {
146-
this.selectedValues = [...this.previousSelection];
147-
closePanel();
148-
}
149-
150-
apply(closePanel: () => void): void {
151-
this.previousSelection = [...this.selectedValues];
152-
if (this.allSelected) {
146+
},
147+
148+
created() {
149+
this.$watch(
150+
() => this.facet.values,
151+
(): void => {
152+
const newValues = this.facet.values.map(val => val.key);
153+
if (!this.lastKnownValues) {
154+
// Select all initially
155+
this.selectedValues = newValues;
156+
this.previousSelection = newValues;
157+
} else {
158+
// Keep previous selection on change
159+
const selected = new Set(this.selectedValues);
160+
161+
// Select any new values that might have appeared
162+
const oldValues = new Set(this.lastKnownValues);
163+
164+
this.selectedValues = newValues.filter(
165+
newValue => selected.has(newValue) || !oldValues.has(newValue)
166+
);
167+
}
168+
this.lastKnownValues = newValues;
169+
}
170+
);
171+
},
172+
173+
methods: {
174+
I18n,
175+
clear(): void {
176+
this.selectedValues = this.facet.values.map(val => val.key);
153177
this.$emit('facet-removed', this.facet.facetField);
154-
} else {
155-
this.$emit('facet-changed', <SearchFacet>{
156-
field: this.facet.facetField,
157-
values: this.selectedValues
158-
});
178+
},
179+
180+
cancel(closePanel: () => void): void {
181+
this.selectedValues = [...this.previousSelection];
182+
closePanel();
183+
},
184+
185+
apply(closePanel: () => void): void {
186+
this.previousSelection = [...this.selectedValues];
187+
if (this.allSelected) {
188+
this.$emit('facet-removed', this.facet.facetField);
189+
} else {
190+
this.$emit('facet-changed', <SearchFacet>{
191+
field: this.facet.facetField,
192+
values: this.selectedValues
193+
});
194+
}
195+
closePanel();
159196
}
160-
closePanel();
161197
}
162-
}
198+
});
163199
</script>
164200

165201
<style lang="scss" scoped>

0 commit comments

Comments
 (0)