openaire-library/monitor-admin/topic/topic.component.html

<div class="uk-flex">
  <aside *ngIf="stakeholder" uk-sticky="end: .sidebar_main_swipe;" [attr.offset]="offset" id="sidebar_main">
    <div sidebar-content>
      <div class="back">
        <a [routerLink]="'/admin/' + stakeholder.alias" class="uk-flex uk-flex-middle uk-flex-center">
          <div class="uk-width-auto">
            <icon name="west" [flex]="true" ratio="1.3"></icon>
          </div>
          <span class="uk-width-expand uk-text-truncate uk-margin-left hide-on-close">Indicators</span>
        </a>
      </div>
      <div *ngIf="showLogo" id="sidebar_logo" class="uk-margin-top">
        <img [src]="stakeholder | logoUrl">
      </div>
      <div class="menu_section uk-margin-large-top">
        <ul class="uk-list uk-nav uk-nav-default" transition-group [id]="'topics'"
            uk-nav="duration: 400">
          <li *ngFor="let topic of stakeholder.topics; let i=index" class="uk-parent" [class.uk-active]="topicIndex === i"
              transition-group-item>
            <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
               [title]="topic.name" class="uk-visible-toggle uk-flex uk-flex-middle">
              <div *ngIf="topic.icon" class="uk-width-auto">
                <icon class="menu-icon" [svg]="topic.icon" ratio="0.9" [flex]="true"></icon>
              </div>
              <span [class.hide-on-close]="topic.icon"
                    class="uk-width-expand uk-text-truncate uk-margin-small-left">
                {{topic.name}}
              </span>
              <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i"
                    (click)="$event.stopPropagation();$event.preventDefault()">
                <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
                  ratio="0.6"></icon>
                <a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
                  <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
                        ratio="0.6"></icon>
                  <icon [flex]="true" name="more_vert"></icon>
                </a>
                <div #element *ngIf="isEditable && (isCurator || showVisibility)"
                  uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
                  <ul class="uk-nav uk-dropdown-nav">
                    <ng-container *ngIf="isCurator">
                      <li>
                        <a (click)="editTopicOpen(i); hide(element)">
                          <div class="uk-flex uk-flex-middle">
                             <icon [flex]="true" name="edit" ratio="0.6"></icon>
                             <span class="uk-margin-small-left uk-width-expand">Edit</span>
                          </div>
                        </a>
                      </li>
                      <li *ngIf="i > 0 || i < stakeholder.topics.length - 1" class="uk-nav-divider"></li>
                      <li *ngIf="i > 0">
                        <a (click)="hide(element);moveTopic(i)">
                          <div class="uk-flex uk-flex-middle">
                             <icon [flex]="true" name="north" ratio="0.6"></icon>
                             <span class="uk-margin-small-left uk-width-expand">Move Up</span>
                          </div>
                        </a>
                      </li>
                      <li *ngIf="i < stakeholder.topics.length - 1">
                        <a (click)="hide(element);moveTopic(i, i + 1)">
                          <div class="uk-flex uk-flex-middle">
                             <icon [flex]="true" name="south" ratio="0.6"></icon>
                             <span class="uk-margin-small-left uk-width-expand">Move Down</span>
                          </div>
                        </a>
                      </li>
                    </ng-container>
                    <ng-container *ngIf="showVisibility">
                      <li *ngIf="isCurator" class="uk-nav-divider"></li>
                      <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
                      <li [class.uk-active]="topic.visibility === v.value">
                        <a (click)="openVisibilityModal(i, v.value, 'topic'); hide(element)">
                          <div class="uk-flex uk-flex-middle">
                             <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
                             <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
                             <icon *ngIf="topic.visibility === v.value" [flex]="true" name="done"
                                   class="uk-text-secondary" ratio="0.8"></icon>
                          </div>
                        </a>
                      </li>
                    </ng-template>
                    </ng-container>
                    <ng-container *ngIf="!topic.defaultId && isCurator">
                      <li class="uk-nav-divider">
                      <li>
                        <a (click)="deleteTopicOpen(i, 'delete'); hide(element)">
                          <div class="uk-flex uk-flex-middle">
                             <icon [flex]="true" name="delete" ratio="0.6"></icon>
                             <span class="uk-margin-small-left uk-width-expand">Delete</span>
                          </div>
                        </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>
                    </ng-container>
                  </ul>
                </div>
              </span>
              <span class="uk-nav-parent-icon hide-on-close"></span>
            </a>
            <ul *ngIf="isBrowser || topicIndex === i" class="uk-nav-sub" [id]="'categories-' + i.toString()"
                transition-group>
              <li *ngFor="let category of topic.categories; let j=index" transition-group-item class="uk-visible-toggle"
                  [class.uk-active]="categoryIndex == j">
                <a (click)="chooseCategory(j)" [title]="category.name">
                  <div class="uk-flex uk-flex-middle uk-width-1-1">
                    <span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
                    <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j"
                          (click)="$event.stopPropagation();$event.preventDefault()">
                    <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
                      ratio="0.6"></icon>
                    <a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
                      <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
                            ratio="0.6"></icon>
                      <icon [flex]="true" name="more_vert"></icon>
                    </a>
                    <div #element *ngIf="isEditable && (isCurator || showVisibility)"
                         uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
                      <ul class="uk-nav uk-dropdown-nav">
                        <ng-container *ngIf="isCurator">
                          <li>
                            <a (click)="editCategoryOpen(j); hide(element)">
                              <div class="uk-flex uk-flex-middle">
                                 <icon [flex]="true" name="edit" ratio="0.6"></icon>
                                 <span class="uk-margin-small-left uk-width-expand">Edit</span>
                              </div>
                            </a>
                          </li>
                          <li *ngIf="j > 0 || j < stakeholder.topics[topicIndex].categories.length - 1"
                              class="uk-nav-divider"></li>
                          <li *ngIf="j > 0">
                            <a (click)="hide(element);moveCategory(j)">
                              <div class="uk-flex uk-flex-middle">
                                 <icon [flex]="true" name="north" ratio="0.6"></icon>
                                 <span class="uk-margin-small-left uk-width-expand">Move Up</span>
                              </div>
                            </a>
                          </li>
                          <li *ngIf="j < stakeholder.topics[topicIndex].categories.length - 1">
                            <a (click)="hide(element);moveCategory(j, j + 1)">
                              <div class="uk-flex uk-flex-middle">
                                 <icon [flex]="true" name="south" ratio="0.6"></icon>
                                 <span class="uk-margin-small-left uk-width-expand">Move Down</span>
                              </div>
                            </a>
                          </li>

                        </ng-container>
                        <ng-container *ngIf="showVisibility">
                          <li *ngIf="isCurator" class="uk-nav-divider"></li>
                          <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
                          <li [class.uk-active]="category.visibility === v.value">
                            <a (click)="openVisibilityModal(j, v.value, 'category'); hide(element)">
                              <div class="uk-flex uk-flex-middle">
                                 <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
                                 <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
                                 <icon *ngIf="category.visibility === v.value" [flex]="true" name="done"
                                       class="uk-text-secondary" ratio="0.8"></icon>
                              </div>
                            </a>
                          </li>
                        </ng-template>
                        </ng-container>
                        <ng-container *ngIf="!category.defaultId && isCurator">
                          <li class="uk-nav-divider">
                          <li>
                            <a (click)="deleteCategoryOpen(j, 'delete'); hide(element)">
                              <div class="uk-flex uk-flex-middle">
                                 <icon [flex]="true" name="delete" ratio="0.6"></icon>
                                 <span class="uk-margin-small-left uk-width-expand">Delete</span>
                              </div>
                            </a>
                          </li>
                        </ng-container>
                      </ul>
                    </div>
                  </span>
                  </div>
                </a>
              </li>
              <li *ngIf="isCurator && isEditable">
                <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
                  <icon name="add" [flex]="true"></icon>
                  <span class="hide-on-close">Create new category</span>
                </a>
              </li>
            </ul>
          </li>
          <li *ngIf="isCurator && isEditable" class="hide-on-close">
            <a (click)="editTopicOpen(-1); $event.preventDefault()">
              <div class="uk-flex uk-flex-middle">
                <div class="uk-width-auto">
                  <icon class="menu-icon" name="add" [flex]="true"></icon>
                </div>
                <span class="uk-width-expand uk-text-truncate uk-margin-small-left hide-on-close">Create new topic</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </aside>
  <div #pageContent *ngIf="stakeholder && filters" class="uk-width-1-1" page-content>
    <div actions class="uk-margin-medium-top">
      <div *ngIf="stakeholder.topics.length > 0 && showVisibility" class="uk-flex uk-flex-center uk-flex-right@m uk-width-1-1">
        <button class="uk-button uk-button-primary uk-flex uk-flex-middle">
          <icon name="visibility" [flex]="true"></icon>
          <span class="uk-margin-small-left uk-margin-small-right">Preview</span>
          <icon name="expand_more" [flex]="true"></icon>
        </button>
        <div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false">
          <ul class="uk-nav uk-dropdown-nav">
            <li><a target="_blank"
                   [routerLink]="'/' + stakeholder.alias + '/' + stakeholder.topics[topicIndex].alias"
                   [queryParams]="{view: 'PUBLIC'}"
                   (click)="hide(element)">Public view</a>
            </li>
            <li><a target="_blank" [routerLink]="'/' + stakeholder.alias + '/' +
            stakeholder.topics[topicIndex].alias"
                   [queryParams]="{view: 'RESTRICTED'}"
                   (click)="hide(element)">Restricted view</a>
            </li>
          </ul>
        </div>
      </div>
      <ul *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex].categories.length > 0 && stakeholder.topics[topicIndex].categories[categoryIndex]"
          transition-group class="uk-tab uk-margin-xsmall-top" [id]="'subCategories'">
        <ng-container *ngFor="let subCategory of stakeholder.topics[topicIndex].categories[categoryIndex].subCategories; let i=index">
          <li class="uk-visible-toggle uk-flex" [class.uk-active]="subCategoryIndex === i" transition-group-item>
            <a (click)="chooseSubcategory(i)">
              <span class="uk-text-uppercase">{{subCategory.name}}</span>
            </a>
            <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
                  [class.uk-invisible-hover]="subCategoryIndex !== i"
                  (click)="$event.stopPropagation();$event.preventDefault()">
            <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
              ratio="0.6"></icon>
            <a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
              <icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
                    ratio="0.6"></icon>
              <icon [flex]="true" name="more_vert"></icon>
            </a>
            <div #element *ngIf="isEditable && (isCurator || showVisibility)"
              uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
              <ul class="uk-nav uk-dropdown-nav">
                <ng-container *ngIf="isCurator">
                  <li>
                    <a (click)="editSubCategoryOpen(i); hide(element)">
                      <div class="uk-flex uk-flex-middle">
                         <icon [flex]="true" name="edit" ratio="0.6"></icon>
                         <span class="uk-margin-small-left uk-width-expand">Edit</span>
                      </div>
                    </a>
                  </li>
                  <li *ngIf="i > 0 || i < stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length - 1"
                      class="uk-nav-divider"></li>
                  <li *ngIf="i > 0">
                    <a (click)="hide(element);moveSubCategory(i)">
                      <div class="uk-flex uk-flex-middle">
                         <icon [flex]="true" name="west" ratio="0.6"></icon>
                         <span class="uk-margin-small-left uk-width-expand">Move Left</span>
                      </div>
                    </a>
                  </li>
                  <li *ngIf="i < stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length - 1">
                    <a (click)="hide(element);moveSubCategory(i, i + 1)">
                      <div class="uk-flex uk-flex-middle">
                         <icon [flex]="true" name="east" ratio="0.6"></icon>
                         <span class="uk-margin-small-left uk-width-expand">Move Right</span>
                      </div>
                    </a>
                  </li>
                  <li class="uk-nav-divider"></li>
                  <li *ngIf="indicators">
                    <a (click)=" indicators.exportIndicators(i);hide(element)">
                      <div class="uk-flex uk-flex-middle">
                        <icon [flex]="true" name="download" ratio="0.6"></icon>
                        <span class="uk-margin-small-left uk-width-expand">Export indicators</span>
                      </div>
                    </a>
                  </li>
                  <li *ngIf="indicators">
                    <a (click)="file.value = ''; this.index=i; file.click(); hide(element)">
                      <div class="uk-flex uk-flex-middle">
                        <icon [flex]="true" name="upload" ratio="0.6"></icon>
                        <span class="uk-margin-small-left uk-width-expand">Import indicators</span>
                      </div>
                    </a>
                  </li>
                </ng-container>
                <ng-container *ngIf="showVisibility">
                  <li *ngIf="isCurator" class="uk-nav-divider"></li>
                   <ng-template ngFor [ngForOf]="stakeholderUtils.visibilities" let-v>
                  <li [class.uk-active]="subCategory.visibility === v.value">
                    <a (click)="openVisibilityModal(i, v.value, 'subcategory'); hide(element)">
                      <div class="uk-flex uk-flex-middle">
                         <icon [flex]="true" [name]="v.icon" ratio="0.6"></icon>
                         <span class="uk-margin-small-left uk-width-expand">{{v.label}}</span>
                         <icon *ngIf="subCategory.visibility === v.value" [flex]="true" name="done"
                               class="uk-text-secondary" ratio="0.8"></icon>
                      </div>
                    </a>
                  </li>
                </ng-template>
                </ng-container>
                <ng-container *ngIf="!subCategory.defaultId && isCurator">
                  <li class="uk-nav-divider">
                  <li>
                    <a (click)="deleteSubcategoryOpen(i, 'delete'); hide(element)">
                      <div class="uk-flex uk-flex-middle">
                         <icon [flex]="true" name="delete" ratio="0.6"></icon>
                         <span class="uk-margin-small-left uk-width-expand">Delete</span>
                      </div>
                    </a>
                  </li>
                </ng-container>
              </ul>
            </div>
          </span>
          </li>
        </ng-container>
        <li *ngIf="isCurator && isEditable">
          <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
            <icon name="add" [flex]="true"></icon>
            <span class="uk-text-uppercase">Create new subcategory</span>
          </a>
        </li>
      </ul>
    </div>
    <div inner>
      <input #file id="import-file" type="file" class="uk-hidden"
             (change)="indicators.fileChangeEvent($event, this.index)"/>
      <indicators #indicators [topicIndex]="topicIndex" [categoryIndex]="categoryIndex"
                  [subcategoryIndex]="subCategoryIndex" [user]="user"
                  [stakeholder]="stakeholder" [changed]="change.asObservable()"></indicators>
    </div>
  </div>
