Top Performers Mark3: User Interface

Networking/Networking/Model/Stats/TopEarnerStatsItem.swift

@@ -77,7 +77,12 @@ extension TopEarnerStatsItem: Comparable {
     }
 
     public static func < (lhs: TopEarnerStatsItem, rhs: TopEarnerStatsItem) -> Bool {
-        return lhs.quantity < rhs.quantity ||
-            (lhs.quantity == rhs.quantity && lhs.productName < rhs.productName)
+        return lhs.total < rhs.total ||
+            (lhs.total == rhs.total && lhs.quantity < rhs.quantity)
+    }
+
+    public static func > (lhs: TopEarnerStatsItem, rhs: TopEarnerStatsItem) -> Bool {
+        return lhs.total > rhs.total ||
+            (lhs.total == rhs.total && lhs.quantity > rhs.quantity)
     }
 }

WooCommerce/Classes/AppDelegate.swift

@@ -135,6 +135,7 @@ private extension AppDelegate {
         UINavigationBar.appearance().isTranslucent = false
         UINavigationBar.appearance().tintColor = .white
         UIApplication.shared.statusBarStyle = .lightContent
+        UILabel.appearance(whenContainedInInstancesOf: [UITableViewHeaderFooterView.self]).textColor = StyleManager.sectionTitleColor
 
         // Take advantage of a bug in UIAlertController
         // to style all UIAlertControllers with WC color

WooCommerce/Classes/Extensions/Array+Helpers.swift

@@ -15,3 +15,12 @@ extension Array {
         return removeFirst()
     }
 }
+
+extension Collection {
+
+    /// Returns the element at the specified index if it is within bounds, otherwise nil.
+    ///
+    subscript (safe index: Index) -> Element? {
+        return indices.contains(index) ? self[index] : nil
+    }
+}

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -21,6 +21,13 @@ extension UIImage {
         return Gridicon.iconOfType(.chevronRight).imageWithTintColor(tintColor)!
     }
 
