#2613 added info icon and dialog to data packages, analysis packages …

…and concept mentions of ELSST
dzhw · Sep 26, 2024 · 89a89a0 · 89a89a0
1 parent 520372a
commit 89a89a0
Show file tree

Hide file tree

Showing 15 changed files with 247 additions and 42 deletions.
diff --git a/...tend/src/app/legacy/analysispackagemanagement/views/analysis-package-detail.controller.js b/...tend/src/app/legacy/analysispackagemanagement/views/analysis-package-detail.controller.js
@@ -35,6 +35,7 @@ angular.module('metadatamanagementApp')
   'blockUI',
   '$mdSidenav',
   'ContainsOnlyQualitativeDataChecker',
+  '$mdDialog',
     function(entity,
              MessageBus,
              PageMetadataService,
@@ -48,7 +49,7 @@ angular.module('metadatamanagementApp')
              ProjectUpdateAccessService, $scope, ScriptAttachmentResource,
              $timeout, $document,
              OutdatedVersionNotifier, AnalysisPackageSearchService, $log,
-             blockUI, $mdSidenav, ContainsOnlyQualitativeDataChecker) {
+             blockUI, $mdSidenav, ContainsOnlyQualitativeDataChecker, $mdDialog) {
       blockUI.start();
       SearchResultNavigatorService
         .setSearchIndex($stateParams['search-result-index']);
@@ -311,5 +312,20 @@ angular.module('metadatamanagementApp')
         }
         return true;
       };
+
+      /**
+       * Displays an info modal.
+       * @param {*} $event the click event
+       */
+      ctrl.infoModal = function( $event) {
+        $mdDialog.show({
+          controller: 'dataPackageInfoController',
+          templateUrl: 'scripts/datapackagemanagement/components/elsst-info.html.tmpl',
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          fullscreen: true,
+          targetEvent: $event
+        })
+      };
     }]);
 
diff --git a/...frontend/src/app/legacy/analysispackagemanagement/views/analysis-package-detail.html.tmpl b/...frontend/src/app/legacy/analysispackagemanagement/views/analysis-package-detail.html.tmpl
@@ -32,23 +32,36 @@
           </div>
           <!-- ELSST tags -->
           <div class="fdz-tag-link-container" ng-if="ctrl.analysisPackageTagsElsst.length > 0">
-            <h5>{{'analysis-package-management.detail.label.tagsElsst' | translate}}: </h5>
-            <a ng-repeat="tagElsst in ctrl.analysisPackageTagsElsst"
-               ng-if="ctrl.isAuthenticated()"
-               ui-sref="search({type: 'analysis_packages', 'query': tagElsst.prefLabel})">
-              <span>{{tagElsst.prefLabel}}{{!$last?',&nbsp;':''}}</span>
-              <md-tooltip md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
-                {{'analysis-package-management.detail.tagElsst-tooltip' | translate}}
-              </md-tooltip>
-            </a>
-            <a ng-repeat="tagElsst in ctrl.analysisPackageTagsElsst"
-               ng-if="!ctrl.isAuthenticated()"
-               ui-sref="search({type: 'analysis_packages', 'tags': tagElsst.prefLabel})">
-              <span>{{tagElsst.prefLabel}}{{!$last?',&nbsp;':''}}</span>
-              <md-tooltip md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
-                {{'analysis-package-management.detail.tagElsst-tooltip' | translate}}
-              </md-tooltip>
-            </a>
+            <div style="display: flex; flex-direction: row; justify-items: flex-start; align-items: first baseline;">
+              <div style="width: 165px;">
+                <h5>{{'analysis-package-management.detail.label.tagsElsst' | translate}}</h5>
+                <md-button class="md-primary md-icon-button" style="margin-left: -10px; padding: 2px 0px 0px 0px; margin-right: -5px; width: fit-content; padding-bottom: 0%;" ng-click="ctrl.infoModal($event)">
+                  <md-icon style="margin: 0px; font-size: 20px">info</md-icon>
+                  <md-tooltip md-direction="top" md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+                    {{'data-package-management.detail.elsst-general-tooltip' | translate}}
+                  </md-tooltip>
+                </md-button>
+                <h5>: </h5>
+              </div>
+              <div>
+                <a ng-repeat="tagElsst in ctrl.analysisPackageTagsElsst"
+                  ng-if="ctrl.isAuthenticated()"
+                  ui-sref="search({type: 'analysis_packages', 'query': tagElsst.prefLabel})">
+                  <span>{{tagElsst.prefLabel}}{{!$last?',&nbsp;':''}}</span>
+                  <md-tooltip md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+                    {{'analysis-package-management.detail.tagElsst-tooltip' | translate}}
+                  </md-tooltip>
+                </a>
+                <a ng-repeat="tagElsst in ctrl.analysisPackageTagsElsst"
+                  ng-if="!ctrl.isAuthenticated()"
+                  ui-sref="search({type: 'analysis_packages', 'tags': tagElsst.prefLabel})">
+                  <span>{{tagElsst.prefLabel}}{{!$last?',&nbsp;':''}}</span>
+                  <md-tooltip md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+                    {{'analysis-package-management.detail.tagElsst-tooltip' | translate}}
+                  </md-tooltip>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
         <md-divider></md-divider>

