Collections Page

[doc-code-hub]

As discussed in some issues (#1671 , #760) an exhaustive page is required for the collections.

Given my inability to view some of my content (as I described here #1671 ) I decided to propose a solution myself inspired by the series page.

Pull Request: #1680

Preview

Ignore these blur and shadow effects in the photo, the contents are seen as usual.

I believe that the subdivision into tabs (as for the seasons of the series) is a good solution to organize the contents present within a collection, with a subdivision of the contents by type.

A few words about what I did

I created a new page called "collections/_itemId" starting with the "series/_itemId" page (and the SeasonTabs component) as a starting point.

I created a store called collections where I provided an action (getCollectionChildren) to call the "items.getItems" API by setting {userId, parentId} as filters to get all the items belonging to the collection (and added the related functions of Success and Fault, as well as the delete function for the reset).

In the store I set the "children" property which consists of a list of {type, items} objects to facilitate the use of the tabs on the page.

For better UX I have also reordered this list (divided by item type) by number of items.

---

I think this is a good starting point to make the collections available, and soon expandable eventually as suggested in # 760 with ease.

The page works very well in both Desktop and Mobile, however I have never used Vue.js before, I usually work with Angular or React.

I do not therefore exclude that it may be necessary to refactor for improvements or for something unnecessary coming from the series page that can be removed, and I am therefore open to any suggestion for some improvement before performing the merge.

What do you think? :)

[ThibaultNocchi]

That seems nice to me, I'll look up the PR :)