Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rewrite MismatchRow in Vue3 script setup syntax #826

Merged
merged 6 commits into from
Jan 9, 2024
Merged

Rewrite MismatchRow in Vue3 script setup syntax #826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d0ffcb1
Rewrite MismatchesTable with Vue3 syntax
guergana Jan 8, 2024
0c833d5
Adjust unit tests to new code
guergana Jan 8, 2024
384f876
Rewrite MismatchRow in Vue3 script setup syntax
guergana Jan 4, 2024
0c419b7
Remove leftover references to this
guergana Jan 9, 2024
9cef482
Remove unused variable and import
guergana Jan 9, 2024
a7781cd
Convert reviewStatus to ref
guergana Jan 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 51 additions & 71 deletions resources/js/Components/MismatchRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@
{{mismatch.type}}
</span>
<span v-else>
{{ this.$i18n('statement') }}
{{ $i18n('statement') }}
</span>
</td>
<td :data-header="$i18n('column-wikidata-value')">
<span class="empty-value" v-if="mismatch.wikidata_value === ''">
{{ this.$i18n('empty-value') }}
{{ $i18n('empty-value') }}
</span>
<a
v-else class="break-line-link" :href="statementUrl" target="_blank">
Expand Down Expand Up @@ -99,22 +99,20 @@
</a>
<span class="upload-date">{{uploadDate}}</span>
<div class="description">
{{this.mismatch.import_meta.description}}
{{mismatch.import_meta.description}}
</div>
</cdx-dialog>
</td>
</tr>
</template>

<script lang="ts">
<script setup lang="ts">
import { formatISO } from 'date-fns';

import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { computed, ref } from 'vue';
import { CdxButton, CdxDialog, CdxSelect } from "@wikimedia/codex";
import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';

import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
import { useI18n } from 'vue-banana-i18n';

const truncateLength = 100;

Expand All @@ -126,72 +124,54 @@ type ReviewOptionMap = {
[key: string]: ReviewMenuItem;
};

interface MismatchRowState {
statusOptions: ReviewOptionMap;
decision: ReviewMenuItem;
reviewStatus: string;
fullDescriptionDialog: boolean;
}
const props = withDefaults(defineProps<{
mismatch: LabelledMismatch
disabled: boolean
}>(), {
disabled: false
});

