Add drag and drop for selected reports

plugins/ScheduledReports/API.php

@@ -49,6 +49,8 @@
  */
 class API extends \Piwik\Plugin\API
 {
+    public const ENFORCE_ORDER_PARAMETER = ScheduledReports::ENFORCE_ORDER_PARAMETER;
+
     public const VALIDATE_PARAMETERS_EVENT = 'ScheduledReports.validateReportParameters';
     public const GET_REPORT_PARAMETERS_EVENT = 'ScheduledReports.getReportParameters';
     public const GET_REPORT_METADATA_EVENT = 'ScheduledReports.getReportMetadata';
@@ -407,6 +409,10 @@ public function generateReport(
             self::validateReportParameters($reportType, empty($parameters) ? $report['parameters'] : $parameters),
             true
         );
+        $parameters = $report['parameters'];
+        $enforceCustomOrder = is_array($parameters)
+            && array_key_exists(self::ENFORCE_ORDER_PARAMETER, $parameters)
+            && !empty($parameters[self::ENFORCE_ORDER_PARAMETER]);
 
         $originalShowEvolutionWithinSelectedPeriod = Config::getInstance()->General['graphs_show_evolution_within_selected_period'];
         $originalDefaultEvolutionGraphLastPeriodsAmount = Config::getInstance()->General['graphs_default_evolution_graph_last_days_amount'];
@@ -418,11 +424,26 @@ public function generateReport(
             // available reports
             $availableReportMetadata = \Piwik\Plugins\API\API::getInstance()->getReportMetadata($idSite);
 
-            // we need to lookup which reports metadata are registered in this report
             $reportMetadata = [];
-            foreach ($availableReportMetadata as $metadata) {
-                if (in_array($metadata['uniqueId'], $report['reports'])) {
-                    $reportMetadata[] = $metadata;
+            if ($enforceCustomOrder) {
+                // we need to lookup which reports metadata are registered in this report
+                // and keep the order defined
+                $reportMetadataByUniqueId = [];
+                foreach ($availableReportMetadata as $metadata) {
+                    $reportMetadataByUniqueId[$metadata['uniqueId']] = $metadata;
+                }
+
+                foreach ($report['reports'] as $reportUniqueId) {
+                    if (isset($reportMetadataByUniqueId[$reportUniqueId])) {
+                        $reportMetadata[] = $reportMetadataByUniqueId[$reportUniqueId];
+                    }
+                }
+            } else {
+                // fallback to default metadata order when the flag isn't set
+                foreach ($availableReportMetadata as $metadata) {
+                    if (in_array($metadata['uniqueId'], $report['reports'], true)) {
+                        $reportMetadata[] = $metadata;
+                    }
                 }
             }
 

plugins/ScheduledReports/ScheduledReports.php

@@ -45,8 +45,10 @@ class ScheduledReports extends \Piwik\Plugin
     public const EVOLUTION_GRAPH_PARAMETER = 'evolutionGraph';
     public const ADDITIONAL_EMAILS_PARAMETER = 'additionalEmails';
     public const DISPLAY_FORMAT_PARAMETER = 'displayFormat';
+    public const ENFORCE_ORDER_PARAMETER = 'enforceOrder';
     public const EMAIL_ME_PARAMETER_DEFAULT_VALUE = true;
     public const EVOLUTION_GRAPH_PARAMETER_DEFAULT_VALUE = false;
+    public const ENFORCE_ORDER_PARAMETER_DEFAULT_VALUE = false;
 
     public const EMAIL_TYPE = 'email';
 
@@ -55,6 +57,7 @@ class ScheduledReports extends \Piwik\Plugin
         self::EVOLUTION_GRAPH_PARAMETER   => false,
         self::ADDITIONAL_EMAILS_PARAMETER => false,
         self::DISPLAY_FORMAT_PARAMETER    => true,
+        self::ENFORCE_ORDER_PARAMETER     => false,
     );
 
     private static $managedReportTypes = array(
@@ -156,6 +159,9 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'ScheduledReports_AlsoSendReportToTheseEmails';
         $translationKeys[] = 'ScheduledReports_ReportSchedule';
         $translationKeys[] = 'ScheduledReports_SendingReport';
+        $translationKeys[] = 'ScheduledReports_SelectedReports';
+        $translationKeys[] = 'ScheduledReports_SelectedReportsHelp';
+        $translationKeys[] = "ScheduledReports_ReportAdded";
     }
 
     /**
@@ -216,6 +222,12 @@ public function validateReportParameters(&$parameters, $reportType)
         if (isset($parameters[self::ADDITIONAL_EMAILS_PARAMETER])) {
             $parameters[self::ADDITIONAL_EMAILS_PARAMETER] = self::checkAdditionalEmails($parameters[self::ADDITIONAL_EMAILS_PARAMETER]);
         }
+
+        if (!isset($parameters[self::ENFORCE_ORDER_PARAMETER])) {
+            $parameters[self::ENFORCE_ORDER_PARAMETER] = self::ENFORCE_ORDER_PARAMETER_DEFAULT_VALUE;
+        } else {
+            $parameters[self::ENFORCE_ORDER_PARAMETER] = self::valueIsTrue($parameters[self::ENFORCE_ORDER_PARAMETER]);
+        }
     }
 
     // based on https://www.php.net/manual/en/filter.filters.validate.php -> FILTER_VALIDATE_BOOLEAN

plugins/ScheduledReports/lang/en.json

@@ -29,9 +29,12 @@
         "ReportHourWithUTC": "%s o'clock UTC",
         "ReportIncludeNWebsites": "The report will include main metrics for all websites that have at least one visit (from the %s websites currently available).",
         "ReportSent": "Report sent",
-        "ReportsIncluded": "Statistics included",
+        "ReportsIncluded": "Select the reports to include",
+        "SelectedReports": "Preview of your report",
+        "SelectedReportsHelp": "Drag and drop to re-order the report sections.",
         "ReportType": "Send report via",
         "ReportUpdated": "Report updated",
+        "ReportAdded": "Report added",
         "Segment_Deletion_Error": "This segment cannot be deleted or made invisible to other users because it is used to generate email report(s) %s. Please retry after removing this segment from this report(s).",
         "Segment_HelpScheduledReport": "You can select an existing custom segment to apply to data in this scheduled report. You may create and edit custom segments in your dashboard %1$s(click here to open)%2$s, then click on the \"%3$s\" box, then \"%4$s\".",
         "SegmentAppliedToReports": "The segment '%s' is applied to the reports.",
@@ -62,4 +65,4 @@
         "ReportSchedule": "Report Schedule",
         "SendingReport": "Sending report…"
     }
-}
+}

plugins/ScheduledReports/stylesheets/scheduledreports.less

@@ -30,3 +30,52 @@
     }
   }
 }
+.selectedReportsWrapper {
+  font-size: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 2.5rem;
+
+  .selectedReportsHeading {
+    margin-bottom: 0.4rem;
+  }
+
+  .selectedReportsHelp {
+    margin-top: 0;
+    color: @color-silver;
+  }
+
+  .selectedReportsList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      padding: 0.6rem 0.9rem;
+      border: 1px solid @color-silver-l85;
+      border-radius: 4px;
+      background: @color-white;
+      cursor: move;
+      margin-bottom: 0.6rem;
+
+        span.drag-icon {
+          padding-right: 15px;
+          font-size: 13px;
+          color: @color-silver-l60;
+        }
+    }
+
+    .selectedReportName {
+      flex: 1;
+    }
+
+    .selectedReportPlaceholder {
+      border: 1px dashed @color-silver;
+      border-radius: 4px;
+      background: @color-silver-l95;
+      height: 2.6rem;
+      margin-bottom: 0.6rem;
+    }
+  }
+}

plugins/ScheduledReports/tests/Integration/ApiTest.php

@@ -171,6 +171,7 @@ public function testAddReportGetReports()
                 'emailMe'          => true,
                 'additionalEmails' => array('[email protected]', '[email protected]'),
                 'evolutionGraph'   => true,
+                'enforceOrder'     => true,
             ),
         );
 
@@ -208,6 +209,18 @@ public function testAddReportGetReports()
         $this->assertReportsEqual($report, $data);
     }
 
+    public function testAddReportDefaultsEnforceOrderToFalse()
+    {
+        $data = self::getDailyPDFReportData($this->idSite);
+        $idReport = self::addReport($data);
+
+        $reports = APIScheduledReports::getInstance()->getReports($this->idSite, $data['period'], $idReport);
+        $report = reset($reports);
+
+        $this->assertArrayHasKey('enforceOrder', $report['parameters']);
+        $this->assertFalse($report['parameters']['enforceOrder']);
+    }
+
     /**
      * @group Plugins
      */
@@ -1004,6 +1017,7 @@ private static function getMonthlyEmailReportData($idSite)
                 'emailMe'          => false,
                 'additionalEmails' => array('[email protected]'),
                 'evolutionGraph'   => false,
+                'enforceOrder' => true,
             ),
         );
     }

