feat(CommunitySettings): Implement UI for`edit`, `duplicate` and `remove` actions in community permissions page

feat(CommunitySettings): Implement UI for`edit`, `duplicate` and `remove` actions in community permissions page - Enabled `duplicate` action (mocked). - Enabled `delete` action (mocked) and added / updated navigations in case all permissions are removed. - Added delete confirmation popup. - Enabled `edit` action (mocked) where changes are detected and the `dirty changes toast` appears properly. Closes #8581
2022-11-24 17:23:54 +01:00 · 2022-11-24 17:23:54 +01:00 · a9d25697dd
parent 9feb6c29cf
commit a9d25697dd
8 changed files with 304 additions and 63 deletions
--- a/storybook/pages/CommunityPermissionsSettingsPanelPage.qml
+++ b/storybook/pages/CommunityPermissionsSettingsPanelPage.qml
@ -29,7 +29,7 @@ SplitView {
                    collectiblesModel: CollectiblesModel {}
                    channelsModel: ChannelsModel {}

-                    function editPermission(index) {
+                    function editPermission(index, holdings, permissions, channels, isPrivate) {
                        logs.logEvent("CommunitiesStore::editPermission - index: " + index)
                    }

--- a/storybook/pages/CommunityPermissionsViewPage.qml
+++ b/storybook/pages/CommunityPermissionsViewPage.qml
@ -27,18 +27,13 @@ SplitView {
                store: CommunitiesStore {
                    permissionsModel: PermissionsModel { id: mockedModel }

-                    function editPermission(index) {
-                        logs.logEvent("CommunitiesStore::editPermission - index: " + index)
-                    }
-
                    function duplicatePermission(index) {
                        logs.logEvent("CommunitiesStore::duplicatePermission - index: " + index)
                    }
-
-                    function removePermission(index) {
-                        logs.logEvent("CommunitiesStore::removePermission - index: " + index)
-                    }
                }
+                onEditPermission: logs.logEvent("CommunitiesStore::editPermission - index: " + index)
+                onRemovePermission: logs.logEvent("CommunitiesStore::removePermission - index: " + index)
+
            }
        }

--- a/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml
+++ b/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml
@ -235,7 +235,7 @@ Control{
                }
                StatusBaseText {
                    Layout.alignment: Qt.AlignHCenter
-                    text: qsTr("Remove")
+                    text: qsTr("Delete")
                    color: Theme.palette.dangerColor1
                    font.pixelSize: d.buttonTextPixelSize
                }
--- a/ui/app/AppLayouts/Chat/layouts/SettingsPageLayout.qml
+++ b/ui/app/AppLayouts/Chat/layouts/SettingsPageLayout.qml
@ -23,6 +23,7 @@ Item {
    property string headerButtonText: ""
    property int headerWidth: 0
    property string previousPageName: ""
+    property bool saveChangesButtonEnabled: !!root.contentItem && !!root.contentItem.saveChangesButtonEnabled

    readonly property Item contentItem: contentLoader.item
    readonly property size settingsDirtyToastMessageImplicitSize: 
@ -96,7 +97,7 @@ Item {
        }
        active: root.dirty
        flickable: root.dirty ? root.contentItem : null
-        saveChangesButtonEnabled: !!root.contentItem && !!root.contentItem.saveChangesButtonEnabled
+        saveChangesButtonEnabled: root.saveChangesButtonEnabled
        onResetChangesClicked: root.resetChangesClicked()
        onSaveChangesClicked: root.saveChangesClicked()
    }
--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityPermissionsSettingsPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/communities/CommunityPermissionsSettingsPanel.qml
@ -13,24 +13,57 @@ SettingsPageLayout {
    function navigateBack() {
        if (root.state === d.newPermissionViewState) {
            root.state = d.getInitialState()
+        } else if(root.state === d.permissionsViewState) {
+            root.state = d.newPermissionViewState
+        } else if(root.state === d.editPermissionViewState) {
+            if (root.dirty) {
+                root.notifyDirty()
+            } else {
+                root.state = d.getInitialState()
+            }
        }
-        else if(root.state === d.permissionsViewState) {
-            root.state = d.newPermissionViewState;
-        }
+
+        d.saveChanges = false
+        d.resetChanges = false
    }

    QtObject {
        id: d

        readonly property string welcomeViewState: "WELCOME"
-        readonly property string newPermissionViewState: "NEWPERMISSION"
+        readonly property string newPermissionViewState: "NEW_PERMISSION"
        readonly property string permissionsViewState: "PERMISSIONS"
+        readonly property string editPermissionViewState: "EDIT_PERMISSION"
+        readonly property bool permissionsExist: store.permissionsModel.count > 0
+        property bool saveChanges: false
+        property bool resetChanges: false
+
+        property int permissionIndexToEdit
+        property ListModel holdingsToEditModel: ListModel {}
+        property var permissionsToEditObject
+        property ListModel channelsToEditModel: ListModel {}
+        property bool isPrivateToEditValue: false
+
+        onPermissionsExistChanged: {
+            // Navigate back to welcome permissions view if all existing permissions are removed.
+            if(root.state === d.permissionsViewState && !permissionsExist) {
+                root.state =  d.welcomeViewState;
+            }
+        }

        function getInitialState() {
            return root.store.permissionsModel.count > 0 ? d.permissionsViewState : d.welcomeViewState
        }
+
+        function initializeData() {
+            holdingsToEditModel = defaultListObject.createObject(d)
+            permissionsToEditObject = null
+            channelsToEditModel = defaultListObject.createObject(d)
+            isPrivateToEditValue = false
+        }
    }

+    saveChangesButtonEnabled: true
    state: d.getInitialState()
    states: [
        State {
@ -58,15 +91,33 @@ SettingsPageLayout {
            PropertyChanges {target: root; headerButtonVisible: true}
            PropertyChanges {target: root; headerButtonText: qsTr("Add new permission")}
            PropertyChanges {target: root; headerWidth: root.viewWidth}
+        },
+        State {
+            name: d.editPermissionViewState
+            PropertyChanges {target: root; title: qsTr("Edit permission")}
+            PropertyChanges {target: root; previousPageName: qsTr("Permissions")}
+            PropertyChanges {target: root; content: newPermissionView}
+            PropertyChanges {target: root; headerButtonVisible: false}
+            PropertyChanges {target: root; headerWidth: 0}
        }
    ]

    onHeaderButtonClicked: {
-        if(root.state === d.welcomeViewState)
+        if(root.state === d.welcomeViewState || root.state === d.permissionsViewState) {
+            d.initializeData()
            root.state = d.newPermissionViewState
+        }
+    }

-        else if (root.state === d.permissionsViewState)
-            root.state = d.newPermissionViewState
+    onSaveChangesClicked: {
+        d.saveChanges = true
+        d.resetChanges = true
+        root.navigateBack()
+    }
+
+    onResetChangesClicked: {
+        d.resetChanges = true
+        root.navigateBack()
    }

    // Community Permissions possible view contents:
@ -80,9 +131,20 @@ SettingsPageLayout {
    Component {
        id: newPermissionView
        CommunityNewPermissionView {
+            id: newPermissionViewItem
            viewWidth: root.viewWidth
            store: root.store
            onPermissionCreated: root.state = d.permissionsViewState
+            isEditState: root.state === d.editPermissionViewState
+            permissionIndex: d.permissionIndexToEdit
+            holdingsModel: d.holdingsToEditModel
+            permissionObject: d.permissionsToEditObject
+            channelsModel: d.channelsToEditModel
+            isPrivate: d.isPrivateToEditValue
+            saveChanges: d.saveChanges
+            resetChanges: d.resetChanges
+
+            Component.onCompleted: { root.dirty = Qt.binding(() => newPermissionViewItem.isEditState && newPermissionViewItem.dirty) }
        }
    }

@ -91,6 +153,19 @@ SettingsPageLayout {
        CommunityPermissionsView {
            viewWidth: root.viewWidth
            store: root.store
+            onEditPermission: {
+                d.permissionIndexToEdit = index
+                d.holdingsToEditModel = holidings
+                d.permissionsToEditObject = permission
+                d.channelsToEditModel = channels
+                d.isPrivateToEditValue = isPrivate
+                root.state = d.editPermissionViewState
+            }
        }
    }
+
+    Component {
+        id: defaultListObject
+        ListModel {}
+    }
 }
--- a/ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml
+++ b/ui/app/AppLayouts/Chat/stores/CommunitiesStore.qml
@ -84,9 +84,8 @@ QtObject {
        ListElement { key: "general"; iconSource: "qrc:imports/assets/png/tokens/CUSTOM-TOKEN.png"; name: "#general"}
    }

-    function createPermissions(holdings, permissions, isPrivate) {
-        console.log("TODO: Create permissions - backend call - Now dummy data shown")
-        // TO BE REMOVED: It shold just be a call to the backend sharing `holdings`, `permissions`, `channels` and `isPrivate` properties.
+    function createPermission(holdings, permissions, isPrivate, channels, index = null) {
+        // TO BE REPLACED: It shold just be a call to the backend sharing `holdings`, `permissions`, `channels` and `isPrivate` properties.
        var permission = {
            isPrivate: true,
            holdingsListModel: [],
@ -123,8 +122,16 @@ QtObject {
        // TODO: Set channels list. Now mocked data.
        permission.channelsListModel = root.channelsModel

-        // Add into permission model:
-        root.permissionsModel.append(permission)
+        if(index !== null) {
+            // Edit permission model:
+            console.log("TODO: Edit permissions - backend call")
+            root.permissionsModel.set(index, permission)
+        }
+        else {
+            // Add into permission model:
+            console.log("TODO: Create permissions - backend call - Now dummy data shown")
+            root.permissionsModel.append(permission)
+        }
    }

    function setHoldingsTextFormat(type, name, amount) {
@ -142,15 +149,20 @@ QtObject {
        }
    }

-    function editPermission(index) {
-        console.log("TODO: Edit permissions - backend call")
+    function editPermission(index, holdings, permissions, channels, isPrivate) {
+        // TO BE REPLACED: Call to backend
+        createPermission(holdings, permissions, isPrivate, channels, index)
    }

    function duplicatePermission(index) {
+        // TO BE REPLACED: Call to backend
        console.log("TODO: Duplicate permissions - backend call")
+        const permission = root.permissionsModel.get(index)
+        createPermission(permission.holdingsListModel, permission.permissionsObjectModel, permission.isPrivate, permission.channelsListModel)
    }

    function removePermission(index) {
        console.log("TODO: Remove permissions - backend call")
+        root.permissionsModel.remove(index)
    }
 }
--- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml
+++ b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml
@ -21,18 +21,157 @@ StatusScrollView {

    property var store
    property int viewWidth: 560 // by design
+    property bool isEditState: false
+    property bool dirty: {
+
+        let trick = d.triggerDirtyTool // Trick: Used to force the reevaluation of dirty when an item of the list is updated
+
+        // Holdings:
+        const dirtyHoldingsList = d.checkIfHoldingsDirty()
+
+        // Permissions:
+        let dirtyPermissionObj = false
+        if(root.permissionObject && d.dirtyValues.permissionObject.key !== null) {
+            dirtyPermissionObj = (d.dirtyValues.permissionObject.key !== root.permissionObject.key) ||
+                    (d.dirtyValues.permissionObject.text !== root.permissionObject.text) ||
+                    (d.dirtyValues.permissionObject.imageSource !== root.permissionObject.imageSource)
+        }
+        else {
+            dirtyPermissionObj = d.dirtyValues.permissionObject.key !== null
+        }
+
+        // TODO: Channels:
+        let dirtyChannelsList = false
+
+        return dirtyHoldingsList || dirtyPermissionObj || dirtyChannelsList || d.dirtyValues.isPrivateDirty
+    }
+    property bool saveChanges: false
+    property bool resetChanges: false
+
+    property int permissionIndex
+
+    // roles: type, key, name, amount, imageSource, operator
+    property var holdingsModel: ListModel {}
+
+    // roles: key, text, imageSource
+    property var permissionObject
+
+    // TODO roles:
+    property var channelsModel: ListModel {}
+
+    property bool isPrivate

    signal permissionCreated()

    QtObject {
        id: d
-        property bool isPrivate: false
        property int permissionType: PermissionTypes.Type.None
+        property bool triggerDirtyTool: false // Trick: Used to force the reevaluation of dirty when an item of the list is updated
+
+        property QtObject dirtyValues: QtObject {
+            property ListModel holdingsModel: ListModel {}
+            property QtObject permissionObject: QtObject {
+               property var key: null
+               property string text: ""
+               property string imageSource: ""
+            }
+            property bool isPrivateDirty: false
+
+            // TODO: Channels
+        }
+
+        function saveChanges() {
+
+            root.store.editPermission(root.permissionIndex,
+                                      d.dirtyValues.holdingsModel,
+                                      d.dirtyValues.permissionObject,
+                                      root.channelsModel,
+                                      d.dirtyValues.isPrivateDirty ? !root.isPrivate : root.isPrivate)
+        }
+
+        function loadInitValues() {
+            // Holdings:
+            d.dirtyValues.holdingsModel.clear()
+            if(root.holdingsModel) {
+                for(let i = 0; i < root.holdingsModel.count; i++) {
+                    let item = root.holdingsModel.get(i)
+                    let initItem = null
+                    if(item.shortName) {
+                        initItem =  {
+                            type: item.type,
+                            key: item.key,
+                            name: item.name,
+                            shortName: item.shortName,
+                            amount: item.amount,
+                            imageSource: item.imageSource,
+                            operator: item.operator
+                        }
+                    }
+                    else {
+                        initItem =  {
+                            type: item.type,
+                            key: item.key,
+                            name: item.name,
+                            amount: item.amount,
+                            imageSource: item.imageSource,
+                            operator: item.operator
+                        }
+                    }
+                    d.dirtyValues.holdingsModel.append(initItem)
+                }
+            }
+
+            // Permissions:
+            d.dirtyValues.permissionObject.key = root.permissionObject ? root.permissionObject.key : null
+            d.dirtyValues.permissionObject.text = root.permissionObject ? root.permissionObject.text : ""
+            d.dirtyValues.permissionObject.imageSource = root.permissionObject ? root.permissionObject.imageSource : ""
+
+            // TODO: Channels
+
+            // Is private permission
+            d.dirtyValues.isPrivateDirty = false
+        }
+
+        function checkIfHoldingsDirty() {
+            let dirty = false
+            if(root.holdingsModel) {
+                if(root.holdingsModel.count !== d.dirtyValues.holdingsModel.count) {
+                    dirty = true
+                }
+                else {
+                    // Check element by element
+                    let equals = 0
+                    for(let i = 0; i < root.holdingsModel.count; i++) {
+                        const item1 = root.holdingsModel.get(i)
+                        for(let j = 0; j < d.dirtyValues.holdingsModel.count; j++) {
+                            let item2 = d.dirtyValues.holdingsModel.get(j)
+                            // key, name, shortName, amount, operator
+                            if((item1.key === item2.key) &&
+                               (item1.name === item2.name) &&
+                               (item1.shortName === item2.shortName) &&
+                               (item1.amount === item2.amount) &&
+                               (item1.operator === item2.operator)) {
+                                equals = equals + 1
+                            }
+                        }
+                    }
+                    dirty = (equals !== root.holdingsModel.count)
+                }
+            }
+            else {
+                dirty = (d.dirtyValues.holdingsModel.count !== 0)
+            }
+            return dirty
+        }
    }

    contentWidth: mainLayout.width
    contentHeight: mainLayout.height

+    onSaveChangesChanged: if(saveChanges) d.saveChanges()
+    onResetChangesChanged: if(resetChanges)  d.loadInitValues()
+    onPermissionObjectChanged: d.loadInitValues()
+
    ColumnLayout {
        id: mainLayout
        width: root.viewWidth
@ -49,14 +188,9 @@ StatusScrollView {
            title: qsTr("Who holds")
            defaultItemText: qsTr("Example: 10 SNT")

-            // roles: type, key, name, amount, imageSource, operator
-            ListModel {
-                id: holdingsModel
-            }
-
            property int editedIndex
            itemsModel: SortFilterProxyModel {
-                sourceModel: holdingsModel
+                sourceModel: d.dirtyValues.holdingsModel

                proxyRoles: ExpressionRole {
                    name: "text"
@ -73,7 +207,7 @@ StatusScrollView {
                    const name = item.shortName ? item.shortName : item.name
                    const imageSource = item.iconSource.toString()

-                    holdingsModel.append({ type, key, name, amount, imageSource, operator })
+                    d.dirtyValues.holdingsModel.append({ type, key, name, amount, imageSource, operator })
                }

                onAddToken: {
@ -95,7 +229,7 @@ StatusScrollView {
                    const name = any ? "" : customDomain
                    const icon = Style.svg("ensUsernames")

-                    holdingsModel.append({type: HoldingTypes.Type.Ens, key, name, amount: 1, imageSource: icon, operator })
+                    d.dirtyValues.holdingsModel.append({type: HoldingTypes.Type.Ens, key, name, amount: 1, imageSource: icon, operator })
                    dropdown.close()
                }

@ -105,7 +239,8 @@ StatusScrollView {
                    const name = modelItem.shortName ? modelItem.shortName : modelItem.name
                    const imageSource = modelItem.iconSource.toString()

-                    holdingsModel.set(tokensSelector.editedIndex, { type: HoldingTypes.Type.Token, key, name, amount, imageSource })
+                    d.dirtyValues.holdingsModel.set(tokensSelector.editedIndex, { type: HoldingTypes.Type.Token, key, name, amount, imageSource })
+                    d.triggerDirtyTool = !d.triggerDirtyTool
                    dropdown.close()
                }

@ -115,7 +250,8 @@ StatusScrollView {
                    const name = modelItem.name
                    const imageSource = modelItem.iconSource.toString()

-                    holdingsModel.set(tokensSelector.editedIndex, { type: HoldingTypes.Type.Collectible, key, name, amount, imageSource })
+                    d.dirtyValues.holdingsModel.set(tokensSelector.editedIndex, { type: HoldingTypes.Type.Collectible, key, name, amount, imageSource })
+                    d.triggerDirtyTool = !d.triggerDirtyTool
                    dropdown.close()
                }

@ -124,15 +260,16 @@ StatusScrollView {
                    const name = any ? "" : customDomain
                    const icon = Style.svg("ensUsernames")

-                    holdingsModel.set(tokensSelector.editedIndex, { type: HoldingTypes.Type.Ens, key, name: name, amount: 1, imageSource: icon })
+                    d.dirtyValues.holdingsModel.set(tokensSelector.editedIndex, { type: HoldingTypes.Type.Ens, key, name: name, amount: 1, imageSource: icon })
+                    d.triggerDirtyTool = !d.triggerDirtyTool
                    dropdown.close()
                }

                onRemoveClicked: {
-                    holdingsModel.remove(tokensSelector.editedIndex)
+                    d.dirtyValues.holdingsModel.remove(tokensSelector.editedIndex)

-                    if (holdingsModel.count) {
-                        holdingsModel.set(0, { operator: OperatorsUtils.Operators.None})
+                    if (d.dirtyValues.holdingsModel && d.dirtyValues.holdingsModel.count) {
+                        d.dirtyValues.holdingsModel.set(0, { operator: OperatorsUtils.Operators.None})
                    }

                    dropdown.close()
@ -144,7 +281,7 @@ StatusScrollView {
                dropdown.x = tokensSelector.addButton.width + 4
                dropdown.y = 0

-                if (holdingsModel.count === 0)
+                if (d.dirtyValues.holdingsModel && d.dirtyValues.holdingsModel.count === 0)
                    dropdown.openFlow(HoldingsDropdown.FlowType.Add)
                else
                    dropdown.openFlow(HoldingsDropdown.FlowType.AddWithOperators)
@ -200,20 +337,9 @@ StatusScrollView {
            useIcons: true
            title: qsTr("Is allowed to")
            defaultItemText: qsTr("Example: View and post")
+            itemsModel: d.dirtyValues.permissionObject.key ? d.dirtyValues.permissionObject : null

-            Binding on itemsModel {
-                when: d.permissionType !== PermissionTypes.Type.None
-                value: QtObject {
-                    id: permissionsListObjectModel
-
-                    readonly property int operator: OperatorsUtils.Operators.None
-                    property var key
-                    property string text: ""
-                    property string imageSource: ""
-                }
-            }
-
-            addButton.visible: d.permissionType === PermissionTypes.Type.None
+            addButton.visible: !root.permissionObject

            PermissionsDropdown {
                id: permissionsDropdown
@ -222,9 +348,9 @@ StatusScrollView {

                onDone: {
                    d.permissionType = permissionType
-                    permissionsListObjectModel.key = permissionType
-                    permissionsListObjectModel.text = title
-                    permissionsListObjectModel.imageSource = asset
+                    d.dirtyValues.permissionObject.key = permissionType
+                    d.dirtyValues.permissionObject.text = title
+                    d.dirtyValues.permissionObject.imageSource = asset
                    permissionsDropdown.close()
                }
            }
@ -293,19 +419,23 @@ StatusScrollView {
                }
            }
            StatusSwitch {
-                checked: d.isPrivate
-                onToggled: { d.isPrivate = checked }
+                checked: d.dirtyValues.isPrivateDirty ? !root.isPrivate : root.isPrivate
+                onToggled: d.dirtyValues.isPrivateDirty = (root.isPrivate !== checked)
            }
        }
        StatusButton {
+            visible: !root.isEditState
            Layout.topMargin: 24
            text: qsTr("Create permission")
-            enabled: holdingsModel.count > 0 && permissionsListObjectModel.key !== undefined
+            enabled: d.dirtyValues.holdingsModel && d.dirtyValues.holdingsModel.count > 0 && d.dirtyValues.permissionObject.key !== null
            Layout.preferredHeight: 44
            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            onClicked: {
-                root.store.createPermissions(holdingsModel, permissionsListObjectModel, d.isPrivate)
+                root.store.createPermission(d.dirtyValues.holdingsModel,
+                                            d.dirtyValues.permissionObject,
+                                            d.dirtyValues.isPrivateDirty ? !root.isPrivate : root.isPrivate,
+                                            root.channelsModel)
                root.permissionCreated()
            }
        }
--- a/ui/app/AppLayouts/Chat/views/communities/CommunityPermissionsView.qml
+++ b/ui/app/AppLayouts/Chat/views/communities/CommunityPermissionsView.qml
@ -7,6 +7,7 @@ import StatusQ.Controls 0.1

 import SortFilterProxyModel 0.2
 import utils 1.0
+import shared.popups 1.0

 import AppLayouts.Chat.controls.community 1.0

@ -16,9 +17,22 @@ StatusScrollView {
    property var store
    property int viewWidth: 560 // by design

+    signal editPermission(int index, var holidings, var permission, var channels, bool isPrivate)
+    signal removePermission(int index)
+
+    QtObject {
+        id: d
+        property int permissionIndexToRemove
+    }
+
    contentWidth: mainLayout.width
    contentHeight: mainLayout.height + mainLayout.anchors.topMargin

+    onRemovePermission: {
+        d.permissionIndexToRemove = index
+        Global.openPopup(deletePopup)
+    }
+
    ColumnLayout {
        id: mainLayout
        width: root.viewWidth
@ -54,10 +68,24 @@ StatusScrollView {
                }
                isPrivate: model.isPrivate

-                onEditClicked: store.editPermission(model.index)
+                onEditClicked: root.editPermission(model.index, model.holdingsListModel, model.permissionsObjectModel, model.channelsListModel, model.isPrivate)
                onDuplicateClicked: store.duplicatePermission(model.index)
-                onRemoveClicked: store.removePermission(model.index)
+                onRemoveClicked: root.removePermission(model.index)
            }
        }
    }
+
+    Component {
+        id: deletePopup
+        ConfirmationDialog {
+            id: declineAllDialog
+            header.title: qsTr("Sure you want to delete permission")
+            confirmationText: qsTr("If you delete this permission, any of your community members who rely on this permission will loose the access this permission gives them.")
+            onConfirmButtonClicked: {
+                store.removePermission(d.permissionIndexToRemove)
+                close()
+            }
+        }
+    }
+
 }