D-Net

<aside id="sidebar_main">

  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom uk-text-center">

    <img class="badge"

         src="assets/theme-assets/prototype_flag.svg"

         alt="BETA">

    <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>

  </div>

  <div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="menu_section">

    <ul>

      <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="material-icons onHover md-color-white">more_vert</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)="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 class="uk-nav-divider">

                <li><a (click)="deleteTopicOpen(); hide(element)">Delete</a></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"

            class="submenu_trigger">

          <a href="#" (click)="toggleCategory(i);$event.preventDefault()">

            <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="material-icons onHover">more_vert</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 class="uk-nav-divider">

                  <li><a (click)="deleteCategoryOpen(i); hide(element)">Delete</a></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">

                <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">

                <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}}

                  </div>

                  <div class="menu_on_hover"

                       (click)="$event.stopPropagation();$event.preventDefault()">

                    <i class="material-icons onHover">more_vert</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 class="uk-nav-divider">

                        <li><a (click)="deleteSubcategoryOpen(j); hide(element)">Delete</a></li>

                      </ul>

                    </div>

                  </div>

                </a>

              </li>

            </ng-template>

            <li>

              <a href="#" (click)="editSubCategoryOpen();$event.preventDefault()">

                <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>

        <a href="#" (click)="editCategoryOpen();$event.preventDefault()">

          <span class="menu_icon"><i class="material-icons">add</i></span>

          <span class="menu_title">Create new Category</span>

        </a>

      </li>

    </ul>

  </div>

</aside>

<indicators *ngIf="stakeholder" [properties]="properties"

            [stakeholder]="stakeholder"

            [topicIndex]="topicIndex"

            [categoryIndex]="categoryIndex"

            [subcategoryIndex]="subCategoryIndex"></indicators>

<modal-alert #deleteModal (alertOutput)="deleteElement()">

  You are about to delete <span class="uk-text-bold" *ngIf="element">"{{element.name}}"</span> {{type}} permanently.

  Are you sure you want to proceed?

</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 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>