plugins/ScheduledReports/tests/UI/ScheduledReports_spec.js

@@ -40,4 +40,102 @@ describe("ScheduledReports", function () {
 
         expect(await page.screenshot({ fullPage: true })).to.matchImage('invalid_token');
     });
+
+    describe('ManageScheduledReports', function () {
+        const manageReportsUrl = "?module=ScheduledReports&action=index&idSite=1&period=day&date=2013-01-23";
+        const createdReportName = "for testing";
+
+        // Helper function to open the report we will use for testing
+        async function openReportForTesting() {
+            await page.evaluate((description) => {
+                const rows = Array.from(document.querySelectorAll('#entityEditContainer tbody tr'));
+
+                for (const row of rows) {
+                    if (!row.textContent || row.textContent.indexOf(description) === -1) {
+                        continue;
+                    }
+                    const editButton = row.querySelector('button[title="Edit"]');
+                    editButton.click();
+                }
+            }, createdReportName);
+
+            await page.waitForSelector('#addEditReport', { visible: true });
+            await page.waitForSelector('.selectedReportsList li', { visible: true });
+        }
+
+        it("should show selected reports when creating a new report", async function () {
+            await page.goto(manageReportsUrl);
+            await page.waitForNetworkIdle();
+
+            await page.waitForSelector('#add-report');
+            await page.click('#add-report');
+            await page.waitForSelector('#addEditReport', { visible: true });
+
+            const reportCheckboxes = await page.$$(
+                'div[name="reportsList"]:not([style*="display: none"]) .listReports input[type="checkbox"]',
+            );
+
+            const selectedReportIds = [];
+            // Click the first 4 checkboxes
+            for (const checkbox of reportCheckboxes.slice(0, 4)) {
+                await checkbox.click();
+                const uniqueId = await checkbox.evaluate((input) => input.id );
+                if (uniqueId) {
+                    selectedReportIds.push(uniqueId);
+                }
+            }
+            const selectedReportsWrapper = await page.$('.selectedReportsWrapper');
+            expect(await selectedReportsWrapper.screenshot()).to.matchImage('selected_reports');
+        });
+
+        it("should persist manually reordered selected reports when saving a report", async function () {
+            await openReportForTesting();
+
+            const initialOrder = await page.$$eval(
+              '.selectedReportsList li',
+              (items) => items.map((item) => item.getAttribute('data-unique-id')),
+            );
+
+            const reorderSelectedReports = async (order) => {
+
+            };
+
+            const expectedOrder = initialOrder.slice().reverse();
+
+            // Reorder the selected reports via DOM manipulation
+            await page.evaluate((newOrder) => {
+                const list = document.querySelector('.selectedReportsList');
+                newOrder.forEach((uniqueId) => {
+                    const item = list.querySelector(`li[data-unique-id="${uniqueId}"]`);
+                    if (item) {
+                        list.appendChild(item);
+                    }
+                });
+
+                const jq = window.jQuery || window.$;
+                const $list = jq('.selectedReportsList');
+                // Get sortable instance and call stop handler manually,
+                // so that we simulate the emitted reorder event
+                const stopHandler = $list.sortable('option', 'stop');
+                if (typeof stopHandler === 'function') {
+                    stopHandler();
+                }
+            }, expectedOrder);
+
+            await page.click('.matomo-save-button .btn');
+            await page.waitForNetworkIdle();
+            await page.waitForTimeout(500);
+
+            await openReportForTesting();
+            const persistedOrder = await page.$$eval(
+              '.selectedReportsList li',
+              (items) => items.map((item) => item.getAttribute('data-unique-id')),
+            );
+
+            expect(persistedOrder).to.deep.equal(expectedOrder);
+
+            const selectedReportsWrapper = await page.$('.selectedReportsWrapper');
+            expect(await selectedReportsWrapper.screenshot()).to.matchImage('reorder_persisted');
+        });
+    });
 });