D-Net

    this.repositoryService.getRepositoriesSnippetsOfUser()

<div class="uk-margin-small-top">

  <div>Update the users who can access the dashboard to manage the datasource.</div>

  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>

  <div *ngIf="loadingMessage" class="loading-medium">

    <div class="loader-small" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

      {{ loadingMessage }}

    </div>

    <div class="whiteFilm"></div>

  </div>

  <div *ngIf="!loadingMessage" >

    <div class="uk-margin-top">

      <div class="uk-flex uk-flex-right@m uk-flex-right@l">

        <a class="uk-button uk-button-primary action uk-flex uk-flex-middle" (click)="showAddRepoAdminModal()">

          <!--<i class="md-icon material-icons">clear</i>-->

          <span class="uk-margin-small-left">Invite admin</span>

        </a>

      </div>

    </div>

    <div class="uk-margin-medium-top">

      <div *ngFor="let repoAdmin of repoAdmins" class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid="">

        <div class="uk-width-3-4@l uk-width-1-2@m uk-first-column">

          <div class="">

            <span class="uk-text-muted">Email: </span>

            <span class="uk-text-bold">{{repoAdmin.email}}</span>

          </div>

        </div>

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

          <div class="uk-flex uk-flex-center">

            <a class="uk-button uk-button-default action uk-flex uk-flex-middle" (click)="showDeletionModal(repoAdmin)">

              <i class="md-icon material-icons">clear</i>

              <span class="uk-margin-small-left">Remove</span>

            </a>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

<confirmation-dialog #deleteRepositoryAdminModal [title]="'Remove datasource admin'" [isModalShown]="isDeleteModalShown"

                     [confirmButNotCloseButton]="'Remove'" (emitObject)="deleteRepoAdmin($event)">

  <div *ngIf="modalErrorMessage" class="uk-alert uk-alert-danger">{{modalErrorMessage}}</div>

  <div *ngIf="modalLoadingMessage" class="loading-small">

    <div class="loader-small" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

      {{ modalLoadingMessage }}

    </div>

    <div class="whiteFilm"></div>

  </div>

  <!--<div *ngIf="!modalLoadingMessage && !modalErrorMessage">-->

    <!--<div *ngIf="selectedAdminForDelete">-->

      <!--<h6>Are you sure you want to delete {{ selectedAdminForDelete.email }} from the list of repository admins?</h6>-->

    <!--</div>-->

  <!--</div>-->

  <div *ngIf="selectedAdminForDelete">

    <h6>Are you sure you want to remove this user admin?</h6>

    <pre>

      <ng-container *ngIf="selectedAdminForDelete.firstName || selectedAdminForDelete.lastName">

        {{selectedAdminForDelete.firstName}} {{selectedAdminForDelete.lastName}}

      </ng-container>

      {{ selectedAdminForDelete.email }}

    </pre>

  </div>

</confirmation-dialog>

<confirmation-dialog #addRepositoryAdminModal [title]="'Add new datasource admin'" [isModalShown]="isAddModalShown"

                     [confirmButNotCloseButton]="'Submit'" (emitObject)="addRepositoryAdmin($event)">

  <div *ngIf="modalErrorMessage" class="uk-alert uk-alert-danger">{{modalErrorMessage}}</div>

  <div *ngIf="modalLoadingMessage" class="loading-small">

    <div class="loader-small" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

      {{ modalLoadingMessage }}

    </div>

    <div class="whiteFilm"></div>

  </div>

  <h6>Add the email address of the new user admin. Make sure the user already has an OpenAIRE account with this email address.</h6>

  <form>

    <div class="uk-margin">

      <input class="uk-input" placeholder="Enter email..." [formControl]="emailControl">

    </div>

  </form>

</confirmation-dialog>

