monitor-dashboard/src/app/topic/topic.component.html

<aside id="sidebar_main">
  <div id="sidebar_content">
  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">
    <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">
    <div class="uk-position-relative uk-margin-small-top">
      <!--      <div *ngIf="!stakeholder.defaultId" class="uk-badge default">Default</div>-->
      <!--      <img class="logo" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">-->
      <!--      <div class="uk-margin-top" *ngIf="!stakeholder.logoUrl" >{{stakeholder.name}}</div>-->
      <a [href]="properties.domain + properties.baseLink"><div   class="portalLogo logo" ></div></a>
    </div>
  </div>
  <div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section">
    <ul class="uk-list">
      <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
        <a [routerLink]="'/admin/' + stakeholder.alias + '/general'" class="uk-link">
          <span class="" uk-icon="icon:close;ratio:2"></span>

        </a>
      </li>
      <li  class="submenu_trigger">

        <ul class="uk-nav-default">
          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
            <li
              [title]="topic.name+': '+(topic.isActive?'Active':'Inactive')+', '+(topic.isPublic?'Public':'Private')"
              class="uk-margin-top uk-margin-small-right uk-visible-toggle"
              [class.uk-active]="topicIndex == i" [class.uk-text-primary]="topicIndex == i"
              [class.uk-text-bold]="topicIndex == i">
              <a [routerLink]="'../' + topic.alias" class="uk-flex">
               <span *ngIf="topic.icon" class="menu_icon">
<!--                  <span   [innerHTML]="satinizeHTML(topic.icon)"></span>-->
                </span>
                <div class="menu_title uk-width-expand uk-text-center">
                  {{topic.name}}
                  <!--<i
                    class="material-icons md-18 uk-margin-small-left">{{topic.isPublic ? 'public' : 'lock'}}</i>
                  <i class="material-icons md-18"
                     [class.md-color-green-300]="topic.isActive">brightness_1</i>-->
                </div>
                <div class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
                  <i class=" onHover" uk-icon="more-vertical"></i>
                  <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                       class="uk-padding-remove-horizontal">
                    <ul class="uk-nav uk-dropdown-nav uk-list">
                      <li><a (click)="editTopicOpen(i); hide(element)">Edit</a></li>
                      <li><a (click)="toggleTopicStatus(i); hide(element)">
                        {{topic.isActive ? 'Inactive' : 'Active'}}</a>
                      </li>
                      <li><a (click)="toggleTopicAccess(i); hide(element)">
                        {{topic.isPublic?'Private':'Public'}}</a>
                      </li>
                      <hr *ngIf="!topic.defaultId" class="uk-nav-divider">
                      <li *ngIf="!topic.defaultId"><a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete</a>
                        <!--                        <ng-container *ngIf="!stakeholder.defaultId">-->
                        <!--                          <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">Delete from all profiles</a>-->
                        <!--                          <a (click)="deleteTopicOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>-->
                        <!--                        </ng-container>-->
                      </li>
                    </ul>
                  </div>
                </div>
              </a>
            </li>
          </ng-template>
          <li class="uk-text-center uk-margin-top uk-visible-toggle">
            <a href="#" (click)="editTopicOpen(-1); $event.preventDefault()">
<!--              <span class="menu_icon"><i class="material-icons">add</i></span>-->
              <span
                class="menu_icon uk-icon-button uk-button-primary icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
              <span class="uk-hidden-hover"> Create new topic</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
   <!-- <ul class="uk-list">
      <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
        <a [routerLink]="'../'" class="md-color-white">
          <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
          <div class="menu_title uk-width-expand">
            {{stakeholder.topics[topicIndex].name.toUpperCase()}}
          </div>
          <div class="menu_on_hover"
               (click)="$event.stopPropagation();$event.preventDefault()">
            <i class="onHover " uk-icon="more-vertical"></i>
            <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                 class="uk-padding-remove-horizontal">
              <ul class="uk-nav uk-dropdown-nav uk-list">
                <li><a (click)="editTopicOpen(); hide(element)">Edit</a></li>
                <li><a (click)="toggleTopicStatus(); hide(element)">
                  {{stakeholder.topics[topicIndex].isActive ? 'Inactive' : 'Active'}}</a>
                </li>
                <li><a (click)="toggleTopicAccess(); hide(element)">
                  {{stakeholder.topics[topicIndex].isPublic ? 'Private' : 'Public'}}</a>
                </li>
                <hr *ngIf="!stakeholder.topics[topicIndex].defaultId"  class="uk-nav-divider">
                <li *ngIf="!stakeholder.topics[topicIndex].defaultId"><a
                       (click)="deleteTopicOpen('delete'); hide(element)">Delete
                </a>
