Skip to content

Commit

Permalink
feat(ProfileShowcase): Implement custom showcase position when search…
Browse files Browse the repository at this point in the history 
…er text is filtering items
  • Loading branch information
@alexjba
alexjba committed May 16, 2024
1 parent bc56278 commit 800fa13
Show file tree
Hide file tree
Showing 10 changed files with 149 additions and 108 deletions.
6 changes: 6 additions & 0 deletions storybook/pages/ProfileShowcaseAccountsPanelPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ SplitView {
emoji: "🇨🇿"
walletType: ""
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
preferredSharingChainShortNames: "eth:opt:"
}
ListElement {
name: "testing (no emoji, colored, seed)"
Expand All @@ -41,6 +42,7 @@ SplitView {
emoji: ""
walletType: "seed"
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
preferredSharingChainShortNames: "arb:xdai:"
}
ListElement {
name: "My Bro's Account"
Expand All @@ -50,6 +52,7 @@ SplitView {
emoji: "🇸🇰"
walletType: "watch"
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
preferredSharingChainShortNames: "eth:opt:"
}
}

Expand All @@ -65,6 +68,7 @@ SplitView {
walletType: ""
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcasePosition: 0
preferredSharingChainShortNames: "eth:opt:"
}
ListElement {
name: "testing (no emoji, colored, seed)"
Expand All @@ -75,6 +79,7 @@ SplitView {
walletType: "seed"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcasePosition: 1
preferredSharingChainShortNames: "eth:opt:arb:"
}
ListElement {
name: "My Bro's Account"
Expand All @@ -85,6 +90,7 @@ SplitView {
walletType: "watch"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcasePosition: 2
preferredSharingChainShortNames: "eth:opt:"
}
}

Expand Down
42 changes: 30 additions & 12 deletions storybook/pages/ProfileShowcaseCollectiblesPanelPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,62 +27,74 @@ SplitView {
id: hiddenModelItem
readonly property var data: [
{
uid: "1234",
showcaseKey: "1234",
name: "SNTT",
collectionName: "Super Nitro Toluen (with pink bg)",
backgroundColor: "pink",
imageUrl: ModelsData.collectibles.custom,
isLoading: false,
communityId: "ddls",
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcaseVisibility: Constants.ShowcaseVisibility.NoOne,
maxVisibility: Constants.ShowcaseVisibility.Everyone
},
{
uid: "34545656768",
showcaseKey: "3454565676",
name: "Kitty 3",
collectionName: "Kitties",
backgroundColor: "",
imageUrl: ModelsData.collectibles.kitty1Big,
isLoading: false,
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcaseVisibility: Constants.ShowcaseVisibility.NoOne,
maxVisibility: Constants.ShowcaseVisibility.Everyone
},
{
uid: "123456",
showcaseKey: "12345",
name: "Kitty 4",
collectionName: "",
backgroundColor: "",
imageUrl: ModelsData.collectibles.kitty2Big,
isLoading: false,
communityId: "sox",
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcaseVisibility: Constants.ShowcaseVisibility.NoOne,
maxVisibility: Constants.ShowcaseVisibility.Everyone
},
{
uid: "12345645459537432",
showcaseKey: "123456454595374",
name: "",
collectionName: "Super Kitties",
backgroundColor: "oink",
imageUrl: ModelsData.collectibles.kitty3Big,
isLoading: false,
communityId: "ast",
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcaseVisibility: Constants.ShowcaseVisibility.NoOne,
maxVisibility: Constants.ShowcaseVisibility.Everyone
},
{
uid: "6912",
showcaseKey: "6912",
name: "KILLABEAR",
collectionName: "KILLABEARS",
backgroundColor: "#807c56",
imageUrl: "https://assets.killabears.com/content/killabears/img/691-e81f892696a8ae700e0dbc62eb072060679a2046d1ef5eb2671bdb1fad1f68e3.png",
isLoading: true,
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcaseVisibility: Constants.ShowcaseVisibility.NoOne,
maxVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts
},
{
uid: "8876",
showcaseKey: "8876",
name: "AIORBIT",
description: "",
collectionName: "AIORBIT (Animated SVG)",
backgroundColor: "",
imageUrl: "https://dl.openseauserdata.com/cache/originImage/files/8b14ef530b28853445c27d6693c4e805.svg",
isLoading: false,
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcaseVisibility: Constants.ShowcaseVisibility.NoOne,
maxVisibility: Constants.ShowcaseVisibility.Contacts
}
]
Component.onCompleted: append(data)
Expand All @@ -101,7 +113,8 @@ SplitView {
imageUrl: ModelsData.collectibles.custom,
isLoading: false,
communityId: "ddls",
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcaseVisibility: Constants.ShowcaseVisibility.Contacts,
maxVisibility: Constants.ShowcaseVisibility.Contacts
},
{
uid: "34545656768",
Expand All @@ -111,7 +124,8 @@ SplitView {
backgroundColor: "",
imageUrl: ModelsData.collectibles.kitty1Big,
isLoading: false,
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcaseVisibility: Constants.ShowcaseVisibility.Contacts,
maxVisibility: Constants.ShowcaseVisibility.Contacts
},
{
uid: "123456",
Expand All @@ -122,7 +136,8 @@ SplitView {
imageUrl: ModelsData.collectibles.kitty2Big,
isLoading: false,
communityId: "sox",
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcaseVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts,
maxVisibility: Constants.ShowcaseVisibility.Contacts
},
{
uid: "12345645459537432",
Expand All @@ -133,7 +148,8 @@ SplitView {
imageUrl: ModelsData.collectibles.kitty3Big,
isLoading: false,
communityId: "ast",
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcaseVisibility: Constants.ShowcaseVisibility.Everyone,
maxVisibility: Constants.ShowcaseVisibility.Everyone
},
{
uid: "691",
Expand All @@ -143,7 +159,8 @@ SplitView {
backgroundColor: "#807c56",
imageUrl: "https://assets.killabears.com/content/killabears/img/691-e81f892696a8ae700e0dbc62eb072060679a2046d1ef5eb2671bdb1fad1f68e3.png",
isLoading: true,
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcaseVisibility: Constants.ShowcaseVisibility.Everyone,
maxVisibility: Constants.ShowcaseVisibility.Everyone
},
{
uid: "8876",
Expand All @@ -154,7 +171,8 @@ SplitView {
backgroundColor: "",
imageUrl: "https://dl.openseauserdata.com/cache/originImage/files/8b14ef530b28853445c27d6693c4e805.svg",
isLoading: false,
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
showcaseVisibility: Constants.ShowcaseVisibility.Everyone,
maxVisibility: Constants.ShowcaseVisibility.Everyone
}
]
Component.onCompleted: append(data)
Expand Down
52 changes: 5 additions & 47 deletions ui/app/AppLayouts/Profile/helpers/ProfileShowcaseDirtyState.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ QObject {
* Model holding elements from 'sourceModel' intended to be visible in the
* showcase, sorted by 'position' role. Includes roles from both input models.
*/
readonly property alias visibleModel: visible
readonly property alias visibleModel: visibleSFPM

/**
* Model holding elements from 'sourceModel' intended to be hidden, no
Expand All @@ -36,13 +36,7 @@ QObject {
*/
readonly property bool dirty: writable.dirty

/**
* It sets up a searcher filter on top of both the visible and hidden models.
*/
property FastExpressionFilter searcherFilter

function revert() {
visible.syncOrder()
writable.revert()
}

Expand All @@ -55,19 +49,8 @@ QObject {
}

function changePosition(from, to) {
visible.move(from, to)

// Sync writable with movable new positions:
const newOrder = visible.order()
let writableIndexes = []

for (var i = 0; i < newOrder.length; i++) {
writableIndexes.push(visibleSFPM.mapToSource(newOrder[i]))
}

for (var i = 0; i < newOrder.length; i++) {
writable.set(writableIndexes[i], { "showcasePosition": i})
}
const writableIndex = d.visibleIndexToWritable(from)
writable.changePosition(writableIndex, to)
}

function append(obj) {
Expand Down Expand Up @@ -114,32 +97,10 @@ QObject {
sorters: RoleSorter { roleName: "showcasePosition" }
}

SortFilterProxyModel {
id: searcherVisibleSFPM

sourceModel: visibleSFPM
delayed: true
filters: root.searcherFilter
}

MovableModel {
id: visible

sourceModel: searcherVisibleSFPM
}

SortFilterProxyModel {
id: searcherHiddenSFPM

sourceModel: writable
delayed: true
filters: root.searcherFilter
}

SortFilterProxyModel {
id: hidden

sourceModel: searcherHiddenSFPM
sourceModel: writable
delayed: true

filters: HiddenFilter {}
Expand All @@ -149,10 +110,7 @@ QObject {
id: d

function visibleIndexToWritable(index) {
const newOrder = visible.order()
const sfpmIndex = newOrder[index]

return visibleSFPM.mapToSource(sfpmIndex)
return visibleSFPM.mapToSource(index)
}
}
}
44 changes: 4 additions & 40 deletions ui/app/AppLayouts/Profile/helpers/ProfileShowcaseModels.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ QObject {

// Input models
property alias communitiesSourceModel: communities.sourceModel
property string communitiesSearcherText

// Output models
readonly property alias communitiesVisibleModel: communities.visibleModel
Expand All @@ -39,15 +38,14 @@ QObject {
communities.setVisibility(key, visibility)
}

function changeCommunityPosition(key, to) {
communities.changePosition(key, to)
function changeCommunityPosition(from, to) {
communities.changePosition(from, to)
}

// ACCOUNTS

// Input models
property alias accountsSourceModel: accounts.sourceModel
property string accountsSearcherText

// Output models
readonly property alias accountsVisibleModel: accounts.visibleModel
Expand All @@ -62,8 +60,8 @@ QObject {
accounts.setVisibility(key, visibility)
}

function changeAccountPosition(key, to) {
accounts.changePosition(key, to)
function changeAccountPosition(from, to) {
accounts.changePosition(from, to)
}

// Other
Expand All @@ -77,7 +75,6 @@ QObject {

// Input models
property alias collectiblesSourceModel: collectiblesFilter.sourceModel
property string collectiblesSearcherText

// Output models
readonly property alias collectiblesVisibleModel: collectibles.visibleModel
Expand Down Expand Up @@ -138,49 +135,16 @@ QObject {

ProfileShowcaseDirtyState {
id: communities

function getMemberRole(memberRole) {
return ProfileUtils.getMemberRoleText(memberRole)
}

searcherFilter: FastExpressionFilter {
expression: {
root.communitiesSearcherText
return (name.toLowerCase().includes(root.communitiesSearcherText.toLowerCase()) ||
communities.getMemberRole(memberRole).toLowerCase().includes(root.communitiesSearcherText.toLowerCase()))
}
expectedRoles: ["name", "memberRole"]
}
}

ProfileShowcaseDirtyState {
id: accounts

searcherFilter: FastExpressionFilter {
expression: {
root.accountsSearcherText
return (address.toLowerCase().includes(root.accountsSearcherText.toLowerCase()) ||
name.toLowerCase().includes(root.accountsSearcherText.toLowerCase()) ||
preferredSharingChainShortNames.toLowerCase().includes(root.accountsSearcherText.toLowerCase()))
}
expectedRoles: ["address", "name", "preferredSharingChainShortNames"]
}
}

ProfileShowcaseDirtyState {
id: collectibles

sourceModel: collectiblesFilter
searcherFilter: FastExpressionFilter {
expression: {
root.collectiblesSearcherText
return (name.toLowerCase().includes(root.collectiblesSearcherText.toLowerCase()) ||
uid.toLowerCase().includes(root.collectiblesSearcherText.toLowerCase()) ||
communityName.toLowerCase().includes(root.collectiblesSearcherText.toLowerCase()) ||
collectionName.toLowerCase().includes(root.collectiblesSearcherText.toLowerCase()))
}
expectedRoles: ["name", "uid", "collectionName", "communityName"]
}
}

ProfileShowcaseDirtyState {
Expand Down

0 comments on commit 800fa13

Please sign in to comment.