</div>

<modal-alert #deleteModal classTitle="uk-background-primary uk-light" (alertOutput)="deleteElement()"
             [overflowBody]="false">
  <div [class.uk-invisible]="loading" class="uk-position-relative">
    <div *ngIf="loading">
      <loading class="uk-position-center"></loading>
    </div>
    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?
  </div>
</modal-alert>
<modal-alert #editModal classTitle="uk-background-primary uk-light" (alertOutput)="saveElement()"
             [okDisabled]="form && (form.invalid || form.pristine)" [large]="true">
  <div *ngIf="loading" class="uk-position-relative uk-height-large">
    <loading class="uk-position-center"></loading>
  </div>
  <div *ngIf="form" [class.uk-hidden]="loading"
       class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" [formGroup]="form" uk-grid>
    <div input [formInput]="form.get('name')" class="uk-width-1-2@m" placeholder="Title"></div>
    <div *ngIf="showVisibility" input [formInput]="form.get('visibility')" class="uk-width-1-2@m" placeholder="Status"
         [options]="stakeholderUtils.visibilities" type="select"></div>
    <div input [formInput]="form.get('description')" placeholder="Description" type="textarea" rows="4"></div>
    <div *ngIf="form.get('icon')" input [formInput]="form.get('icon')" placeholder="Icon(SVG)" type="textarea"></div>
  </div>
