feat: advanced view of asset index
After many considerations we decided that instead of making the default view of the asset index too crowded, we will instead create an advanced view for advanced users.
Designs: https://www.figma.com/design/ykvc0MhPeNLsrJ4tJsKosQ/Shelf-%7C-UX-Scenarios?node-id=7109-18468&node-type=canvas&t=deekb5gz94eEw1Zt-0
Checklist:
- [x] Make sure when custom fields are updated, we update the
columnsinsideAssetIndexSettings - [x] When a user creates a new Organization - create the settings object
- [x] ~When a new
UserOrganizationis created, we need to create theAssetIndexSettings- check this:createUserOrgAssociation~ - decided on a different and simpler approach. InsidegetAssetIndexSettings, if not settings are found we just create them on the go. This basically handles multiple cases and will make sure there is never a user without settings. - [x] When a user is created create the
AssetIndexSettingsfor their personal org - [x] Add image option in first column
- [x] Allow to freeze name column
- [x] Make header sticky
- [x] ScrollToTop button
- [ ] Possibility to open asset in new tab
- [ ] Add the "disabled on mobile thing"
- [ ] Double check if simple mode didnt get any bugs related to other changes
- [x] Switching between modes should keep each mode's own filters
- [x] UI still needs reworking. Sent a lot of time on sticky header but it might have been a mistake. We should make the table always be 100vh and scrollable inside, that way we dont need to worry about making anything sticky. Supabase UI is a good example for this.
- [x] AssetViewSearch wont be used in this advanced index so we need to update the search field. For now the search field will search in
asset.titleandasset.description - [ ] Columns to still add:
available for bookings - [ ] sorting options - name should always be first
- [ ] add "clear all" for sorts
Sorting options tests:
- [x] Name
- [x] id
- [x] status
- [x] createdAt
- [x] value
- [x] description
- [x] category
- [x] location
- [x] kit
- [ ] custody
- [ ] custom field - text
- [ ] custom field -multiline text
- [ ] custom field - boolean
- [ ] custom field - options
- [ ] custom field - date
Few small points from testing.
-
[x] Let's make our asset name look similar than on simple view.
- (font-medium)
-
[x] Rendering of description is different when a description is short. Ideally they look similar on advanced view. In the case of having too many characters we put an ellipsis on the end of the available to render text space. But it looks like it takes less width than the other case.
@carlosvirreira I am deploying a version of this to staging that would benefit from testing. So here is what you can currently test:
Column configuration:
- [ ] Enable/disable columns
- [ ] re-order columns - both default and cf columns
Index configuration:
- [ ] changing between simple and advanced index
- [ ] freezing/unfreezing first column
- [ ] show/hide asset image
Sorting:
- [ ] changing sorting order and making sure results are correct
- [ ] testing based on different sorting field type:
- [ ] Name
- [ ] id
- [ ] status
- [ ] createdAt
- [ ] value
- [ ] available to book
- [ ] description
- [ ] category
- [ ] location
- [ ] kit
- [ ] custody
- [ ] custom field - text
- [ ] custom field -multiline text
- [ ] custom field - boolean
- [ ] custom field - options
- [ ] custom field - date
@carlosvirreira I am deploying a version of this to staging that would benefit from testing. So here is what you can currently test:
Column configuration:
- [ ] Enable/disable columns Safari - Desktop:
https://github.com/user-attachments/assets/5eb5ee22-dce1-4ddf-a680-6ff05ca9d934
Chrome - Desktop:
Same behaviour
- [ ] re-order columns - both default and cf columns
Safari / Chrome:
After moving a column it snaps back to its original position.
https://github.com/user-attachments/assets/dd0f441a-dd91-44ba-9151-969c2beb96e9
Index configuration:
- [ ] changing between simple and advanced index
Works well.
- [ ] freezing/unfreezing first column
Works well.
- [x] show/hide asset image
Works well. 'Remembers' the preference.
Sorting:
- [ ] changing sorting order and making sure results are correct
- [ ] testing based on different sorting field type:
- [ ] Name
Ascending > Check Descending > Check
Observation: We might need to do a explainer page/knowledgebase article for how sorting logic works for ascending descending.
- [ ] id
Ascending > Check Descending > Check
- [ ] status
Ascending > Check Descending > Check
Observation: Unavailable to book seems to not have any sort of extra weight on the sort. So it appears in random position. This is not an issue but it is worth mentioning that it might cause some sort of a feeling with our users sorting. Not sure how to handle this for now.
- [ ] createdAt
Ascending > Check Descending > Check
- [ ] value
Ascending > Fail Descending > Fail
Cannot state that this works due to the fact that Value is toggled off by default on my test and I cannot enable it without snapping back to its original state.
- [ ] available to book
Ascending > Fail Descending > Fail
In both directions the values are inconsistent.
- [ ] description
Ascending > Check Descending > Fail
Ascending: Numbers come first (matches our expectation), then uppercase 'A' to 'Z', then lowercase 'a' to 'z'. Descending: Lowercase 'z' to 'a', then uppercase 'Z' to 'A', then numbers (contradicts our expectation).
- [ ] category
Ascending > Check Descending > Check
- [ ] location
Ascending > Fail Descending > Fail
Cannot state that this works due to the fact that Value is toggled off by default on my test and I cannot enable it without snapping back to its original state.
- [ ] kit
Ascending > Check Descending > Check
sorting is consistent with ASCII/Unicode character ordering, where:
Numbers (0-9) come first Then uppercase letters (A-Z) Then lowercase letters (a-z)
However, it might not be the most human friendly.
A more natural sorting method might:
Ignore case (treat uppercase and lowercase the same) Sort numbers as whole values rather than character-by-character Place purely alphabetic entries before alphanumeric ones
In such a "natural" sort, the order might be:
KIT TEST z0101 00 Kit
- [ ] custody
Ascending > Check Descending > Check
Same observation on human friendly. It follows Ascii/Unicode but might be confusing.
- [ ] custom field - text
Ascending > Check Descending > Check
Same observation on human friendly. It follows Ascii/Unicode but might be confusing.
- [ ] custom field -multiline text
Ascending > Check Descending > Check
Observation, the view content on descending last item when click 'view content' it goes behind the scroll bar.
- [ ] custom field - boolean
Available to book custom field cannot be shown on my index. Cannot test with that field. If I make a new boolean field it does show.
Ascending > Check Descending > Check
- [ ] custom field - options
Ascending > Check Descending > Check
- [ ] custom field - date
Ascending > Check Descending > Check
Other observation:
Sometimes I feel like it could be nice to apply the sorting if you remove a sorting rule line. However, I can see why someone might want to click on the apply sorting button. Worth to discuss shortly. Assigning custody via Actions returns an unexpected error
My latest test was quite fruitful. Only the below can be looked at:
- [x] If you add this to search bar it will return an error " [ ] Search contains:database (should find database-related items) "
Maybe we have to look into handling a case with special characters
- [x] On the last one I did 'Tech' instead of 'Tech Team' and I got a Failed to Fetch Paginated and filterable assets (Trace id: jn56937tkd02bmma8zgi9j56) - tested with other methods "https://testapp.shelf.nu/assets?per_page=20&custody=is%3ATech+Team" so it seems to be something related to NRMs.
All searches for NRMs are failing. (https://testapp.shelf.nu/assets?per_page=20&custody=is%3AMarketing+Manager)