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.

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

#3254 - CAS AP Invoice - Invoices and Batches - UI #4305

Merged
merged 8 commits into from
Jan 31, 2025

Conversation

andrewsignori-aot
Copy link
Collaborator

@andrewsignori-aot andrewsignori-aot commented Jan 29, 2025

New proposed UI to allow invoice batches download. The content is completely subject to be changed and the goal is to have a starting point to make some progress towards the final solution.

  • Used a data table with server-side pagination.
  • Enabled sort operation only for the batch date for now.
  • Enable some filters on statuses.
  • Added temporary download button (functionality to be added during this sprint in an upcoming PR).
  • Added temporary modals to the UI to later add the functionality for batch approval/rejection (it may or may not be an effort in the current sprint).
  • Final Ministry roles to be created in an upcoming PR.
  • E2E tests to be added in an upcoming PR.

image
Note: the above UI was changed during PR to remove the "Only" prefix that can be noticed in the below images.

image

image

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@andrewsignori-aot andrewsignori-aot self-assigned this Jan 29, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@andrewsignori-aot andrewsignori-aot marked this pull request as ready for review January 31, 2025 02:34
@dheepak-aot dheepak-aot self-requested a review January 31, 2025 17:02
async getCASInvoiceBatches(
paginationOptions: CASInvoiceBatchesPaginationOptions,
): Promise<PaginatedResults<CASInvoiceBatch>> {
const [results, count] = await this.casInvoiceBatchRepo.findAndCount({
Copy link
Collaborator

@dheepak-aot dheepak-aot Jan 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Believe first time we are using paginated query in typeorm object query. 👍

skip: paginationOptions.pageLimit * paginationOptions.page,
take: paginationOptions.pageLimit,
order: {
[paginationOptions.sortField]: paginationOptions.sortOrder,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we have a default sort-field and order from backend perspective? or Are we expecting the Vue to handle the default sort field and order?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the moment that we exposed the option to the API to receive the sort, I did not believe that required a default.

sortField?: string;
@IsOptional()
@IsArray()
@Transform(({ value }) => value.split(","))
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't follow the usage of this decorator here. I see it is used in programs search as well.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The query string will be provided as a regular comma-separated string in the URL, for instance, myQueryarameter=item1,item2,item3. This converts the comma-separated string to a nice array to be consumed by the controller. Besides converting it, the decorators will ensure the array items are also expected enum values.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good.

</template>
<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import ChipStatus from "@/components/generic/ChipStatus.vue";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor. We can add this StatusChip to main.ts as it is very generic.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added to the main and changed existing files.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you very much.

<full-page-container :full-width="true">
<template #header
><header-navigator
title="Corporate Accounting Services"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is initial version of UI, but should we call a page as Corporate Accounting Services? Question to business.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Business was ok with the current naming at this moment, the preliminary UI was shared on different occasions.
We can wait for further feedback from the final users.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
Copy link

Backend Unit Tests Coverage Report

Totals Coverage
Statements: 22.4% ( 3896 / 17396 )
Methods: 10.26% ( 226 / 2203 )
Lines: 25.75% ( 3362 / 13056 )
Branches: 14.41% ( 308 / 2137 )

Copy link

E2E Workflow Workers Coverage Report

Totals Coverage
Statements: 65.59% ( 589 / 898 )
Methods: 59.63% ( 65 / 109 )
Lines: 68.72% ( 468 / 681 )
Branches: 51.85% ( 56 / 108 )

Copy link

E2E Queue Consumers Coverage Report

Totals Coverage
Statements: 86.72% ( 1397 / 1611 )
Methods: 83.6% ( 158 / 189 )
Lines: 88.99% ( 1156 / 1299 )
Branches: 67.48% ( 83 / 123 )

Copy link

E2E SIMS API Coverage Report

Totals Coverage
Statements: 68.11% ( 6040 / 8868 )
Methods: 65.72% ( 744 / 1132 )
Lines: 71.97% ( 4731 / 6574 )
Branches: 48.62% ( 565 / 1162 )

Copy link
Collaborator

@dheepak-aot dheepak-aot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great Job. Thanks for moving the status chip to main and the refactor. 👍

* @returns list of all invoice batches.
*/
@Get()
@Roles(Role.AESTEditCASSupplierInfo) // TODO: Create a new role.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Collaborator

@guru-aot guru-aot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, nice work @andrewsignori-aot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Ministry Ministry Features SIMS-Api SIMS-Api Web portal
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants