shelf.nu icon indicating copy to clipboard operation
shelf.nu copied to clipboard

feat: advanced view of asset index

Open DonKoko opened this issue 1 year ago • 1 comments

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 columns inside AssetIndexSettings
  • [x] When a user creates a new Organization - create the settings object
  • [x] ~When a new UserOrganization is created, we need to create the AssetIndexSettings - check this: createUserOrgAssociation~ - decided on a different and simpler approach. Inside getAssetIndexSettings, 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 AssetIndexSettings for 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.title and asset.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

DonKoko avatar Sep 19 '24 14:09 DonKoko

Few small points from testing.

  • [x] Let's make our asset name look similar than on simple view. Image - (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. Image

carlosvirreira avatar Sep 26 '24 15:09 carlosvirreira

@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

DonKoko avatar Oct 09 '24 10:10 DonKoko

@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.

Screenshot 2024-10-17 at 11 25 45

  • [ ] 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.

Screenshot 2024-10-17 at 12 02 45

  • [ ] 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

carlosvirreira avatar Oct 17 '24 09:10 carlosvirreira

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)

carlosvirreira avatar Oct 28 '24 12:10 carlosvirreira