+    /// Product Placeholder Image
+    ///
+    static var productPlaceholderImage: UIImage {
+        let tintColor = StyleManager.wooGreyLight
+        return Gridicon.iconOfType(.product).imageWithTintColor(tintColor)!
+    }
+
     /// Gravatar Placeholder Image
     ///
     static var gravatarPlaceholderImage: UIImage {

WooCommerce/Classes/Extensions/UILabel+Helpers.swift

@@ -9,6 +9,12 @@ extension UILabel {
         textColor = StyleManager.defaultTextColor
     }
 
+    func applySubheadlineStyle() {
+        adjustsFontForContentSizeCategory = true
+        font = .subheadline
+        textColor = StyleManager.defaultTextColor
+    }
+
     func applyBodyStyle() {
         adjustsFontForContentSizeCategory = true
         font = .body

WooCommerce/Classes/Model/TopEarnerStatsItem+Woo.swift

@@ -0,0 +1,27 @@
+import Foundation
+import Yosemite
+
+
+// MARK: - TopEarnerStatsItem Helper Methods
+//
+extension TopEarnerStatsItem {
+
+    /// Returns the Currency Symbol associated with the current TopEarnerStatsItem.
+    ///
+    var currencySymbol: String {
+        guard !currency.isEmpty else {
+            return ""
+        }
+        guard let identifier = Locale.availableIdentifiers.first(where: { Locale(identifier: $0).currencyCode == currency }) else {
+            return currency
+        }
+
+        return Locale(identifier: identifier).currencySymbol ?? currency
+    }
+
+    /// Returns a friendly-formatted total string including the currency symbol
+    ///
+    var formattedTotalString: String {
+        return currencySymbol + total.friendlyString()
+    }
+}

WooCommerce/Classes/ViewRelated/Dashboard/DashboardViewController.swift

@@ -15,6 +15,7 @@ class DashboardViewController: UIViewController {
 
     private var storeStatsViewController: StoreStatsViewController!
     private var newOrdersViewController: NewOrdersViewController!
+    private var topPerformersViewController: TopPerformersViewController!
 
     private lazy var refreshControl: UIRefreshControl = {
         let refreshControl = UIRefreshControl()
@@ -37,13 +38,16 @@ class DashboardViewController: UIViewController {
     }
 
     override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
-        if let vc = segue.destination as? StoreStatsViewController, segue.identifier == Constants.storeStatsSegue {
+        if let vc = segue.destination as? StoreStatsViewController, segue.identifier == Segues.storeStatsSegue {
             storeStatsViewController = vc
         }
-        if let vc = segue.destination as? NewOrdersViewController, segue.identifier == Constants.newOrdersSegue {
+        if let vc = segue.destination as? NewOrdersViewController, segue.identifier == Segues.newOrdersSegue {
             newOrdersViewController = vc
             newOrdersViewController.delegate = self
         }
+        if let vc = segue.destination as? TopPerformersViewController, segue.identifier == Segues.topPerformersSegue {
+            topPerformersViewController = vc
+        }
     }
 }
 
@@ -86,7 +90,7 @@ private extension DashboardViewController {
 private extension DashboardViewController {
 
     @objc func settingsTapped() {
-        performSegue(withIdentifier: Constants.settingsSegue, sender: nil)
+        performSegue(withIdentifier: Segues.settingsSegue, sender: nil)
     }
 
     @objc func pullToRefresh() {
@@ -116,6 +120,7 @@ private extension DashboardViewController {
         DDLogInfo("♻️ Requesting dashboard data be reloaded...")
         storeStatsViewController.syncAllStats()
         newOrdersViewController.syncNewOrders()
+        topPerformersViewController.syncTopPerformers()
         refreshControl.endRefreshing()
     }
 
@@ -149,14 +154,18 @@ private extension DashboardViewController {
 // MARK: - Constants
 //
 private extension DashboardViewController {
+
+    struct Segues {
+        static let settingsSegue        = "ShowSettingsViewController"
+        static let storeStatsSegue      = "StoreStatsEmbedSegue"
+        static let newOrdersSegue       = "NewOrdersEmbedSegue"
+        static let topPerformersSegue   = "TopPerformersEmbedSegue"
+    }
+
     struct Constants {
-        static let settingsSegue    = "ShowSettingsViewController"
-        static let storeStatsSegue  = "StoreStatsEmbedSegue"
-        static let newOrdersSegue   = "NewOrdersEmbedSegue"
-
-        static let hideAnimationDuration: TimeInterval = 0.25
-        static let showAnimationDuration: TimeInterval = 0.50
-        static let showSpringDamping: CGFloat = 0.7
-        static let showSpringVelocity: CGFloat = 0.0
+        static let hideAnimationDuration: TimeInterval  = 0.25
+        static let showAnimationDuration: TimeInterval  = 0.50
+        static let showSpringDamping: CGFloat           = 0.7
+        static let showSpringVelocity: CGFloat          = 0.0
     }
 }

WooCommerce/Classes/ViewRelated/Dashboard/MyStore/Cells/NoPeriodDataTableViewCell.swift

@@ -0,0 +1,18 @@
+import Foundation
+import UIKit
+
+
+/// Displayed whenever there is no top performer data for a given period (granularity)
+///
+class NoPeriodDataTableViewCell: UITableViewCell {
+    @IBOutlet private weak var mainImageView: UIImageView!
+
+    /// LegendLabel: To be displayed below the ImageView.
+    ///
+    @IBOutlet private var legendLabel: UILabel! {
+        didSet {
+            legendLabel.applySubheadlineStyle()
+            legendLabel.text = NSLocalizedString("No activity this period", comment: "Default text for Top Performers section when no data exists for a given period.")
+        }
+    }
+}

WooCommerce/Classes/ViewRelated/Dashboard/MyStore/Cells/NoPeriodDataTableViewCell.xib

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="none" indentationWidth="10" rowHeight="242" id="qMv-Pb-lgn" customClass="NoPeriodDataTableViewCell" customModule="WooCommerce" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="375" height="242"/>
+            <autoresizingMask key="autoresizingMask"/>
+            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="qMv-Pb-lgn" id="gcY-Gg-DvR">
+                <rect key="frame" x="0.0" y="0.0" width="375" height="241.5"/>
+                <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="woo-no-store" translatesAutoresizingMaskIntoConstraints="NO" id="uuh-xp-DA5">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="180"/>
+                    </imageView>
+                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bPV-bJ-GBz">
+                        <rect key="frame" x="26" y="200.5" width="323" height="20.5"/>
+                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                        <nil key="textColor"/>
+                        <nil key="highlightedColor"/>
+                    </label>
+                </subviews>
+                <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                <constraints>
+                    <constraint firstItem="bPV-bJ-GBz" firstAttribute="leading" secondItem="gcY-Gg-DvR" secondAttribute="leadingMargin" constant="10" id="02T-fd-amz"/>
+                    <constraint firstAttribute="trailingMargin" secondItem="bPV-bJ-GBz" secondAttribute="trailing" constant="10" id="4v0-dU-uL0"/>
+                    <constraint firstItem="uuh-xp-DA5" firstAttribute="top" secondItem="gcY-Gg-DvR" secondAttribute="top" id="AXH-sZ-i9m"/>
+                    <constraint firstItem="uuh-xp-DA5" firstAttribute="leading" secondItem="gcY-Gg-DvR" secondAttribute="leading" id="QK4-JX-5Z1"/>
+                    <constraint firstItem="bPV-bJ-GBz" firstAttribute="top" relation="greaterThanOrEqual" secondItem="uuh-xp-DA5" secondAttribute="bottom" constant="10" id="YHi-MJ-ZFK"/>
+                    <constraint firstAttribute="bottomMargin" secondItem="bPV-bJ-GBz" secondAttribute="bottom" constant="10" id="Zyf-Uq-D8M"/>
+                    <constraint firstAttribute="trailing" secondItem="uuh-xp-DA5" secondAttribute="trailing" id="egs-Ij-2lL"/>
+                </constraints>
+            </tableViewCellContentView>
+            <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+            <connections>
+                <outlet property="legendLabel" destination="bPV-bJ-GBz" id="VBf-2Q-gkI"/>
+                <outlet property="mainImageView" destination="uuh-xp-DA5" id="vq3-GZ-F81"/>
+            </connections>
+            <point key="canvasLocation" x="-162.5" y="-12"/>
+        </tableViewCell>
+    </objects>
+    <resources>
+        <image name="woo-no-store" width="320" height="180"/>
+    </resources>
+</document>

WooCommerce/Classes/ViewRelated/Dashboard/MyStore/Cells/ProductTableViewCell.swift

@@ -0,0 +1,65 @@
+import UIKit
+import Yosemite
+import WordPressUI
+import Gridicons
+
+class ProductTableViewCell: UITableViewCell {
+
+    // MARK: - Properties
+
+    @IBOutlet private weak var productImage: UIImageView!
+    @IBOutlet private var nameLabel: UILabel!
+    @IBOutlet private var detailLabel: UILabel!
+    @IBOutlet private var priceLabel: UILabel!
+
+    var nameText: String? {
+        get {
+            return nameLabel.text
+        }
+        set {
+            nameLabel.text = newValue
+        }
+    }
+
+    var detailText: String? {
+        get {
+            return detailLabel.text
+        }
+        set {
+            detailLabel.text = newValue
+        }
+    }
+
+    var priceText: String? {
+        get {
+            return priceLabel.text
+        }
+        set {
+            priceLabel.text = newValue
+        }
+    }
+
+    override func awakeFromNib() {
+        super.awakeFromNib()
+        nameLabel.applyBodyStyle()
+        priceLabel.applyBodyStyle()
+        detailLabel.applyFootnoteStyle()
+        productImage.contentMode = .scaleAspectFit
+    }
+}
+
+// MARK: - Public Methods
+//
+extension ProductTableViewCell {
+    func configure(_ statsItem: TopEarnerStatsItem?) {
+        nameText = statsItem?.productName
+        detailText = String.localizedStringWithFormat( NSLocalizedString("Total Product Order: %ld", comment: "Top performers — label for the total number of products ordered"), statsItem?.quantity ?? 0)
+        priceText = statsItem?.formattedTotalString
+
+        if let productURLString = statsItem?.imageUrl {
+            productImage.downloadImage(from: URL(string: productURLString), placeholderImage: UIImage.productPlaceholderImage)
+        } else {
+            productImage.image = .productPlaceholderImage
+        }
+    }
+}