status-desktop/storybook/pages/CreateCommunityPopupPage.qml
Lukáš Tinkl 26dddcaff9 feat(CreateCommunityPopup): validation and ensuring min. 1 tag added
- enable the Next button, and delay the validation after it's been clicked
- visually display required fields also for logo, banner, and tags (min
1 tag is required now)
- when pasting over limit, chop the text to the maximum length, instead
of just leaving the text field empty
- do not let the popup autoclose on clicking outside or pressing Esc
- add a StoryBook page
- minor cleanups and alignments to the latest Figma designs/flows

Fixes #13966
Fixes #16479
Fixes #14902
2024-10-14 11:39:58 +02:00

182 lines
6.0 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ 0.1
import Storybook 1.0
import Models 1.0
import mainui 1.0
import shared.stores 1.0 as SharedStores
import AppLayouts.Communities.popups 1.0
import AppLayouts.Communities.controls 1.0
import AppLayouts.Communities.stores 1.0 as CommunitiesStores
import AppLayouts.stores 1.0 as AppLayoutStores
SplitView {
id: root
Logs { id: logs }
orientation: Qt.Vertical
property var dialog
function createAndOpenDialog() {
dialog = dlgComponent.createObject(popupBg)
dialog.open()
}
Component.onCompleted: createAndOpenDialog()
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
PopupBackground {
id: popupBg
anchors.fill: parent
Button {
anchors.centerIn: parent
text: "Reopen"
onClicked: createAndOpenDialog()
}
}
Popups {
popupParent: root
sharedRootStore: SharedStores.RootStore {}
rootStore: AppLayoutStores.RootStore {}
communityTokensStore: SharedStores.CommunityTokensStore {}
isDevBuild: ctrlIsDevBuild.checked
}
Component {
id: dlgComponent
CreateCommunityPopup {
id: dialog
anchors.centerIn: parent
destroyOnClose: true
modal: false
isDiscordImport: isDiscordCheckBox.checked
isDevBuild: ctrlIsDevBuild.checked
QtObject {
id: localAppSettings
readonly property bool testEnvironment: dialog.isDevBuild
}
store: CommunitiesStores.CommunitiesStore {
readonly property string communityTags: ModelsData.communityTags
function createCommunity() {
logs.logEvent("createCommunity")
}
property string discordImportChannelName
readonly property bool discordImportInProgress: false
readonly property bool discordDataExtractionInProgress: false
readonly property int discordImportErrorsCount: 0
readonly property int discordImportWarningsCount: 0
readonly property int discordOldestMessageTimestamp: 0
property var discordFileList: ListModel {
readonly property int selectedCount: count
property bool selectedFilesValid
}
property var discordCategoriesModel: ListModel {}
property var discordChannelsModel: ListModel {
property bool hasSelectedItems
readonly property int count: 32 // hide the parsing/loading spinner
}
function setFileListItems(filePaths) {
for (const filePath of filePaths) {
discordFileList.append({"filePath": filePath, errorMessage: ""})
}
}
function removeFileListItem(path) {
for (let i = 0; i < discordFileList.count; i++) {
const item = discordFileList.get(i)
if (item.filePath === path)
discordFileList.remove(i)
}
}
function clearFileList() {
discordFileList.clear()
discordFileList.selectedFilesValid = false
}
function clearDiscordCategoriesAndChannels() {
discordCategoriesModel.clear()
discordChannelsModel.clear()
discordChannelsModel.hasSelectedItems = false
}
function requestExtractChannelsAndCategories() {
discordFileList.selectedFilesValid = true
}
function toggleOneDiscordChannel(id) {
logs.logEvent("toggleOneDiscordChannel", ["id"], arguments)
}
function resetDiscordImport() {
logs.logEvent("resetDiscordImport")
}
function requestCancelDiscordChannelImport(id) {
logs.logEvent("requestCancelDiscordChannelImport", ["id"], arguments)
}
function requestImportDiscordChannel(args, timestamp) {
logs.logEvent("requestImportDiscordChannel", ["args", "timestamp"], arguments)
}
}
}
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
logsView.logText: logs.logText
ColumnLayout {
Switch {
id: isDiscordCheckBox
text: "Discord import"
onToggled: {
if (!!dialog && dialog.opened)
dialog.close()
}
}
Switch {
id: ctrlIsDevBuild
text: "Dev build"
onToggled: {
if (!!dialog && dialog.opened)
dialog.close()
}
}
}
}
}
// category: Popups
// https://www.figma.com/design/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?node-id=52741-266926&node-type=frame&t=PkDxeWSXoiZbIQXv-0
// https://www.figma.com/design/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?node-id=2636-359221&node-type=frame&t=PkDxeWSXoiZbIQXv-0
// https://www.figma.com/design/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?node-id=52741-267155&node-type=frame&t=PkDxeWSXoiZbIQXv-0