&lt;!&ndash;                  <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
&lt;!&ndash;                    <a (click)="deleteTopicOpen('delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
&lt;!&ndash;                    <a (click)="deleteTopicOpen('disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
&lt;!&ndash;                  </ng-container>&ndash;&gt;
                </li>
              </ul>
            </div>
          </div>
        </a>
      </li>
      <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
        <li [class.current_section]="categoryIndex === i"
            [class.act_section]="selectedCategoryIndex === i && toggle"
             [title]="category.name+': '+(category.isActive?'Active':'Inactive')+', '+(category.isPublic?'Public':'Private')"
            class="submenu_trigger">
          <a href="#" (click)="toggleCategory(i);$event.preventDefault()" class="uk-flex">
            <span *ngIf="category.icon" class="menu_icon"><i
                class="material-icons">{{category.icon}}</i></span>
            <div class="menu_title uk-width-expand" >
              {{category.name}}
            </div>
            <div class="menu_on_hover"
                 (click)="$event.stopPropagation();$event.preventDefault()">
              <i class=" onHover" uk-icon="more-vertical"></i>
              <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                   class="uk-padding-remove-horizontal">
                <ul class="uk-nav uk-dropdown-nav">
                  <li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
                  <li><a (click)="toggleCategoryStatus(i); hide(element)">
                    {{category.isActive ? 'Inactive' : 'Active'}}</a>
                  </li>
                  <li><a (click)="toggleCategoryAccess(i); hide(element)">
                    {{category.isPublic ? 'Private' : 'Public'}}</a>
                  </li>
                  <hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"   class="uk-nav-divider">
                  <li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
                         (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
&lt;!&ndash;                    <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
&lt;!&ndash;                      <a (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
&lt;!&ndash;                      <a (click)="deleteCategoryOpen(i, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
&lt;!&ndash;                    </ng-container>&ndash;&gt;
                  </li>
                </ul>
              </div>
            </div>
          </a>
          <ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
            <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
                         let-subcategory let-j="index">
              <li [class.act_item]="categoryIndex === i && subCategoryIndex === j"
                  [title]="subcategory.name +': ' + (subcategory.isActive?'Active':'Inactive')+', '+(subcategory.isPublic?'Public':'Private')">
                <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()" class="uk-flex">
                <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
                    class="material-icons">{{subcategory.icon}}</i></span>
                  <div class="menu_title uk-width-expand ">
                    {{subcategory.name}}
                   &lt;!&ndash; <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>&ndash;&gt;
                  </div>
                  <div class="menu_on_hover"
                       (click)="$event.stopPropagation();$event.preventDefault()">
                    <i class=" onHover" uk-icon="more-vertical"></i>
                    <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                         class="uk-padding-remove-horizontal">
                      <ul class="uk-nav uk-dropdown-nav">
                        <li><a (click)="editSubCategoryOpen(j); hide(element)">Edit</a></li>
                        <li><a (click)="toggleSubcategoryStatus(j); hide(element)">
                          {{subcategory.isActive ? 'Inactive' : 'Active'}}</a>
                        </li>
                        <li><a (click)="toggleSubcategoryAccess(j); hide(element)">
                          {{subcategory.isPublic ? 'Private' : 'Public'}}</a>
                        </li>
                        <hr *ngIf="!stakeholder.topics[topicIndex].categories[i].subCategories[j].defaultId"
                            class="uk-nav-divider">
                        <li *ngIf="!stakeholder.topics[topicIndex].categories[i].subCategories[j].defaultId"><a
                               (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete</a>
&lt;!&ndash;                          <ng-container *ngIf="!stakeholder.defaultId">&ndash;&gt;
&lt;!&ndash;                            <a (click)="deleteSubcategoryOpen(j, 'delete'); hide(element)">Delete from all profiles</a>&ndash;&gt;
&lt;!&ndash;                            <a (click)="deleteSubcategoryOpen(j, 'disconnect'); hide(element)">Delete and disconnect from all profiles</a>&ndash;&gt;
&lt;!&ndash;                          </ng-container>&ndash;&gt;
                        </li>
                      </ul>
                    </div>
                  </div>
                </a>
              </li>
            </ng-template>
            <li>
              <a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">
                <span class="menu_icon"><i uk-icon="plus"></i></span>
                <span class="menu_title">Create new Subcategory</span>
              </a>
            </li>
          </ul>
        </li>
      </ng-template>
      <li>
        <a href="#" (click)="editCategoryOpen();$event.preventDefault()">
          <span class="menu_icon"><i uk-icon="plus"></i></span>
          <span class="menu_title">Create new Category</span>
        </a>
      </li>
    </ul>-->
  </div>
  </div>
  <div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable "
       (click)="toggleOpen($event)"  >
    <span  class="uk-position-center"  *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"  ></span>
    <span   class="uk-position-center"  *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
  </div>
</aside>
<div id="page_content">
  <div *ngIf="stakeholder"
       class="uk-navbar-container uk-sticky uk-sticky-fixed"
       style="top: 100px; position: fixed; width: 100%">
    <div class="uk-margin-large-left">
      <nav class=" ">
        <div *ngIf="stakeholder  && stakeholder.topics[topicIndex]" class="">
          <ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
              class="categoriesTabs uk-tab admin uk-flex uk-flex-middle">
            <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
              <li class="uk-visible-toggle"
                  [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
                <a  (click)="toggleCategory(i)"
                   class="uk-margin-remove-bottom uk-h4"
                ><span>{{category.name}}</span>
                  <span class="uk-invisible-hover"
                       (click)="$event.stopPropagation();$event.preventDefault()">
                    <i class=" onHover" uk-icon="more-vertical"></i>
                    <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                         class="uk-padding-remove-horizontal">
                      <ul class="uk-nav uk-dropdown-nav">
                        <li><a (click)="editCategoryOpen(i); hide(element)">Edit</a></li>
                        <li><a (click)="toggleCategoryStatus(i); hide(element)">
                          {{category.isActive ? 'Inactive' : 'Active'}}</a>
                        </li>
                        <li><a (click)="toggleCategoryAccess(i); hide(element)">
                          {{category.isPublic ? 'Private' : 'Public'}}</a>
                        </li>
                        <hr *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"   class="uk-nav-divider">
                        <li *ngIf="!stakeholder.topics[topicIndex].categories[i].defaultId"><a
                          (click)="deleteCategoryOpen(i, 'delete'); hide(element)">Delete</a>
                        </li>
                      </ul>
                    </div>
                  </span>
                </a>
              </li>
            </ng-template>
            <li>
              <span href="#" (click)="editCategoryOpen();$event.preventDefault()" class="uk-visible-toggle clickable">
                <span class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
                <span class="uk-hidden-hover uk-te"> Create new category</span>
              </span>
            </li>
          </ul>
        </div>
      </nav>
      <ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] &&
      stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0"
          class="uk-subnav uk-subnav-pill subCategoriesTabs admin">
        <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" let-subCategory let-i="index">
          <li
              [class.uk-active]="(subCategory.alias ===
              stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)" class=" uk-visible-toggle uk-flex uk-flex-middle">
            <a (click)="chooseSubcategory(categoryIndex, i);$event.preventDefault()"
               class="uk-margin-remove-bottom uk-h3"
            ><span>{{subCategory.name}}</span>

            </a>
            <span class="uk-invisible-hover"
                  (click)="$event.stopPropagation();$event.preventDefault()">
                <i class=" onHover" uk-icon="more-vertical"></i>
                <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
                     class="uk-padding-remove-horizontal">
                  <ul class="uk-nav uk-dropdown-nav">
                    <li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
                    <li><a (click)="toggleSubcategoryStatus(i); hide(element)">
                      {{subCategory.isActive ? 'Inactive' : 'Active'}}</a>
                    </li>
                    <li><a (click)="toggleSubcategoryAccess(i); hide(element)">
                      {{subCategory.isPublic ? 'Private' : 'Public'}}</a>
                    </li>
                    <hr *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"
                        class="uk-nav-divider">
                    <li *ngIf="!stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[i].defaultId"><a
                      (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">Delete</a>

                    </li>
                  </ul>
                </div>
              </span>
          </li>
        </ng-template>
        <li>
          <span href="#" (click)="editSubCategoryOpen();$event.preventDefault()"
                class="uk-padding-remove uk-visible-toggle clickable">
            <span class="menu_icon uk-icon-button portal-icon-button icon-button-small"><i uk-icon="icon:plus; ratio:0.7"></i></span>
            <span class="uk-hidden-hover"> Create new sub category</span>
          </span>
        </li>
      </ul>

    </div>
  </div>
  <div id="page_content_inner" style="margin-top: 140px;">
  <indicators *ngIf="stakeholder" [properties]="properties"
                [topicIndex]="topicIndex"
                [categoryIndex]="categoryIndex"
            [subcategoryIndex]="subCategoryIndex"></indicators>
  </div>
</div>
<modal-alert #deleteModal (alertOutput)="deleteElement()">
  You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.
  <div *ngIf="elementChildrenActionOnDelete == 'delete'" class="uk-text-bold">
    {{getPluralTypeName()}} of all profiles based on this default {{type}}, will be deleted as well.
  </div>
  Are you sure you want to proceed?
</modal-alert>
<!--<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>-->
<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>
    <div *ngIf="form.get('icon')" dashboard-input class="uk-form-row" [formInput]="form.get('icon')"
         label="Icon(SVG)" type="textarea">
    </div>
    <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>