refactor(Communities): replace `CreateCategoryPopup` with `StatusModal`
This commit is contained in:
Pascal Precht
Iuri Matias
parent
080767c338
commit
18a042fdf1
|
|
@ -259,6 +259,7 @@ Item {
|
|||
Component {
|
||||
id: createCategoryPopup
|
||||
CreateCategoryPopup {
|
||||
anchors.centerIn: parent
|
||||
onClosed: {
|
||||
destroy()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import QtQuick.Layouts 1.13
|
||||
import "../../../../imports"
|
||||
import "../../../../shared"
|
||||
import "../../../../shared/status"
|
||||
|
||||
Rectangle {
|
||||
property string name: "channel-name"
|
||||
property string channelId: "channel-id"
|
||||
property bool isEdit: false
|
||||
property alias checked: chk.checked
|
||||
property string categoryId: ""
|
||||
property var onItemChecked
|
||||
property bool isHovered: false
|
||||
id: container
|
||||
height: visible ? 52 : 0
|
||||
width: 425
|
||||
anchors.left: parent.left
|
||||
border.width: 0
|
||||
radius: Style.current.radius
|
||||
color: isHovered ? Style.current.backgroundHover : Style.current.transparent
|
||||
|
||||
StatusIdenticon {
|
||||
id: channelImage
|
||||
height: 36
|
||||
width: 36
|
||||
chatId: name
|
||||
chatName: name
|
||||
chatType: Constants.chatTypePublic
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: channelName
|
||||
text: "#" + name
|
||||
elide: Text.ElideRight
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
font.pixelSize: 15
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: channelImage.right
|
||||
anchors.leftMargin: Style.current.halfPadding
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: container.isHovered = true
|
||||
onExited: container.isHovered = false
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
onClicked: {
|
||||
chk.checked = !chk.checked
|
||||
}
|
||||
}
|
||||
|
||||
StatusCheckBox {
|
||||
id: chk
|
||||
anchors.top: channelImage.top
|
||||
anchors.topMargin: 6
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
onClicked: {
|
||||
onItemChecked(container.channelId, chk.checked)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -4,9 +4,14 @@ import QtGraphicalEffects 1.13
|
|||
import QtQuick.Dialogs 1.3
|
||||
import "../../../../imports"
|
||||
import "../../../../shared"
|
||||
import "../../../../shared/status"
|
||||
|
||||
ModalPopup {
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
StatusModal {
|
||||
property string communityId
|
||||
property string categoryId
|
||||
property string categoryName: ""
|
||||
|
|
@ -19,35 +24,36 @@ ModalPopup {
|
|||
| Utils.Validate.TextLength
|
||||
|
||||
id: popup
|
||||
height: 453
|
||||
|
||||
onOpened: {
|
||||
if(isEdit){
|
||||
nameInput.text = categoryName
|
||||
popup.contentComponent.categoryName.text = categoryName
|
||||
channels = JSON.parse(chatsModel.communities.activeCommunity.getChatIdsByCategory(categoryId))
|
||||
}
|
||||
nameInput.forceActiveFocus(Qt.MouseFocusReason)
|
||||
popup.contentComponent.categoryName.forceActiveFocus(Qt.MouseFocusReason)
|
||||
}
|
||||
onClosed: destroy()
|
||||
|
||||
function isFormValid() {
|
||||
return Utils.validateAndReturnError(nameInput.text,
|
||||
return Utils.validateAndReturnError(popup.contentComponent.categoryName.text,
|
||||
categoryNameValidator,
|
||||
qsTr("category name"),
|
||||
maxCategoryNameLength) === ""
|
||||
}
|
||||
|
||||
title: isEdit ?
|
||||
header.title: isEdit ?
|
||||
qsTr("Edit category") :
|
||||
qsTr("New category")
|
||||
|
||||
ScrollView {
|
||||
property ScrollBar vScrollBar: ScrollBar.vertical
|
||||
|
||||
content: ScrollView {
|
||||
id: scrollView
|
||||
anchors.fill: parent
|
||||
rightPadding: Style.current.padding
|
||||
anchors.rightMargin: - Style.current.halfPadding
|
||||
|
||||
width: popup.width
|
||||
height: Math.min(content.height, 432)
|
||||
|
||||
property ScrollBar vScrollBar: ScrollBar.vertical
|
||||
property alias categoryName: nameInput
|
||||
|
||||
contentHeight: content.height
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
clip: true
|
||||
|
|
@ -56,184 +62,184 @@ ModalPopup {
|
|||
vScrollBar.setPosition(0)
|
||||
}
|
||||
|
||||
Item {
|
||||
Column {
|
||||
id: content
|
||||
height: childrenRect.height
|
||||
width: parent.width
|
||||
|
||||
Input {
|
||||
id: nameInput
|
||||
placeholderText: qsTr("Category title")
|
||||
maxLength: maxCategoryNameLength
|
||||
StatusModalDivider {
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
onTextEdited: {
|
||||
validationError = Utils.validateAndReturnError(text,
|
||||
categoryNameValidator,
|
||||
qsTr("category name"),
|
||||
maxCategoryNameLength)
|
||||
Item {
|
||||
width: parent.width
|
||||
height: 76
|
||||
Input {
|
||||
id: nameInput
|
||||
width: parent.width -32
|
||||
|
||||
anchors.centerIn: parent
|
||||
anchors.left: undefined
|
||||
anchors.right: undefined
|
||||
|
||||
placeholderText: qsTr("Category title")
|
||||
maxLength: maxCategoryNameLength
|
||||
|
||||
onTextEdited: {
|
||||
validationError = Utils.validateAndReturnError(text,
|
||||
categoryNameValidator,
|
||||
qsTr("category name"),
|
||||
maxCategoryNameLength)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Separator {
|
||||
id: sep
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: nameInput.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.leftMargin: -Style.current.padding
|
||||
anchors.rightMargin: -Style.current.padding
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusSectionHeadline {
|
||||
id: chatsTitle
|
||||
text: qsTr("Channels")
|
||||
anchors.top: sep.bottom
|
||||
anchors.topMargin: Style.current.smallPadding
|
||||
Item {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: parent.width - 32
|
||||
height: 34
|
||||
StatusBaseText {
|
||||
text: qsTr("Channels")
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 4
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: communityChannelList
|
||||
height: childrenRect.height
|
||||
model: chatsModel.communities.activeCommunity.chats
|
||||
anchors.top: chatsTitle.bottom
|
||||
anchors.topMargin: Style.current.smallPadding
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
delegate: CommunityChannel {
|
||||
name: model.name
|
||||
channelId: model.id
|
||||
categoryId: model.categoryId
|
||||
checked: popup.isEdit ? channels.indexOf(model.id) > - 1 : false
|
||||
visible: popup.isEdit ? model.categoryId === popup.categoryId || model.categoryId === "" : model.categoryId === ""
|
||||
onItemChecked: function(channelId, itemChecked){
|
||||
var idx = channels.indexOf(channelId)
|
||||
if(itemChecked){
|
||||
if(idx === -1){
|
||||
channels.push(channelId)
|
||||
}
|
||||
} else {
|
||||
if(idx > -1){
|
||||
channels.splice(idx, 1);
|
||||
|
||||
delegate: StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: parent.width - 32
|
||||
visible: popup.isEdit ?
|
||||
model.category === popup.categoryId || model.categoryId === "" :
|
||||
model.categoryId === ""
|
||||
|
||||
title: "#" + model.name
|
||||
icon.isLetterIdenticon: true
|
||||
icon.background.color: model.color
|
||||
sensor.onClicked: channelItemCheckbox.checked = !channelItemCheckbox.checked
|
||||
|
||||
components: [
|
||||
StatusCheckBox {
|
||||
id: channelItemCheckbox
|
||||
checked: popup.isEdit ? channels.indexOf(model.id) > - 1 : false
|
||||
onCheckedChanged: {
|
||||
var idx = channels.indexOf(model.id)
|
||||
if(checked){
|
||||
if(idx === -1){
|
||||
channels.push(model.id)
|
||||
}
|
||||
} else {
|
||||
if(idx > -1){
|
||||
channels.splice(idx, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Separator {
|
||||
id: sep2
|
||||
StatusModalDivider {
|
||||
visible: deleteCategoryButton.visible
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
id: deleteCategoryButton
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: isEdit
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: communityChannelList.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.leftMargin: -Style.current.padding
|
||||
anchors.rightMargin: -Style.current.padding
|
||||
}
|
||||
|
||||
Item {
|
||||
id: deleteCategory
|
||||
visible: isEdit
|
||||
anchors.top: sep2.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
width: deleteBtn.width + deleteTxt.width + Style.current.padding
|
||||
height: deleteBtn.height
|
||||
|
||||
|
||||
StatusRoundButton {
|
||||
id: deleteBtn
|
||||
icon.name: "delete"
|
||||
size: "medium"
|
||||
type: "warn"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: deleteTxt
|
||||
text: qsTr("Delete category")
|
||||
color: Style.current.red
|
||||
anchors.left: deleteBtn.right
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.verticalCenter: deleteBtn.verticalCenter
|
||||
font.pixelSize: 15
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
openPopup(deleteCategoryConfirmationDialogComponent, {
|
||||
title: qsTr("Delete %1 category").arg(categoryName),
|
||||
confirmationText: qsTr("Are you sure you want to delete %1 category? Channels inside the category won’t be deleted.").arg(categoryName)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: deleteCategoryConfirmationDialogComponent
|
||||
ConfirmationDialog {
|
||||
btnType: "warn"
|
||||
height: 216
|
||||
showCancelButton: true
|
||||
onClosed: {
|
||||
destroy()
|
||||
}
|
||||
onCancelButtonClicked: {
|
||||
close();
|
||||
}
|
||||
onConfirmButtonClicked: function(){
|
||||
const error = chatsModel.communities.deleteCommunityCategory(chatsModel.communities.activeCommunity.id, popup.categoryId)
|
||||
if (error) {
|
||||
creatingError.text = error
|
||||
return creatingError.open()
|
||||
}
|
||||
close();
|
||||
popup.close()
|
||||
}
|
||||
}
|
||||
title: qsTr("Delete category")
|
||||
icon.name: "delete"
|
||||
type: StatusListItem.Type.Danger
|
||||
sensor.onClicked: {
|
||||
openPopup(deleteCategoryConfirmationDialogComponent, {
|
||||
title: qsTr("Delete %1 category").arg(popup.contentComponent.categoryName.text),
|
||||
confirmationText: qsTr("Are you sure you want to delete %1 category? Channels inside the category won’t be deleted.").arg(popup.contentComponent.categoryName.text)
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
}
|
||||
|
||||
Component {
|
||||
id: deleteCategoryConfirmationDialogComponent
|
||||
ConfirmationDialog {
|
||||
btnType: "warn"
|
||||
height: 216
|
||||
showCancelButton: true
|
||||
onClosed: {
|
||||
destroy()
|
||||
}
|
||||
onCancelButtonClicked: {
|
||||
close();
|
||||
}
|
||||
onConfirmButtonClicked: function(){
|
||||
const error = chatsModel.communities.deleteCommunityCategory(chatsModel.communities.activeCommunity.id, popup.categoryId)
|
||||
if (error) {
|
||||
creatingError.text = error
|
||||
return creatingError.open()
|
||||
}
|
||||
close();
|
||||
popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer: StatusButton {
|
||||
enabled: isFormValid()
|
||||
text: isEdit ?
|
||||
qsTr("Save") :
|
||||
qsTr("Create")
|
||||
anchors.right: parent.right
|
||||
onClicked: {
|
||||
if (!isFormValid()) {
|
||||
scrollView.scrollBackUp()
|
||||
return
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
enabled: isFormValid()
|
||||
text: isEdit ?
|
||||
qsTr("Save") :
|
||||
qsTr("Create")
|
||||
onClicked: {
|
||||
if (!isFormValid()) {
|
||||
scrollView.scrollBackUp()
|
||||
return
|
||||
}
|
||||
|
||||
let error = ""
|
||||
|
||||
if (isEdit) {
|
||||
error = chatsModel.communities.editCommunityCategory(communityId, categoryId, Utils.filterXSS(nameInput.text), JSON.stringify(channels))
|
||||
} else {
|
||||
error = chatsModel.communities.createCommunityCategory(communityId, Utils.filterXSS(popup.contentComponent.categoryName.text), JSON.stringify(channels))
|
||||
}
|
||||
|
||||
if (error) {
|
||||
categoryError.text = error
|
||||
return categoryError.open()
|
||||
}
|
||||
|
||||
popup.close()
|
||||
}
|
||||
|
||||
let error = ""
|
||||
|
||||
if(isEdit){
|
||||
error = chatsModel.communities.editCommunityCategory(communityId, categoryId, Utils.filterXSS(nameInput.text), JSON.stringify(channels))
|
||||
} else {
|
||||
error = chatsModel.communities.createCommunityCategory(communityId, Utils.filterXSS(nameInput.text), JSON.stringify(channels))
|
||||
}
|
||||
|
||||
if (error) {
|
||||
categoryError.text = error
|
||||
return categoryError.open()
|
||||
}
|
||||
|
||||
popup.close()
|
||||
}
|
||||
]
|
||||
|
||||
MessageDialog {
|
||||
id: categoryError
|
||||
title: isEdit ?
|
||||
qsTr("Error editing the category") :
|
||||
qsTr("Error creating the category")
|
||||
icon: StandardIcon.Critical
|
||||
standardButtons: StandardButton.Ok
|
||||
}
|
||||
MessageDialog {
|
||||
id: categoryError
|
||||
title: isEdit ?
|
||||
qsTr("Error editing the category") :
|
||||
qsTr("Error creating the category")
|
||||
icon: StandardIcon.Critical
|
||||
standardButtons: StandardButton.Ok
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue