status-desktop/ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml

223 lines
9.9 KiB
QML

import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import utils 1.0
import shared.views.chat 1.0
import shared.controls.chat 1.0
import shared.controls 1.0
import AppLayouts.Communities.layouts 1.0
Item {
id: root
property string placeholderText
property var model
property var rootStore
signal kickUserClicked(string id, string name)
signal banUserClicked(string id, string name)
signal unbanUserClicked(string id)
signal acceptRequestToJoin(string id)
signal declineRequestToJoin(string id)
enum TabType {
AllMembers,
BannedMembers,
PendingRequests,
DeclinedRequests
}
property int panelType: MembersTabPanel.TabType.AllMembers
ColumnLayout {
anchors.fill: parent
spacing: 30
StatusInput {
id: memberSearch
Layout.preferredWidth: 400
Layout.leftMargin: 12
maximumHeight: 36
topPadding: 0
bottomPadding: 0
rightPadding: 0
placeholderText: root.placeholderText
input.asset.name: "search"
enabled: !!model && model.count > 0
}
ListView {
id: membersList
objectName: "CommunityMembersTabPanel_MembersListViews"
Layout.fillWidth: true
Layout.fillHeight: true
model: root.model
clip: true
spacing: 15
delegate: StatusMemberListItem {
id: memberItem
readonly property bool itsMe: model.pubKey.toLowerCase() === userProfile.pubKey.toLowerCase()
readonly property bool isHovered: memberItem.sensor.containsMouse
readonly property bool canBeBanned: !memberItem.itsMe && (model.memberRole !== Constants.memberRole.owner && model.memberRole !== Constants.memberRole.admin)
readonly property bool canEnableKickBanButtons: canBeBanned && root.panelType === MembersTabPanel.TabType.AllMembers
readonly property bool kickEnabled: canEnableKickBanButtons && model.membershipRequestState !== Constants.CommunityMembershipRequestState.KickedPending
readonly property bool banEnabled: canEnableKickBanButtons && model.membershipRequestState !== Constants.CommunityMembershipRequestState.BannedPending
readonly property bool kickVisible: (isHovered || !kickEnabled) && banEnabled
readonly property bool banVisible: (isHovered || !banEnabled) && kickEnabled
readonly property bool unBanVisible: (root.panelType === MembersTabPanel.TabType.BannedMembers) && isHovered && canBeBanned
readonly property bool isRejectedPending: model.membershipRequestState === Constants.CommunityMembershipRequestState.RejectedPending
readonly property bool isAcceptedPending: model.membershipRequestState === Constants.CommunityMembershipRequestState.AcceptedPending
statusListItemComponentsSlot.spacing: 16
statusListItemTitleArea.anchors.rightMargin: 0
statusListItemSubTitle.elide: Text.ElideRight
rightPadding: 75
leftPadding: 12
components: [
DisabledTooltipButton {
id: kickButton
visible: kickVisible
interactive: kickEnabled
tooltipText: qsTr("Waiting for owner node to come online")
buttonComponent: StatusButton {
objectName: "MemberListItem_KickButton"
text: model.membershipRequestState === Constants.CommunityMembershipRequestState.KickedPending ? qsTr("Kick pending") : qsTr("Kick")
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
onClicked: root.kickUserClicked(model.pubKey, model.displayName)
enabled: kickButton.interactive
}
},
DisabledTooltipButton {
id: banButton
//using opacity instead of visible to avoid the acceptButton jumping around
opacity: banVisible
interactive: banEnabled
tooltipText: qsTr("Waiting for owner node to come online")
buttonComponent: StatusButton {
text: model.membershipRequestState === Constants.CommunityMembershipRequestState.BannedPending || !banVisible ? qsTr("Ban pending") : qsTr("Ban")
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
onClicked: root.banUserClicked(model.pubKey, model.displayName)
enabled: banButton.interactive
}
},
StatusButton {
visible: unBanVisible
text: qsTr("Unban")
onClicked: root.unbanUserClicked(model.pubKey)
},
DisabledTooltipButton {
id: acceptButton
visible: ((root.panelType === MembersTabPanel.TabType.PendingRequests ||
root.panelType === MembersTabPanel.TabType.DeclinedRequests) && isHovered) ||
isAcceptedPending
//TODO: Only the current user can reject a pending request, so we should check that here
tooltipText: qsTr("Waiting for owner node to come online")
interactive: !isAcceptedPending
buttonComponent: StatusButton {
text: isAcceptedPending ? qsTr("Accept Pending") : qsTr("Accept")
icon.name: "checkmark-circle"
icon.color: enabled ? Theme.palette.successColor1 : disabledTextColor
normalColor: Theme.palette.successColor2
hoverColor: Theme.palette.successColor3
textColor: Theme.palette.successColor1
loading: model.requestToJoinLoading
enabled: acceptButton.interactive
onClicked: root.acceptRequestToJoin(model.requestToJoinId)
}
},
DisabledTooltipButton {
id: rejectButton
//using opacity instead of visible to avoid the acceptButton jumping around
opacity: ((root.panelType === MembersTabPanel.TabType.PendingRequests) && isHovered) || isRejectedPending
//TODO: Only the current user can reject a pending request, so we should check that here
tooltipText: qsTr("Waiting for owner node to come online")
interactive: !isRejectedPending
buttonComponent: StatusButton {
text: isRejectedPending ? qsTr("Reject pending") : qsTr("Reject")
type: StatusBaseButton.Type.Danger
icon.name: "close-circle"
icon.color: enabled ? Style.current.danger : disabledTextColor
enabled: rejectButton.interactive
onClicked: root.declineRequestToJoin(model.requestToJoinId)
}
}
]
width: membersList.width
visible: memberSearch.text === "" || title.toLowerCase().includes(memberSearch.text.toLowerCase())
height: visible ? implicitHeight : 0
color: "transparent"
pubKey: model.isEnsVerified ? "" : Utils.getElidedCompressedPk(model.pubKey)
nickName: model.localNickname
userName: ProfileUtils.displayName("", model.ensName, model.displayName, model.alias)
status: model.onlineStatus
asset.color: Utils.colorForColorId(model.colorId)
asset.name: model.icon
asset.isImage: !!model.icon
asset.isLetterIdenticon: !model.icon
asset.width: 40
asset.height: 40
ringSettings.ringSpecModel: model.colorHash
statusListItemIcon.badge.visible: (root.panelType === MembersTabPanel.TabType.AllMembers)
onClicked: {
if(mouse.button === Qt.RightButton) {
Global.openMenu(memberContextMenuComponent, this, {
selectedUserPublicKey: model.pubKey,
selectedUserDisplayName: userName,
selectedUserIcon: asset.name,
})
} else {
Global.openProfilePopup(model.pubKey)
}
}
}
}
}
Component {
id: memberContextMenuComponent
ProfileContextMenu {
id: memberContextMenuView
store: root.rootStore
myPublicKey: userProfile.pubKey
onOpenProfileClicked: {
Global.openProfilePopup(publicKey, null)
}
onCreateOneToOneChat: {
Global.changeAppSectionBySectionType(Constants.appSection.chat)
root.rootStore.chatCommunitySectionModule.createOneToOneChat(communityId, chatId, ensName)
}
onClosed: {
destroy()
}
}
}
}