diff --git a/.../app/legacy/analysispackagemanagement/views/analysis-package-edit-or-create.controller.js b/.../app/legacy/analysispackagemanagement/views/analysis-package-edit-or-create.controller.js
@@ -31,6 +31,7 @@ angular.module('metadatamanagementApp')
   'AnalysisPackageAttachmentVersionsResource',
   'ChoosePreviousVersionService',
   'AnalysisPackageVersionsResource',
+  '$mdDialog',
     function(entity, PageMetadataService, $document, $timeout,
              $state, BreadcrumbService, Principal, SimpleMessageToastService,
              CurrentProjectService, AnalysisPackageIdBuilderService,
@@ -42,7 +43,7 @@ angular.module('metadatamanagementApp')
              ProjectUpdateAccessService,
              AttachmentDialogService, AnalysisPackageAttachmentUploadService,
              AnalysisPackageAttachmentVersionsResource,
-             ChoosePreviousVersionService, AnalysisPackageVersionsResource) {
+             ChoosePreviousVersionService, AnalysisPackageVersionsResource, $mdDialog) {
 
       var ctrl = this;
       ctrl.currentInstitutions = [];
@@ -809,6 +810,21 @@ angular.module('metadatamanagementApp')
         }
       };
 
+      /**
+       * Displays an info modal.
+       * @param {*} $event the click event
+       */
+      ctrl.infoModal = function( $event) {
+        $mdDialog.show({
+          controller: 'dataPackageInfoController',
+          templateUrl: 'scripts/datapackagemanagement/components/elsst-info.html.tmpl',
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          fullscreen: true,
+          targetEvent: $event
+        });
+      };
+
       init();
     }]);
 
diff --git a/.../src/app/legacy/analysispackagemanagement/views/analysis-package-edit-or-create.html.tmpl b/.../src/app/legacy/analysispackagemanagement/views/analysis-package-edit-or-create.html.tmpl
@@ -440,6 +440,12 @@
           <md-card-header-text>
             <h2 class="md-title">{{'analysis-package-management.edit.label.tagsElsst' | translate }}</h2>
           </md-card-header-text>
+          <md-button class="md-primary md-icon-button" style="margin-left: -10px; margin-right: -5px; width: fit-content; padding-top: 0px;" ng-click="ctrl.infoModal($event)">
+            <md-icon style="margin: 0px;">info</md-icon>
+            <md-tooltip md-direction="top" md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+              {{'data-package-management.detail.elsst-general-tooltip' | translate}}
+            </md-tooltip>
+          </md-button>
         </md-card-header>
         <md-divider></md-divider>
         <md-card-content>

diff --git a/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-detail.controller.js b/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-detail.controller.js
@@ -14,10 +14,11 @@ angular.module('metadatamanagementApp')
   '$log',
   'blockUI',
   '$mdSidenav',
