[Improvement] - Update/Modernize Tabletop Circulation Web-App

[seanmhanson]

(hey there, friend of some of the tabletop staffers and web engineer with time on my hands)

Currently the web app used with tabletop circulation is several years old and has a UI that can frustrate people at times, including when there are high-volume check-ins/check-outs.

It might be nice to:

• create a minimal node package under a new directory like static/client-apps
• migrate the existing angular functionality to a react app (like one set up using nano-react-app to avoid boilerplate and unneeded deps)
• add test coverage and test in any environments you all use, before removing references to the angular app

This could allow for:

• using node packages for this can keep deps updated and secure
• improvements/features could be easier to add and test at this point
• mitigating issues impacting network connectivity if needed
• making mobile usage more of a reality in an ideal world

If this sounds of interest, I am happy to throw you all an MR with some changes in isolation of the existing app, even if it just can be used piecemeal or something.

[kitsuta]

Hey Sean! Thanks so much for the detailed and well-thought-out new issues!

The tabletop checkins functionality is definitely in need of some TLC. Most of Ubersystem doesn't even use Angular — this feature being built on it was an experiment by the original maintainer, and I'd love to remove Angular entirely as a dependency.

This is probably not obvious from looking at this repo, but there are several apps in the MAGFest ecosystem that use Uber's jsonrpc API to implement these kinds of features. This includes Tuber (staff hotel requests), the staff suite app, and the challenges app. I think a tabletop checkins app would also be a good fit as it has minimal dependencies on the rest of Uber's functionality (you really just need to look up badge #s).

This would give you more flexibility to build the functionality you need without having to learn Uber's existing tech stack, plus it should be easier for you to maintain. Adding API endpoints to Uber is also very simple if your app needs something our existing API doesn't have.

If that sounds like too much, we can instead rewrite the tabletop checkins feature inside Uber using our existing stack, which would largely mean using Jinja2, Bootstrap 5, and DataTables. We have existing pages that work similar to this page, including the filtering (DataTables can do that on its own), so that would be a pretty straightforward project.

[seanmhanson]

Awesome! This doesn't sound like too much at all, and I've had experience with similar stacks and spent a couple days reading through code to get an idea of the full stack for data involved, then hesitated to reach out because I was concerned it wouldn't be aligned with the movement seen for forms etc. IIRC everything basically is injected into the html used for the existing angular apps, so I think you're right regarding minimal lift for API requests and such. If we run into them, I can do my best and let you all know. I also tend to dev with fixture data I use for unit tests etc, so that won't hold up the UI bit. Anyway, I've forked the repo and am working on a pass through things. If it doesn't work out, I'll be glad to just offer up a branch that you can scavenge as you see fit. I'm just glad to have some fun side work and give back to the org, and who knows, maybe get to help out in other ways later

…

On Wed, Feb 14, 2024, 1:06 PM Victoria Earl ***@***.***> wrote: Hey Sean! Thanks so much for the detailed and well-thought-out new issues! The tabletop checkins functionality is definitely in need of some TLC. Most of Ubersystem doesn't even use Angular — this feature being built on it was an experiment by the original maintainer, and I'd love to remove Angular entirely as a dependency. This is probably not obvious from looking at this repo, but there are several apps in the MAGFest ecosystem that use Uber's jsonrpc API to implement these kinds of features. This includes Tuber (staff hotel requests), the staff suite app, and the challenges app. I think a tabletop checkins app would also be a good fit as it has minimal dependencies on the rest of Uber's functionality (you really just need to look up badge #s). This would give you more flexibility to build the functionality you need without having to learn Uber's existing tech stack, plus it should be easier for you to maintain. Adding API endpoints to Uber is also very simple if your app needs something our existing API doesn't have. If that sounds like too much, we can instead rewrite the tabletop checkins feature inside Uber using our existing stack, which would largely mean using Jinja2, Bootstrap 5, and DataTables. We have existing pages that work similar to this page, including the filtering (DataTables can do that on its own), so that would be a pretty straightforward project. — Reply to this email directly, view it on GitHub <#4320 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIUB4J7URTG4DH75T72H23YTT4MDAVCNFSM6AAAAABDDJRFI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBUGM2DCNJVGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[kitsuta]

Oh, would it not be easier to have it as a separate app/in a separate repo? That's what I meant regarding being easier to maintain

[hdaws]

This i believe is now mostly done. However, the layout isn't great on mobile so future improvement with the alpine.js implementation that currently exists is still a thing. Feedback from tabletop staff on whether the filtering speed improvements and UI rework meets needs otherwise would be good too.