From 753cee99bf3f43185edfb69276bff319f6c3fc77 Mon Sep 17 00:00:00 2001 From: Konstantinos Triantafyllou Date: Fri, 10 Jan 2020 14:20:42 +0000 Subject: [PATCH] [Monitor Dashboard | Trunk]: Close dropdowns on selection click. Fix filters on indicators. git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57969 d315682c-612b-4755-9ff5-7f18f6832af3 --- .../manageStakeholders.component.html | 14 +-- .../manageStakeholders.component.ts | 11 ++- .../stakeholder/stakeholder.component.html | 10 +- src/app/stakeholder/stakeholder.component.ts | 4 + src/app/topic/indicators.component.html | 47 +++++---- src/app/topic/indicators.component.ts | 56 ++++++----- src/app/topic/topic.component.html | 30 +++--- src/app/topic/topic.component.ts | 4 + src/assets/theme-assets/dashboard-custom.css | 97 +++++++++++-------- 9 files changed, 162 insertions(+), 111 deletions(-) diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html index 38ea610..4bc85e3 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.html +++ b/src/app/manageStakeholders/manageStakeholders.component.html @@ -52,13 +52,12 @@
more_vert -
+
    -
  • Edit +
  • Edit
  • Delete + (click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete
@@ -131,13 +130,13 @@
more_vert -
+
  • Edit + (click)="$event.stopPropagation();editStakeholder(stakeholder);hide(element);$event.preventDefault()">Edit
  • Delete + (click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete
@@ -203,6 +202,7 @@ label="Alias">
+
diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts index 45baa89..8f40fc4 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.ts +++ b/src/app/manageStakeholders/manageStakeholders.component.ts @@ -10,6 +10,8 @@ import {AlertModal} from "../openaireLibrary/utils/modal/alert"; import {StakeholderCreator} from "../utils/entities/stakeholderCreator"; import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component"; +declare var UIkit; + @Component({ selector: 'home', templateUrl: "./manageStakeholders.component.html" @@ -81,6 +83,10 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { }); } + hide(element: any) { + UIkit.dropdown(element).hide(); + } + public changeGrid(value) { this.grid = value; } @@ -217,7 +223,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { } else { this.stakeholderFb.setValue(StakeholderCreator.createFunderDefaultProfile(this.stakeholderFb.value)); } - this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { + this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, + this.stakeholderFb.value).subscribe(stakeholder => { if (stakeholder.defaultId === null) { this.defaultStakeholders.push(stakeholder); } else { @@ -227,7 +234,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { } else { this.stakeholderFb.get('type').enable(); this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { - if (stakeholder.isDefaultProfile) { + if (stakeholder.defaultId == null) { this.defaultStakeholders[this.index] = stakeholder; } else { this.stakeholders[this.index] = stakeholder; diff --git a/src/app/stakeholder/stakeholder.component.html b/src/app/stakeholder/stakeholder.component.html index 60d197b..74efd50 100644 --- a/src/app/stakeholder/stakeholder.component.html +++ b/src/app/stakeholder/stakeholder.component.html @@ -37,18 +37,18 @@
more_vert -
diff --git a/src/app/stakeholder/stakeholder.component.ts b/src/app/stakeholder/stakeholder.component.ts index 1b8e483..7574dea 100644 --- a/src/app/stakeholder/stakeholder.component.ts +++ b/src/app/stakeholder/stakeholder.component.ts @@ -82,6 +82,10 @@ export class StakeholderComponent implements OnInit, OnDestroy, IDeactivateCompo return true; } + hide(element: any) { + UIkit.dropdown(element).hide(); + } + get open(): boolean { return this.layoutService.open; } diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html index dcdd103..afac80f 100644 --- a/src/app/topic/indicators.component.html +++ b/src/app/topic/indicators.component.html @@ -47,12 +47,23 @@
- + + remove_red_eye + Preview + keyboard_arrow_down + +
+ +

Number Indicators

-
@@ -81,18 +92,18 @@
more_vert -
@@ -121,16 +132,18 @@
-
+

Chart Indicators

-
- + + +
@@ -170,18 +183,18 @@
more_vert -
@@ -247,7 +260,7 @@
- + diff --git a/src/app/topic/indicators.component.ts b/src/app/topic/indicators.component.ts index 7384ebc..faf651b 100644 --- a/src/app/topic/indicators.component.ts +++ b/src/app/topic/indicators.component.ts @@ -11,6 +11,7 @@ import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties" import {Subscriber} from "rxjs"; import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component"; +import {Router} from "@angular/router"; declare var UIkit; @@ -30,6 +31,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV public subcategoryIndex: number = 0; @Input() public stakeholder: Stakeholder = null; + public preview: string; public indicatorUtils: IndicatorUtils = new IndicatorUtils(); public indicatorFb: FormGroup; /** @@ -64,6 +66,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV private stakeholderService: StakeholderService, private statisticsService: StatisticsService, private fb: FormBuilder, + private router: Router, private sanitizer: DomSanitizer) { } @@ -126,6 +129,13 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV this.filterCharts(); this.filterNumbers(); } + this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias + + '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias + + '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias; + } + + hide(element: any) { + UIkit.dropdown(element).hide(); } public toggleOpen(event = null) { @@ -163,7 +173,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV filterCharts() { this.displayCharts = this.filterChartType(this.filterPrivacy( - this.filterStatus(this.filterByKeyword(this.charts, this.filters.value.keyword), + this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword), this.filters.value.status), this.filters.value.privacy), this.filters.value.chartType @@ -172,66 +182,62 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV filterNumbers() { this.displayNumbers = this.filterPrivacy(this.filterStatus( - this.filterByKeyword(this.numbers, this.filters.value.keyword), + this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword), this.filters.value.status), this.filters.value.privacy); } onChartTypeChange(value) { - this.displayCharts = this.filterChartType(this.charts, value); + this.displayCharts = this.filterChartType(HelperFunctions.copy(this.charts), value); } onPrivacyChange(value) { - this.displayCharts = this.filterPrivacy(this.charts, value); - this.displayNumbers = this.filterPrivacy(this.numbers, value); + this.displayCharts = this.filterPrivacy(HelperFunctions.copy(this.charts), value); + this.displayNumbers = this.filterPrivacy(HelperFunctions.copy(this.numbers), value); } onStatusChange(value) { - this.displayCharts = this.filterStatus(this.charts, value); - this.displayNumbers = this.filterStatus(this.numbers, value); + this.displayCharts = this.filterStatus(HelperFunctions.copy(this.charts), value); + this.displayNumbers = this.filterStatus(HelperFunctions.copy(this.numbers), value); } onKeywordChange(value) { - this.displayCharts = this.filterByKeyword(this.charts, value); - this.displayNumbers = this.filterByKeyword(this.numbers, value); + this.displayCharts = this.filterByKeyword(HelperFunctions.copy(this.charts), value); + this.displayNumbers = this.filterByKeyword(HelperFunctions.copy(this.numbers), value); } private filterChartType(sections: Section[], value): Section[] { - if (value === 'all') { - return sections; - } else { - return sections.filter(section => + if (value !== 'all') { + sections.forEach(section => section.indicators = section.indicators.filter(indicator => indicator.indicatorPaths.filter(indicatorPath => indicatorPath.type === value).length > 0)); } + return sections; } private filterPrivacy(sections: Section[], value): Section[] { - if (value === 'all') { - return sections; - } else { - return sections.filter(section => + if (value !== 'all') { + sections.forEach(section => section.indicators = section.indicators.filter(indicator => indicator.isPublic === value)); } + return sections; } private filterStatus(sections: Section[], value): Section[] { - if (value === 'all') { - return sections; - } else { - return sections.filter(section => + if (value !== 'all') { + sections.forEach(section => section.indicators = section.indicators.filter(indicator => indicator.isActive === value)); } + return sections; } private filterByKeyword(sections: Section[], value): Section[] { - if (value === null || value === '') { - return sections; - } else { - return sections.filter(section => + if (value !== null && value !== '') { + sections.forEach(section => section.indicators = section.indicators.filter(indicator => (indicator.name && indicator.name.toLowerCase().includes(value.toLowerCase())) || (indicator.description && indicator.description.toLowerCase().includes(value.toLowerCase())))); } + return sections; } get charts(): Section[] { diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html index 1359dc4..f5c3bd4 100644 --- a/src/app/topic/topic.component.html +++ b/src/app/topic/topic.component.html @@ -20,18 +20,18 @@
more_vert -
@@ -51,18 +51,18 @@
more_vert -
@@ -80,18 +80,18 @@
more_vert -
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts index 983aaad..b0a16b6 100644 --- a/src/app/topic/topic.component.ts +++ b/src/app/topic/topic.component.ts @@ -99,6 +99,10 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { return true; } + hide(element: any) { + UIkit.dropdown(element).hide(); + } + public saveElement() { if (this.type === "topic") { this.saveTopic(); diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css index caac319..90db930 100644 --- a/src/assets/theme-assets/dashboard-custom.css +++ b/src/assets/theme-assets/dashboard-custom.css @@ -301,42 +301,6 @@ 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); @@ -354,15 +318,65 @@ body.dashboard { cursor: default; } +/* Section Tools*/ + +.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-mini { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + background-color: rgb(28, 169, 213); + -webkit-box-shadow: none; + box-shadow: none; +} + +.dashboard .section:hover .tools .md-btn-group .md-btn-mini * { + color: white; +} + +.dashboard .section:hover .tools .md-btn-group::before { + content: ""; + border-bottom: 25px solid rgb(28, 169, 213); + border-left:solid 12px transparent; + width: 0; +} + +.dashboard .section:hover .tools .md-btn-group::after { + content: ""; + border-bottom: 25px solid rgb(28, 169, 213); + border-right:solid 12px transparent; + width: 0; +} + /* Dropdown*/ .dashboard .uk-dropdown { opacity: 1; transform: none; -webkit-transform: none; padding: 5px 0; -} - -.dashboard .md-card-dropdown .uk-dropdown { min-width: 160px; } @@ -370,6 +384,7 @@ body.dashboard { padding: 5px 10px; } +/* Badge */ .badge { height: 75px; position: absolute; @@ -377,10 +392,12 @@ body.dashboard { left: 0; z-index: 1; } + .small-badge { height: 70px; } - .right-badge{ + +.right-badge{ top: 0; left: auto; transform: rotate(90deg);