2019-11-05 15:59:06 +01:00
< aside id = "sidebar_main" >
2020-05-15 14:26:59 +02:00
< div * ngIf = "stakeholder" class = "sidebar_main_header uk-margin-remove-bottom uk-text-center" >
2020-06-11 19:06:45 +02:00
< img * ngIf = "properties.environment =='beta' || properties.environment =='development'" class = "badge"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
[alt]="properties.environment">
2020-05-15 14:26:59 +02:00
< div class = "uk-position-relative uk-display-inline-block uk-margin-small-top" >
< div * ngIf = "!stakeholder.defaultId" class = "uk-badge default" > Default< / div >
< img class = "logo" * ngIf = "stakeholder.logoUrl" [ src ] = " stakeholder . logoUrl " >
< / div >
2019-11-04 12:50:25 +01:00
< / div >
2020-05-13 10:46:22 +02:00
< div * ngIf = "stakeholder && stakeholder.topics[topicIndex]" class = "menu_section" >
2019-11-04 12:50:25 +01:00
< ul >
2019-11-12 16:55:37 +01:00
< li class = "uk-margin-bottom md-bg-blue-900 uk-padding-small" >
2019-12-05 10:18:34 +01:00
< a [ routerLink ] = " ' . . / ' " class = "md-color-white" >
2019-11-05 15:59:06 +01:00
< span class = "menu_icon" > < i class = "material-icons md-color-white" > arrow_back< / i > < / span >
2019-12-04 11:08:11 +01:00
< div class = "menu_title uk-width-expand" >
2019-11-05 15:59:06 +01:00
{{stakeholder.topics[topicIndex].name.toUpperCase()}}
< / div >
2019-12-23 11:08:54 +01:00
< div class = "menu_on_hover"
2019-12-19 12:17:32 +01:00
(click)="$event.stopPropagation();$event.preventDefault()">
< i class = "material-icons onHover md-color-white" > more_vert< / i >
2020-01-10 15:20:42 +01:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
2019-12-19 12:17:32 +01:00
class="uk-padding-remove-horizontal">
< ul class = "uk-nav uk-dropdown-nav" >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " editTopicOpen ( ) ; hide ( element ) " > Edit< / a > < / li >
< li > < a ( click ) = " toggleTopicStatus ( ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{stakeholder.topics[topicIndex].isActive ? 'Inactive' : 'Active'}}< / a >
2019-12-20 12:13:34 +01:00
< / li >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " toggleTopicAccess ( ) ; hide ( element ) " >
2020-05-15 14:26:59 +02:00
{{stakeholder.topics[topicIndex].isPublic ? 'Private' : 'Public'}}< / a >
2019-12-19 12:17:32 +01:00
< / li >
2020-06-18 14:03:26 +02:00
< hr * ngIf = "!stakeholder.topics[topicIndex].defaultId" class = "uk-nav-divider" >
2020-06-23 10:33:13 +02:00
< li * ngIf = "!stakeholder.topics[topicIndex].defaultId" > < a
(click)="deleteTopicOpen('delete'); hide(element)">Delete
< / a >
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <a (click)="deleteTopicOpen('delete'); hide(element)">Delete from all profiles</a> -->
<!-- <a (click)="deleteTopicOpen('disconnect'); hide(element)">Delete and disconnect from all profiles</a> -->
<!-- </ng - container> -->
< / li >
2019-12-19 12:17:32 +01:00
< / ul >
2019-11-05 15:59:06 +01:00
< / div >
< / div >
2019-12-19 12:17:32 +01:00
< / a >
2019-11-05 15:59:06 +01:00
< / li >
< ng-template ngFor [ ngForOf ] = " stakeholder . topics [ topicIndex ] . categories " let-category let-i = "index" >
< li [ class . current_section ] = " categoryIndex = == i "
2019-11-08 16:47:47 +01:00
[class.act_section]="selectedCategoryIndex === i & & toggle"
2020-06-18 14:03:26 +02:00
[title]="category.name+': '+(category.isActive?'Active':'Inactive')+', '+(category.isPublic?'Public':'Private')"
2019-11-05 15:59:06 +01:00
class="submenu_trigger">
2019-12-19 12:17:32 +01:00
< a href = "#" ( click ) = " toggleCategory ( i ) ; $ event . preventDefault ( ) " >
2019-11-05 15:59:06 +01:00
< span * ngIf = "category.icon" class = "menu_icon" > < i
2019-12-19 12:17:32 +01:00
class="material-icons">{{category.icon}}< / i > < / span >
2020-06-18 14:03:26 +02:00
< div class = "menu_title uk-width-expand" >
2019-11-05 15:59:06 +01:00
{{category.name}}
2020-06-18 14:03:26 +02:00
<!-- <i class="material - icons md - 18 uk - margin - small - left">{{category.isPublic ? 'public' : 'lock'}}</i> -->
<!-- <i class="material - icons md - 18" -->
<!-- [class.md - color - green - 300]="category.isActive">brightness_1</i> -->
2019-11-05 15:59:06 +01:00
< / div >
2019-12-23 11:08:54 +01:00
< div class = "menu_on_hover"
2019-12-19 12:17:32 +01:00
(click)="$event.stopPropagation();$event.preventDefault()">
< i class = "material-icons onHover" > more_vert< / i >
2020-01-10 15:20:42 +01:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
2019-12-19 12:17:32 +01:00
class="uk-padding-remove-horizontal">
< ul class = "uk-nav uk-dropdown-nav" >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " editCategoryOpen ( i ) ; hide ( element ) " > Edit< / a > < / li >
< li > < a ( click ) = " toggleCategoryStatus ( i ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{category.isActive ? 'Inactive' : 'Active'}}< / a >
2019-12-20 12:13:34 +01:00
< / li >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " toggleCategoryAccess ( i ) ; hide ( element ) " >
2020-05-15 14:26:59 +02:00
{{category.isPublic ? 'Private' : 'Public'}}< / a >
2019-12-19 12:17:32 +01:00
< / li >
2020-06-18 14:03:26 +02:00
< hr * ngIf = "!stakeholder.topics[topicIndex].categories[i].defaultId" class = "uk-nav-divider" >
2020-06-23 10:33:13 +02:00
< li * ngIf = "!stakeholder.topics[topicIndex].categories[i].defaultId" > < a
(click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete< / a >
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete from all profiles</a> -->
<!-- <a (click)="deleteCategoryOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a> -->
<!-- </ng - container> -->
< / li >
2019-12-19 12:17:32 +01:00
< / ul >
2019-11-05 15:59:06 +01:00
< / div >
< / div >
2019-12-19 12:17:32 +01:00
< / a >
2019-11-08 16:47:47 +01:00
< ul [ style . display ] = " ( ( selectedCategoryIndex = == i & & toggle ) ? ' block ' : ' none ' ) " >
2019-11-05 15:59:06 +01:00
< ng-template ngFor [ ngForOf ] = " stakeholder . topics [ topicIndex ] . categories [ i ] . subCategories "
let-subcategory let-j="index">
2020-06-18 14:03:26 +02:00
< li [ class . act_item ] = " categoryIndex = == i & & subCategoryIndex = == j "
[title]="subcategory.name +': ' + (subcategory.isActive?'Active':'Inactive')+', '+(subcategory.isPublic?'Public':'Private')">
2019-11-14 11:09:13 +01:00
< a href = "#" ( click ) = " chooseSubcategory ( i , j ) ; $ event . preventDefault ( ) " >
2019-11-05 15:59:06 +01:00
< span * ngIf = "subcategory.icon" class = "menu_icon uk-margin-small-right" > < i
2019-12-19 12:17:32 +01:00
class="material-icons">{{subcategory.icon}}< / i > < / span >
2020-06-18 14:03:26 +02:00
< div class = "menu_title uk-width-expand " >
2019-11-05 15:59:06 +01:00
{{subcategory.name}}
2020-06-18 14:03:26 +02:00
<!-- <i class="material - icons md - 18 uk - margin - small - left">{{subcategory.isPublic ? 'public' : 'lock'}}</i>
< i class = "material-icons md-18"
[class.md-color-green-300]="subcategory.isActive">brightness_1< / i > -->
2019-11-05 15:59:06 +01:00
< / div >
2019-12-23 11:08:54 +01:00
< div class = "menu_on_hover"
2019-12-19 12:17:32 +01:00
(click)="$event.stopPropagation();$event.preventDefault()">
< i class = "material-icons onHover" > more_vert< / i >
2020-01-10 15:20:42 +01:00
< div # element uk-dropdown = "mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
2019-12-19 12:17:32 +01:00
class="uk-padding-remove-horizontal">
< ul class = "uk-nav uk-dropdown-nav" >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " editSubCategoryOpen ( j ) ; hide ( element ) " > Edit< / a > < / li >
< li > < a ( click ) = " toggleSubcategoryStatus ( j ) ; hide ( element ) " >
2020-05-13 17:10:44 +02:00
{{subcategory.isActive ? 'Inactive' : 'Active'}}< / a >
2019-12-20 12:13:34 +01:00
< / li >
2020-01-10 15:20:42 +01:00
< li > < a ( click ) = " toggleSubcategoryAccess ( j ) ; hide ( element ) " >
2020-05-15 14:26:59 +02:00
{{subcategory.isPublic ? 'Private' : 'Public'}}< / a >
2019-12-19 12:17:32 +01:00
< / li >
2020-06-18 14:03:26 +02:00
< hr * ngIf = "!stakeholder.topics[topicIndex].categories[i].subCategories[j].defaultId"
class="uk-nav-divider">
2020-06-23 10:33:13 +02:00
< li * ngIf = "!stakeholder.topics[topicIndex].categories[i].subCategories[j].defaultId" > < a
(click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete< / a >
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <a (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete from all profiles</a> -->
<!-- <a (click)="deleteSubcategoryOpen(j, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a> -->
<!-- </ng - container> -->
< / li >
2019-12-19 12:17:32 +01:00
< / ul >
2019-11-04 12:50:25 +01:00
< / div >
2019-11-05 15:59:06 +01:00
< / div >
2019-12-19 12:17:32 +01:00
< / a >
2019-11-05 15:59:06 +01:00
< / li >
< / ng-template >
< li >
2019-12-19 12:17:32 +01:00
< a href = "#" ( click ) = " editSubCategoryOpen ( ) ; $ event . preventDefault ( ) " >
2019-11-05 15:59:06 +01:00
< span class = "menu_icon" > < i class = "material-icons" > add< / i > < / span >
< span class = "menu_title" > Create new Subcategory< / span >
< / a >
< / li >
< / ul >
< / li >
< / ng-template >
< li >
2019-12-19 12:17:32 +01:00
< a href = "#" ( click ) = " editCategoryOpen ( ) ; $ event . preventDefault ( ) " >
2019-11-05 15:59:06 +01:00
< span class = "menu_icon" > < i class = "material-icons" > add< / i > < / span >
< span class = "menu_title" > Create new Category< / span >
< / a >
2019-11-04 12:50:25 +01:00
< / li >
< / ul >
< / div >
< / aside >
2020-01-08 12:00:50 +01:00
< indicators * ngIf = "stakeholder" [ properties ] = " properties "
2019-11-08 16:47:47 +01:00
[topicIndex]="topicIndex"
[categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex">< / indicators >
2019-12-19 12:17:32 +01:00
< modal-alert # deleteModal ( alertOutput ) = " deleteElement ( ) " >
You are about to delete < span class = "uk-text-bold" * ngIf = "element" > "{{element.name}}"< / span > {{type}} permanently.
2020-06-23 10:33:13 +02:00
< div * ngIf = "elementChildrenActionOnDelete == 'delete'" class = "uk-text-bold" >
{{getPluralTypeName()}} of all profiles based on this default {{type}}, will be deleted as well.
< / div >
2019-12-19 12:17:32 +01:00
Are you sure you want to proceed?
< / modal-alert >
2020-06-23 10:33:13 +02:00
<!-- <modal - alert #deleteModal> -->
<!-- You are about to delete <span class="uk - text - bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently. -->
<!-- <div *ngIf="!stakeholder.topics[topicIndex].defaultId"> -->
<!-- <div class="uk - margin - top uk - margin - bottom"> -->
<!-- <div>Delete this {{type}} only.</div> -->
<!-- <div class="uk - text - center"> -->
<!-- <a *ngIf="type == 'topic'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement(); closeDeleteModal()">Delete</a> -->
<!-- <a *ngIf="type == 'category'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement(); closeDeleteModal()">Delete</a> -->
<!-- <a *ngIf="type == 'subcategory'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement(); closeDeleteModal()">Delete</a> -->
<!-- </div> -->
<!-- </div> -->
<!-- <ng - container *ngIf="!stakeholder.defaultId"> -->
<!-- <div class="uk - margin - top uk - margin - bottom"> -->
<!-- <div>Delete this {{type}} and {{getPluralTypeName()}} of all profiles based on this default {{type}}.</div> -->
<!-- <div class="uk - text - center"> -->
<!-- <a *ngIf="type == 'topic'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement('delete'); closeDeleteModal()">Delete all</a> -->
<!-- <a *ngIf="type == 'category'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement('delete'); closeDeleteModal()">Delete all</a> -->
<!-- <a *ngIf="type == 'subcategory'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement('delete'); closeDeleteModal()">Delete all</a> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="uk - margin - top uk - margin - bottom"> -->
<!-- <div>Delete this {{type}} and {{getPluralTypeName()}} of all profiles based on this default {{type}}, will not be marked as copied from default anymore.</div> -->
<!-- <div class="uk - text - center"> -->
<!-- <a *ngIf="type == 'topic'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement('disconnect'); closeDeleteModal()">Delete and disconnect</a> -->
<!-- <a *ngIf="type == 'category'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement('disconnect'); closeDeleteModal()">Delete and disconnect</a> -->
<!-- <a *ngIf="type == 'subcategory'" class="md - btn md - btn - primary waves - button waves - effect uk - width - 1 - 2" -->
<!-- (click)="deleteElement('disconnect'); closeDeleteModal()">Delete and disconnect</a> -->
<!-- </div> -->
<!-- </div> -->
<!-- </ng - container> -->
<!-- </div> -->
<!-- </modal - alert> -->
2019-12-19 12:17:32 +01:00
< modal-alert # editModal ( alertOutput ) = " saveElement ( ) " >
< div * ngIf = "form" class = "uk-padding-small" [ formGroup ] = " form " >
< div dashboard-input class = "uk-form-row" [ formInput ] = " form . get ( ' name ' ) " label = "Title" > < / div >
< div dashboard-input class = "uk-form-row" [ formInput ] = " form . get ( ' description ' ) "
label="Description" type="textarea">
< / div >
2020-06-12 12:46:11 +02:00
< div * ngIf = "form.get('icon')" dashboard-input class = "uk-form-row" [ formInput ] = " form . get ( ' icon ' ) "
2020-06-11 12:12:30 +02:00
label="Icon(SVG)" type="textarea">
< / div >
2019-12-19 12:17:32 +01:00
< div class = "uk-form-row uk-flex uk-flex-middle" >
< div dashboard-input class = "uk-width-small" [ formInput ] = " form . get ( ' isPublic ' ) "
label="Accessibility" [options]="stakeholderUtils.isPublic" type="select">
< / div >
< div dashboard-input class = "uk-margin-small-left uk-width-small" [ formInput ] = " form . get ( ' isActive ' ) "
label="Visibility" [options]="stakeholderUtils.isActive" type="select">
< / div >
< / div >
< / div >
< / modal-alert >
2019-11-12 16:55:37 +01:00