[Stats Refresh] Insights Tags & Categories: fix displaying details view

WordPress/Classes/ViewRelated/Stats/Insights/SiteStatsInsightsViewModel.swift

@@ -53,7 +53,7 @@ class SiteStatsInsightsViewModel: Observable {
 
         if insightsStore.fetchingOverviewHasFailed &&
             !insightsStore.containsCachedData {
-            return ImmuTable(sections: [])
+            return ImmuTable.Empty
         }
 
         insightsToShow.forEach { insightType in

WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/DetailDataCell.swift

@@ -10,25 +10,51 @@ class DetailDataCell: UITableViewCell, NibLoadable {
 
     // MARK: - Properties
 
+    @IBOutlet weak var dataView: UIView!
+
+    // Line shown at the bottom of the view, spanning the entire width.
+    // It is shown on the last child row of an expanded row.
+    // Used to indicate the bottom of the expanded rows section. Hidden by default.
+    @IBOutlet weak var bottomExpandedSeparatorLine: UIView!
+
     private weak var detailsDelegate: SiteStatsDetailsDelegate?
     private var rowData: StatsTotalRowData?
+    private typealias Style = WPStyleGuide.Stats
 
     // MARK: - Configure
 
     func configure(rowData: StatsTotalRowData,
                    detailsDelegate: SiteStatsDetailsDelegate?,
-                   hideSeparator: Bool = false) {
+                   hideIndentedSeparator: Bool = false,
+                   hideFullSeparator: Bool = true,
+                   expanded: Bool = false,
+                   isChildRow: Bool = false) {
+
+        Style.configureViewAsSeparator(bottomExpandedSeparatorLine)
 
         self.rowData = rowData
         self.detailsDelegate = detailsDelegate
 
         let row = StatsTotalRow.loadFromNib()
         row.configure(rowData: rowData, delegate: self)
-        row.showSeparator = !hideSeparator
 
-        contentView.addSubview(row)
+        bottomExpandedSeparatorLine.isHidden = hideFullSeparator
+
+        if expanded {
+            // If the row is expanded, the row's separators are set accordingly.
+            row.expanded = expanded
+        }
+        else {
+            row.showSeparator = !hideIndentedSeparator
+        }
+
+        if isChildRow {
+            Style.configureLabelAsChildRowTitle(row.itemLabel)
+        }
+
+        dataView.addSubview(row)
         row.translatesAutoresizingMaskIntoConstraints = false
-        contentView.pinSubviewToAllEdges(row)
+        dataView.pinSubviewToAllEdges(row)
     }
 
 }
@@ -49,4 +75,8 @@ extension DetailDataCell: StatsTotalRowDelegate {
         detailsDelegate?.showPostStats?(postID: postID, postTitle: postTitle, postURL: postURL)
     }
 
+    func toggleChildRowsForRow(_ row: StatsTotalRow) {
+        detailsDelegate?.toggleChildRowsForRow?(row)
+    }
+
 }

WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/DetailDataCell.xib

@@ -18,8 +18,34 @@
             <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">
                 <rect key="frame" x="0.0" y="0.0" width="320" height="79.5"/>
                 <autoresizingMask key="autoresizingMask"/>
+                <subviews>
+                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="57l-83-U4z" userLabel="Data View">
+                        <rect key="frame" x="0.0" y="0.0" width="320" height="79.5"/>
+                        <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    </view>
+                    <view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="MAl-vu-Juo" userLabel="Bottom Expanded Seperator Line">
+                        <rect key="frame" x="0.0" y="79" width="320" height="0.5"/>
+                        <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstAttribute="height" constant="0.5" id="5K4-TZ-yII"/>
+                        </constraints>
+                    </view>
+                </subviews>
+                <constraints>
+                    <constraint firstItem="MAl-vu-Juo" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leading" id="1Ms-MM-uVE"/>
+                    <constraint firstItem="57l-83-U4z" firstAttribute="leading" secondItem="H2p-sc-9uM" secondAttribute="leading" id="Sdm-Mm-lAn"/>
+                    <constraint firstAttribute="bottom" secondItem="57l-83-U4z" secondAttribute="bottom" id="Uif-DD-W66"/>
+                    <constraint firstAttribute="bottom" secondItem="MAl-vu-Juo" secondAttribute="bottom" id="X1b-BN-Oks"/>
+                    <constraint firstAttribute="trailing" secondItem="MAl-vu-Juo" secondAttribute="trailing" id="ZPh-HZ-HBn"/>
+                    <constraint firstAttribute="trailing" secondItem="57l-83-U4z" secondAttribute="trailing" id="ciO-5G-KvA"/>
+                    <constraint firstItem="57l-83-U4z" firstAttribute="top" secondItem="H2p-sc-9uM" secondAttribute="top" id="gtV-UJ-UnW"/>
+                </constraints>
             </tableViewCellContentView>
             <viewLayoutGuide key="safeArea" id="njF-e1-oar"/>
+            <connections>
+                <outlet property="bottomExpandedSeparatorLine" destination="MAl-vu-Juo" id="flF-L8-hvk"/>
+                <outlet property="dataView" destination="57l-83-U4z" id="E09-sp-p9L"/>
+            </connections>
             <point key="canvasLocation" x="137.68115942028987" y="148.66071428571428"/>
         </tableViewCell>
     </objects>

WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/SiteStatsDetailTableViewController.swift

@@ -5,6 +5,7 @@ import WordPressFlux
     @objc optional func tabbedTotalsCellUpdated()
     @objc optional func displayWebViewWithURL(_ url: URL)
     @objc optional func expandedRowUpdated(_ row: StatsTotalRow)
+    @objc optional func toggleChildRowsForRow(_ row: StatsTotalRow)
     @objc optional func showPostStats(postID: Int, postTitle: String?, postURL: URL?)
     @objc optional func displayMediaWithID(_ mediaID: NSNumber)
 }
