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

feat: add v-datatable to the dashboard reports #435

Merged
merged 4 commits into from
May 15, 2024
Merged

feat: add v-datatable to the dashboard reports #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bec3982
add v-datatable
goemen Apr 25, 2024
cab4aaf
fix tests
goemen Apr 25, 2024
e32aec7
remove vi debug
goemen Apr 25, 2024
04309af
default to 5 reports per page
goemen Apr 25, 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
7 changes: 7 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"playwright": "^1.43.1",
"postcss": "^8.4.32",
"prettier": "^3.1.1",
"resize-observer-polyfill": "^1.5.1",
"stylus": "^0.63.0",
"stylus-loader": "^8.0.0",
"vite": "^4.1.4",
Expand Down
111 changes: 6 additions & 105 deletions frontend/src/components/Dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<template>
<ReportSelectionManager />
<v-row class="mt-3">
<v-col>
<h2 data-testid="legal-name">Welcome, {{ userInfo?.legalName }}.</h2>
Expand Down Expand Up @@ -68,53 +67,7 @@
<v-toolbar-title>Submitted Reports</v-toolbar-title>
</v-toolbar>
<v-card-text>
<div v-if="!reports.length">No generated reports yet.</div>
<div v-if="reports.length">
<v-table>
<thead>
<tr>
<th scope="col" class="font-weight-bold">Reporting Year</th>
<th scope="col" class="font-weight-bold">Submission Date</th>
<th scope="col" class="font-weight-bold text-right pr-8">
Action
</th>
</tr>
</thead>
<tbody>
<tr v-for="report in reports" :key="report.report_id">
<td :data-testid="'reporting_year-' + report.report_id">
{{ report.reporting_year }}
</td>
<td
:data-testid="'report_published_date-' + report.report_id"
>
{{ formatDateTime(report.create_date) }}
</td>
<td class="text-right">
<v-btn
:data-testid="'view-report-' + report.report_id"
prepend-icon="mdi-eye-outline"
variant="text"
color="link"
@click="viewReport(report)"
>
View
</v-btn>
<v-btn
v-if="report.is_unlocked"
:data-testid="'edit-report-' + report.report_id"
prepend-icon="mdi-eye-outline"
variant="text"
color="link"
@click="editReport(report)"
>
Edit
</v-btn>
</td>
</tr>
</tbody>
</v-table>
</div>
<ReportsTable />
</v-card-text>
</v-card>
</v-col>
Expand All @@ -138,72 +91,20 @@
</template>

<script lang="ts">
import ReportSelectionManager from './util/DasboardReportManager.vue';
import { mapActions, mapState } from 'pinia';
import ReportsTable from './util/ReportsTable.vue';
import { mapState } from 'pinia';
import { authStore } from '../store/modules/auth';
import { useCodeStore } from '../store/modules/codeStore';
import { REPORT_STATUS } from '../utils/constant';
import ApiService from '../common/apiService';
import { DateTimeFormatter, LocalDate, ZonedDateTime } from '@js-joda/core';
import { Locale } from '@js-joda/locale_en';
import {
useReportStepperStore,
ReportMode,
} from '../store/modules/reportStepper';
import { IReport } from '../common/types';
import { useConfigStore } from '../store/modules/config';

type DashboardData = {
reports: IReport[];
userInfo?: any;
};

export default {
components: { ReportSelectionManager },
data: (): DashboardData => ({
reports: [],
}),
components: { ReportsTable },
data: (): DashboardData => ({}),
computed: {
...mapState(useReportStepperStore, ['reportId']),
...mapState(authStore, ['userInfo']),
...mapState(useCodeStore, ['naicsCodes']),
...mapState(useConfigStore, ['config']),
},
async beforeMount() {
this.reset();
this.loadConfig();
this.getReports();
},
methods: {
...mapActions(useReportStepperStore, ['setReportInfo', 'reset', 'setMode']),
...mapActions(useConfigStore, ['loadConfig']),
formatDate(value, format = 'MMMM d, YYYY') {
const formatter = DateTimeFormatter.ofPattern(format).withLocale(
Locale.ENGLISH,
);
return LocalDate.parse(value).format(formatter);
},
formatDateTime(value, format = 'MMMM d, YYYY') {
const formatter = DateTimeFormatter.ofPattern(format).withLocale(
Locale.ENGLISH,
);
return ZonedDateTime.parse(value).format(formatter);
},
async getReports() {
this.reports = await ApiService.getReports({
report_status: REPORT_STATUS.PUBLISHED,
});
},
async viewReport(report: IReport) {
this.setMode(ReportMode.View);
await this.setReportInfo(report);
},
async editReport(report: IReport) {
this.setMode(ReportMode.Edit);
await this.setReportInfo(report);
await this.$router.push({ path: 'generate-report-form' });
},
},
}
};
</script>

