dustin/receipts/pipeline/head This commit looks goodDetails
Now that there are quite a few receipts in the database, scrolling to
the end to see the most recent entries is rather cumbersome. Let's show
the most recent receipts first, and hide older ones by default by
splitting the list into multiple pages.
Instead of sending the whole image file for every receipt shown on the
list page, we now generate thumbnails for them on the fly. This
dramatically reduces the amount of bytes sent for each image, especially
very large, high-quality photographs. It also improves support for
non-image attachments like PDFs, by rendering image previews in the
grid view instead of a broken image placeholder.
We use GraphicsMagic to do the conversion. Its `MagickWand` API is
pretty straightforward and convenient, and it supports a plethora of
image and image-like formats.
A receipt can now be deleted by clicking the little trash can icon on
its card on the receipt list page. To make this look nice, I had to
adjust some of the CSS for that page. Incidentally, I was able to get
the cards to be properly aligned by changing the images to be cropped
instead of scaled, via the `object-fit: cover` CSS property.
Rethinking the workflow again. Requiring the transaction to be present
in Firefly already will be problematic for two very important cases:
* Gas station purchase never show up in Firefly automatically
* HSA purchase show up hours or days later and have no information
besides the amount
These are arguably the most important cases, since they are the ones
that really need receipts in order to keep the transaction register
correct. Thus, we need a different way to handle these types of
transactions.
Really, what I need is a way to associate transaction data with an image
I really liked the original idea of storing receipts in Paperless, but
that ended up not working out because the OCR failed miserably and thus
made it impossible to search, so finding a receipt meant looking at each
image individually. I think, therefore, the best solution is to store
the images along with manually-entered data.
To implement this new functionality, I am using `sqlx`, a SQL toolkit
for Rust. It's not exactly an ORM, nor does it have a dynamic query
builder like SQLAlchemy, but it does have compile-time checking of
query strings and can produce type-safe query results. Rocket has
support for managing its connection pools as part of the server state,
so that simplifies usage quite a bit.
On the front-end, I factored out the camera image capture into an HTML
custom element, `camera-input`. I did not update the original form to
use it, since I imagine that workflow will actually go away entirely.