D-Net

<aside id="sidebar_main">

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

    <div class="uk-padding-small">

      <img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">

      <h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>

      <span class="uk-text-large">Admin Dashboard</span>

    </div>

  </div>

  <div *ngIf="stakeholder" 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 uk-text-uppercase">

            Back

          </div>

        </a>

      </li>

      <li [class.current_section]="analysisOpen"

          [class.act_section]="analysisOpen"

          class="submenu_trigger">

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

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

          <span class="menu_title uk-width-expand">Analysis Indicators</span>

        </a>

        <ul [style.display]="(analysisOpen?'block':'none')">

          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">

            <li>

              <a [routerLink]="topic.alias">

                <span *ngIf="topic.icon" class="menu_icon"><i

                  class="material-icons">{{topic.icon}}</i></span>

                <div class="menu_title uk-width-expand">

                  {{topic.name}}

                </div>

                <div class="uk-width-1-6" (click)="$event.stopPropagation();$event.preventDefault()">

                  <i class="material-icons onHover">more_vert</i>

                  <div 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(i)">Edit</a></li>

                      <li><a (click)="toggleTopicStatus(topic)">

                        {{topic.isActive ? 'Deactivate' : 'Activate'}}</a>

                      </li>

                      <li><a (click)="toggleTopicAccess(topic)">

                          {{topic.isPublic?'Unpublish':'Publish'}}</a>

                      </li>

                      <hr class="uk-nav-divider">

                      <li><a (click)="deleteTopicOpen(i)">Delete</a></li>

                    </ul>

                  </div>

                </div>

              </a>

            </li>

          </ng-template>

          <li>

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

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

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

            </a>

          </li>

        </ul>

      </li>

    </ul>

  </div>

</aside>

<div id="page_content" click-outside-or-esc targetId="page_content" [escClose]="false" (clickOutside)="toggleOpen($event)">

  <div id="page_content_inner">

    <h4 class="uk-text-bold">

      Customise your Monitor Dashboard!

    </h4>

    <div class="uk-text-large uk-margin-bottom">

      <div>

        Modify or add new topics, categories and content.<br><br>

        Start your navigation through the <span class="md-color-blue-900">left side menu!</span>

      </div>

      <div class="uk-margin-small-top uk-margin-small-bottom uk-margin-large-left">

        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="88" viewBox="0 0 30 88">

          <g id="Group_749" data-name="Group 749" transform="translate(-872.168 -490.5)">

            <text class="fill_text" id="OR" transform="translate(872.168 540.271)" font-size="18"

                  font-family="OpenSans-Bold, Open Sans" font-weight="900" opacity="0.8">

              <tspan x="0" y="0">OR</tspan>

            </text>

            <line class="stroke_line" id="Line_225" data-name="Line 225" y2="30" transform="translate(885.5 490.5)"

                  fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>

            <line class="stroke_line" id="Line_226" data-name="Line 226" y2="30" transform="translate(885.5 548.5)"

                  fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>

          </g>

        </svg>

      </div>

      <div class="uk-width-1-1">

        Select one of the <span class="md-color-blue-900">topics below</span>!

      </div>

    </div>

    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>

      <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>

        <div>

          <a [routerLink]="topic.alias" class="md-card">

            <div class="md-card-content">

              <h6 class="uk-text-bold">{{topic.name}}</h6>

              <div class="uk-text-secondary">

                {{topic.description}}

              </div>

            </div>

          </a>

        </div>

      </ng-template>

    </div>

  </div>

</div>

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

  You are about to delete <span class="uk-text-bold" *ngIf="index !== -1">"{{stakeholder.topics[index].name}}"</span> topic permanently.

  Are you sure you want to proceed?

</modal-alert>

<modal-alert #editModal (alertOutput)="saveTopic(index)">

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