status-desktop/storybook/pages/ProfileShowcaseModelsPage.qml

468 lines
15 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.15
import StatusQ 0.1
import StatusQ.Core.Utils 0.1
import Storybook 1.0
import SortFilterProxyModel 0.2
import utils 1.0
import AppLayouts.Profile.helpers 1.0
ColumnLayout {
ListModel {
id: accountsModel
ListElement {
address: "1"
name: "Crypto Kitties"
showcaseKey: "1"
showcaseVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts
showcasePosition: 0
}
ListElement {
address: "2"
name: "Status"
showcaseKey: "2"
showcaseVisibility: Constants.ShowcaseVisibility.Contacts
}
ListElement {
address: "3";
name: "Fun Stuff"
showcaseKey: "3"
showcaseVisibility: Constants.ShowcaseVisibility.Contacts
}
ListElement {
address: "4"
name: "Other Stuff"
showcaseKey: "4"
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
}
}
ListModel {
id: socialLinksModel
ListElement { showcaseKey: "1"; showcasePosition: 0; text: "Twitter"; url: "https://twitter.com/status" }
ListElement { showcaseKey: "2"; showcasePosition: 1; text: "Personal Site"; url: "https://status.im" }
ListElement { showcaseKey: "3"; showcasePosition: 2; text: "Github"; url: "https://github.com" }
ListElement { showcaseKey: "4"; showcasePosition: 3; text: "Youtube"; url: "https://youtube.com" }
ListElement { showcaseKey: "5"; showcasePosition: 4; text: "Discord"; url: "https://discord.com" }
ListElement { showcaseKey: "6"; showcasePosition: 5; text: "Telegram"; url: "https://t.me/status" }
ListElement { showcaseKey: "7"; showcasePosition: 6; text: "Custom"; url: "https://status.im" }
}
ListModel {
id: collectiblesModel
ListElement {
uid: 1
name: "Collectible 1"
showcaseKey: "1"
showcaseVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts
showcasePosition: 0
ownership: [
ListElement { accountAddress: "1" },
ListElement { accountAddress: "3" }
]
}
ListElement {
uid: 2
name: "Collectible 2"
showcaseKey: "2"
showcaseVisibility: Constants.ShowcaseVisibility.Contacts
showcasePosition: 2
ownership: [
ListElement { accountAddress: "1" },
ListElement { accountAddress: "2" },
ListElement { accountAddress: "3" }
]
}
ListElement {
uid: 3
name: "Collectible 3"
showcaseKey: "3"
showcaseVisibility: Constants.ShowcaseVisibility.Contacts
showcasePosition: 1
ownership: [
ListElement { accountAddress: "3" }
]
}
ListElement {
uid: 4
name: "Collectible 4"
showcaseKey: "4"
showcaseVisibility: Constants.ShowcaseVisibility.NoOne
showcasePosition: 3
ownership: [
ListElement { accountAddress: "1" },
ListElement { accountAddress: "4" }
]
}
}
ProfileShowcaseModels {
id: showcaseModels
accountsSourceModel: accountsModel
collectiblesSourceModel: collectiblesModel
socialLinksSourceModel: socialLinksModel
}
ListModel {
id: comboBoxModel
ListElement {
text: "verified"
value: Constants.ShowcaseVisibility.IdVerifiedContacts
}
ListElement {
text: "contacts"
value: Constants.ShowcaseVisibility.Contacts
}
ListElement {
text: "all"
value: Constants.ShowcaseVisibility.Everyone
}
}
component VisibilityComboBox: ComboBox {
model: comboBoxModel
textRole: "text"
valueRole: "value"
}
StackView {
id: stackView
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 10
initialItem: collectiblesView
Component {
id: collectiblesView
RowLayout {
id: grid
spacing: 10
//anchors.fill: parent
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Label {
text: "Backend models"
font.pixelSize: 22
padding: 10
}
GenericListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: accountsModel
label: "ACCOUNTS MODEL"
}
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Label {
text: "Display models"
font.pixelSize: 22
padding: 10
}
GenericListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: showcaseModels.accountsVisibleModel
label: "IN SHOWCASE"
movable: true
roles: ["showcaseKey", "showcaseVisibility", "showcasePosition"]
onMoveRequested: {
showcaseModels.changeAccountPosition(from, to);
}
insetComponent: RowLayout {
readonly property var topModel: model
RoundButton {
text: "❌"
onClicked: showcaseModels.setAccountVisibility(
model.showcaseKey,
Constants.ShowcaseVisibility.NoOne)
}
VisibilityComboBox {
property bool completed: false
onCurrentValueChanged: {
if (!completed || topModel.index < 0)
return
showcaseModels.setAccountVisibility(
topModel.showcaseKey, currentValue)
}
Component.onCompleted: {
currentIndex = indexOfValue(topModel.showcaseVisibility)
completed = true
}
}
}
}
GenericListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: showcaseModels.accountsHiddenModel
label: "HIDDEN"
roles: ["showcaseKey", "showcaseVisibility", "showcasePosition"]
insetComponent: Button {
text: "unhide"
onClicked:
showcaseModels.setAccountVisibility(
model.showcaseKey,
Constants.ShowcaseVisibility.IdVerifiedContacts)
}
}
}
ColumnLayout {
Layout.fillHeight: true
Layout.fillWidth: true
Label {
text: "Backend models"
font.pixelSize: 22
padding: 10
}
GenericListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: collectiblesModel
label: "COLLECTIBLES MODEL"
}
}
ColumnLayout {
Layout.fillHeight: true
Layout.fillWidth: true
Label {
text: "Display models"
font.pixelSize: 22
padding: 10
}
GenericListView {
Layout.fillHeight: true
Layout.fillWidth: true
model: showcaseModels.collectiblesVisibleModel
label: "IN SHOWCASE"
movable: true
roles: ["showcaseKey", "showcaseVisibility", "showcasePosition", "maxVisibility"]
onMoveRequested: {
showcaseModels.changeCollectiblePosition(from, to);
}
insetComponent: RowLayout {
readonly property var topModel: model
RoundButton {
text: "❌"
onClicked: showcaseModels.setCollectibleVisibility(
model.showcaseKey,
Constants.ShowcaseVisibility.NoOne)
}
VisibilityComboBox {
property bool completed: false
onCurrentValueChanged: {
if (!completed || topModel.index < 0)
return
showcaseModels.setCollectibleVisibility(
topModel.showcaseKey, currentValue)
}
Component.onCompleted: {
currentIndex = indexOfValue(topModel.showcaseVisibility)
completed = true
}
}
}
}
GenericListView {
Layout.fillHeight: true
Layout.fillWidth: true
model: showcaseModels.collectiblesHiddenModel
label: "HIDDEN"
roles: ["showcaseKey", "showcaseVisibility", "showcasePosition",
"accounts", "maxVisibility"]
insetComponent: Button {
text: "unhide"
onClicked:
showcaseModels.setCollectibleVisibility(
model.showcaseKey,
Constants.ShowcaseVisibility.IdVerifiedContacts)
}
}
}
}
}
Component {
id: webView
Flickable {
contentWidth: webGrid.implicitWidth
contentHeight: webGrid.implicitHeight
Grid {
id: webGrid
rows: 3
columns: 4
spacing: 10
flow: Grid.TopToBottom
Label {
text: "Backend models"
font.pixelSize: 22
padding: 10
}
GenericListView {
width: 300
height: 300
model: socialLinksModel
label: "SOCIAL LINKS MODEL"
}
Item {
width: 300
height: 300
}
Label {
text: "Display models"
font.pixelSize: 22
padding: 10
}
GenericListView {
width: 610
height: 300
model: showcaseModels.socialLinksVisibleModel
label: "IN SHOWCASE"
movable: true
onMoveRequested: {
showcaseModels.changeSocialLinkPosition(from, to);
}
}
}
}
}
}
Label {
text: `accounts in showcase: [${showcaseModels.visibleAccountsList}]`
Layout.alignment: Qt.AlignHCenter
}
Label {
readonly property string visibilities:
JSON.stringify(showcaseModels.accountsVisibilityMap)
text: `accounts visibilities: [${visibilities}]`
Layout.alignment: Qt.AlignHCenter
}
RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
Button {
text: "Collectibles tab"
onClicked: {
stackView.replace(webView, collectiblesView)
}
}
Button {
text: "Web tab"
onClicked: {
stackView.replace(collectiblesView, webView)
}
}
}
Button {
text: "SAVE"
onClicked: {
const accountsToBeSaved = showcaseModels.accountsCurrentState()
const collectiblesToBeSaved = showcaseModels.collectiblesCurrentState()
for (let index = 0; index < accountsModel.count; index++) {
let account = accountsModel.get(index)
const showcaseAccount = accountsToBeSaved.find(item => item.showcaseKey === account.showcaseKey)
account.showcasePosition = !!showcaseAccount ? showcaseAccount.showcasePosition : 0
account.showcaseVisibility = !!showcaseAccount ? showcaseAccount.showcaseVisibility : Constants.ShowcaseVisibility.NoOne
accountsModel.set(index, account)
}
for (let index = 0; index < collectiblesModel.count; index++) {
let collectible = collectiblesModel.get(index)
const showcaseCollectible = collectiblesToBeSaved.find(item => item.showcaseKey === collectible.showcaseKey)
collectible.showcasePosition = !!showcaseCollectible ? showcaseCollectible.showcasePosition : 0
collectible.showcaseVisibility = !!showcaseCollectible ? showcaseCollectible.showcaseVisibility : Constants.ShowcaseVisibility.NoOne
collectiblesModel.set(index, collectible)
}
}
Layout.alignment: Qt.AlignHCenter
Layout.margins: 10
}
}
// category: Models