Add RoomChangeRolesScreen. (#2534)

Not part of a flow yet, just the screen.
2026-11-03 06:55:59 +00:00 · 2024-03-07 16:24:05 +00:00
parent 063b3732b1
commit 046f1dd533
19 changed files with 904 additions and 0 deletions
@@ -0,0 +1,152 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Compound
+import SwiftUI
+
+struct RoomChangeRolesScreen: View {
+    @ObservedObject var context: RoomChangeRolesScreenViewModel.Context
+    
+    var showTopSection: Bool {
+        !context.viewState.membersWithRole.isEmpty || context.viewState.isSearching
+    }
+    
+    var body: some View {
+        mainContent
+            .compoundList()
+            .scrollDismissesKeyboard(.immediately)
+            .navigationTitle(context.viewState.title)
+            .navigationBarTitleDisplayMode(.inline)
+            .navigationBarBackButtonHidden(context.viewState.hasChanges)
+            .toolbar { toolbar }
+            .searchController(query: $context.searchQuery,
+                              placeholder: L10n.commonSearchForSomeone,
+                              showsCancelButton: false,
+                              disablesInteractiveDismiss: true)
+            .compoundSearchField()
+            .alert(item: $context.alertInfo)
+    }
+    
+    // MARK: - Private
+    
+    private var mainContent: some View {
+        GeometryReader { proxy in
+            Form {
+                if showTopSection {
+                    // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
+                    Section {
+                        EmptyView()
+                    } header: {
+                        membersWithRoleSection
+                            .textCase(.none)
+                            .frame(width: proxy.size.width)
+                    }
+                }
+                
+                membersSection
+            }
+        }
+    }
+    
+    private var noResultsContent: some View {
+        Text(L10n.commonNoResults)
+            .font(.compound.bodyLG)
+            .foregroundColor(.compound.textSecondary)
+            .frame(maxWidth: .infinity)
+            .listRowBackground(Color.clear)
+            .accessibilityIdentifier(A11yIdentifiers.startChatScreen.searchNoResults)
+    }
+    
+    @ViewBuilder
+    private var membersSection: some View {
+        if !context.viewState.visibleMembers.isEmpty {
+            Section {
+                ForEach(context.viewState.visibleMembers, id: \.id) { member in
+                    RoomChangeRolesScreenRow(member: member,
+                                             imageProvider: context.imageProvider,
+                                             kind: .multiSelection(isSelected: context.viewState.isMemberSelected(member)) {
+                                                 context.send(viewAction: .toggleMember(member))
+                                             })
+                                             .disabled(member.role == .administrator)
+                }
+            } header: {
+                Text(L10n.screenRoomMemberListRoomMembersHeaderTitle)
+                    .compoundListSectionHeader()
+            }
+        } else {
+            Section.empty
+        }
+    }
+    
+    @ScaledMetric private var cellWidth: CGFloat = 72
+
+    private var membersWithRoleSection: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            ScrollViewReader { scrollView in
+                HStack(spacing: 16) {
+                    ForEach(context.viewState.membersWithRole, id: \.id) { member in
+                        RoomChangeRolesScreenSelectedItem(member: member, imageProvider: context.imageProvider) {
+                            context.send(viewAction: .demoteMember(member))
+                        }
+                        .frame(width: cellWidth)
+                    }
+                }
+                .onChange(of: context.viewState.lastPromotedMember) { member in
+                    guard let member else { return }
+                    withElementAnimation(.easeInOut) {
+                        scrollView.scrollTo(member.id)
+                    }
+                }
+                .padding(.horizontal, 14)
+            }
+        }
+    }
+    
+    @ToolbarContentBuilder
+    private var toolbar: some ToolbarContent {
+        ToolbarItem(placement: .confirmationAction) {
+            Button(L10n.actionSave) {
+                context.send(viewAction: .save)
+            }
+            .disabled(!context.viewState.hasChanges)
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct RoomChangeRolesScreen_Previews: PreviewProvider, TestablePreview {
+    static let administratorViewModel = makeViewModel(mode: .administrator)
+    static let moderatorViewModel = makeViewModel(mode: .moderator)
+    
+    static var previews: some View {
+        NavigationStack {
+            RoomChangeRolesScreen(context: administratorViewModel.context)
+        }
+        .previewDisplayName("Administrators")
+        
+        NavigationStack {
+            RoomChangeRolesScreen(context: moderatorViewModel.context)
+        }
+        .previewDisplayName("Moderators")
+    }
+    
+    static func makeViewModel(mode: RoomMemberDetails.Role) -> RoomChangeRolesScreenViewModel {
+        RoomChangeRolesScreenViewModel(mode: mode,
+                                       roomProxy: RoomProxyMock(with: .init(members: .allMembersAsAdmin)),
+                                       userIndicatorController: UserIndicatorControllerMock())
+    }
+}
@@ -0,0 +1,72 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Compound
+import MatrixRustSDK
+import SwiftUI
+
+struct RoomChangeRolesScreenRow: View {
+    let member: RoomMemberDetails
+    let imageProvider: ImageProviderProtocol?
+    
+    let kind: ListRow<LoadableAvatarImage, EmptyView, EmptyView, Bool>.Kind<EmptyView, Bool>
+    
+    var body: some View {
+        ListRow(label: .avatar(title: member.name ?? member.id,
+                               description: member.name == nil ? nil : member.id,
+                               icon: avatar),
+                kind: kind)
+    }
+    
+    var avatar: LoadableAvatarImage {
+        LoadableAvatarImage(url: member.avatarURL,
+                            name: member.name,
+                            contentID: member.id,
+                            avatarSize: .user(on: .startChat),
+                            imageProvider: imageProvider)
+    }
+}
+
+struct RoomChangeRolesScreenRow_Previews: PreviewProvider, TestablePreview {
+    static let action: () -> Void = { }
+    
+    static var previews: some View {
+        Form {
+            RoomChangeRolesScreenRow(member: .init(withProxy: RoomMemberProxyMock.mockAlice),
+                                     imageProvider: MockMediaProvider(),
+                                     kind: .multiSelection(isSelected: true, action: action))
+            
+            RoomChangeRolesScreenRow(member: .init(withProxy: RoomMemberProxyMock.mockBob),
+                                     imageProvider: MockMediaProvider(),
+                                     kind: .multiSelection(isSelected: false, action: action))
+            
+            RoomChangeRolesScreenRow(member: .init(withProxy: RoomMemberProxyMock.mockCharlie),
+                                     imageProvider: MockMediaProvider(),
+                                     kind: .multiSelection(isSelected: true, action: action))
+                .disabled(true)
+            
+            RoomChangeRolesScreenRow(member: .init(withProxy: RoomMemberProxyMock(with: .init(userID: "@someone:matrix.org", membership: .join))),
+                                     imageProvider: MockMediaProvider(),
+                                     kind: .multiSelection(isSelected: false, action: action))
+                .disabled(true)
+            
+            RoomChangeRolesScreenRow(member: .init(withProxy: RoomMemberProxyMock(with: .init(userID: "@someone:matrix.org", membership: .join))),
+                                     imageProvider: MockMediaProvider(),
+                                     kind: .multiSelection(isSelected: false, action: action))
+        }
+        .compoundList()
+    }
+}
@@ -0,0 +1,80 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomChangeRolesScreenSelectedItem: View {
+    let member: RoomMemberDetails
+    let imageProvider: ImageProviderProtocol?
+    let dismissAction: () -> Void
+    
+    var body: some View {
+        VStack(spacing: 4) {
+            avatar
+            
+            Text(member.name ?? member.id)
+                .font(.compound.bodyMD)
+                .foregroundColor(.compound.textPrimary)
+                .lineLimit(1)
+        }
+    }
+    
+    // MARK: - Private
+    
+    var avatar: some View {
+        LoadableAvatarImage(url: member.avatarURL,
+                            name: member.name,
+                            contentID: member.id,
+                            avatarSize: .user(on: .inviteUsers),
+                            imageProvider: imageProvider)
+            .overlay(alignment: .topTrailing) {
+                if member.role != .administrator {
+                    Button(action: dismissAction) {
+                        Image(systemName: "xmark.circle.fill")
+                            .resizable()
+                            .scaledFrame(size: 20)
+                            .symbolRenderingMode(.palette)
+                            .foregroundStyle(Color.compound.iconOnSolidPrimary, Color.compound.iconPrimary)
+                    }
+                    .offset(x: 4)
+                }
+            }
+    }
+}
+
+struct RoomChangeRolesScreenSelectedItem_Previews: PreviewProvider, TestablePreview {
+    static let members: [RoomMemberDetails] = [
+        RoomMemberProxyMock.mockAlice,
+        RoomMemberProxyMock.mockDan,
+        RoomMemberProxyMock.mockVerbose,
+        RoomMemberProxyMock(with: .init(userID: "@someone:server.org", membership: .join)),
+        RoomMemberProxyMock.mockAdmin
+    ]
+    .map { .init(withProxy: $0) }
+    
+    static var previews: some View {
+        HStack(spacing: 12) {
+            ForEach(members, id: \.id) { member in
+                RoomChangeRolesScreenSelectedItem(member: member,
+                                                  imageProvider: MockMediaProvider(),
+                                                  dismissAction: { })
+                    .frame(width: 72)
+            }
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}