diff --git a/frontend/src/components/Contributions/ContributionList.spec.js b/frontend/src/components/Contributions/ContributionList.spec.js index a2a4382dd..439252de6 100644 --- a/frontend/src/components/Contributions/ContributionList.spec.js +++ b/frontend/src/components/Contributions/ContributionList.spec.js @@ -4,12 +4,29 @@ import { mount } from '@vue/test-utils' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { createI18n } from 'vue-i18n' import ContributionList from './ContributionList' +import { createRouter, createWebHistory } from 'vue-router' const i18n = createI18n({ legacy: false, locale: 'en', }) +const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + name: 'home', + component: { template: '
Home
' }, + }, + { + path: '/test', + name: 'test', + component: ContributionList, + }, + ], +}) + vi.mock('@/components/Contributions/ContributionListItem.vue', () => ({ default: { name: 'ContributionListItem', @@ -25,7 +42,7 @@ describe('ContributionList', () => { let wrapper const global = { - plugins: [i18n], + plugins: [i18n, router], mocks: { $filters: { GDD: vi.fn((val) => val), @@ -36,9 +53,9 @@ describe('ContributionList', () => { }, } - const contributionsList = { + const contributions = { contributionCount: 3, - contributionList: [ + listContributions: [ { id: 0, date: '07/06/2022', @@ -64,11 +81,13 @@ describe('ContributionList', () => { } const propsData = { - contributionCount: 3, - showPagination: true, - pageSize: 25, allContribution: false, - items: [ + emptyText: '', + } + + const allContributions = { + contributionCount: 3, + listAllContributions: [ { id: 0, date: '07/06/2022', @@ -95,7 +114,7 @@ describe('ContributionList', () => { const mountWrapper = () => { return mount(ContributionList, { - props: propsData, + propsData, global, }) } @@ -107,10 +126,20 @@ describe('ContributionList', () => { beforeEach(() => { vi.mocked(useQuery).mockImplementation((query) => { if (query === listContributions) { - return { onResult: mockListContributionsQuery, refetch: vi.fn() } + return { + result: contributions, + loading: vi.fn(), + onResult: mockListContributionsQuery, + refetch: vi.fn(), + } } if (query === listAllContributions) { - return { onResult: mockListAllContributionsQuery, refetch: vi.fn() } + return { + result: allContributions, + loading: vi.fn(), + onResult: mockListAllContributionsQuery, + refetch: vi.fn(), + } } }) @@ -152,7 +181,8 @@ describe('ContributionList', () => { describe('list count greater than page size', () => { beforeEach(async () => { - await wrapper.setProps({ contributionCount: 33 }) + contributions.contributionCount = 33 + // await wrapper.setProps({ contributionCount: 33 }) }) it('has pagination buttons', () => { @@ -165,7 +195,8 @@ describe('ContributionList', () => { window.scrollTo = scrollToMock beforeEach(async () => { - await wrapper.setProps({ contributionCount: 33 }) + contributions.contributionCount = 33 + // await wrapper.setProps({ contributionCount: 33 }) await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('update:modelValue', 2) }) diff --git a/frontend/src/components/Contributions/ContributionList.vue b/frontend/src/components/Contributions/ContributionList.vue index 23c13e400..c43e7bc77 100644 --- a/frontend/src/components/Contributions/ContributionList.vue +++ b/frontend/src/components/Contributions/ContributionList.vue @@ -1,7 +1,7 @@ diff --git a/frontend/src/components/Contributions/ContributionListAll.vue b/frontend/src/components/Contributions/ContributionListAll.vue new file mode 100644 index 000000000..f46d8762c --- /dev/null +++ b/frontend/src/components/Contributions/ContributionListAll.vue @@ -0,0 +1,61 @@ + + diff --git a/frontend/src/components/Contributions/ContributionListAllItem.vue b/frontend/src/components/Contributions/ContributionListAllItem.vue new file mode 100644 index 000000000..b6f4dcba9 --- /dev/null +++ b/frontend/src/components/Contributions/ContributionListAllItem.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue index e579d6280..be0d2a31b 100644 --- a/frontend/src/components/Contributions/ContributionListItem.vue +++ b/frontend/src/components/Contributions/ContributionListItem.vue @@ -2,26 +2,15 @@
- - + -
- {{ username.username }} - -
{{ $d(new Date(contributionDate), 'short') }}
@@ -31,7 +20,7 @@ {{ $t('moderatorChangedMemo') }}
@@ -42,10 +31,6 @@
{{ $t('creation') }} {{ $t('(') }}{{ hours }} {{ $t('h') }}{{ $t(')') }}
-
- - {{ $t('contribution.alert.denied') }} -
{{ $t('contribution.deleted') }}
@@ -57,17 +42,10 @@
- +
@@ -78,9 +56,7 @@
0" :messages="localMessages" :status="localStatus" - :contribution-id="contributionId" + :contribution-id="id" @close-messages-list="emit('toggle-messages-visible')" @add-contribution-message="addContributionMessage" /> @@ -128,9 +104,9 @@ import ContributionMessagesList from '@/components/ContributionMessages/Contribu import { useAppToast } from '@/composables/useToast' import { useI18n } from 'vue-i18n' import { useMutation } from '@vue/apollo-composable' -import AppAvatar from '@/components/AppAvatar.vue' import { GDD_PER_HOUR } from '../../constants' import { deleteContribution } from '@/graphql/contributions.graphql' +import { useContributionStatus } from '@/composables/useContributionStatus' const props = defineProps({ id: { @@ -147,36 +123,9 @@ const props = defineProps({ required: false, default: () => [], }, - user: { - type: Object, - required: false, - }, - createdAt: { - type: String, - }, contributionDate: { type: String, }, - deletedAt: { - type: String, - required: false, - }, - confirmedBy: { - type: Number, - required: false, - }, - confirmedAt: { - type: String, - required: false, - }, - deniedBy: { - type: Number, - required: false, - }, - deniedAt: { - type: String, - required: false, - }, updatedBy: { type: Number, required: false, @@ -190,15 +139,6 @@ const props = defineProps({ type: Number, required: false, }, - contributionId: { - type: Number, - required: true, - }, - allContribution: { - type: Boolean, - required: false, - default: false, - }, moderatorId: { type: Number, required: false, @@ -213,11 +153,14 @@ const props = defineProps({ const { toastError, toastSuccess } = useAppToast() const { t } = useI18n() +const { getVariant, getIcon } = useContributionStatus() const { mutate: deleteContributionMutation } = useMutation(deleteContribution) const localMessages = ref([]) const localStatus = ref(props.contributionStatus) +const variant = computed(() => getVariant(props.contributionStatus)) +const icon = computed(() => getIcon(props.contributionStatus)) // if parent reload messages, update local messages copy watch( @@ -237,32 +180,6 @@ watch( }, ) -const statusMapping = { - CONFIRMED: { variant: 'success', icon: 'check' }, - DELETED: { variant: 'danger', icon: 'trash' }, - DENIED: { variant: 'warning', icon: 'x-circle' }, - IN_PROGRESS: { variant: '205', icon: 'question' }, - default: { variant: 'primary', icon: 'bell-fill' }, -} - -const variant = computed(() => { - return (statusMapping[localStatus.value] || statusMapping.default).variant -}) - -const icon = computed(() => { - return (statusMapping[localStatus.value] || statusMapping.default).icon -}) - -const username = computed(() => { - if (!props.user) return {} - return { - username: props.user.alias - ? props.user.alias - : `${props.user.firstName} ${props.user.lastName}`, - initials: `${props.user.firstName[0]}${props.user.lastName[0]}`, - } -}) - const hours = computed(() => parseFloat((props.amount / GDD_PER_HOUR).toFixed(2))) async function processDeleteContribution(item) { diff --git a/frontend/src/components/PaginatorRouteParamsPage.vue b/frontend/src/components/PaginatorRouteParamsPage.vue new file mode 100644 index 000000000..1f41cc54a --- /dev/null +++ b/frontend/src/components/PaginatorRouteParamsPage.vue @@ -0,0 +1,54 @@ + + diff --git a/frontend/src/composables/useContributionStatus.js b/frontend/src/composables/useContributionStatus.js new file mode 100644 index 000000000..5ca07f9cc --- /dev/null +++ b/frontend/src/composables/useContributionStatus.js @@ -0,0 +1,22 @@ +export const useContributionStatus = () => { + const statusMapping = { + CONFIRMED: { variant: 'success', icon: 'check' }, + DELETED: { variant: 'danger', icon: 'trash' }, + DENIED: { variant: 'warning', icon: 'x-circle' }, + IN_PROGRESS: { variant: '205', icon: 'question' }, + default: { variant: 'primary', icon: 'bell-fill' }, + } + + const getVariant = (status) => { + return (statusMapping[status] || statusMapping.default).variant + } + + const getIcon = (status) => { + return (statusMapping[status] || statusMapping.default).icon + } + + return { + getVariant, + getIcon, + } +} diff --git a/frontend/src/graphql/contributions.graphql b/frontend/src/graphql/contributions.graphql index c38449fca..0fe4a46f1 100644 --- a/frontend/src/graphql/contributions.graphql +++ b/frontend/src/graphql/contributions.graphql @@ -35,12 +35,17 @@ query listContributions ($pagination: Paginated!, $messagePagination: Paginated! listContributions(pagination: $pagination, messagePagination: $messagePagination) { contributionCount contributionList { - ...contributionFields - deletedAt - moderatorId + id + amount + memo + contributionDate + contributionStatus + messagesCount messages(pagination: $messagePagination) { ...contributionMessageFields } + updatedBy + moderatorId } } } @@ -49,10 +54,14 @@ query listAllContributions ($pagination: Paginated!) { listAllContributions(pagination: $pagination) { contributionCount contributionList { + amount + memo user { ...userFields - } - ...contributionFields + } + contributionDate + updatedBy + contributionStatus } } } diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue index cba744604..86d2a2486 100644 --- a/frontend/src/pages/Community.vue +++ b/frontend/src/pages/Community.vue @@ -11,16 +11,10 @@ - + - +
@@ -28,24 +22,23 @@