Make list selector generic

Author: itsmeichigo

WooCommerce/Classes/Bookings/BookingFilters/BookingTeamMemberSelectorView.swift

@@ -0,0 +1,36 @@
+import Foundation
+import Yosemite
+
+/// Protocol for configuring a booking list selector with different entity types.
+/// Provides all necessary configuration for fetching, displaying, and syncing list items.
+protocol ListSyncable {
+    associatedtype StorageType: ResultsControllerMutableType
+    associatedtype ModelType: Equatable & Hashable where ModelType == StorageType.ReadOnlyType
+
+    var siteID: Int64 { get }
+    var title: String { get }
+    var emptyStateMessage: String { get }
+
+    // MARK: - ResultsController Configuration
+
+    /// Creates the predicate for filtering storage objects
+    func createPredicate() -> NSPredicate
+
+    /// Creates sort descriptors for ordering results
+    func createSortDescriptors() -> [NSSortDescriptor]
+
+    // MARK: - Sync Configuration
+
+    /// Creates the action to sync items from remote
+    func createSyncAction(pageNumber: Int, pageSize: Int, completion: @escaping (Result<Bool, Error>) -> Void) -> Action
+
+    // MARK: - Model Conversion
+
+    /// Converts storage object to model object
+    func convert(_ storage: StorageType) -> ModelType
+
+    // MARK: - Display Configuration
+
+    /// Returns the display name for an item
+    func displayName(for item: ModelType) -> String
+}

WooCommerce/Classes/Bookings/BookingFilters/ListSyncable.swift

@@ -0,0 +1,112 @@
+import SwiftUI
+import Yosemite
+
+struct SyncableListSelectorView<Syncable: ListSyncable>: View {
+    @ObservedObject private var viewModel: SyncableListSelectorViewModel<Syncable>
+    @State var selectedItem: Syncable.ModelType?
+
+    private let syncable: Syncable
+    private let onSelection: (Syncable.ModelType?) -> Void
+
+    private let viewPadding: CGFloat = 16
+
+    init(viewModel: SyncableListSelectorViewModel<Syncable>,
+         syncable: Syncable,
+         selectedItem: Syncable.ModelType?,
+         onSelection: @escaping (Syncable.ModelType?) -> Void) {
+        self.viewModel = viewModel
+        self.syncable = syncable
+        self.selectedItem = selectedItem
+        self.onSelection = onSelection
+    }
+
+    var body: some View {
+        VStack {
+            switch viewModel.syncState {
+            case .empty:
+                emptyStateView
+            case .syncingFirstPage:
+                loadingView
+            case .results:
+                itemList(with: viewModel.items,
+                        onNextPage: { viewModel.onLoadNextPageAction() })
+            }
+        }
+        .task {
+            viewModel.loadResources()
+        }
+        .navigationTitle(syncable.title)
+        .navigationBarTitleDisplayMode(.inline)
+        .onChange(of: selectedItem) { _, newValue in
+            onSelection(newValue)
+        }
+    }
+}
+
+private extension SyncableListSelectorView {
+    var loadingView: some View {
+        VStack {
+            Spacer()
+            ProgressView().progressViewStyle(.circular)
+            Spacer()
+        }
+        .frame(maxWidth: .infinity)
+        .background(Color(.systemBackground))
+    }
+
+    func itemList(with items: [Syncable.ModelType],
+                  onNextPage: @escaping () -> Void) -> some View {
+        List {
+            optionRow(
+                text: NSLocalizedString(
+                    "bookingListSelectorView.any",
+                    value: "Any",
+                    comment: "Option to select no filter on the booking list selector view"
+                ),
+                isSelected: selectedItem == nil,
+                onSelection: { selectedItem = nil }
+            )
+
+            ForEach(items, id: \.self) { item in
+                optionRow(text: syncable.displayName(for: item),
+                          isSelected: item == selectedItem,
+                          onSelection: { selectedItem = item })
+            }
+
+            InfiniteScrollIndicator(showContent: viewModel.shouldShowBottomActivityIndicator)
+                .padding(.top, viewPadding)
+                .onAppear {
+                    onNextPage()
+                }
+        }
+        .listStyle(.plain)
+        .background(Color(.listBackground))
+    }
+
+    func optionRow(text: String, isSelected: Bool, onSelection: @escaping () -> Void) -> some View {
+        HStack {
+            Text(text)
+            Spacer()
+            Image(systemName: "checkmark")
+                .font(.body.weight(.medium))
+                .foregroundStyle(Color.accentColor)
+                .renderedIf(isSelected)
+        }
+        .tappable {
+            onSelection()
+        }
+        .listRowBackground(Color(.listForeground(modal: false)))
+    }
+
+    var emptyStateView: some View {
+        VStack {
+            Spacer()
+            Text(syncable.emptyStateMessage)
+                .secondaryBodyStyle()
+            Spacer()
+        }
+        .multilineTextAlignment(.center)
+        .padding(.horizontal, viewPadding)
+        .background(Color(.systemBackground))
+    }
+}