<!--<div id="addAdminModal" uk-modal>-->

  <!--<div class="uk-modal-dialog" style="top: 95.5px;">-->

    <!--<div class="uk-modal-header">-->

      <!--<h3 class="uk-modal-title">Adding a new repository admin for this repository</h3>-->

    <!--</div>-->

    <!--<div class="uk-modal-body">-->

      <!--<p>Lorem ipsum.....</p>-->

    <!--</div>-->

    <!--<div class="uk-modal-footer uk-text-right">-->

      <!--<button type="button" class="md-btn md-btn-flat uk-modal-close">Cancel</button>-->

      <!--<button (click)="addRepositoryAdmin()" type="button" class="md-btn md-btn-flat md-btn-flat-primary">Add admin</button>-->

    <!--</div>-->

  <!--</div>-->

  <!--&lt;!&ndash;<div *ngIf="!loadingMessage" class="uk-modal-dialog uk-modal-body">&ndash;&gt;-->

    <!--&lt;!&ndash;<div *ngIf="selectedAdminForDelete">&ndash;&gt;-->

      <!--&lt;!&ndash;<h6>Are you sure you want to delete {{ selectedAdminForDelete.email }} from the list of repository admins?</h6>&ndash;&gt;-->

      <!--&lt;!&ndash;&lt;!&ndash;<p>Deleting a {{serviceORresource}} is an irreversible action.</p>&ndash;&gt;&ndash;&gt;-->

    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;<button class="uk-button uk-button-danger uk-modal-close" type="button" (click)="deleteRepoAdmin(selectedAdminForDelete.email)">Delete</button>&ndash;&gt;-->

    <!--&lt;!&ndash;<button class="uk-button uk-button-primary uk-modal-close" type="button" (click)="closeDeletionModal()">Cancel</button>&ndash;&gt;-->

  <!--&lt;!&ndash;</div>&ndash;&gt;-->

  <!--&lt;!&ndash;<div *ngIf="loadingMessage">&ndash;&gt;-->

    <!--&lt;!&ndash;<div class="loader-small" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">&ndash;&gt;-->

      <!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->

    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;&lt;!&ndash;    <div class="whiteFilm"></div>&ndash;&gt;&ndash;&gt;-->

  <!--&lt;!&ndash;</div>&ndash;&gt;-->

<!--</div>-->

import {Component, Input, OnChanges, SimpleChanges, ViewChild} from '@angular/core';

import { Repository, User } from '../../../domain/typeScriptClasses';

import { RepositoryService } from '../../../services/repository.service';

import {loadingRepoMessage} from '../../../domain/shared-messages';

import {ConfirmationDialogComponent} from '../../../shared/reusablecomponents/confirmation-dialog.component';

import {FormControl} from '@angular/forms';

declare var UIkit: any;

@Component ({

  selector: 'app-update-repo-admins',

  templateUrl: 'update-repo-admins.component.html',

})

export class UpdateRepoAdminsComponent implements OnChanges {

  @Input() repo: Repository;

  loadingMessage: string;

  errorMessage: string;

  repoAdmins: User[];

  selectedAdminForDelete: User;

  isDeleteModalShown: boolean;

  @ViewChild('deleteRepositoryAdminModal')

  public deleteRepositoryAdminModal: ConfirmationDialogComponent;

  isAddModalShown: boolean;

  @ViewChild('addRepositoryAdminModal')

  public addRepositoryAdminModal: ConfirmationDialogComponent;

  modalErrorMessage: string;

  modalLoadingMessage: string;

  emailControl = new FormControl();

  constructor (private repoService: RepositoryService) { }

  ngOnChanges(changes: SimpleChanges): void {

    this.getRepositoryAdmins();

  }

  getRepositoryAdmins() {

    this.loadingMessage = 'Retrieving repository\'s admins...';

    this.repoService.getRepositoryAdmins(this.repo.id).subscribe(

      users => {

        this.repoAdmins = users;

      },

      error => {

        console.log(error);

        this.loadingMessage = '';

        this.errorMessage = 'Error retrieving the repository\'s admins';

      },

      () => {

        this.loadingMessage = '';

      }

    );

  }

  showDeletionModal(repoAdmin: User) {

    this.errorMessage = '';

    this.loadingMessage = '';

    this.selectedAdminForDelete = repoAdmin;

    if (this.selectedAdminForDelete) {

      this.deleteRepositoryAdminModal.showModal();

      // UIkit.modal('#deletionModal').show();

    }

  }

  closeDeletionModal() {

    this.selectedAdminForDelete = null;

    this.deleteRepositoryAdminModal.hideModal();

    // UIkit.modal('#deletionModal').hide();

  }

  deleteRepoAdmin(event: any) {

    console.log('deleting: ', this.selectedAdminForDelete.email);

    // this.deleteRepositoryAdminModal.hideModal();

    this.modalLoadingMessage = 'Deleting admin...';

    this.repoService.deleteRepositoryAdmin(this.repo.id, this.selectedAdminForDelete.email).subscribe(

      res => {

        this.selectedAdminForDelete = null;

        this.deleteRepositoryAdminModal.hideModal();

        this.getRepositoryAdmins();

      },

      error => {

        console.log('Error deleting repository\'s admins', error);

        this.modalLoadingMessage = '';

        this.modalErrorMessage = 'Error deleting admin';

      },

      () => {

        this.modalLoadingMessage = '';

        // this.deleteRepositoryAdminModal.hideModal();

      }

    );

  }