Expand Down
88 changes: 9 additions & 79 deletions frontend/src/components/__tests__/Dashboard.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
import { expect, describe, it, vi, beforeEach } from 'vitest';

import { render, waitFor, fireEvent } from '@testing-library/vue';
import { render } from '@testing-library/vue';
import Dashboard from '../Dashboard.vue';
import { createTestingPinia } from '@pinia/testing';
import { authStore } from '../../store/modules/auth';
import { DateTimeFormatter, LocalDate } from '@js-joda/core';
import { Locale } from '@js-joda/locale_en';

const pinia = createTestingPinia();
const mockRouterPush = vi.fn();
const mockRouter = {
push: (...args) => mockRouterPush(...args),
};

vi.mock('../../common/apiService', () => ({
default: {
getReports: async () => {
return [];
},
},
}));

const wrappedRender = async () => {
return render(Dashboard, {
global: {
Expand All @@ -24,17 +30,6 @@ const wrappedRender = async () => {
});
};

const mockGetReports = vi.fn();
const mockGetReport = vi.fn();
vi.mock('../../common/apiService', () => ({
default: {
getReports: async () => {
return mockGetReports();
},
getReport: (...args) => mockGetReport(...args),
},
}));

const auth = authStore();

describe('Dashboard', () => {
Expand All @@ -44,72 +39,7 @@ describe('Dashboard', () => {
});

it('should user name', async () => {
mockGetReports.mockReturnValue([]);
const { getByTestId } = await wrappedRender();
expect(getByTestId('legal-name')).toHaveTextContent('Welcome, Test');
});

it('should display correct records', async () => {
mockGetReports.mockReturnValue([
{
report_id: 'id1',
report_start_date: '2023-01-01',
report_end_date: '2023-02-01',
reporting_year: 2023,
create_date: new Date().toISOString(),
},
]);
const { getByTestId } = await wrappedRender();
await waitFor(() => {
expect(mockGetReports).toHaveBeenCalled();
});

expect(getByTestId('reporting_year-id1')).toHaveTextContent('2023');
expect(getByTestId('report_published_date-id1')).toHaveTextContent(
LocalDate.now().format(
DateTimeFormatter.ofPattern('MMMM d, YYYY').withLocale(Locale.ENGLISH),
),
);
});
it('should open report details', async () => {
mockGetReports.mockReturnValue([
{
report_id: 'id1',
report_start_date: '2023-01-01',
report_end_date: '2023-02-01',
create_date: new Date().toISOString(),
},
]);
const { getByTestId } = await wrappedRender();
await waitFor(() => {
expect(mockGetReports).toHaveBeenCalled();
});

const viewReportButton = getByTestId('view-report-id1');
await fireEvent.click(viewReportButton);
});
it('should open report in edit mode', async () => {
mockGetReports.mockReturnValue([
{
report_id: 'id1',
report_start_date: '2023-01-01',
report_end_date: '2023-02-01',
create_date: new Date().toISOString(),
is_unlocked: true,
},
]);
const { getByTestId } = await wrappedRender();
await waitFor(() => {
expect(mockGetReports).toHaveBeenCalled();
});

const editReportButton = getByTestId('edit-report-id1');
await waitFor(() => {
expect(editReportButton).toBeInTheDocument();
});
await fireEvent.click(editReportButton);
expect(mockRouterPush).toHaveBeenCalledWith({
path: 'generate-report-form',
});
});
});
Loading
Loading