@@ -311,7 +118,24 @@
[topicIndex]="topicIndex"
[categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex">
-
-
-
+
+ You are about to delete "{{element.name}}" {{type}} permanently.
+ Are you sure you want to proceed?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
index b571abb..35af0f8 100644
--- a/src/app/topic/topic.component.ts
+++ b/src/app/topic/topic.component.ts
@@ -8,7 +8,7 @@ import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
import {AlertModal} from "../openaireLibrary/utils/modal/alert";
import {Subscriber, Subscription} from "rxjs";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
-import {IndicatorUtils, StakeholderUtils} from "../utils/indicator-utils";
+import {StakeholderUtils} from "../utils/indicator-utils";
declare var UIkit;
@@ -19,7 +19,6 @@ declare var UIkit;
export class TopicComponent implements OnInit, OnDestroy {
public subscriptions: any[] = [];
public properties: EnvProperties;
- public indicatorUtils: IndicatorUtils = new IndicatorUtils();
public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
public loading: boolean = true;
public stakeholder: Stakeholder;
@@ -27,32 +26,29 @@ export class TopicComponent implements OnInit, OnDestroy {
* Current topic
**/
public topicIndex: number = 0;
- public topicFb: FormGroup;
-
/**
* categoryIndex: Current category to be edited, selectedCategoryIndex: selected on menu(opened)
*/
public categoryIndex: number = 0;
public selectedCategoryIndex: number = 0;
- public categoryFb: FormGroup;
/**
* Current Subcategory to be edited
*/
public subCategoryIndex: number = 0;
- public subcategoryFb: FormGroup;
/**
- * Current drop element and index of topic, category or subcategory to be deleted.
+ * Current element and index of topic, category or subcategory to be deleted.
*/
- public element: any;
- public index: number;
+ public form: FormGroup;
+ public element: Topic | Category | SubCategory;
+ public type: 'topic' | 'category' | 'subcategory' = "topic";
+ public index: number = -1;
/**
* Check form validity
*/
public toggle: boolean = false;
- @ViewChild('deleteTopicModal') deleteTopicModal: AlertModal;
- @ViewChild('deleteCategoryModal') deleteCategoryModal: AlertModal;
- @ViewChild('deleteSubcategoryModal') deleteSubcategoryModal: AlertModal;
+ @ViewChild('deleteModal') deleteModal: AlertModal;
+ @ViewChild('editModal') editModal: AlertModal;
constructor(
private route: ActivatedRoute,
@@ -95,18 +91,30 @@ export class TopicComponent implements OnInit, OnDestroy {
}
});
}
-
- public hide(element) {
- UIkit.drop(element).hide();
+
+ public saveElement() {
+ if(this.type === "topic") {
+ this.saveTopic();
+ } else if(this.type === "category") {
+ this.saveCategory();
+ } else {
+ this.saveSubCategory();
+ }
}
-
- public show(element) {
- UIkit.drop(element).show();
+
+ public deleteElement() {
+ if(this.type === "topic") {
+ this.deleteTopic();
+ } else if(this.type === "category") {
+ this.deleteCategory();
+ } else {
+ this.deleteSubcategory();
+ }
}
-
+
private buildTopic(topic: Topic) {
let topics = this.stakeholder.topics.filter(element => element._id !== topic._id);
- this.topicFb = this.fb.group({
+ this.form = this.fb.group({
_id: this.fb.control(topic._id),
name: this.fb.control(topic.name, Validators.required),
description: this.fb.control(topic.description),
@@ -120,48 +128,49 @@ export class TopicComponent implements OnInit, OnDestroy {
isDefault: this.fb.control(topic.isDefault),
categories: this.fb.control(topic.categories)
});
- this.subscriptions.push(this.topicFb.get('name').valueChanges.subscribe(value => {
+ this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
let i = 1;
value = this.stakeholderUtils.generateAlias(value);
- this.topicFb.controls['alias'].setValue(value);
- while (this.topicFb.get('alias').invalid) {
- this.topicFb.controls['alias'].setValue(value + i);
+ this.form.controls['alias'].setValue(value);
+ while (this.form.get('alias').invalid) {
+ this.form.controls['alias'].setValue(value + i);
i++;
}
}));
}
- public editTopicOpen(element) {
- if (element.className.indexOf('uk-open') !== -1) {
- this.hide(element);
- } else {
- this.buildTopic(this.stakeholder.topics[this.topicIndex]);
- this.show(element);
- }
+ public editTopicOpen() {
+ this.index = this.topicIndex;
+ this.type = 'topic';
+ this.buildTopic(this.stakeholder.topics[this.index]);
+ this.editOpen();
}
- public saveTopic(element) {
- if (!this.topicFb.invalid) {
+ public saveTopic() {
+ if (!this.form.invalid) {
let path = [this.stakeholder._id];
let callback = (topic: Topic): void => {
- this.stakeholder.topics[this.topicIndex] = topic;
+ this.stakeholder.topics[this.index] = topic;
this.stakeholderService.setStakeholder(this.stakeholder);
};
- this.save('Topic has been successfully saved', element, path, this.topicFb.value, callback, true);
+ this.save('Topic has been successfully saved', path, this.form.value, callback, true);
}
}
- public deleteTopicOpen(name: string, element) {
- this.deleteOpen(name, 'topic', this.deleteTopicModal, element, this.topicIndex);
+ public deleteTopicOpen() {
+ this.type = 'topic';
+ this.index = this.topicIndex;
+ this.element = this.stakeholder.topics[this.index];
+ this.deleteOpen();
}
public deleteTopic() {
let path: string[] = [
this.stakeholder._id,
- this.stakeholder.topics[this.topicIndex]._id
+ this.stakeholder.topics[this.index]._id
];
let callback = (): void => {
- this.stakeholder.topics.splice(this.topicIndex, 1);
+ this.stakeholder.topics.splice(this.index, 1);
this.stakeholderService.setStakeholder(this.stakeholder);
};
this.delete('Topic has been successfully be deleted', path, callback, true);
@@ -178,7 +187,7 @@ export class TopicComponent implements OnInit, OnDestroy {
private buildCategory(category: Category) {
let categories = this.stakeholder.topics[this.topicIndex].categories.filter(element => element._id !== category._id);
- this.categoryFb = this.fb.group({
+ this.form = this.fb.group({
_id: this.fb.control(category._id),
name: this.fb.control(category.name, Validators.required),
description: this.fb.control(category.description),
@@ -192,51 +201,52 @@ export class TopicComponent implements OnInit, OnDestroy {
isDefault: this.fb.control(category.isDefault),
subCategories: this.fb.control(category.subCategories)
});
- this.subscriptions.push(this.categoryFb.get('name').valueChanges.subscribe(value => {
+ this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
let i = 1;
value = this.stakeholderUtils.generateAlias(value);
- this.categoryFb.controls['alias'].setValue(value);
- while (this.categoryFb.get('alias').invalid) {
- this.categoryFb.controls['alias'].setValue(value + i);
+ this.form.controls['alias'].setValue(value);
+ while (this.form.get('alias').invalid) {
+ this.form.controls['alias'].setValue(value + i);
i++;
}
}));
}
- public editCategoryOpen(element, index: number = -1) {
- if (element.className.indexOf('uk-open') !== -1) {
- this.hide(element);
+ public editCategoryOpen(index: number = -1) {
+ this.index = index;
+ this.type = 'category';
+ if (index === -1) {
+ this.buildCategory(new Category(null, null, null, true, true));
} else {
- if (index === -1) {
- this.buildCategory(new Category(null, null, null, true, true));
- } else {
- this.buildCategory(this.stakeholder.topics[this.topicIndex].categories[index]);
- }
- this.show(element);
+ this.buildCategory(this.stakeholder.topics[this.topicIndex].categories[index]);
}
+ this.editOpen();
}
- public saveCategory(element, index = -1) {
- if (!this.categoryFb.invalid) {
+ public saveCategory() {
+ if (!this.form.invalid) {
let path = [this.stakeholder._id, this.stakeholder.topics[this.topicIndex]._id];
let callback = (category: Category): void => {
- if (index === -1) {
+ if (this.index === -1) {
this.stakeholder.topics[this.topicIndex].categories.push(category);
} else {
- this.stakeholder.topics[this.topicIndex].categories[index] = HelperFunctions.copy(category);
+ this.stakeholder.topics[this.topicIndex].categories[this.index] = HelperFunctions.copy(category);
}
this.stakeholderService.setStakeholder(this.stakeholder);
};
- if (index === -1) {
- this.save('Category has been successfully created', element, path, this.categoryFb.value, callback);
+ if (this.index === -1) {
+ this.save('Category has been successfully created', path, this.form.value, callback);
} else {
- this.save('Category has been successfully saved', element, path, this.categoryFb.value, callback);
+ this.save('Category has been successfully saved', path, this.form.value, callback);
}
}
}
- public deleteCategoryOpen(name: string, element, index) {
- this.deleteOpen(name, 'category', this.deleteCategoryModal, element, index);
+ public deleteCategoryOpen(index: number) {
+ this.type = 'category';
+ this.index = index;
+ this.element = this.stakeholder.topics[this.topicIndex].categories[this.index];
+ this.deleteOpen();
}
public deleteCategory() {
@@ -254,7 +264,7 @@ export class TopicComponent implements OnInit, OnDestroy {
private buildSubcategory(subCategory: SubCategory) {
let subCategories = this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.filter(element => element._id !== subCategory._id);
- this.subcategoryFb = this.fb.group({
+ this.form = this.fb.group({
_id: this.fb.control(subCategory._id),
name: this.fb.control(subCategory.name, Validators.required),
description: this.fb.control(subCategory.description),
@@ -269,56 +279,56 @@ export class TopicComponent implements OnInit, OnDestroy {
charts: this.fb.control(subCategory.charts),
numbers: this.fb.control(subCategory.numbers)
});
- this.subscriptions.push(this.subcategoryFb.get('name').valueChanges.subscribe(value => {
+ this.subscriptions.push(this.form.get('name').valueChanges.subscribe(value => {
let i = 1;
value = this.stakeholderUtils.generateAlias(value);
- this.subcategoryFb.controls['alias'].setValue(value);
- while (this.subcategoryFb.get('alias').invalid) {
- this.subcategoryFb.controls['alias'].setValue(value + i);
+ this.form.controls['alias'].setValue(value);
+ while (this.form.get('alias').invalid) {
+ this.form.controls['alias'].setValue(value + i);
i++;
}
}));
}
- public editSubCategoryOpen(element, index: number = -1) {
- if (element.className.indexOf('uk-open') !== -1) {
- this.hide(element);
+ public editSubCategoryOpen(index: number = -1) {
+ this.index = index;
+ this.type = 'subcategory';
+ if (index === -1) {
+ this.buildSubcategory(new SubCategory(null, null, null, true, true));
} else {
- if (index === -1) {
- this.buildSubcategory(new SubCategory(null, null, null, true, true));
- } else {
- this.buildSubcategory(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index]);
- }
- this.show(element);
+ this.buildSubcategory(this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index]);
}
+ this.editOpen();
}
- public saveSubCategory(element, index = -1) {
- if (!this.subcategoryFb.invalid) {
+ public saveSubCategory() {
+ if (!this.form.invalid) {
let path: string[] = [
this.stakeholder._id,
this.stakeholder.topics[this.topicIndex]._id,
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex]._id,
];
let callback = (subCategory: SubCategory): void => {
- if (index === -1) {
+ if (this.index === -1) {
this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories.push(subCategory);
} else {
- this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[index] = subCategory;
+ this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index] = subCategory;
}
this.stakeholderService.setStakeholder(this.stakeholder);
};
- if (index === -1) {
- this.save('Subcategory has been successfully created', element, path, this.subcategoryFb.value, callback);
+ if (this.index === -1) {
+ this.save('Subcategory has been successfully created', path, this.form.value, callback);
} else {
- this.save('Subcategory has been successfully saved', element, path, this.subcategoryFb.value, callback);
+ this.save('Subcategory has been successfully saved', path, this.form.value, callback);
}
- this.hide(element);
}
}
- public deleteSubcategoryOpen(name: string, element, index) {
- this.deleteOpen(name, 'subcategory', this.deleteSubcategoryModal, element, index);
+ public deleteSubcategoryOpen(index) {
+ this.type = 'subcategory';
+ this.index = index;
+ this.element = this.stakeholder.topics[this.topicIndex].categories[this.selectedCategoryIndex].subCategories[this.index];
+ this.deleteOpen();
}
public deleteSubcategory() {
@@ -338,18 +348,29 @@ export class TopicComponent implements OnInit, OnDestroy {
private navigateToError() {
this.router.navigate(['/error'], {queryParams: {'page': this.router.url}});
}
-
- private deleteOpen(name: string, type: string, modal: AlertModal, element, index) {
- this.element = element;
- this.index = index;
- modal.alertTitle = 'Delete ' + name;
- modal.cancelButtonText = 'No';
- modal.okButtonText = 'Yes';
- modal.message = 'This ' + type + ' will permanently be deleted. Are you sure you want to proceed?';
- modal.open();
+
+ private editOpen() {
+ this.editModal.cancelButtonText = 'Cancel';
+ this.editModal.okButtonLeft = false;
+ this.editModal.alertMessage = false;
+ if (this.index === -1) {
+ this.editModal.alertTitle = 'Create a new ' + this.type;
+ this.editModal.okButtonText = 'Create';
+ } else {
+ this.editModal.alertTitle = 'Edit ' + this.type + '\'s information ';
+ this.editModal.okButtonText = 'Save';
+ }
+ this.editModal.open();
}
- private save(message: string, element, path: string[], saveElement: any, callback: Function, redirect = false) {
+ private deleteOpen() {
+ this.deleteModal.alertTitle = 'Delete ' + this.type;
+ this.deleteModal.cancelButtonText = 'No';
+ this.deleteModal.okButtonText = 'Yes';
+ this.deleteModal.open();
+ }
+
+ private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) {
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
callback(saveElement);
UIkit.notification(message, {
@@ -362,14 +383,12 @@ export class TopicComponent implements OnInit, OnDestroy {
relativeTo: this.route
});
}
- this.hide(element);
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
- this.hide(element);
});
}
@@ -384,14 +403,12 @@ export class TopicComponent implements OnInit, OnDestroy {
if (redirect) {
this.back();
}
- this.hide(this.element);
}, error => {
UIkit.notification(error.error.message, {
status: 'danger',
timeout: 3000,
pos: 'top-left'
});
- this.hide(this.element);
});
}
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index a68b69a..dc54746 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -20,7 +20,8 @@ html .dashboard {
display: none;
}
-.dashboard li > a:hover .onHover {
+.dashboard li > a:hover .onHover,
+.dashboard li > a .onHover.uk-open {
display: block;
}
@@ -46,23 +47,49 @@ html .dashboard {
.dashboard #sidebar_main .menu_section > ul > li > a {
font-weight: 700;
+ overflow: unset;
+}
+
+.dashboard #sidebar_main .menu_section > ul > li:not([class*=md-bg-]) > a:hover {
+ background-color: #F0F0F0;
}
.dashboard #sidebar_main .menu_section > ul > li > a > .menu_icon {
width: 30px;
}
+.dashboard #sidebar_main .menu_section > ul > li > ul > li > a:hover {
+ background-color: #F0F0F0;
+ margin-right: 5px;
+}
+
.dashboard #sidebar_main .menu_section > ul li > a {
font-size: var(--sidebar-font-size);
color: rgba(0, 0, 0, 0.7);
}
+.dashboard #sidebar_main .menu_section .uk-dropdown {
+ min-width: 150px;
+}
+
+.dashboard #sidebar_main .menu_section .uk-dropdown > ul {
+ display: block;
+ margin: 0;
+ text-align: start;
+}
+
+.dashboard #sidebar_main .menu_section .uk-dropdown > ul > li > a {
+ padding: 5px 10px;
+ color: black !important;
+}
+
.dashboard #sidebar_main .menu_section > ul ul > li > a {
line-height: 20px;
}
.dashboard #sidebar_main .menu_section > ul li > a {
display: flex;
+ align-items: center;
}
body.dashboard {