feat(Permissions): Adding, duplicating, editing and deleting permissi…

…ons when control node is offline - It adds info panel when control node is offline. - It modifies UI texts when control node is offline. - It updates storybook updating permissions model and allowing permission state changes. NOTE: Only UI, no backend. There is 1 expected integration point: permissions model item `permissionState` role. Closes #11769
status-im · Aug 10, 2023 · 351309a · 351309a
1 parent dcfebbc
commit 351309a
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 12 deletions.
diff --git a/storybook/pages/CommunityPermissionsSettingsPanelEditor.qml b/storybook/pages/CommunityPermissionsSettingsPanelEditor.qml
@@ -6,6 +6,8 @@ import StatusQ.Core.Utils 0.1
 
 import AppLayouts.Communities.controls 1.0
 
+import Models 1.0
+
 Flickable {
     id: root
 
@@ -49,6 +51,36 @@ Flickable {
                     spacing: 20
                     anchors.fill: parent
 
+                    Label {
+                        Layout.leftMargin: 5
+
+                        text: "Permission State:"
+                    }
+                    ColumnLayout {
+                        Layout.leftMargin: 5
+
+                        RadioButton {
+                            text: "Active state"
+                            checked: true
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Active)
+                        }
+
+                        RadioButton {
+                            text: "Creating state"
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Creating)
+                        }
+
+                        RadioButton {
+                            text: "Editing state"
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Editing)
+                        }
+
+                        RadioButton {
+                            text: "Deleting state"
+                            onCheckedChanged: if(checked) PermissionsModel.changePermissionState(root.model, model.index, PermissionTypes.State.Deleting)
+                        }
+                    }
+
                     Repeater {
                         model: holdingsListModel
 

diff --git a/storybook/pages/PermissionsSettingsPanelPage.qml b/storybook/pages/PermissionsSettingsPanelPage.qml
@@ -112,16 +112,10 @@ SplitView {
 
         logsView.logText: logs.logText
 
-        ColumnLayout {
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.right: parent.right
+        CheckBox {
+            id: isOwnerCheckBox
 
-            CheckBox {
-                id: isOwnerCheckBox
-
-                text: "Is owner"
-            }
+            text: "Is owner"
         }
     }
 }

diff --git a/storybook/src/Models/PermissionsModel.qml b/storybook/src/Models/PermissionsModel.qml
@@ -14,13 +14,15 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true,
             tokenCriteriaMet: false
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         }
@@ -31,6 +33,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         }
     ]
@@ -40,24 +43,28 @@ QtObject {
             holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -67,12 +74,14 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -82,12 +91,14 @@ QtObject {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -97,18 +108,21 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel1b(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -118,24 +132,28 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: true
         },
         {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         },
         {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false
         }
     ]
@@ -146,6 +164,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2b(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -154,6 +173,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Admin,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -162,6 +182,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -170,6 +191,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         }
@@ -181,6 +203,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1b(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -189,6 +212,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -197,6 +221,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -205,6 +230,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -213,6 +239,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.Read,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -221,6 +248,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -229,6 +257,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel2b(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: true
         },
@@ -237,6 +266,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel3(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -245,6 +275,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel5(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         },
@@ -253,6 +284,7 @@ QtObject {
             holdingsListModel: root.createHoldingsModel1(),
             channelsListModel: root.createChannelsModel3(),
             permissionType: PermissionTypes.Type.ViewAndPost,
+            permissionState: PermissionTypes.State.Active,
             isPrivate: false,
             tokenCriteriaMet: false
         }
@@ -526,4 +558,13 @@ QtObject {
                     }
                 ]
     }
+
+    function changePermissionState(model, index, permissionState) {
+        model.get(index).permissionState = permissionState
+    }
+
+    function changeAllPermissionStates(model, permissionState) {
+        for(let i = 0; i < model.count; i++)
+            changePermissionState(model, i, permissionState)
+    }
 }
diff --git a/ui/app/AppLayouts/Communities/controls/PermissionItem.qml b/ui/app/AppLayouts/Communities/controls/PermissionItem.qml
@@ -15,6 +15,7 @@ Control{
     property var channelsListModel
 
     property int permissionType: PermissionTypes.Type.None
+    property int permissionState: PermissionTypes.State.Active
     property bool isPrivate: false
     property bool showButtons: true
 
@@ -32,6 +33,23 @@ Control{
         readonly property int buttonTextPixelSize: 12
         readonly property int buttonDiameter: 36
         readonly property int buttonTextSpacing: 6
+        readonly property int headerIconleftMargin: 20
+        readonly property bool isActiveState: root.permissionState === PermissionTypes.State.Active
+        readonly property bool isDeletingState: root.permissionState === PermissionTypes.State.Deleting
+
+        function getStateText(state) {
+            if(state === PermissionTypes.State.Active)
+                return qsTr("Active")
+
+            if(state === PermissionTypes.State.Creating)
+                return qsTr("Pending, will become active once owner node comes online")
+
+            if(state === PermissionTypes.State.Deleting)
+                return qsTr("Deletion pending, will be deleted once owner node comes online")
+
+            if(state === PermissionTypes.State.Editing)
+                return qsTr("Pending updates will be applied when owner node comes online")
+        }
     }
     background: Rectangle {
         color: "transparent"
@@ -55,16 +73,24 @@ Control{
                 spacing: 8
 
                 StatusIcon {
-                    Layout.leftMargin: 19
+                    Layout.leftMargin: d.headerIconleftMargin
+
+                    visible: d.isActiveState
                     icon: "checkmark"
                     Layout.preferredWidth: 11
                     Layout.preferredHeight: 8
                     color: Theme.palette.directColor1
                 }
 
+                StatusDotsLoadingIndicator {
+                    Layout.leftMargin: d.headerIconleftMargin
+
+                    visible: !d.isActiveState
+                }
+
                 StatusBaseText {
                     Layout.fillWidth: true
-                    text: qsTr("Active")
+                    text: d.getStateText(root.permissionState)
                     font.pixelSize: d.tagTextPixelSize
                 }
 
@@ -229,7 +255,7 @@ Control{
                 }
                 StatusBaseText {
                     Layout.alignment: Qt.AlignHCenter
-                    text: qsTr("Delete")
+                    text: d.isDeletingState ? qsTr("Undo delete") : qsTr("Delete")
                     color: Theme.palette.dangerColor1
                     font.pixelSize: d.buttonTextPixelSize
                 }