+  '$mdDialog',
     function(entity, PageMetadataService, LanguageService,
              $state, BreadcrumbService, Principal,
              ConceptAttachmentResource, SearchResultNavigatorService,
-             $stateParams, $log, blockUI, $mdSidenav) {
+             $stateParams, $log, blockUI, $mdSidenav, $mdDialog) {
       blockUI.start();
       SearchResultNavigatorService
         .setSearchIndex($stateParams['search-result-index']);
@@ -95,5 +96,20 @@ angular.module('metadatamanagementApp')
       ctrl.toggleSidenav = function() {
         $mdSidenav('SideNavBar').toggle();
       };
+
+      /**
+       * Displays an info modal.
+       * @param {*} $event the click event
+       */
+      ctrl.infoModal = function( $event) {
+        $mdDialog.show({
+          controller: 'dataPackageInfoController',
+          templateUrl: 'scripts/datapackagemanagement/components/elsst-info.html.tmpl',
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          fullscreen: true,
+          targetEvent: $event
+        });
+      };
     }]);
 
diff --git a/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-detail.html.tmpl b/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-detail.html.tmpl
@@ -31,6 +31,38 @@
           </div>
           <!-- ELSST tags -->
           <div class="fdz-tag-link-container" ng-if="ctrl.conceptTagsElsst.length > 0">
+            <div style="display: flex; flex-direction: row; justify-items: flex-start; align-items: first baseline;">
+              <div style="width: 165px;">
+                <h5>{{'data-package-management.detail.label.tagsElsst' | translate}}</h5>
+                <md-button class="md-primary md-icon-button" style="margin-left: -10px; padding: 2px 0px 0px 0px; margin-right: -5px; width: fit-content; padding-bottom: 0%;" ng-click="ctrl.infoModal($event)">
+                  <md-icon style="margin: 0px; font-size: 20px">info</md-icon>
+                  <md-tooltip md-direction="top" md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+                    {{'data-package-management.detail.elsst-general-tooltip' | translate}}
+                  </md-tooltip>
+                </md-button>
+                <h5>: </h5>
+              </div>
+              <div>
+                <a ng-repeat="tagElsst in ctrl.conceptTagsElsst"
+                  ng-if="ctrl.isAuthenticated()"
+                  ui-sref="search({type: 'concepts', 'query': tagElsst.prefLabel})">
+                  <span>{{tagElsst.prefLabel}}{{!$last?',&nbsp;':''}}</span>
+                  <md-tooltip md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+                    {{'data-package-management.detail.tagElsst-tooltip' | translate}}
+                  </md-tooltip>
+                </a>
+                <a ng-repeat="tagElsst in ctrl.conceptTagsElsst"
+                  ng-if="!ctrl.isAuthenticated()"
+                  ui-sref="search({type: 'data_packages', 'query': tagElsst.prefLabel})" rel="nofollow">
+                  <span>{{tagElsst.prefLabel}}{{!$last?',&nbsp;':''}}</span>
+                  <md-tooltip md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+                    {{'data-package-management.detail.tagElsst-tooltip' | translate}}
+                  </md-tooltip>
+                </a>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="fdz-tag-link-container" ng-if="ctrl.conceptTagsElsst.length > 0">
             <h5>{{'data-package-management.detail.label.tagsElsst' | translate}}: </h5>
             <a ng-repeat="tagElsst in ctrl.conceptTagsElsst"
                ng-if="ctrl.isAuthenticated()"
@@ -48,7 +80,7 @@
                 {{'data-package-management.detail.tagElsst-tooltip' | translate}}
               </md-tooltip>
             </a>
-          </div>
+          </div> -->
         </div>
         <md-divider></md-divider>
         <fdz-detail

diff --git a/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-edit-or-create.controller.js b/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-edit-or-create.controller.js
@@ -25,14 +25,15 @@ angular.module('metadatamanagementApp')
   'ConceptAttachmentVersionsResource',
   'ChoosePreviousVersionService',
   'ConceptVersionsResource',
+  '$mdDialog',
     function(entity, PageMetadataService, $timeout,
       $state, BreadcrumbService, Principal, SimpleMessageToastService,
       ConceptResource, ConceptSearchService, $scope, $q,
       ElasticSearchAdminService, ElsstSearchService, $transitions,
       CommonDialogsService, LanguageService, ConceptAttachmentUploadService,
       ConceptAttachmentResource, AttachmentDialogService,
       ConceptAttachmentVersionsResource, ChoosePreviousVersionService,
-      ConceptVersionsResource) {
+      ConceptVersionsResource, $mdDialog) {
 
       var ctrl = this;
 
@@ -409,6 +410,21 @@ angular.module('metadatamanagementApp')
         }
       };
 
