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

Identification of changed information during edit #3815

Closed
5 tasks done
Joshua-Lakusta opened this issue Oct 22, 2024 · 3 comments
Closed
5 tasks done

Identification of changed information during edit #3815

Joshua-Lakusta opened this issue Oct 22, 2024 · 3 comments
Assignees
Labels

Comments

@Joshua-Lakusta
Copy link
Collaborator

Joshua-Lakusta commented Oct 22, 2024

As a ministry I want the edit process to be able to identify what information has changed and have this validation be viewable in some way when looking at an edit. I want the view of each element that has been changed to be highlighted.

Acceptance Criteria

  • Create a validation for each question element that checks post any edit to know if a specific field or answer has changed. This includes additional documents uploaded.
  • Flag each entry that has been changed since the previous version of the application with red font and italicize when viewed by a ministry user.

image.png

image.png

Additional Context
This will be attached to the concept of editing before and after COE and will need to be used in order to flag what has been changed from one submission to the next and highlight it in some way.

Technical

  • Create a method in the backend to execute the comparison between two application data payloads and output the list of changes key.
    • Values that were changed.
    • Keys added.
    • Keys removed.
    • All the above are considered to be executed recursively.
    • The method can target the basis of comparing the two application payloads only. Please create unit tests to cover the above-mentioned possible changes between payloads.
  • When the Ministry sees the application, Vue should receive a modified key list and a different style for each component. Please use the formio utils already in place to find the components.
  • E2E tests to modified API endpoint.
    Note: starting with the comparison effort and build the unit test around it can be a good way to have a first PR and to the devs be aware about the approach.
@Joshua-Lakusta Joshua-Lakusta self-assigned this Oct 22, 2024
@Joshua-Lakusta Joshua-Lakusta added the Business Items under Business Consideration label Oct 22, 2024
@Joshua-Lakusta
Copy link
Collaborator Author

Next steps.... clearly map exception data. Be aware of cross functions. Making additional ticket to show edit history and that will proceed before this ticket.

@Joshua-Lakusta Joshua-Lakusta added Dev & Architecture Development and Architecture and removed Business Items under Business Consideration labels Dec 10, 2024
@andrewsignori-aot
Copy link
Collaborator

@Joshua-Lakusta in an upcoming ticket, should we alert the Ministry user if no changes happen between the application versions?

@andrewsignori-aot andrewsignori-aot removed the Dev & Architecture Development and Architecture label Jan 2, 2025
@andrewsignori-aot andrewsignori-aot self-assigned this Jan 3, 2025
@andrewsignori-aot
Copy link
Collaborator

andrewsignori-aot commented Jan 8, 2025

Samples for a layout proposal

Example for course information where the second item has 2 changes and the list length is the same.

image.png

Example of the dependent list when at least one item was removed from the list and some other fields were updated.

Please note the difference in the label that would indicate the list had items removed.

image.png

Regular questions changed

image.png

image.png

Image

github-merge-queue bot pushed a commit that referenced this issue Jan 13, 2025
## New method `compareApplicationData`

- Created a new helper method with the sole intention of executing the
comparison between two application dynamic data JSONB data.
  - The method will detect changes as below
    - Added/removed/updated properties
    - Added/removed array items
- Used `JSON.stringify` a simple solution to perform a deep equality
between two objects. During the tests, the comparison of two part-time
applications took less than a millisecond to execute.
- Method created at lib level to allow its usage in future comparison in
application data by other apps than API.

## Form.io considerations

- The Form.io
[event](https://help.form.io/developers/form-development/form-renderer#form-events)
`render` was used instead of `load` because the lists are not fully
created right after the loading stage which means that not all the
children will be present to have the highlight style applied.
- Form.io component tree for lists contains only the "first child" and
the regular `document.getElementById` was used to ensure that a child
component in a list would receive the highlight style.

## Other changes

- Adjusted the Ministry controller to execute the application data
comparison in the application read-only versions that is the data being
displayed to the users where the changes should be detected.
_Note:_ The `compareApplicationData` would also be able to detect
changes in the non-read-only application dynamic data.

### Sample API result
```json
[
    {
        "key": "dependants",
        "changeType": "itemsRemoved",
        "changes": [
            {
                "index": 0,
                "changeType": "updated",
                "changes": [
                    {
                        "key": "fullName",
                        "changeType": "updated"
                    },
                    {
                        "key": "dateOfBirth",
                        "changeType": "updated"
                    }
                ]
            }
        ]
    },
    {
        "key": "citizenship",
        "changeType": "updated"
    },
    {
        "key": "courseDetails",
        "changeType": "updated",
        "changes": [
            {
                "index": 1,
                "changeType": "updated",
                "changes": [
                    {
                        "key": "courseCode",
                        "changeType": "updated"
                    },
                    {
                        "key": "courseStartDate",
                        "changeType": "updated"
                    }
                ]
            }
        ]
    },
    {
        "key": "studentNumber",
        "changeType": "updated"
    },
    {
        "key": "studentHomeAddress",
        "changeType": "updated"
    },
    {
        "key": "applicationPDPPDStatus",
        "changeType": "updated"
    },
    {
        "key": "hasSignificantDegreeOfIncome",
        "changeType": "updated"
    },
    {
        "key": "partTimeAwardTypesToBeConsidered",
        "changeType": "updated"
    },
    {
        "key": "reasonsignificantdecreaseInIncome",
        "changeType": "updated"
    },
    {
        "key": "decreaseInIncomeSupportingDocuments",
        "changeType": "itemsRemoved"
    },
    {
        "key": "currentYearIncomeApplicationException",
        "changeType": "updated"
    },
    {
        "key": "selectedLocationName",
        "changeType": "updated"
    },
    {
        "key": "selectedOfferingName",
        "changeType": "updated"
    }
]
```

### Sample UI Changes


![image](https://github.com/user-attachments/assets/722d248f-5eff-47b7-b17c-44db59b076bd)


![image](https://github.com/user-attachments/assets/76ab4379-9a88-4c2f-9fce-60a45b2b5b6c)


![image](https://github.com/user-attachments/assets/cc6961ac-9ea1-48cc-aeb7-5a8838dccbce)


![image](https://github.com/user-attachments/assets/6510e429-29fb-4d0f-9bdb-be3cf254ce7b)


![image](https://github.com/user-attachments/assets/7d117db6-bc27-4d6a-afb9-83cf0ac98a00)

### Non-PR-related changes
- Added a new option for VS Code debug `Unit tests - Current test file`
following the same idea from other available.
- Extracted the jest configurations from packages.json and moved to a
file to allow the reference using the `--config` while executing the
`npm commands`, following the same idea from the E2E tests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants