search

mWater / mwater-forms

Forms controls for mWater
GNU Lesser General Public License v3.0
3 stars 5 forks source link

Add comparing versions to ResponseAnswersComponent #195

Closed grassick closed 7 years ago

grassick commented 7 years ago

We have a contract to show the history of a survey response. This has been asked for many times, as it is useful to see how a response has changed over time and specifically what edits the manager may have made after the survey was finalized.

As a part of this, we need to extend the ResponseAnswersComponent to allow comparing with a previous version of the data, and optionally showing what has changed. I suggest adding the following props to the component:

prevData: data as it was in the previous version that is being compared to. Necessary for all of the following properties to work but optional in general

showPrevAnswers: adds a third column to the table that contains the answers in prevData

highlightChanges: highlights rows in the table in #FFD that have differences between data and prevData

hideUnchangedAnswers: causes all answers that are unchanged between data and prevData to be hidden

showChangedLink: causes a small pencil link to appear at the top right of any cells that represent a change between data and prevData. The pencil link should be in blue and be clickable

onChangedLinkClick: called when the pencil link is clicked

Please test this using storybook at least and make sure it works for matrix, roster matrix, roster group and likert questions, which are the tricky ones.

grassick commented 7 years ago

@broncha Actually, the third column needs to contain a version history, so this all becomes more complex. Let me think a bit first.

grassick commented 7 years ago

Designing UI here: https://docs.google.com/document/d/1xkDvPPTcTvlRF6GeoTTKk3Droa0-lw8PxO-fTGNI8Jw/edit?usp=sharing

broncha commented 7 years ago

@grassick, I think design 2 is better in terms of usability. Also, I have an idea about a variation of design 2, i.e. using a datagrid, the first column would contain the questions, second column contains the final answer. These 2 columns would be frozen. The consecutive columns would show the revisions of the response, in reverse chronological order. The fields in that revision would be marked/highlighted, and the header would contain the username and timestamp of the revision.

grassick commented 7 years ago

@broncha Let's do design 2 as you suggest, but without the fancy datagrid. If we leave out the datagrid, we can do the new props as suggested at the very top of this issue, and it doesn't need any injection, extra knowledge, list of changes, etc. Just a prevData field which adds a third column. Make it so!