+      /**
+       * Displays an info modal.
+       * @param {*} $event the click event
+       */
+      ctrl.infoModal = function( $event) {
+        $mdDialog.show({
+          controller: 'dataPackageInfoController',
+          templateUrl: 'scripts/datapackagemanagement/components/elsst-info.html.tmpl',
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          fullscreen: true,
+          targetEvent: $event
+        });
+      };
+
       init();
     }]);
 
diff --git a/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-edit-or-create.html.tmpl b/mdm-frontend/src/app/legacy/conceptmanagement/views/concept-edit-or-create.html.tmpl
@@ -156,6 +156,12 @@
           <md-card-header-text>
             <h2 class="md-title">{{'concept-management.edit.label.tagsElsst' | translate }}</h2>
           </md-card-header-text>
+          <md-button class="md-primary md-icon-button" style="margin-left: -10px; margin-right: -5px; width: fit-content; padding-top: 0px;" ng-click="ctrl.infoModal($event)">
+            <md-icon style="margin: 0px;">info</md-icon>
+            <md-tooltip md-direction="top" md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 100001">
+              {{'data-package-management.detail.elsst-general-tooltip' | translate}}
+            </md-tooltip>
+          </md-button>
         </md-card-header>
         <md-divider></md-divider>
         <md-card-content>

