[Monitor Dashboard | Trunk]: Change functions for default profile

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57960 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app.component.html

@@ -23,7 +23,7 @@
   <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems"
   ></dashboard-sidebar>
   <div *ngIf="hasSidebar" id="hide_controls">
-    <div id="toggle" (click)="toggleOpen($event)">
+    <div id="toggle" [class.sidebar_main_open]="open" (click)="toggleOpen($event)">
         <i class="material-icons">play_circle_filled</i>
         <span *ngIf="open" class="uk-margin-small-left">Hide Controls</span>
     </div>

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -175,6 +175,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
               this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias)
           )]
       ),
+      isDefault: this.fb.control(isDefault),
       isPublic: this.fb.control(this.stakeholder.isPublic),
       isActive: this.fb.control(this.stakeholder.isActive),
       type: this.fb.control(this.stakeholder.type, Validators.required),
@@ -207,15 +208,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   
   public saveStakeholder() {
     if (this.index === -1) {
-      if (this.stakeholderFb.value.defaultId) {
-        // TODO set defaultId from default profile
-        // this.stakeholderFb.setValue(this.stakeholderUtils.
-        // createFunderFromDefaultProfile(this.stakeholderFb.value,
-        //   this.defaultStakeholders.find( value => value.type === this.stakeholderFb.value.type).topics));
-        this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value, StakeholderCreator.createFunderDefaultProfile().topics));
-      }/* else {
-                this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile());
-            }*/
+      if (!this.stakeholderFb.value.isDefault) {
+        let stakeholder = this.defaultStakeholders.find(value => value.type === this.stakeholderFb.value.type);
+        this.stakeholderFb.get('defaultId').setValue(stakeholder._id);
+        this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
+          stakeholder.topics));
+       /* this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value,
+          StakeholderCreator.createFunderDefaultProfile().topics));*/
+      } else {
+        this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile());
+      }
       this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => {
         if (stakeholder.defaultId === null) {
           this.defaultStakeholders.push(stakeholder);

src/app/topic/indicators.component.html

@@ -51,10 +51,10 @@
       </div>
     </div>
     <h4 class="uk-text-bold">Number Indicators</h4>
-    <div [class.max-width-large]="!grid" [id]="number._id"
-         class="uk-grid-match uk-grid-small"
-         *ngFor="let number of displayNumbers; let i = index"
-         uk-sortable="group: number" uk-grid>
+    <section [class.max-width-large]="!grid" [id]="number._id"
+             class="uk-grid-match uk-grid-small"
+             *ngFor="let number of displayNumbers; let i = index"
+             uk-sortable="group: number" uk-grid>
       <div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
         <h4>{{number.title}}</h4>
       </div>
@@ -63,19 +63,22 @@
              [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
              [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
              [class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
+             [class.disable-sortable]="!canReorder"
              [class.uk-sortable-nodrag]="!canReorder">
           <div class="md-card" [class.md-card-hover]="canReorder">
             <div class="md-card-toolbar">
               <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
-                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                <ng-template [ngIf]="!grid">
+                <div class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
                   {{(indicator.isPublic) ? 'Public' : 'Private'}}
-                </span>
-                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                </div>
+                <div class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right"
                      [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
                   {{(indicator.isActive) ? 'Active' : 'Inactive'}}
-                </span>
+                </div>
+                </ng-template>
                 <div class="md-card-dropdown uk-inline">
                   <i class="md-icon material-icons">more_vert</i>
                   <div uk-dropdown="mode: click; pos: bottom-right"
@@ -118,127 +121,135 @@
           </div>
         </div>
       </ng-template>
-    </div>
+    </section>
     <h4 class="uk-text-bold">Chart Indicators</h4>
-    <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
-      <div [class.max-width-large]="!grid" [id]="'chart-' + chart._id"
-           class="uk-grid-match uk-grid-small uk-grid"
-           uk-sortable="group: chart" uk-grid>
-        <div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
-          <h4>{{chart.title}}</h4>
-        </div>
-        <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-          <div *ngIf="indicator" [id]="indicator._id"
-               [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
-               [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
-               [class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
-               [class.uk-sortable-nodrag]="!canReorder">
-            <div class="md-card" [class.md-card-hover]="canReorder">
-              <div class="md-card-toolbar">
-                <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
-                  <ng-template [ngIf]="!grid">
-                  <span *ngFor="let indicatorPath of indicator.indicatorPaths"
-                        class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
-                    <i class="material-icons md-24 uk-margin-small-right">
-                      {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
-                    </i>
-                    {{indicatorPath.type + ' Chart'}}
-                  </span>
-                  </ng-template>
-                  <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
-                  <i class="material-icons md-24 uk-margin-small-right">
-                    {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
-                  </i>
-                    {{(indicator.isPublic) ? 'Public' : 'Private'}}
-                </span>
-                  <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
-                  <i class="material-icons md-24 uk-margin-small-right"
-                     [class.md-color-green-300]="indicator.isActive">
-                    {{indicatorUtils.isActiveIcon}}
-                  </i>
-                    {{(indicator.isActive) ? 'Active' : 'Inactive'}}
-                </span>
-                  <div class="md-card-dropdown uk-inline">
-                    <i class="md-icon material-icons">more_vert</i>
-                    <div uk-dropdown="mode: click; pos: bottom-right"
-                         class="uk-padding-remove-horizontal">
-                      <ul class="uk-nav uk-dropdown-nav">
-                        <li><a (click)="editChartIndicatorOpen(chart, indicator._id)">Edit</a></li>
-                        <li><a (click)="toggleIndicatorStatus(chart._id, indicator)">
-                          {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
-                        </li>
-                        <li><a (click)="toggleIndicatorAccess(chart._id, indicator)">
-                          {{indicator.isPublic ? 'Unpublish' : 'Publish'}}</a>
-                        </li>
-                        <hr class="uk-nav-divider">
-                        <li><a (click)="deleteIndicatorOpen(chart, indicator._id)">Delete</a></li>
-                      </ul>
+    <div>
+      <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
+        <section [class.max-width-large]="!grid" [id]="'chart-' + chart._id"
+                 class="uk-grid-match uk-grid-small uk-grid"
+                 uk-sortable="group: chart" uk-grid>
+          <div class="tools disable-sortable uk-sortable-nodrag">
+            <div class="md-btn-group">
+              <button class="md-btn md-btn-primary md-icon"><i class="material-icons">add</i></button>
+            </div>
+          </div>
+          <div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
+            <h4>{{chart.title}}</h4>
+          </div>
+          <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
+            <div *ngIf="indicator" [id]="indicator._id"
+                 [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
+                 [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
+                 [class.uk-width-1-1@m]="!grid || indicator.width === 'large'"
+                 [class.disable-sortable]="!canReorder"
+                 [class.uk-sortable-nodrag]="!canReorder">
+              <div class="md-card" [class.md-card-hover]="canReorder">
+                <div class="md-card-toolbar">
+                  <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+                    <ng-template [ngIf]="!grid">
+                      <div *ngFor="let indicatorPath of indicator.indicatorPaths"
+                           class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
+                        <i class="material-icons md-24 uk-margin-small-right">
+                          {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
+                        </i>
+                        {{indicatorPath.type + ' Chart'}}
+                      </div>
+                    </ng-template>
+                    <div *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                      <i class="material-icons md-24 uk-margin-small-right">
+                        {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
+                      </i>
+                      {{(indicator.isPublic) ? 'Public' : 'Private'}}
+                    </div>
+                    <div *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                      <i class="material-icons md-24 uk-margin-small-right"
+                         [class.md-color-green-300]="indicator.isActive">
+                        {{indicatorUtils.isActiveIcon}}
+                      </i>
+                      {{(indicator.isActive) ? 'Active' : 'Inactive'}}
+                    </div>
+                    <div class="md-card-dropdown uk-inline">
+                      <i class="md-icon material-icons">more_vert</i>
+                      <div uk-dropdown="mode: click; pos: bottom-right"
+                           class="uk-padding-remove-horizontal">
+                        <ul class="uk-nav uk-dropdown-nav">
+                          <li><a (click)="editChartIndicatorOpen(chart, indicator._id)">Edit</a></li>
+                          <li><a (click)="toggleIndicatorStatus(chart._id, indicator)">
+                            {{indicator.isActive ? 'Deactivate' : 'Activate'}}</a>
+                          </li>
+                          <li><a (click)="toggleIndicatorAccess(chart._id, indicator)">
+                            {{indicator.isPublic ? 'Unpublish' : 'Publish'}}</a>
+                          </li>
+                          <hr class="uk-nav-divider">
+                          <li><a (click)="deleteIndicatorOpen(chart, indicator._id)">Delete</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="md-card-toolbar-heading-text">
+                    {{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters['title']}}
+                  </div>
+                </div>
+                <div *ngIf="grid" class="md-card-content">
+                  <div class="uk-flex uk-flex-center" uk-grid>
+                    <div class="uk-width-1-1">
+                      {{indicator.description ? indicator.description : ''}}
+                    </div>
+                    <div class="uk-width-1-3 uk-text-center"
+                         [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
+                      <div *ngFor="let indicatorPath of indicator.indicatorPaths">
+                        <i class="material-icons md-24">
+                          {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
+                        </i>
+                        <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
+                      </div>
+                    </div>
+                    <div class="uk-width-1-3 uk-text-center">
+                      <i class="material-icons md-24">
+                        {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
+                      </i>
+                      <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
+                    </div>
+                    <div class="uk-width-1-3 uk-text-center">
+                      <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
+                        {{indicatorUtils.isActiveIcon}}
+                      </i>
+                      <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
                     </div>
                   </div>
                 </div>
-                <div class="md-card-toolbar-heading-text">
-                  {{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters['title']}}
+              </div>
+            </div>
+          </ng-template>
+          <div class="disable-sortable uk-sortable-nodrag"
+               [class.uk-width-1-3@m]="grid"
+               [class.uk-width-1-1@m]="!grid">
+            <div class="md-card clickable" (click)="editChartIndicatorOpen(chart)">
+              <div class="md-card-toolbar">
+                <div class="md-card-toolbar-heading-text"
+                     [class.uk-flex-middle]="!grid"
+                     [class.uk-flex]="!grid"
+                     [class.uk-flex-center]="!grid">
+                  <i *ngIf="!grid" class="material-icons md-36">add</i>
+                  <span>Create a custom Indicator</span>
                 </div>
               </div>
               <div *ngIf="grid" class="md-card-content">
-                <div class="uk-flex uk-flex-center" uk-grid>
+                <div uk-grid>
                   <div class="uk-width-1-1">
-                    {{indicator.description ? indicator.description : ''}}
+                    Use our advance tool to create a custom Indicator that suit the needs of your funding
+                    KPI's.
                   </div>
-                  <div class="uk-width-1-3 uk-text-center"
-                       [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
-                    <div *ngFor="let indicatorPath of indicator.indicatorPaths">
-                      <i class="material-icons md-24">
-                        {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
-                      </i>
-                      <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
-                    </div>
-                  </div>
-                  <div class="uk-width-1-3 uk-text-center">
-                    <i class="material-icons md-24">
-                      {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
-                    </i>
-                    <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
-                  </div>
-                  <div class="uk-width-1-3 uk-text-center">
-                    <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
-                      {{indicatorUtils.isActiveIcon}}
-                    </i>
-                    <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
+                  <div class="uk-width-1-1 uk-flex uk-flex-center">
+                    <i class="material-icons md-48">add</i>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </ng-template>
-        <div class="disable-sortable uk-sortable-nodrag"
-             [class.uk-width-1-3@m]="grid"
-             [class.uk-width-1-1@m]="!grid">
-          <div class="md-card clickable" (click)="editChartIndicatorOpen(chart)">
-            <div class="md-card-toolbar">
-              <div class="md-card-toolbar-heading-text"
-                   [class.uk-flex-middle]="!grid"
-                   [class.uk-flex]="!grid"
-                   [class.uk-flex-center]="!grid">
-                <i *ngIf="!grid" class="material-icons md-36">add</i>
-                <span>Create a custom Indicator</span>
-              </div>
-            </div>
-            <div *ngIf="grid" class="md-card-content">
-              <div uk-grid>
-                <div class="uk-width-1-1">
-                  Use our advance tool to create a custom Indicator that suit the needs of your funding
-                  KPI's.
-                </div>
-                <div class="uk-width-1-1 uk-flex uk-flex-center">
-                  <i class="material-icons md-48">add</i>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ng-template>
+        </section>
+      </ng-template>
+    </div>
   </div>
 </div>
 <modal-alert #editModal

src/app/utils/entities/stakeholder.ts

@@ -364,16 +364,16 @@ export class Section {
   _id: string;
   title: string;
   defaultId: string;
-  stakeholderId: string;
+  stakeholderAlias: string;
   type: IndicatorType;
   indicators: Indicator[];
   
-  constructor(type: IndicatorType, title: string = null, defaultId: string = null, stakeholderId: string = null) {
+  constructor(type: IndicatorType, title: string = null, defaultId: string = null, stakeholderAlias: string = null) {
     this._id = null;
     this.title = title;
     this.type = type;
     this.defaultId = defaultId;
-    this.stakeholderId = stakeholderId;
+    this.stakeholderAlias = stakeholderAlias;
     this.indicators = [];
   }
 }

src/app/utils/indicator-utils.ts

@@ -35,21 +35,29 @@ export class StakeholderUtils {
   public createFunderFromDefaultProfile(funder: Stakeholder, defaultTopics: Topic[]): Stakeholder {
     funder.topics = defaultTopics;
     for (let topic of funder.topics) {
+      console.log('id:' + topic._id);
+      topic.defaultId = topic._id;
       topic._id = null;
+      console.log('defaultId:' + topic.defaultId);
       for (let category of topic.categories) {
+        category.defaultId = category._id;
         category._id = null;
         let subTokeep: SubCategory[] = [];
         for (let subCategory of category.subCategories) {
+          subCategory.defaultId = subCategory._id;
           subCategory._id = null;
-          if (subCategory.recommendedFor.length == 0 || subCategory.recommendedFor.indexOf(funder.index_id) != -1) {
+          if (!subCategory.recommendedFor || subCategory.recommendedFor.length == 0 || subCategory.recommendedFor.indexOf(funder.index_id) != -1) {
             subTokeep.push(subCategory);
           }
           for (let section of subCategory.charts) {
             let chartsTokeep: Indicator[] = [];
+            section.defaultId = section._id;
+            section.stakeholderAlias = funder.alias;
             section._id = null;
             for (let indicator of section.indicators) {
+              indicator.defaultId = indicator._id;
               indicator._id = null;
-              if (indicator.recommendedFor.length == 0 || indicator.recommendedFor.indexOf(funder.index_id) != -1) {
+              if (!indicator.recommendedFor || indicator.recommendedFor.length == 0 || indicator.recommendedFor.indexOf(funder.index_id) != -1) {
                 chartsTokeep.push(indicator);
               }
               for (let indicatorPath of indicator.indicatorPaths) {
@@ -69,8 +77,11 @@ export class StakeholderUtils {
             section.indicators = chartsTokeep;
           }
           for (let section of subCategory.numbers) {
+            section.defaultId = section._id;
+            section.stakeholderAlias = funder.alias;
             section._id = null;
             for(let indicator of section.indicators) {
+              indicator.defaultId = indicator._id;
               indicator._id = null;
               for (let indicatorPath of indicator.indicatorPaths) {
                 indicatorPath.url = indicatorPath.url.replace("_funder_id_", funder.index_id);

src/assets/env-properties.json

@@ -37,9 +37,9 @@
 
   "piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
   "piwikSiteId" : "80",
-  "loginUrl" :"http://dl170.madgik.di.uoa.gr:8180/dnet-login/openid_connect_login",
+  "loginUrl" :"http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
 
-  "userInfoUrl" : "http://dl170.madgik.di.uoa.gr:8180/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
+  "userInfoUrl" : "http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
 
   "logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
 

src/assets/theme-assets/dashboard-custom.css

@@ -75,15 +75,22 @@ html .dashboard {
   width: max-content;
 }
 
-.dashboard #hide_controls #toggle:hover {
+.dashboard #hide_controls #toggle:hover, .dashboard #hide_controls #toggle:not(.sidebar_main_open) {
   color: #0d47a1;
 }
 
-.dashboard #hide_controls:hover #toggle:hover .material-icons  {
+.dashboard #hide_controls:hover #toggle:hover .material-icons,
+.dashboard #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
   color: #0d47a1;
   border: #0d47a1 solid 1px;
 }
 
+.dashboard #hide_controls #toggle * {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
 .dashboard #hide_controls #toggle .material-icons {
   transform: rotateY(0deg);
   transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -294,6 +301,42 @@ body.dashboard {
   cursor: move;
 }
 
+.dashboard section {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 10px;
+  border: rgba(0, 0, 0, 0) solid 1px;
+  position: relative;
+}
+
+.dashboard section .tools {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  display: none;
+}
+
+.dashboard section:hover {
+  border: rgb(28, 169, 213) solid 1px;
+}
+
+.dashboard section:hover .tools {
+  display: block;
+}
+
+.dashboard section:hover .tools .md-btn-group .md-btn {
+  border-top-left-radius: 100%;
+  border-bottom-left-radius: 0;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.dashboard section:hover .tools .md-btn-group .md-btn:first-child {
+  border-top-left-radius: 100%;
+  border-bottom-left-radius: 0;
+}
+
 .dashboard .uk-sortable-drag .md-card.md-card-hover {
   -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);