feat: Collection filtering on top of profile #8414

hassnian · 2023-12-05T09:46:06Z

PR Type

Bugfix
Feature
Refactoring

Context

Closes Collection filtering on top of profile #8384

Did your issue had any of the "$" label on it?

Fill up your DOT address: Payout

Community participation

Are you at KodaDot Discord?

Screenshot 📸

My fix has changed something on UI;

Copilot Summary

`🤖[deprecated] Generated by Copilot at b11a9aa`

This pull request adds a new feature to filter NFTs by collections on the profile page. It introduces a new CollectionFilter component that uses a NeoDropdown with checkboxes and an ActiveCount badge. It also updates the CSS classes and variables for the filter and the ActiveCount component, and adds the image field to the collectionDetails fragment.

`🤖[deprecated] Generated by Copilot at b11a9aa`

We filter the NFTs by collections
We show the logos and the counts
We adjust the colors and positions
We unleash the CollectionFilter power

kodabot · 2023-12-05T09:46:10Z

SUCCESS @hassnian PR for issue #8384 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

netlify · 2023-12-05T09:46:11Z

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	`1292ab4`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/657d9d4a47471300086cfaf0
😎 Deploy Preview	https://deploy-preview-8414--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

reviewpad · 2023-12-05T09:46:34Z

AI-Generated Summary: This pull request contains a series of changes that aim to improve functionality by including a profile collection filter. The central feature added is the new component CollectionFilter.vue, which allows users to search and filter out specific collections as per their requirements.

The component ActiveCount.vue has also been modified to include positioning control for the count indicator. Two CSS classes have been added to global.scss to enhance the interface, and Tailwind CSS properties are included as well.

Corresponding modifications in the ProfileDetail.vue have been applied to accommodate changes made in CollectionFilter.vue. Furthermore, 'image' attribute is added in the collectionDetails fragment in collectionDetails.graphql.

Overall, these changes focus on enhancing the user's experience by providing them with an optimal interface to search and filter collections.

exezbcz · 2023-12-05T11:23:50Z

seeing draft, clicking on it lol

can you make the dropdown wider please

hassnian · 2023-12-05T11:32:45Z

seeing draft, clicking on it lol
can you make the dropdown wider please

I was fixing that lol

exezbcz · 2023-12-05T12:50:26Z

one more thing

active button should have hover white

so the stroke is not visible

more on that in components page in figma

https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=5311-18771&mode=design&t=DYchv8StBlhD8HzW-11

prury · 2023-12-05T14:08:09Z

is it possible for it not to go to the top of the page every time we are messing with the filters?
its also a bit buggy if you chose two filter and scroll down:

collection.filter.mp4

roiLeo · 2023-12-06T09:07:52Z

active button should have hover white

link #8362

roiLeo · 2023-12-06T09:11:04Z

assets/styles/global.scss

+.pointer-events-none {
+  pointer-events: none !important;
+}


not needed?

needed , had to add that , otherwise you could click on the checkbox without triggering the dropdown item select

components/profile/CollectionFilter.vue

…into issue-8384

hassnian · 2023-12-12T08:25:35Z

@prury try again thanks

prury · 2023-12-12T19:37:29Z

oh, its getting nice!

i would try to take care of horizontal scroll:
filtering only works first time, if you try to filter again nothing happens
after refreshing or changing network filters stay on, maybe clear they?
maybe center modal on mobile:

*can make followup if its too much

hassnian · 2023-12-13T06:06:43Z

@prury

filtering only works first time, if you try to filter again nothing happens

not sure if fixed or not, couldn't reproduce it

after refreshing or changing network filters stay on, maybe clear they?

fixed

neo dropdown issues

i would try to take care of horizontal scroll:

maybe center modal on mobile:

these two are specific of the dropdown component itself

*can make followup if its too much

yes please , create a new issue so we can address them separately.

thanks

prury · 2023-12-13T21:20:25Z

@prury

filtering only works first time, if you try to filter again nothing happens

this one we will have to fix here, otherwise it will introduce bug since its working properly on canary
(sorting only works after you reload collections)

sortbug.mp4

hassnian · 2023-12-14T11:01:14Z

@prury

filtering only works first time, if you try to filter again nothing happens

this one we will have to fix here, otherwise it will introduce bug since its working properly on canary (sorting only works after you reload collections)

yes absolutely , fixed try again thanks

yes please , create a new issue so we can address them separately.

I was referring to this

these two are specific of the dropdown component itself

…into issue-8384

yangwao · 2023-12-16T12:46:19Z

@hassnian let's resolve conflicts and we will merge it

Thanks!
pay 50 usd

yangwao · 2023-12-16T12:46:32Z

😍 Perfect, I’ve sent the payout
💵 $50 @ 7.27 USD/DOT ~ 6.878 $DOT
🧗 13QUj3pZyFNfYj4AM336hRdyLQbevj5H3sR4PKmLEXLdwZhh
🔗 0x58f8311fafb17a0bab4fdd13f753c0a7e43d05c5b1a9ad89f73aa6b89eaa2530

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

hassnian · 2023-12-16T12:51:35Z

ready

codeclimate · 2023-12-16T12:51:46Z

Code Climate has analyzed commit 1292ab4 and detected 0 issues on this pull request.

View more on Code Climate.

sonarqubecloud · 2023-12-16T12:51:51Z

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

yangwao · 2023-12-16T12:52:09Z

pleasure! thank you!

add: profile collection filter working

b11a9aa

reviewpad bot added the medium Pull request is medium label Dec 5, 2023