diff --git a/mdm-frontend/src/app/legacy/datapackagemanagement/components/elsst-info.html.tmpl b/mdm-frontend/src/app/legacy/datapackagemanagement/components/elsst-info.html.tmpl
@@ -0,0 +1,29 @@
+<md-dialog aria-label="{{'data-package-management.detail.label.tagsElsst' | translate}}" layout="column" class="ms-flex" flex="50">
+    <md-toolbar>
+        <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
+            <h2 class="fdz-truncate-string">
+                <span>{{'data-package-management.detail.label.tagsElsst' | translate}}</span>
+            </h2>
+            <md-button class="md-icon-button" ng-click="closeDialog()">
+                <md-icon md-font-set="material-icons">clear</md-icon>
+                <md-tooltip md-direction="top" md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 1000001">
+                    {{'shopping-cart.version-info.close-tooltip' | translate }}
+                </md-tooltip>
+            </md-button>
+        </div>
+    </md-toolbar>
+  <md-divider></md-divider>
+  <md-dialog-content layout-padding flex layout="column" class="ms-flex">
+    <span translate="data-package-management.detail.elsst-info"></span>
+  </md-dialog-content>
+
+    </md-dialog-content>
+    <md-dialog-actions layout="row">
+        <md-button class="md-primary" ng-click="closeDialog()">
+            <span>{{'global.entity.action.ok' | translate}}</span>
+            <md-tooltip md-direction="left" md-autohide="true" md-z-index="bowser.mobile || bowser.tablet ? -100 : 1000001">
+                {{'shopping-cart.version-info.close-tooltip' | translate }}
+            </md-tooltip>
+        </md-button>
+    </md-dialog-actions>
+</md-dialog>
diff --git a/mdm-frontend/src/app/legacy/datapackagemanagement/configuration/translations-de.js b/mdm-frontend/src/app/legacy/datapackagemanagement/configuration/translations-de.js
@@ -143,7 +143,9 @@ angular.module('metadatamanagementApp').config([
           'tagElsst-tooltip': 'Klicken, um Datenpakete mit diesem ELSST-Schlagwort zu suchen.',
           'generate-datapackage-overview-tooltip': 'Klicken, um eine Übersicht über dieses Datenpaket als PDF zu erstellen.',
           'overview-generation-started-toast': 'Die Datenpaketübersicht wird jetzt erzeugt. Sie werden per E-Mail benachrichtigt, sobald der Vorgang abgeschlossen ist.',
-          'order-datapackage-tooltip': 'Klicken, um dieses Datenpaket zu bestellen.'
+          'order-datapackage-tooltip': 'Klicken, um dieses Datenpaket zu bestellen.',
+          'elsst-general-tooltip': 'Klicken, um Informationen zu ELSST-Schlagwörtern zu erhalten.',
+          'elsst-info': 'Die Schlagwörter, auf die hier verwiesen werden kann, stammen aus dem European Language Social Science Thesaurus (ELSST) - CESSDA and Service Providers (2023) The European Language Social Science Thesaurus (ELSST) (Version 4). ELSST ist ein breit angelegter, mehrsprachiger Thesaurus für die Sozialwissenschaften. Er ist Eigentum des Consortium of European Social Science Data Archives (CESSDA) und seiner nationalen Dienstleister und wird von diesen herausgegeben. Der Thesaurus besteht aus über 3.300 Konzepten und deckt die wichtigsten sozialwissenschaftlichen Disziplinen ab: Politik, Soziologie, Wirtschaft, Bildung, Recht, Kriminalität, Demografie, Gesundheit, Beschäftigung, Informations- und Kommunikationstechnologie sowie Umweltwissenschaften. ELSST ist unter einer Creative Commons Attribution-ShareAlike 4.0 International License (<a href="http://creativecommons.org/licenses/by-sa/4.0/">http://creativecommons.org/licenses/by-sa/4.0/</a>) lizenziert. Weitere Informationen: <a href="https://elsst.cessda.eu/">https://elsst.cessda.eu/</a>'
         },
         'log-messages': {
           'data-package': {

diff --git a/mdm-frontend/src/app/legacy/datapackagemanagement/configuration/translations-en.js b/mdm-frontend/src/app/legacy/datapackagemanagement/configuration/translations-en.js
@@ -40,6 +40,7 @@ angular.module('metadatamanagementApp').config([
             'title': 'Title',
             'dataLanguages': 'Data available in',
             'tags': 'Tags',
+            'tagsElsst': 'ELSST Tags',
             'approvedUsageList': 'Allowed use cases',
             'approvedUsage': 'Special restrictions for the data use',
             'additional-links': 'Additional Links',
@@ -142,7 +143,9 @@ angular.module('metadatamanagementApp').config([
           'tagElsst-tooltip': 'Click to search for data packages with this ELSST tag',
           'generate-datapackage-overview-tooltip': 'Click to generate an overview of this data package as a PDF.',
           'overview-generation-started-toast': 'The data package overview is now being generated. You will be notified by e-mail as soon as the process is completed.',
-          'order-datapackage-tooltip': 'Click to order this data package.'
+          'order-datapackage-tooltip': 'Click to order this data package.',
+          'elsst-general-tooltip': 'Click to see information about ELSST tags.',
+          'elsst-info': 'The tags that can be referenced here are derived from the European Language Social Science Thesaurus (ELSST) - CESSDA and Service Providers (2023) The European Language Social Science Thesaurus (ELSST) (Version 4). ELSST is a broad-based, multilingual thesaurus for the social sciences. It is owned and published by the Consortium of European Social Science Data Archives (CESSDA) and its national Service Providers. The thesaurus consists of over 3,300 concepts and covers the core social science disciplines: politics, sociology, economics, education, law, crime, demography, health, employment, information and communication technology, and environmental science. ELSST is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License (<a href="http://creativecommons.org/licenses/by-sa/4.0/">http://creativecommons.org/licenses/by-sa/4.0/</a>). For more information: <a href="https://elsst.cessda.eu/">https://elsst.cessda.eu/</a>'
         },
         'log-messages': {
           'data-package': {

diff --git a/mdm-frontend/src/app/legacy/datapackagemanagement/views/data-package-detail.controller.js b/mdm-frontend/src/app/legacy/datapackagemanagement/views/data-package-detail.controller.js
@@ -306,5 +306,20 @@ angular.module('metadatamanagementApp')
         }
         return true;
       }
+
+      /**
+       * Displays an info modal.
+       * @param {*} $event the click event
+       */
+      ctrl.infoModal = function( $event) {
+        $mdDialog.show({
+          controller: 'dataPackageInfoController',
+          templateUrl: 'scripts/datapackagemanagement/components/elsst-info.html.tmpl',
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          fullscreen: true,
+          targetEvent: $event
+        });
+      };
     }]);