Remember monitoring view (#4949)

Author: tomaskikutis

scripts/apps/monitoring/directives/MonitoringView.ts

@@ -3,6 +3,8 @@ import {gettext} from 'core/utils';
 import {AuthoringWorkspaceService} from 'apps/authoring/authoring/services/AuthoringWorkspaceService';
 import {IDesk, ISuperdeskQuery, IUser} from 'superdesk-api';
 import {appConfig} from 'appConfig';
+import {sdApi} from 'api';
+import {getMonitoringViewOptions} from './utils';
 
 const PAGE_SIZE = 50;
 
@@ -23,7 +25,7 @@ interface IScope extends ng.IScope {
     group: any;
     refreshGroup(group?: any, triggeredByScrolling?: boolean);
     isActiveGroup: (group: any) => boolean;
-    switchView: (value: any, swimlane?: any) => void;
+    switchView: (value: any, options?: {programmatic?: boolean}) => void;
     gettext: (text: any, params?: any) => any;
     toggleFilter: () => void;
     addResourceUpdatedEventListener: (callback: any) => void;
@@ -35,6 +37,7 @@ interface IScope extends ng.IScope {
     afterWorkspaceRename: () => void;
     initWorkspaceRename: (workspace) => void;
     workspaceToRename: any;
+    availableViews: Array<{id: string; label: string; icon: string}>;
 }
 
 /**
@@ -130,7 +133,17 @@ export function MonitoringView(
             pageTitle.setUrl(_.capitalize(gettext(scope.type)));
 
             scope.shouldRefresh = true;
-            scope.view = 'compact'; // default view
+
+            scope.availableViews = getMonitoringViewOptions({
+                swimlaneViewEnabled:
+                    !scope.monitoring.singleGroup
+                    && scope.type === 'monitoring'
+                    && scope.monitoring.hasSwimlaneView,
+                compactViewEnabled: scope.compactViewEnabled,
+            });
+
+            // will be initialized by programmatic call to `scope.switchView `
+            scope.view = undefined;
 
             scope.workspaces = workspaces;
             scope.$watch('workspaces.active', (workspace) => {
@@ -199,38 +212,32 @@ export function MonitoringView(
                     });
                 }
 
-                if (currentDesk && currentDesk.monitoring_default_view) {
-                    switch (currentDesk.monitoring_default_view) {
-                        case 'list':
-                            scope.switchView('compact');
-                            break;
-                        case 'list-compact':
-                            scope.switchView('compact-configurable');
-                            break;
-                        case 'swimlane':
-                            scope.switchView('compact', true);
-                            break;
-                        case 'photogrid':
-                            scope.switchView('photogrid');
-                            break;
-                        default:
-                            scope.switchView('compact'); // list by default
-                            break;
-                    }
-                }
+                const availableViewIds = new Set(scope.availableViews.map(({id}) => id));
+                const deskPreference =
+                    scope.availableViews.find(({id}) => id === currentDesk?.monitoring_default_view)?.id;
+                const userPreference: string = sdApi.preferences.get('monitoring:view')?.view;
+                const appliedPreference = deskPreference ?? userPreference;
+
+                scope.switchView(
+                    availableViewIds.has(appliedPreference) ? appliedPreference : 'compact',
+                    {programmatic: true},
+                );
             });
 
             scope.numberOfColumns = 1;
 
-            /**
-             * Toggle viewColumn to switch views between swimlane and list
-             * @param {Boolean} value
-             * @param {Boolean} swimlane
-             */
-            scope.switchView = function(value, swimlane) {
-                scope.monitoring.switchViewColumn(swimlane, true);
+            scope.switchView = function(value: string, options?: {programmatic?: boolean}) {
+                const isSwimlane = value === 'swimlane2';
+
+                const programmatic = options?.programmatic === true;
+
+                scope.monitoring.switchViewColumn(isSwimlane, !programmatic);
                 scope.view = value;
-                scope.swimlane = swimlane;
+                scope.swimlane = isSwimlane;
+
+                if (!programmatic) {
+                    sdApi.preferences.update('monitoring:view', {view: value});
+                }
             };
 
             /**

scripts/apps/monitoring/directives/utils.ts

@@ -71,3 +71,42 @@ export const getTagsConfig = (filterIds: Array<string>): ITagConfig => {
             },
         }), {});
 };
+
+export function getMonitoringViewOptions(
+    options: {
+        compactViewEnabled: boolean;
+        swimlaneViewEnabled: boolean;
+    },
+): Array<{id: string; label: string; icon: string}> {
+    const availableViews: Array<{id: string; label: string; icon: string}> = [];
+
+    availableViews.push({
+        id: 'compact',
+        label: gettext('List view'),
+        icon: 'list-view',
+    });
+
+    if (options.compactViewEnabled) {
+        availableViews.push({
+            id: 'compact-configurable',
+            label: gettext('Compact View'),
+            icon: 'unordered-list',
+        });
+    }
+
+    if (options.swimlaneViewEnabled) {
+        availableViews.push({
+            id: 'swimlane2',
+            label: gettext('Swimlane View'),
+            icon: 'kanban-view',
+        });
+    }
+
+    availableViews.push({
+        id: 'photogrid',
+        label: gettext('Photo Grid View'),
+        icon: 'grid-view',
+    });
+
+    return availableViews;
+}

scripts/apps/monitoring/tests/monitoring.spec.ts

@@ -9,8 +9,12 @@ describe('monitoring', () => {
     beforeEach(window.module('superdesk.core.services.pageTitle'));
     beforeEach(window.module('superdesk.templates-cache'));
 
-    beforeEach(inject((session, $rootScope) => {
+    beforeEach(inject((session, $rootScope, preferencesService) => {
         session.start({token: 's1', _id: 'foo', href: ''}, {_id: 'foo'});
+
+        // prevent crash; actual implementation crashes since preferences aren't loaded when unit test runs
+        spyOn(preferencesService, 'getSync').and.returnValue(undefined);
+
         $rootScope.$digest();
     }));
 

scripts/apps/monitoring/views/monitoring-view.html

@@ -184,24 +184,9 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
                                 <i ng-class="{'icon-list-view': !monitoring.viewColumn && (!view || view === 'compact'), 'icon-grid-view': view === 'photogrid', 'icon-kanban-view': monitoring.viewColumn, 'icon-unordered-list': view === 'compact-configurable'}"></i>
                             </button>
                             <ul class="dropdown__menu">
-                                <li>
-                                    <button ng-click="switchView('compact')">
-                                        <i class="icon-list-view"></i>{{ 'List View' | translate }}
-                                    </button>
-                                </li>
-                                <li ng-if="compactViewEnabled">
-                                    <button ng-click="switchView('compact-configurable')">
-                                        <i class="icon-unordered-list"></i>{{ 'Compact View' | translate }}
-                                    </button>
-                                </li>
-                                <li ng-if="!monitoring.singleGroup && type === 'monitoring' && monitoring.hasSwimlaneView">
-                                    <button ng-click="switchView('swimlane2', true)">
-                                        <i class="icon-kanban-view"></i>{{ 'Swimlane View' | translate }}
-                                    </button>
-                                </li>
-                                <li>
-                                    <button ng-click="switchView('photogrid')">
-                                        <i class="icon-grid-view"></i>{{ 'Photo Grid View' | translate }}
+                                <li ng-repeat="availableView in availableViews">
+                                    <button ng-click="switchView(availableView.id)">
+                                        <i class="icon-{{availableView.icon}}"></i>{{availableView.label}}
                                     </button>
                                 </li>
                             </ul>

scripts/core/superdesk-api.d.ts

@@ -1562,7 +1562,7 @@ declare module 'superdesk-api' {
         desk_metadata?: {[key: string]: any};
         content_profiles: {[key: IContentProfile['_id']]: any};
         desk_language?: string;
-        monitoring_default_view?: 'list' | 'list-compact' | 'swimlane' | 'photogrid';
+        monitoring_default_view?: string;
         default_content_profile: string;
         default_content_template: string;
         slack_channel_name?: string;