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

For #147 - add folders UI to author interviews list #289

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

janebitovi
Copy link
Contributor

@janebitovi janebitovi commented Jan 27, 2022

For #147 - add folders UI to author interviews list

I've done everything I can to make finishing this as painless as possible. I'll go over what needs to happen in detail here and show what it ties to!

API Updates

CAJA_WS listGuides() needs to return the folder column

which means the table this data comes from needs a folder column added. The column should be a simple text field (maybe char(100)?) that defaults to an empty string (or NULL if necessary)
image

create API in CAJA_WS updateGuideFolder(id, folder)

This should take the row id from the previously mentioned listGuides()'s table and a string to populate the folder column.
the 'folder' param should be allowed to be an empty string, which will be treated as "Unsorted" in the UI
image
It doesn't need to return anything at the moment other than 200 success, but that detail is up to you.

Front End Updates

Delete test folder overrides

https://github.com/CCALI/a2jauthor/pull/289/files#diff-b42592affc75f927200e97d1f73e074c318a83b02fb5ec2e43f730e311d8edc9R37-R40
These just randomly assign each interview into a random test folder for demonstration. Once the folder property is returned from the API, this would just be overriding real data locally.

Delete this todo note

https://github.com/CCALI/a2jauthor/pull/289/files#diff-b42592affc75f927200e97d1f73e074c318a83b02fb5ec2e43f730e311d8edc9R79

Call the api on save

https://github.com/CCALI/a2jauthor/pull/289/files#diff-12d77bd3fadc67c298eea525f97ae893e8f278dc82d9569cf7f5c6bf85fa717bR36
Replace that line with a call to the updateGuideFolder(id, folder) API previously mentioned.
It just needs to return a success (200) response when it finishes saving. The parameters will come from these two existing variables:
this.guideListRow.id and path

Delete this todo note too

https://github.com/CCALI/a2jauthor/pull/289/files#diff-12d77bd3fadc67c298eea525f97ae893e8f278dc82d9569cf7f5c6bf85fa717bR38

That's it!

Here's what it all looks like in app with the dummy data

Interviews tab will sort everything into "Unsorted" by default but based on what that 'folder' string is, it will just group them by that info:
image
It's a single loop over the data to sort them, so nothing catastrophic to worry about for performance of huge lists.

You can click the folder name to collapse and expand them. By default, Unsorted list is expanded and the rest are collapsed.
folders-collapse

The popover can be toggled with the arrow button on the left. The popover component has a search bar defaulted to the current folder. As you type it will filter the list of all existing folders. If what you have entered in the search bar doesn't match any existing folder, it will show you an option at the bottom of the popover to create a new folder with the name as you have it entered. Or you can select from any of the other ones.
folders-popover-ui

You can move them into other folders, the UI updates and closes the popover once the save is successful.
folders-move

Everything is working, ready to go with just those few finalizing items addressed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant