feat: advanced view of asset index

[DonKoko]

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:

• Make sure when custom fields are updated, we update the columns inside AssetIndexSettings
• When a user creates a new Organization - create the settings object
• 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.
• When a user is created create the AssetIndexSettings for their personal org
• Add image option in first column
• Allow to freeze name column
• Make header sticky
• 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
• Switching between modes should keep each mode's own filters
• 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.
• 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
• Should we allow AdvancedAssetIndex for Base and Self_service users?
• add qrId column
• Disable apply filters if there are any errors in schema
• Fix components file structure. Its a bit of a mess now. Everything related to advanced should be moved to advanced folder and organized better
• Export to csv
• Because of how we manage filters by automatically building the object from the search params, we need to create some type of safety measure that only considers real fields, so if someone just adds a random param such as ?name=is:xxx we dont parse this as it will cause for nothing to be shown and such errors:

{"level":50,"time":1729247131694,"pid":781325,"hostname":"DESKTOP-4O50AD2","err":{"cause":{"name":"PrismaClientKnownRequestError","code":"P2010","clientVersion":"5.15.1","meta":{"code":"42703","message":"column a.name does not exist"},"stack":"PrismaClientKnownRequestError: \nInvalid `prisma.$queryRaw()` invocation:\n\n\nRaw query failed. Code: `42703`. Message: `column a.name does not exist`\n 

• For relation filters such as Kit, Location and Category, when the operator is either is or isNot we can actually use a select instead of the text field. This will be way better UX.
• Types need to be reviewed and fixed. We dont have a specific type for items returned from the AdvancedAssetIndex. This should be added.
• For some reason the model-filters gets re-validated when the asset index re-validates. This should for sure not be happening on advanced index:
  
• Relationship column values should be links to the entries: Location, Kit
• For each field type, implement an operator that can act as a logical OR.
• Make sure each filter can be added just once
• Make sure each Sort can be added just once
• Make scroll to top work with the updated index UI
• fix tags filter
• re-ordering columns is broken again
• When assets are imported from a CSV, the custom fields columns get the wrong type in the columns jsonb inside AssetIndexSettings. They are all parsed as 'single-line text'
• Change the BG color of the header
• Fix pagination styling - make it more compact
• We need to do some extra checks to make sure the searchParams values are valid and if they are not reset them. So we have for example this case: http://localhost:3000/assets?per_page=20&status=IN_CUSTODY. In this case status is a valid key but the value is not valid based on the schema we use for searchParams in the advanced index. This needs to be handled properly.
• Weird scrollbar areas are now showing up. I am not sure what caused this, our scrollbars were looking nice, now they are not anymore. THis happens everywhere where we have overflow-scroll
• Make sure that page param is removed when the filters change.
• Text fragment - this doesnt really work like I expected. It cannot do partial match and it only works on chromium browsers even tho caniuse says something else
• How do we change error handling so we dont block UI when there are errors

Sorting options tests: ✅

• Name
• id
• status
• createdAt
• value
• description
• category
• location
• kit
• custody
• custom field - text
• custom field -multiline text
• custom field - boolean
• custom field - options
• custom field - date

Filtering search params tests:✅

String Fields (id, name, category, location, kit, custody)

• ?name=is:John
• ?name=isNot:John
• ?name=contains:oh
• ?category=is:Electronics
• ?location=contains:New York

Text Fields (description)

• ?description=contains:important

Boolean Fields (availableToBook)

• ?availableToBook=is:true
• ?availableToBook=is:false

Date Fields (createdAt)

• ?createdAt=is:2023-05-15
• ?createdAt=isNot:2023-05-15
• ?createdAt=before:2023-05-15
• ?createdAt=after:2023-05-15
• ?createdAt=between:2023-05-01,2023-05-31

Number Fields (valuation)

• ?valuation=is:1000
• ?valuation=isNot:1000
• ?valuation=gt:1000
• ?valuation=lt:1000
• ?valuation=gte:1000
• ?valuation=lte:1000
• ?valuation=between:1000,2000

Enum Fields (status)

• ?status=is:AVAILABLE
• ?status=isNot:AVAILABLE

Array Fields (tags)

• ?tags=contains:urgent
• ?tags=containsAll:urgent,important
• ?tags=containsAny:urgent,important

Custom Fields

Single Line Text

• ?cf_fieldName=is:Value
• ?cf_fieldName=isNot:Value
• ?cf_fieldName=contains:alue

Multiline Text

• ?cf_fieldName=contains:important information

Boolean

• ?cf_fieldName=is:true
• ?cf_fieldName=is:false

Date

• ?cf_fieldName=is:2023-05-15
• ?cf_fieldName=isNot:2023-05-15
• ?cf_fieldName=before:2023-05-15
• ?cf_fieldName=after:2023-05-15
• ?cf_fieldName=between:2023-05-01,2023-05-31

Option (Enum)

• ?cf_fieldName=is:Option1
• ?cf_fieldName=isNot:Option1

Multiple Filters

• ?name=contains:John&status=is:AVAILABLE&valuation=between:1000,2000&cf_customField=is:true

Custom field filtering testing

• single line
• multi line
• boolean
• options
• date

[carlosvirreira]

Few small points from testing.

• Let's make our asset name look similar than on simple view. - (font-medium)

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

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

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

Screen.Recording.2024-10-17.at.10.42.30.mov

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.

Screen.Recording.2024-10-17.at.10.48.49.mov

Index configuration:

• changing between simple and advanced index

Works well.

• freezing/unfreezing first column

Works well.

• 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

[carlosvirreira]

My latest test was quite fruitful. Only the below can be looked at:

• 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

• 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)