Skip to content

Commit 7d21f2c

Browse files
guerganaguergana
authored
Rewrite MismatchRow in Vue3 script setup syntax (#826)
Bug: T354346
1 parent 2be5ad5 commit 7d21f2c

File tree

2 files changed

+70
-117
lines changed

2 files changed

+70
-117
lines changed

‎resources/js/Components/MismatchRow.vue‎

Lines changed: 51 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
{{mismatch.type}}
1313
</span>
1414
<span v-else>
15-
{{ this.$i18n('statement') }}
15+
{{ $i18n('statement') }}
1616
</span>
1717
</td>
1818
<td :data-header="$i18n('column-wikidata-value')">
1919
<span class="empty-value" v-if="mismatch.wikidata_value === ''">
20-
{{ this.$i18n('empty-value') }}
20+
{{ $i18n('empty-value') }}
2121
</span>
2222
<a
2323
v-else class="break-line-link" :href="statementUrl" target="_blank">
@@ -99,22 +99,20 @@
9999
</a>
100100
<span class="upload-date">{{uploadDate}}</span>
101101
<div class="description">
102-
{{this.mismatch.import_meta.description}}
102+
{{mismatch.import_meta.description}}
103103
</div>
104104
</cdx-dialog>
105105
</td>
106106
</tr>
107107
</template>
108108

109-
<script lang="ts">
109+
<script setup lang="ts">
110110
import { formatISO } from 'date-fns';
111-
112-
import type { PropType } from 'vue';
113-
import { defineComponent } from 'vue';
111+
import { computed, ref } from 'vue';
114112
import { CdxButton, CdxDialog, CdxSelect } from "@wikimedia/codex";
115113
import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
116-
117114
import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
115+
import { useI18n } from 'vue-banana-i18n';
118116
119117
const truncateLength = 100;
120118
@@ -126,72 +124,54 @@ type ReviewOptionMap = {
126124
[key: string]: ReviewMenuItem;
127125
};
128126
129-
interface MismatchRowState {
130-
statusOptions: ReviewOptionMap;
131-
decision: ReviewMenuItem;
132-
reviewStatus: string;
133-
fullDescriptionDialog: boolean;
134-
}
127+
const props = withDefaults(defineProps<{
128+
mismatch: LabelledMismatch
129+
disabled: boolean
130+
}>(), {
131+
disabled: false
132+
});
135133
136-
export default defineComponent({
137-
components: {
138-
CdxButton,
139-
CdxDialog,
140-
CdxSelect
141-
},
142-
props: {
143-
mismatch: Object as PropType<LabelledMismatch>,
144-
disabled: {
145-
type: Boolean,
146-
default: false
147-
}
134+
const messages = useI18n();
135+
136+
const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
137+
(options: ReviewOptionMap, decision: ReviewDecision) => ({
138+
...options,
139+
[decision]: {
140+
value: decision,
141+
label: messages.i18n(`review-status-${decision}`),
142+
description: "",
148143
},
149-
computed: {
150-
uploadDate(): string {
151-
return formatISO(new Date(this.mismatch.import_meta.created_at), {
152-
representation: 'date'
153-
});
154-
},
155-
statementUrl(): string {
156-
return `https://www.wikidata.org/wiki/${this.mismatch.item_id}#${this.mismatch.statement_guid}`;
157-
},
158-
shouldTruncate(): boolean {
159-
const text = this.mismatch.import_meta.description;
160-
return text ? text.length > truncateLength : false;
161-
},
162-
uploadInfoDescription(): string {
163-
const text = this.mismatch.import_meta.description;
164-
return this.shouldTruncate ?
165-
text.substring(0, truncateLength) + '...' : text;
166-
}
167-
},
168-
data(): MismatchRowState {
169-
// The following reducer generates the list of dropdown options based on a list of allowed status values
170-
const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
171-
(options: ReviewOptionMap, decision: ReviewDecision) => ({
172-
...options,
173-
[decision]: {
174-
value: decision,
175-
label: this.$i18n(`review-status-${decision}`),
176-
description: "",
177-
},
178-
}),
179-
{}
180-
);
181-
return {
182-
statusOptions,
183-
decision: statusOptions[this.mismatch.review_status],
184-
reviewStatus: String(this.mismatch.review_status),
185-
fullDescriptionDialog: false
186-
};
187-
},
188-
methods: {
189-
showDialog(e: Event) {
190-
e.preventDefault();
191-
this.fullDescriptionDialog = true;
192-
}
193-
}
144+
}),
145+
{}
146+
);
147+
148+
const uploadDate = computed<string>(() => {
149+
return formatISO(new Date(props.mismatch.import_meta.created_at), {
150+
representation: 'date'
151+
});
194152
});
153+
154+
const statementUrl = computed<string>(() => {
155+
return `https://www.wikidata.org/wiki/${props.mismatch.item_id}#${props.mismatch.statement_guid}`;
156+
});
157+
158+
const shouldTruncate = computed<boolean>(() => {
159+
const text = props.mismatch.import_meta.description;
160+
return text ? text.length > truncateLength : false;
161+
});
162+
163+
const uploadInfoDescription = computed<string>(() => {
164+
const text = props.mismatch.import_meta.description;
165+
return shouldTruncate.value ? text.substring(0, truncateLength) + '...' : text;
166+
});
167+
168+
const reviewStatus = ref(String(props.mismatch.review_status));
169+
const fullDescriptionDialog = ref(false);
170+
171+
function showDialog(e: Event) {
172+
e.preventDefault();
173+
fullDescriptionDialog.value = true;
174+
}
195175
</script>
196176

197177
<style lang="scss">

‎tests/Vue/Components/MismatchRow.spec.js‎

Lines changed: 19 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ import {CdxSelect} from "@wikimedia/codex";
55
import {ReviewDecision} from '@/types/Mismatch.ts';
66

77
import MismatchRow from '@/Components/MismatchRow.vue';
8+
import { createI18n } from 'vue-banana-i18n';
9+
10+
const i18n = createI18n({
11+
messages: {},
12+
locale: 'en',
13+
wikilinks: true
14+
});
815

916
describe('MismatchesRow.vue', () => {
1017
it('accepts a disabled property', () => {
@@ -25,10 +32,7 @@ describe('MismatchesRow.vue', () => {
2532
const wrapper = mount(MismatchRow, {
2633
props: {mismatch, disabled},
2734
global: {
28-
mocks: {
29-
// Mock the banana-i18n plugin dependency
30-
$i18n: key => key
31-
}
35+
plugins: [i18n],
3236
}
3337
});
3438

@@ -57,10 +61,7 @@ describe('MismatchesRow.vue', () => {
5761
const wrapper = mount(MismatchRow, {
5862
props: {mismatch},
5963
global: {
60-
mocks: {
61-
// Mock the banana-i18n plugin dependency
62-
$i18n: key => key
63-
}
64+
plugins: [i18n],
6465
}
6566
});
6667
const rowText = wrapper.find('tr').text();
@@ -97,10 +98,7 @@ describe('MismatchesRow.vue', () => {
9798
const wrapper = mount(MismatchRow, {
9899
props: {mismatch},
99100
global: {
100-
mocks: {
101-
// Mock the banana-i18n plugin dependency
102-
$i18n: key => key
103-
}
101+
plugins: [i18n],
104102
}
105103
});
106104

@@ -129,10 +127,7 @@ describe('MismatchesRow.vue', () => {
129127
const wrapper = mount(MismatchRow, {
130128
props: {mismatch},
131129
global: {
132-
mocks: {
133-
// Mock the banana-i18n plugin dependency
134-
$i18n: key => key
135-
}
130+
plugins: [i18n],
136131
}
137132
});
138133

@@ -161,10 +156,7 @@ describe('MismatchesRow.vue', () => {
161156
const wrapper = mount(MismatchRow, {
162157
props: {mismatch},
163158
global: {
164-
mocks: {
165-
// Mock the banana-i18n plugin dependency
166-
$i18n: key => key
167-
}
159+
plugins: [i18n],
168160
}
169161
});
170162

@@ -198,10 +190,7 @@ describe('MismatchesRow.vue', () => {
198190
const wrapper = mount(MismatchRow, {
199191
props: {mismatch},
200192
global: {
201-
mocks: {
202-
// Mock the banana-i18n plugin dependency
203-
$i18n: key => key
204-
}
193+
plugins: [i18n],
205194
}
206195
});
207196

@@ -241,10 +230,7 @@ describe('MismatchesRow.vue', () => {
241230
const wrapper = mount(MismatchRow, {
242231
props: {mismatch},
243232
global: {
244-
mocks: {
245-
// Mock the banana-i18n plugin dependency
246-
$i18n: key => key
247-
}
233+
plugins: [i18n],
248234
}
249235
});
250236

@@ -279,10 +265,7 @@ describe('MismatchesRow.vue', () => {
279265
const wrapper = mount(MismatchRow, {
280266
props: {mismatch},
281267
global: {
282-
mocks: {
283-
// Mock the banana-i18n plugin dependency
284-
$i18n: key => key
285-
},
268+
plugins: [i18n],
286269
stubs: {
287270
teleport: true,
288271
transition: true
@@ -312,10 +295,7 @@ describe('MismatchesRow.vue', () => {
312295
const wrapper = mount(MismatchRow, {
313296
props: {mismatch},
314297
global: {
315-
mocks: {
316-
// Mock the banana-i18n plugin dependency
317-
$i18n: key => key
318-
}
298+
plugins: [i18n],
319299
}
320300
});
321301

@@ -339,10 +319,7 @@ describe('MismatchesRow.vue', () => {
339319
const wrapper = mount(MismatchRow, {
340320
props: {mismatch},
341321
global: {
342-
mocks: {
343-
// Mock the banana-i18n plugin dependency
344-
$i18n: key => key
345-
}
322+
plugins: [i18n],
346323
}
347324
});
348325

@@ -371,10 +348,7 @@ describe('MismatchesRow.vue', () => {
371348
const wrapper = mount(MismatchRow, {
372349
props: {mismatch},
373350
global: {
374-
mocks: {
375-
// Mock the banana-i18n plugin dependency
376-
$i18n: key => `${key}`
377-
}
351+
plugins: [i18n],
378352
}
379353
});
380354

@@ -404,9 +378,8 @@ describe('MismatchesRow.vue', () => {
404378
const wrapper = mount(MismatchRow, {
405379
props: {mismatch},
406380
global: {
381+
plugins: [i18n],
407382
mocks: {
408-
// Mock the banana-i18n plugin dependency
409-
$i18n: key => `${key}`,
410383
$bubble: bubbleStub
411384
}
412385
}

0 commit comments

Comments
 (0)