Merge pull request #77 from MarkLark86/SDESK-3692

[SDESK-3692] Featuremedia Update Report

client/charts/services/ChartConfig.js

@@ -1,4 +1,4 @@
-import {formatDate} from '../../utils';
+import {formatDate, getTranslatedOperations} from '../../utils';
 import {SDChart} from '../SDChart';
 
 ChartConfig.$inject = [
@@ -613,6 +613,13 @@ export function ChartConfig(
                     );
                 })
         ),
+        operation: () => {
+            self.setTranslation(
+                'operation',
+                gettext('Operation'),
+                getTranslatedOperations(gettext)
+            );
+        }
     };
 
     /**

client/charts/styles/charts.scss

@@ -37,7 +37,16 @@ $colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b
     display: block;
     background-color: white;
 
+    .clickable {
+        cursor: pointer;
+
+        &:hover {
+            border: 1px solid #9bb3ff;
+        }
+    }
+
     .sd-chart__table-header {
+        z-index: 1000;
         text-align: center;
         padding: 1rem 0 2rem 0;
 
@@ -55,16 +64,22 @@ $colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b
     .sd-chart__table-content {
         display: block;
 
+        table {
+            border-top: none;
+        }
+
         th {
             text-transform: uppercase;
             position: sticky;
             background-color: $white;
+            z-index: 1000;
         }
 
         thead {
             tr:first-child {
                 th {
                     top: 58px;
+                    border-top: 1px solid $sd-tableBorderColor;
                 }
             }
 
@@ -82,6 +97,15 @@ $colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b
         tr:hover {
             background-color: #cee6fa;
         }
+
+        td {
+            vertical-align: middle;
+        }
+
+        .no-vert-padding {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
     }
 }
 

client/charts/views/chart-form-options.html

@@ -21,7 +21,7 @@
     </div>
 </div>
 
-<div class="form__row">
+<div class="form__row" ng-if="chart_types.length > 1">
     <div class="sd-line-input sd-line-input--no-margin">
         <label class="sd-line-input__label" translate>Chart Type</label>
         <div class="flex-grid flex-grid--boxed-small flex-grid--wrap-items flex-grid--small-2">

client/directives/AnalyticsContainer.js

@@ -11,13 +11,16 @@
  * @requires $timeout
  * @requires emailReport
  * @required savedReports
+ * @required api
+ * @required desks
+ * @required metadata
  * @description A directive that encapsulates the entire analytics module view
  */
 export function AnalyticsContainer() {
     return {
         controllerAs: 'analytics',
         controller: ['$scope', '$location', 'pageTitle', 'gettext', 'lodash', 'reports', '$rootScope', '$timeout',
-            'emailReport', 'savedReports',
+            'emailReport', 'savedReports', 'api', 'desks', 'metadata',
             function AnalyticsContainerController(
                 $scope,
                 $location,
@@ -28,7 +31,10 @@ export function AnalyticsContainer() {
                 $rootScope,
                 $timeout,
                 emailReport,
-                savedReports
+                savedReports,
+                api,
+                desks,
+                metadata
             ) {
                 const defaultReportConfigs = {charts: []};
 
@@ -40,6 +46,10 @@ export function AnalyticsContainer() {
                 $scope.reportConfigs = $scope.reportConfigs || _.cloneDeep(defaultReportConfigs);
                 $scope.currentPanel = 'advanced';
                 $scope.emailModal = emailReport.modal;
+                $scope.preview = {
+                    item: null,
+                    type: null,
+                };
 
                 /**
                  * @ngdoc method
@@ -52,6 +62,10 @@ export function AnalyticsContainer() {
                         _.find($scope.reports, ['id', $location.search().report]) || $scope.reports[0],
                         false
                     );
+
+                    // Initialise desk and metadata for archive previews
+                    desks.initialize();
+                    metadata.initialize();
                 };
 
                 /**
@@ -213,6 +227,32 @@ export function AnalyticsContainer() {
                     $scope.currentPanel = panelName;
                 };
 
+                /**
+                 * @ngdoc method
+                 * @name sdAnalyticsContainer#closePreview
+                 * @description Closes the preview panel
+                 */
+                $scope.closePreview = () => {
+                    $scope.preview = {
+                        item: null,
+                        type: null,
+                    };
+                };
+
+                /**
+                 * @ngdoc
+                 * @name sdAnalyticsContainer#openPreview
+                 * @param {Object} item - The item to preview
+                 * @param {String} type - The type of the item (used with sda-archive-preview-proxy)
+                 * @description Opens the preview panel with the appropriate preview directive based on type
+                 */
+                $scope.openPreview = (item, type = 'archive') => {
+                    $scope.preview = {
+                        item: item,
+                        type: type,
+                    };
+                };
+
                 init();
             },
         ],

client/directives/ArchivePreviewProxy.js

@@ -0,0 +1,63 @@
+ArchivePreviewProxy.$inject = ['$compile', 'lodash'];
+
+/**
+ * @ngdoc directive
+ * @module superdesk.apps.analytics
+ * @name sdaArchivePreviewProxy
+ * @requires $compile
+ * @requires lodash
+ * @description A directive that compiles and renders a preview directive based on
+ * the scope.preview.type
+ */
+export function ArchivePreviewProxy($compile, _) {
+    return {
+        scope: {
+            preview: '=',
+            close: '='
+        },
+        link: function(scope, element) {
+            /**
+             * @ngdoc method
+             * @name sdaArchivePreviewProxy#changePreviewDirective
+             * @description Creates and compiles the angular preview directive
+             * for the provided preview item/type
+             */
+            const changePreviewDirective = () => {
+                const previewType = _.get(scope.preview, 'type');
+                let template;
+
+                if (previewType === 'archive') {
+                    // Directive is the same one used in monitoring/search preview
+                    template = `
+                        <div class="sd-item-preview"
+                            sd-item-preview
+                            data-item="preview.item"
+                            data-close="close()"
+                            data-show-history-tab="true"
+                            data-hide-actions-menu="true"
+                        ></div>
+                    `;
+                } else if (previewType) {
+                    // Custom preview directive
+                    template = `<div sda-${previewType}></div>`;
+                }
+
+                // Make sure to destroy the existing directive
+                if (element[0].children.length > 0) {
+                    angular.element(element[0]).empty();
+                }
+
+                if (template) {
+                    angular.element(element[0]).append($compile(template)(scope)[0]);
+                }
+            };
+
+            scope.$watch('preview', (newPreview, oldPreview) => {
+                // Only change the directive if the type has changed
+                if (_.get(newPreview, 'type') !== _.get(oldPreview, 'type')) {
+                    changePreviewDirective();
+                }
+            });
+        },
+    };
+}

client/directives/RenditionsPreview.js

@@ -0,0 +1,15 @@
+import '../styles/renditions-preview.scss';
+
+RenditionsPreview.$inject = [];
+
+/**
+ * @ngdoc directive
+ * @module superdesk.apps.analytics
+ * @name sdaRenditionsPreview
+ * @description A directive that renders renditions (in a similar way to authoring/editor)
+ */
+export function RenditionsPreview() {
+    return {
+        template: require('../views/renditions-preview.html'),
+    };
+}

client/directives/index.js

@@ -2,3 +2,5 @@ export {AnalyticsContainer} from './AnalyticsContainer';
 export {AfterRender} from './AfterRender';
 export {ReportDropdown} from './ReportDropdown';
 export {ConvertToNumber} from './ConvertToNumber';
+export {ArchivePreviewProxy} from './ArchivePreviewProxy';
+export {RenditionsPreview} from './RenditionsPreview';