fix: collection clear on tab change

79d252c

hassnian added 3 commits December 5, 2023 16:47

fix: modal width

c89ee33

fix: profile tab change reset filters

ea62f1b

Merge branch 'main' into issue-8384

0e72372

hassnian marked this pull request as ready for review December 5, 2023 12:41

hassnian requested review from a team as code owners December 5, 2023 12:41

hassnian requested review from yangwao and daiagi and removed request for a team December 5, 2023 12:41

reviewpad bot added the waiting-for-review label Dec 5, 2023

prury requested review from Jarsen136 and roiLeo and removed request for yangwao December 5, 2023 12:53

Merge branch 'main' into issue-8384

a0c4389

prury added the S-changes-requested-🤞 PR is almost good to go, just some fine tunning label Dec 5, 2023

roiLeo reviewed Dec 6, 2023

View reviewed changes

hassnian added 2 commits December 7, 2023 11:42

Merge branch 'main' into issue-8384

77e2416

Merge branch 'issue-8384' of https://github.com/hassnian/nft-gallery …

90c56cd

…into issue-8384

hassnian closed this Dec 12, 2023

hassnian reopened this Dec 12, 2023

Jarsen136 approved these changes Dec 12, 2023

View reviewed changes

hassnian added 2 commits December 13, 2023 09:48

fix: remove collection filter on url prefix change

10312bc

ref: disabled filter onloading

3018028

hassnian added 2 commits December 14, 2023 14:31

Merge branch 'main' into issue-8384

bc4a0c5

fix: sort not working

c9623ac

reviewpad bot added large Pull request is large and removed medium Pull request is medium labels Dec 14, 2023

Merge branch 'main' into issue-8384

a5822fd

hassnian added 2 commits December 14, 2023 16:08

ref: rename resetSearchQueryParamsValues

05e4ae3

Merge branch 'issue-8384' of https://github.com/hassnian/nft-gallery …

cf2d18d

…into issue-8384

prury added S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked and removed S-changes-requested-🤞 PR is almost good to go, just some fine tunning labels Dec 14, 2023

Merge branch 'main' into issue-8384

202b79b

yangwao added the paid pull-request has been paid label Dec 16, 2023

Merge branch 'main' into issue-8384

1292ab4

yangwao merged commit 8fa72c4 into kodadot:main Dec 16, 2023
15 of 16 checks passed

hassnian deleted the issue-8384 branch December 16, 2023 12:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Collection filtering on top of profile #8414

feat: Collection filtering on top of profile #8414

hassnian commented Dec 5, 2023 •

edited

Loading

kodabot commented Dec 5, 2023

netlify bot commented Dec 5, 2023 •

edited

Loading

reviewpad bot commented Dec 5, 2023

exezbcz commented Dec 5, 2023

hassnian commented Dec 5, 2023 •

edited

Loading

exezbcz commented Dec 5, 2023 •

edited

Loading

prury commented Dec 5, 2023

roiLeo commented Dec 6, 2023

roiLeo Dec 6, 2023

hassnian Dec 7, 2023

hassnian commented Dec 12, 2023

prury commented Dec 12, 2023 •

edited

Loading

hassnian commented Dec 13, 2023

*can make followup if its too much

prury commented Dec 13, 2023

hassnian commented Dec 14, 2023

yangwao commented Dec 16, 2023

yangwao commented Dec 16, 2023

hassnian commented Dec 16, 2023

codeclimate bot commented Dec 16, 2023

sonarqubecloud bot commented Dec 16, 2023

yangwao commented Dec 16, 2023

feat: Collection filtering on top of profile #8414

feat: Collection filtering on top of profile #8414

Conversation

hassnian commented Dec 5, 2023 • edited Loading

PR Type

Context

Did your issue had any of the "$" label on it?

Community participation

Screenshot 📸

Copilot Summary

🤖[deprecated] Generated by Copilot at b11a9aa

🤖[deprecated] Generated by Copilot at b11a9aa

kodabot commented Dec 5, 2023

netlify bot commented Dec 5, 2023 • edited Loading

✅ Deploy Preview for koda-canary ready!

reviewpad bot commented Dec 5, 2023

exezbcz commented Dec 5, 2023

hassnian commented Dec 5, 2023 • edited Loading

exezbcz commented Dec 5, 2023 • edited Loading

prury commented Dec 5, 2023

roiLeo commented Dec 6, 2023

roiLeo Dec 6, 2023

Choose a reason for hiding this comment

hassnian Dec 7, 2023

Choose a reason for hiding this comment

hassnian commented Dec 12, 2023

prury commented Dec 12, 2023 • edited Loading

*can make followup if its too much

hassnian commented Dec 13, 2023

neo dropdown issues

*can make followup if its too much

prury commented Dec 13, 2023

hassnian commented Dec 14, 2023

yangwao commented Dec 16, 2023

yangwao commented Dec 16, 2023

hassnian commented Dec 16, 2023

codeclimate bot commented Dec 16, 2023

sonarqubecloud bot commented Dec 16, 2023

Quality Gate passed

yangwao commented Dec 16, 2023

hassnian commented Dec 5, 2023 •

edited

Loading

`🤖[deprecated] Generated by Copilot at b11a9aa`

`🤖[deprecated] Generated by Copilot at b11a9aa`

netlify bot commented Dec 5, 2023 •

edited

Loading

hassnian commented Dec 5, 2023 •

edited

Loading

exezbcz commented Dec 5, 2023 •

edited

Loading

prury commented Dec 12, 2023 •

edited

Loading