</modal-alert>
<modal-alert #visibilityModal [large]="false" classTitle="uk-background-primary uk-light">
  <div class="">
    You have the option to change the visibility status of your {{type}}, with or without applying the changed status to
    its contents.
  </div>
  <div class="uk-flex uk-flex-center uk-margin-medium-top uk-margin-medium-bottom">
    <button class="uk-button uk-button-primary" (click)="changeElementStatus()">
      Change {{type}} status
    </button>
  </div>
  <div class="uk-flex uk-flex-center uk-margin-medium-bottom">
    <button class="uk-button uk-button-primary" (click)="changeElementStatus(true)">
      Change {{type}} and its contents' status
    </button>
  </div>
  <div class="uk-text-small">
    <p class="uk-text-bold uk-text-uppercase uk-margin-remove">Note:</p>
    <div>
      <span class="uk-text-bold uk-text-italic">The status of the {{type}} prevails the status of its contents.</span>
      For example, if a {{type}}'s status is private, while it has
      <span *ngIf="type == 'topic'">a category, subcategory or an indicator</span>
      <span *ngIf="type == 'category'">a subcategory or an indicator</span>
      <span *ngIf="type == 'subcategory'">an indicator</span>
      that is public, the private status of the {{type}} dominates.
    </div>
  </div>
</modal-alert>