@@ -118,6 +119,7 @@ private extension SiteStatsDetailTableViewController {
 
     func tableRowTypes() -> [ImmuTableRow.Type] {
         return [DetailDataRow.self,
+                DetailExpandableDataRow.self,
                 DetailSubtitlesHeaderRow.self,
                 DetailSubtitlesTabbedHeaderRow.self,
                 TopTotalsDetailStatsRow.self,
@@ -263,6 +265,11 @@ extension SiteStatsDetailTableViewController: SiteStatsDetailsDelegate {
         StatsDataHelper.updatedExpandedState(forRow: row, inDetails: true)
     }
 
+    func toggleChildRowsForRow(_ row: StatsTotalRow) {
+        StatsDataHelper.updatedExpandedState(forRow: row, inDetails: true)
+        refreshTableView()
+    }
+
     func showPostStats(postID: Int, postTitle: String?, postURL: URL?) {
         let postStatsTableViewController = PostStatsTableViewController.loadFromStoryboard()
         postStatsTableViewController.configure(postID: postID, postTitle: postTitle, postURL: postURL)

WordPress/Classes/ViewRelated/Stats/Shared Views/Stats Detail/SiteStatsDetailsViewModel.swift

@@ -83,7 +83,7 @@ class SiteStatsDetailsViewModel: Observable {
 
         guard let statSection = statSection,
             let detailsDelegate = detailsDelegate else {
-                return ImmuTable(sections: [])
+                return ImmuTable.Empty
         }
 
         var tableRows = [ImmuTableRow]()
@@ -114,10 +114,9 @@ class SiteStatsDetailsViewModel: Observable {
             let dataRows = statSection == .insightsCommentsAuthors ? authorsTabData.dataRows : postsTabData.dataRows
             tableRows.append(contentsOf: tabbedRowsFrom(dataRows))
         case .insightsTagsAndCategories:
-            tableRows.append(TopTotalsDetailStatsRow(itemSubtitle: StatSection.insightsTagsAndCategories.itemSubtitle,
-                                                     dataSubtitle: StatSection.insightsTagsAndCategories.dataSubtitle,
-                                                     dataRows: tagsAndCategoriesRows(),
-                                                     siteStatsDetailsDelegate: detailsDelegate))
+            tableRows.append(DetailSubtitlesHeaderRow(itemSubtitle: StatSection.insightsTagsAndCategories.itemSubtitle,
+                                                      dataSubtitle: StatSection.insightsTagsAndCategories.dataSubtitle))
+            tableRows.append(contentsOf: tagsAndCategoriesRows())
         case .periodPostsAndPages:
             tableRows.append(DetailSubtitlesHeaderRow(itemSubtitle: StatSection.periodPostsAndPages.itemSubtitle,
                                                       dataSubtitle: StatSection.periodPostsAndPages.dataSubtitle))
@@ -382,7 +381,11 @@ private extension SiteStatsDetailsViewModel {
 
     // MARK: - Tags and Categories
 
-    func tagsAndCategoriesRows() -> [StatsTotalRowData] {
+    func tagsAndCategoriesRows() -> [DetailExpandableDataRow] {
+        return expandableDataRowsFor(tagsAndCategoriesRowData(), forStat: .insightsTagsAndCategories)
+    }
+
+    func tagsAndCategoriesRowData() -> [StatsTotalRowData] {
         guard let tagsAndCategories = insightsStore.getAllTagsAndCategories()?.topTagsAndCategories else {
             return []
         }
@@ -610,4 +613,55 @@ private extension SiteStatsDetailsViewModel {
         return detailDataRows
     }
 
+    func expandableDataRowsFor(_ rowsData: [StatsTotalRowData], forStat statSection: StatSection) -> [DetailExpandableDataRow] {
+        var detailDataRows = [DetailExpandableDataRow]()
+
+        for (idx, rowData) in rowsData.enumerated() {
+            let isLastRow = idx == rowsData.endIndex-1
+
+            // Expanded state of current row
+            let expanded = StatsDataHelper.expandedRowLabelsDetails[statSection]?.contains(rowData.name) ?? false
+
+            // Expanded state of next row
+            var nextExpanded = false
+            let nextIndex = idx + 1
+            if nextIndex < rowsData.count {
+                let nextRow = rowsData[nextIndex]
+                nextExpanded = StatsDataHelper.expandedRowLabelsDetails[statSection]?.contains(nextRow.name) ?? false
+            }
+
+            // Toggle the indented separator line based on expanded states.
+            // If the current row is expanded, hide the separator.
+            // If the current row is not expanded, hide the separator if the next row is.
+            let hideIndentedSeparator = expanded ? (expanded || isLastRow) : (nextExpanded || isLastRow)
+
+            // Add current row
+            detailDataRows.append(DetailExpandableDataRow(rowData: rowData,
+                                                          detailsDelegate: detailsDelegate,
+                                                          hideIndentedSeparator: hideIndentedSeparator,
+                                                          hideFullSeparator: !isLastRow,
+                                                          expanded: expanded,
+                                                          isChildRow: false))
+
+            // Add child rows
+            if expanded {
+                let childRowsData = rowData.childRows ?? []
+                for (idx, childRowData) in childRowsData.enumerated() {
+                    // If this is the last child row, toggle the full separator based on
+                    // the current and next parent expanded states.
+                    let hideFullSeparator = (idx == childRowsData.endIndex-1) ? (expanded && nextExpanded) : true
+
+                    detailDataRows.append(DetailExpandableDataRow(rowData: childRowData,
+                                                                  detailsDelegate: detailsDelegate,
+                                                                  hideIndentedSeparator: true,
+                                                                  hideFullSeparator: hideFullSeparator,
+                                                                  expanded: false,
+                                                                  isChildRow: true))
+                }
+            }
+        }
+
+        return detailDataRows
+    }
+
 }

WordPress/Classes/ViewRelated/Stats/SiteStatsTableViewCells.swift

@@ -430,7 +430,38 @@ struct DetailDataRow: ImmuTableRow {
             return
         }
 
-        cell.configure(rowData: rowData, detailsDelegate: detailsDelegate, hideSeparator: hideSeparator)
+        cell.configure(rowData: rowData, detailsDelegate: detailsDelegate, hideIndentedSeparator: hideSeparator)
+    }
+}
+
+struct DetailExpandableDataRow: ImmuTableRow {
+
+    typealias CellType = DetailDataCell
+
+    static let cell: ImmuTableCell = {
+        return ImmuTableCell.nib(CellType.defaultNib, CellType.self)
+    }()
+
+    let rowData: StatsTotalRowData
+    weak var detailsDelegate: SiteStatsDetailsDelegate?
+    let hideIndentedSeparator: Bool
+    let hideFullSeparator: Bool
+    let expanded: Bool
+    let isChildRow: Bool
+    let action: ImmuTableAction? = nil
+
+    func configureCell(_ cell: UITableViewCell) {
+
+        guard let cell = cell as? CellType else {
+            return
+        }
+
+        cell.configure(rowData: rowData,
+                       detailsDelegate: detailsDelegate,
+                       hideIndentedSeparator: hideIndentedSeparator,
+                       hideFullSeparator: hideFullSeparator,
+                       expanded: expanded,
+                       isChildRow: isChildRow)
 
     }
 }