export default defineComponent({
components: {
CdxButton,
CdxDialog,
CdxSelect
},
props: {
mismatch: Object as PropType<LabelledMismatch>,
disabled: {
type: Boolean,
default: false
}
const messages = useI18n();

const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
(options: ReviewOptionMap, decision: ReviewDecision) => ({
...options,
[decision]: {
value: decision,
label: messages.i18n(`review-status-${decision}`),
description: "",
},
computed: {
uploadDate(): string {
return formatISO(new Date(this.mismatch.import_meta.created_at), {
representation: 'date'
});
},
statementUrl(): string {
return `https://www.wikidata.org/wiki/${this.mismatch.item_id}#${this.mismatch.statement_guid}`;
},
shouldTruncate(): boolean {
const text = this.mismatch.import_meta.description;
return text ? text.length > truncateLength : false;
},
uploadInfoDescription(): string {
const text = this.mismatch.import_meta.description;
return this.shouldTruncate ?
text.substring(0, truncateLength) + '...' : text;
}
},
data(): MismatchRowState {
// The following reducer generates the list of dropdown options based on a list of allowed status values
const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
(options: ReviewOptionMap, decision: ReviewDecision) => ({
...options,
[decision]: {
value: decision,
label: this.$i18n(`review-status-${decision}`),
description: "",
},
}),
{}
);
return {
statusOptions,
decision: statusOptions[this.mismatch.review_status],
reviewStatus: String(this.mismatch.review_status),
fullDescriptionDialog: false
};
},
methods: {
showDialog(e: Event) {
e.preventDefault();
this.fullDescriptionDialog = true;
}
}
}),
{}
);

const uploadDate = computed<string>(() => {
return formatISO(new Date(props.mismatch.import_meta.created_at), {
representation: 'date'
});
});

const statementUrl = computed<string>(() => {
return `https://www.wikidata.org/wiki/${props.mismatch.item_id}#${props.mismatch.statement_guid}`;
});

const shouldTruncate = computed<boolean>(() => {
const text = props.mismatch.import_meta.description;
return text ? text.length > truncateLength : false;
});

const uploadInfoDescription = computed<string>(() => {
const text = props.mismatch.import_meta.description;
return shouldTruncate.value ? text.substring(0, truncateLength) + '...' : text;
});

const reviewStatus = ref(String(props.mismatch.review_status));
const fullDescriptionDialog = ref(false);

function showDialog(e: Event) {
e.preventDefault();
fullDescriptionDialog.value = true;
}
</script>

<style lang="scss">
Expand Down
23 changes: 7 additions & 16 deletions resources/js/Components/MismatchesTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,18 @@
</wikit-table>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
<script setup lang="ts">
import { Table as WikitTable } from '@wmde/wikit-vue-components';

import MismatchRow from './MismatchRow.vue';

import { LabelledMismatch } from '../types/Mismatch';
import type { LabelledMismatch } from '../types/Mismatch';

export default defineComponent({
components: {
MismatchRow,
WikitTable,
},
props: {
mismatches: Array as PropType<LabelledMismatch[]>,
disabled: {
type: Boolean,
default: false
}
}
withDefaults(defineProps<{
mismatches: LabelledMismatch[],
disabled: boolean
}>(), {
disabled: false
});
</script>

Expand Down
65 changes: 19 additions & 46 deletions tests/Vue/Components/MismatchRow.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import {CdxSelect} from "@wikimedia/codex";
import {ReviewDecision} from '@/types/Mismatch.ts';

import MismatchRow from '@/Components/MismatchRow.vue';
import { createI18n } from 'vue-banana-i18n';

const i18n = createI18n({
messages: {},
locale: 'en',
wikilinks: true
});

describe('MismatchesRow.vue', () => {
it('accepts a disabled property', () => {
Expand All @@ -25,10 +32,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch, disabled},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -57,10 +61,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});
const rowText = wrapper.find('tr').text();
Expand Down Expand Up @@ -97,10 +98,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -129,10 +127,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -161,10 +156,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -198,10 +190,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -241,10 +230,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -279,10 +265,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
},
plugins: [i18n],
stubs: {
teleport: true,
transition: true
Expand Down Expand Up @@ -312,10 +295,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand All @@ -339,10 +319,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -371,10 +348,7 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => `${key}`
}
plugins: [i18n],
}
});

Expand Down Expand Up @@ -404,9 +378,8 @@ describe('MismatchesRow.vue', () => {
const wrapper = mount(MismatchRow, {
props: {mismatch},
global: {
plugins: [i18n],
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => `${key}`,
$bubble: bubbleStub
}
}
Expand Down
17 changes: 9 additions & 8 deletions tests/Vue/Components/MismatchesTable.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { mount } from '@vue/test-utils';
import MismatchesTable from '@/Components/MismatchesTable.vue';
import MismatchRow from '@/Components/MismatchRow.vue';
import { createI18n } from 'vue-banana-i18n';

const i18n = createI18n({
messages: {},
locale: 'en',
wikilinks: true
});

describe('MismatchesTable.vue', () => {
it('accepts a mismatches property', () => {
Expand All @@ -22,10 +29,7 @@ describe('MismatchesTable.vue', () => {
const wrapper = mount(MismatchesTable, {
props: { mismatches },
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n]
}
});

Expand Down Expand Up @@ -59,10 +63,7 @@ describe('MismatchesTable.vue', () => {
const wrapper = mount(MismatchesTable, {
props: { disabled, mismatches },
global: {
mocks: {
// Mock the banana-i18n plugin dependency
$i18n: key => key
}
plugins: [i18n]
}
});

Expand Down