  showAddRepoAdminModal() {

    this.emailControl.reset();

    this.modalErrorMessage = '';

    this.modalLoadingMessage = '';

    this.addRepositoryAdminModal.showModal();

    // UIkit.modal('#addAdminModal').show();

  }

  addRepositoryAdmin() {

    this.modalLoadingMessage = 'Adding repository admin';

    console.log('Adding repository admin..', this.emailControl.value);

    this.repoService.addRepositoryAdmin(this.repo.id, this.emailControl.value).subscribe(

      res => {

        this.addRepositoryAdminModal.hideModal();

        this.getRepositoryAdmins();

      }, error => {

        console.log('Error adding repository admin', error);

        this.modalLoadingMessage = '';

        if(error.status === 404) {

          this.modalErrorMessage = 'This email address is not associated with an OpenAIRE user account.\n' +

            'Please make sure the user has an OpenAIRE account and then try again.';

        } else {

          this.modalErrorMessage = 'Error deleting the user admin, please try again. If the error persists, ' +

            'please contact helpdesk@openaire.eu';

        }

      },

      () => {

        this.modalLoadingMessage = '';

      }

    );

    // UIkit.modal('#addAdminModal').hide();

  }

}

                  <app-update-repo-admins [repo]="repo"></app-update-repo-admins>

import { SharedService } from '../../../services/shared.service';

import { RepositoryComponent } from './repository.component';

import { RepositoryRoutingModule } from './repository-routing.module';

import { DashboardComponent } from './dashboard/dashboard.component';

import {AuthenticationInterceptor} from '../../services/authentication-interceptor';

import {UsagestatsService} from '../../services/usagestats.service';

import {RepositoryService} from '../../services/repository.service';

import {AuthGuardService} from '../../services/auth-guard.service';

import {ValidatorService} from '../../services/validator.service';

import {AuthenticationService} from '../../services/authentication.service';

import {MonitorService} from '../../services/monitor.service';

import {PiwikService} from '../../services/piwik.service';

import {StatisticsService} from '../../services/statistics.service';

import {BrokerService} from '../../services/broker.service';

import {DashboardService} from '../../services/dashboard.service';

import { SharedService } from '../../services/shared.service';

import { SourcesUpdateRepoComponent } from './update/sources-update-repo.component';

import { SourcesModule } from '../sources/sources.module';

import { UpdateRepoAdminsComponent } from './update/update-repo-admins.component';

    UpdateRepoAdminsComponent

  Typology, User

  private apiUrl = environment.API_ENDPOINT + '/repositories/';

  getRepositoriesSnippetsOfUser(): Observable<RepositorySnippet[]> {

    const url = `${this.apiUrl}snippets/user`;

    const   url = `${this.apiUrl}getRepositoryById/${id}`;

    const url = `${this.apiUrl}countries`;

  getRepositoryAdmins(repoId: string): Observable<User[]> {

    const url = `${this.apiUrl}${repoId}/admins`;

    console.log(`knocking on: ${url}`);

    return this.httpClient.get<User[]>(url, headerOptions);

  }

  deleteRepositoryAdmin(repoId: string, repoAdminEmail: string) {

    const url = `${this.apiUrl}${repoId}/admins/${repoAdminEmail}`;

    console.log(`knocking on: ${url}`);

    return this.httpClient.delete(url, headerOptions);

  }

  addRepositoryAdmin(repoId: string, repoAdminEmail: string) {

    const url = `${this.apiUrl}${repoId}/admins`;

    return this.httpClient.post<string>(url, repoAdminEmail, headerOptions);

  }

    this.repositoryService.getRepositoriesSnippetsOfUser()

    this.repoService.getRepositoriesSnippetsOfUser()

      <button *ngIf="confirmButNotCloseButton" (click)="confirmedButNotCloseAction()" type="button" class="md-btn md-btn-flat md-btn-flat-primary">{{confirmButNotCloseButton}}</button>

  @Input() public confirmButNotCloseButton: string;

  public confirmedButNotCloseAction() {

    this.emitObject.emit(this._ids);

  }

    this.repositoryService.getRepositoriesSnippetsOfUser()

export class User {

  sub: string;

  firstName: string;

  lastName: string;

  email: string;

}

      "hasInstallScript": true,