D-Net

{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "uoa-repository-manager-ui": {

      "root": "",

      "sourceRoot": "src",

      "projectType": "application",

      "prefix": "app",

      "schematics": {},

      "architect": {

        "build": {

          "builder": "@angular-devkit/build-angular:browser",

          "options": {

            "outputPath": "dist/uoa-repository-manager-ui",

            "index": "src/index.html",

            "main": "src/main.ts",

            "polyfills": "src/polyfills.ts",

            "tsConfig": "src/tsconfig.app.json",

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ],

            "styles": [

              "src/styles.scss"

            ],

            "scripts": [

              "node_modules/jquery/dist/jquery.min.js",

              "node_modules/uikit/dist/js/uikit.min.js",

              "node_modules/uikit/dist/js/uikit-icons.min.js"

            ]

          },

          "configurations": {

            "production": {

              "fileReplacements": [

                {

                  "replace": "src/environments/environment.ts",

                  "with": "src/environments/environment.prod.ts"

                }

              ],

              "optimization": true,

              "outputHashing": "all",

              "sourceMap": false,

              "extractCss": true,

              "namedChunks": false,

              "aot": true,

              "extractLicenses": true,

              "vendorChunk": false,

              "buildOptimizer": true

            }

          }

        },

        "serve": {

          "builder": "@angular-devkit/build-angular:dev-server",

          "options": {

            "browserTarget": "uoa-repository-manager-ui:build",

            "port": 4200,

            "host": "localhost"

          },

          "configurations": {

            "production": {

              "browserTarget": "uoa-repository-manager-ui:build:production"

            }

          }

        },

        "extract-i18n": {

          "builder": "@angular-devkit/build-angular:extract-i18n",

          "options": {

            "browserTarget": "uoa-repository-manager-ui:build"

          }

        },

        "test": {

          "builder": "@angular-devkit/build-angular:karma",

          "options": {

            "main": "src/test.ts",

            "polyfills": "src/polyfills.ts",

            "tsConfig": "src/tsconfig.spec.json",

            "karmaConfig": "src/karma.conf.js",

            "styles": [

              "src/styles.scss"

            ],

            "scripts": [],

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ]

          }

        },

        "lint": {

          "builder": "@angular-devkit/build-angular:tslint",

          "options": {

            "tsConfig": [

              "src/tsconfig.app.json",

              "src/tsconfig.spec.json"

            ],

            "exclude": [

              "**/node_modules/**"

            ]

          }

        }

      }

    },

    "uoa-repository-manager-ui-e2e": {

      "root": "e2e/",

      "projectType": "application",

      "architect": {

        "e2e": {

          "builder": "@angular-devkit/build-angular:protractor",

          "options": {

            "protractorConfig": "e2e/protractor.conf.js",

            "devServerTarget": "uoa-repository-manager-ui:serve"

          },

          "configurations": {

            "production": {

              "devServerTarget": "uoa-repository-manager-ui:serve:production"

            }

          }

        },

        "lint": {

          "builder": "@angular-devkit/build-angular:tslint",

          "options": {

            "tsConfig": "e2e/tsconfig.e2e.json",

            "exclude": [

              "**/node_modules/**"

            ]

          }

        }

      }

    }

  },

  "defaultProject": "uoa-repository-manager-ui"

}

{

  "name": "uoa-repository-manager-ui",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "start:proxy": "ng serve --proxy-config proxy.conf.json",

    "build": "rm -rf dist; ng build --prod",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "^6.0.3",

    "@angular/common": "^6.0.3",

    "@angular/compiler": "^6.0.3",

    "@angular/core": "^6.0.3",

    "@angular/forms": "^6.0.3",

    "@angular/http": "^6.0.3",

    "@angular/platform-browser": "^6.0.3",

    "@angular/platform-browser-dynamic": "^6.0.3",

    "@angular/router": "^6.0.3",

    "angular2-cookie-law": "^6.0.4",

    "bootstrap": "^4.1.3",

    "core-js": "^2.5.4",

    "jquery": "^3.3.1",

    "ngx-bootstrap": "^3.0.1",

    "ngx-matomo": "^0.1.2",

    "rxjs": "6.3.3",

    "uikit": "^3.0.0-rc.19",

    "zone.js": "^0.8.26"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.6.8",

    "@angular/cli": "~6.0.8",

    "@angular/compiler-cli": "^6.0.3",

    "@angular/language-service": "^6.0.3",

    "@types/jasmine": "~2.8.6",

    "@types/jasminewd2": "~2.0.3",

    "@types/node": "~8.9.4",

    "codelyzer": "~4.2.1",

    "jasmine-core": "~2.99.1",

    "jasmine-spec-reporter": "~4.2.1",

    "karma": "~3.1.3",

    "karma-chrome-launcher": "~2.2.0",

    "karma-coverage-istanbul-reporter": "~2.0.0",

    "karma-jasmine": "~1.1.1",

    "karma-jasmine-html-reporter": "^0.2.2",

    "protractor": "^5.4.1",

    "ts-node": "~5.0.1",

    "tslint": "~5.9.1",

    "typescript": "~2.7.2"

  }

}

{

  "compileOnSave": false,

  "compilerOptions": {

    "baseUrl": "./",

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "moduleResolution": "node",

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "target": "es5",

    "typeRoots": [

      "node_modules/@types"

    ],

    "lib": [

      "es2017",

      "dom"

    ]

  }

}

# Logs

logs

*.log

# Runtime data

pids

*.pid

*.seed

# Directory for instrumented libs generated by jscoverage/JSCover

lib-cov

# Coverage directory used by tools like istanbul

coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)

.grunt

# Compiled binary addons (http://nodejs.org/api/addons.html)

build/Release

# Users Environment Variables

.lock-wscript

# OS generated files #

.DS_Store

ehthumbs.db

Icon?

Thumbs.db

# Node Files #

/node_modules

/bower_components

# Coverage #

/coverage/

# Typing #

/src/typings/tsd/

/typings/

/tsd_typings/

# Dist #

/dist

/public/__build__/

/src/*/__build__/

__build__/**

.webpack.json

# Doc #

/doc/

# IDE #

.idea/

*.swp

{

  "rulesDirectory": [

    "node_modules/codelyzer"

  ],

  "rules": {

    "arrow-return-shorthand": true,

    "callable-types": true,

    "class-name": true,

    "comment-format": [

      true,

      "check-space"

    ],

    "curly": true,

    "deprecation": {

      "severity": "warn"

    },

    "eofline": true,

    "forin": true,

    "import-blacklist": [

      true,

      "rxjs/Rx"

    ],

    "import-spacing": true,

    "indent": [

      true,

      "spaces"

    ],

    "interface-over-type-literal": true,

    "label-position": true,

    "max-line-length": [

      true,

      140

    ],

    "member-access": false,

    "member-ordering": [

      true,

      {

        "order": [

          "static-field",

          "instance-field",

          "static-method",

          "instance-method"

        ]

      }

    ],

    "no-arg": true,

    "no-bitwise": true,

    "no-console": [

      true,

      "debug",

      "info",

      "time",

      "timeEnd",

      "trace"

    ],

    "no-construct": true,

    "no-debugger": true,

    "no-duplicate-super": true,

    "no-empty": false,

    "no-empty-interface": true,

    "no-eval": true,

    "no-inferrable-types": [

      true,

      "ignore-params"

    ],

    "no-misused-new": true,

    "no-non-null-assertion": true,

    "no-shadowed-variable": true,

    "no-string-literal": false,

    "no-string-throw": true,

    "no-switch-case-fall-through": true,

    "no-trailing-whitespace": true,

    "no-unnecessary-initializer": true,

    "no-unused-expression": true,

    "no-use-before-declare": true,

    "no-var-keyword": true,

    "object-literal-sort-keys": false,

    "one-line": [

      true,

      "check-open-brace",

      "check-catch",

      "check-else",

      "check-whitespace"

    ],

    "prefer-const": true,

    "quotemark": [

      true,

      "single"

    ],

    "radix": true,

    "semicolon": [

      true,

      "always"

    ],

    "triple-equals": [

      true,

      "allow-null-check"

    ],

    "typedef-whitespace": [

      true,

      {

        "call-signature": "nospace",

        "index-signature": "nospace",

        "parameter": "nospace",

        "property-declaration": "nospace",

        "variable-declaration": "nospace"

      }

    ],

    "unified-signatures": true,

    "variable-name": false,

    "whitespace": [

      true,

      "check-branch",

      "check-decl",

      "check-operator",

      "check-separator",

      "check-type"

    ],

    "no-output-on-prefix": true,

    "use-input-property-decorator": true,

    "use-output-property-decorator": true,

    "use-host-property-decorator": true,

    "no-input-rename": true,

    "no-output-rename": true,

    "use-life-cycle-interface": true,

    "use-pipe-transform-interface": true,

    "component-class-suffix": true,

    "directive-class-suffix": true

  }

}

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf

#COPY index.html /usr/share/nginx/html/

COPY dist/uoa-repository-manager-ui/      /usr/share/nginx/html

#COPY assets/    /usr/share/nginx/html/assets

EXPOSE 80

worker_processes  1;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {

        listen       80;

        #server_name  mysite.com www.mysite.com;

        root /usr/share/nginx/html;

        location / {

            try_files $uri$args $uri$args/ /index.html;

	    }

	    location /api {

	        # try_files $uri$args $uri$args/ /api

	        return 404 /api;

	    }

        location  /warp/vendor/uikit/fonts/ {

          #Include vanilla types

          include mime.types;

          #Missing mime types

          types  {font/truetype ttf;}

          types  {application/font-woff woff;}

          types  {application/font-woff2 woff2;}

        }

        location  /font-awesome-4.6.3/fonts/ {

              #Include vanilla types

              include mime.types;

              #Missing mime types

              types  {font/truetype ttf;}

              types  {application/font-woff woff;}

              types  {application/font-woff2 woff2;}

            }

        }

}

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';

describe('AppComponent', () => {

  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [

        AppComponent

      ],

    }).compileComponents();

  }));

  it('should create the app', async(() => {

    const fixture = TestBed.createComponent(AppComponent);

    const app = fixture.debugElement.componentInstance;

    expect(app).toBeTruthy();

  }));

  it(`should have as title 'app'`, async(() => {

    const fixture = TestBed.createComponent(AppComponent);

    const app = fixture.debugElement.componentInstance;

    expect(app.title).toEqual('app');

  }));

  it('should render title in a h1 tag', async(() => {

    const fixture = TestBed.createComponent(AppComponent);

    fixture.detectChanges();

    const compiled = fixture.debugElement.nativeElement;

    expect(compiled.querySelector('h1').textContent).toContain('Welcome to uoa-repository-manager-ui!');

  }));

});

/*

*  updated by myrto on 19/12/2018

*/

import { Component, OnInit } from '@angular/core';

@Component ({

  selector: 'app-admin',

  templateUrl: '../pageContainer.html'

})

export class AdminPgComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">

  <div class="uk-width-1-1@m uk-first-column">

    <h1 class="uk-h2">Metrics Admin</h1>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">

      <div class="uk-grid">

        <!-- LEFT HELP CONTENT -->

        <aside-help-content #leftHelperContent [position]="'left'"

                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

        <!-- MIDDLE -->

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

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

          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>

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

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

              {{ loadingMessage }}

            </div>

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

          </div>

          <div *ngIf="piwiks && piwiks.length>0">

            <table class="uk-table uk-table-striped uk-table-middle" style="font-size: 12px;">

              <thead>

              <tr>

                <th class="uk-text-nowrap">Repository</th>

                <th class="uk-text-nowrap">Piwik site</th>

                <th class="uk-text-nowrap">Requested on</th>

                <th class="uk-text-nowrap">Requestor</th>

                <th class="uk-text-nowrap">Validated</th>

                <th class="uk-text-nowrap">Actions</th>

              </tr>

              </thead>

              <tbody>

              <tr class="el-item" *ngFor="let piwik of piwiks">

                <td class="uk-table-shrink uk-text-truncate" style="min-width: 400px;">

                  {{ piwik.repositoryName }}<br>(ID: {{ piwik.repositoryId }})

                </td>

                <td class="uk-table-shrink">ID: {{ piwik.siteId }}<br>Authentication Token: {{ piwik.authenticationToken }}</td>

                <td class="uk-text-nowrap uk-table-shrink">{{ piwik.creationDate | date : "yyyy-MM-dd" }}</td>

                <td class="uk-text-nowrap uk-table-shrink">{{ piwik.requestorName }}<br>{{ piwik.requestorEmail }}</td>

                <td class="uk-text-nowrap uk-table-shrink">

                  <span *ngIf="piwik.validated">YES<br>on {{ piwik.validationDate | date : "yyyy-MM-dd" }}</span>

                  <span *ngIf="!piwik.validated">NO</span>

                </td>

                <td class="uk-text-nowrap uk-table-shrink">

                  <button id="{{ piwik.repositoryId }}"

                          *ngIf="!piwik.validated"

                          class="uk-button uk-button-primary validate"

                          (click)="confirmApproval(piwik.repositoryId)">Validate</button>

                </td>

              </tr>

              </tbody>

            </table>

          </div>

        </div>

        <!-- RIGHT HELP CONTENT -->

        <aside-help-content #rightHelperContent [position]="'right'"

                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

      </div>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

<confirmation-dialog #confirmApprovalModal [title]="modalTitle" [isModalShown]="isModalShown"

                     [confirmActionButton]="modalButton" (emitObject)="confirmedApproval($event)">

  Are you sure you want to validate the selected piwik site(s)?

</confirmation-dialog>

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { TabsModule } from 'ngx-bootstrap';

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

import { AdminPgRouting } from './adminPg.routing';

import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';

import { AdminPgComponent } from './adminPg.component';

import { AdminPgMetricsComponent } from './adminPg-metrics.component';

@NgModule ({

  imports: [

    CommonModule,

    TabsModule.forRoot(),

    FormsModule,

    AdminPgRouting,

    ReusableComponentsModule

  ],

  declarations: [

    AdminPgComponent,

    AdminPgMetricsComponent

  ]

})

export class AdminPgModule {}

import { Component, OnInit, ViewChild } from '@angular/core';

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

import { PiwikInfo } from '../../domain/typeScriptClasses';

import {

  enabledMetricsError,

  enablingMetrics,

  loadingReposMessage,

  reposRetrievalError,

  validatePiwikSiteSuccess

} from '../../domain/shared-messages';

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

@Component ({

  selector: 'app-admin-metrics',

  templateUrl: 'adminPg-metrics.component.html'

})

export class AdminPgMetricsComponent implements OnInit {

  piwiks: PiwikInfo[] = [];

  errorMessage: string;

  successMessage: string;

  loadingMessage: string;

  modalTitle = 'Approval Confirmation';

  modalButton = 'Yes, validate';

  isModalShown: boolean;

  @ViewChild('confirmApprovalModal')

  public confirmApprovalModal: ConfirmationDialogComponent;

  constructor(private piwikService: PiwikService) {}

  ngOnInit() {

    this.getPiwiks();

    this.isModalShown = false;

  }

  getPiwiks() {

    this.loadingMessage = loadingReposMessage;

    this.piwikService.getPiwikSitesForRepos()

      .subscribe (

        piwiks => this.piwiks = piwiks.sort( function(a, b) {

          if (a.repositoryName < b.repositoryName) {

            return -1;

          } else if (a.repositoryName > b.repositoryName) {

            return 1;

          } else {

            return 0;

          }

        } ),

        error => {

          console.log(error);

          this.loadingMessage = '';

          this.errorMessage = reposRetrievalError;

        },

        () => {

          this.loadingMessage = '';

          window.scroll(1, 1);

        }

      );

  }

  confirmApproval(repoId: string) {

    this.confirmApprovalModal.ids = [repoId];

    this.confirmApprovalModal.showModal();

  }

  confirmedApproval(ids: string[]) {

    const id = ids[0];

    console.log(`approving validation of piwik for repo with id: ${id}`);

    this.approvePiwik(id);

  }

  approvePiwik(id: string) {

    this.loadingMessage = enablingMetrics;

    this.errorMessage = '';

    this.successMessage = '';

    /*this.piwikService.approvePiwikSite(id).subscribe(*/

    this.piwikService.markPiwikSiteAsValidated(id).subscribe(

      response => console.log(`approvePiwikSite responded: ${JSON.stringify(response)}`),

      error => {

        console.log(error);

        this.loadingMessage = '';

        this.errorMessage = enabledMetricsError;

      },

      () => {

        this.loadingMessage = '';

        this.errorMessage = '';

        this.successMessage = validatePiwikSiteSuccess;

        this.getPiwiks();

      }

    );

  }

}

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { AdminPgComponent } from './adminPg.component';

import { AdminPgMetricsComponent } from './adminPg-metrics.component';

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

const adminRoutes: Routes = [

  {

    path: '',

    component: AdminPgComponent,

    canActivate: [AuthGuardService],

    canLoad: [AuthGuardService],

    children: [

      {

        path: 'metrics',

        component: AdminPgMetricsComponent

      }

    ]

  }

];

@NgModule ({

  imports: [RouterModule.forChild(adminRoutes)],

  exports: [RouterModule]

})

export class AdminPgRouting {}

<div class="uk-section-default uk-section uk-section-small uk-padding-remove-bottom" style="min-height: 325px">

  <!-- MARGIN-TOP  -->

  <div class="uk-sticky-placeholder" style="height: 84px; margin: 0px;" aria-hidden="true"></div>

  <div class="uk-container uk-container-large" style="min-height: 500px;">

    <router-outlet></router-outlet>

  </div>

</div>

/*

*  created by myrto on 12/12/2017

*/

import { Component, OnInit } from '@angular/core';

import { RegisterExistingDatasourceComponent } from './register-existing-datasource.component';

@Component ({

  selector: 'app-sr-data',

  templateUrl: './register-existing-datasource.component.html'

})

export class SrDataComponent extends RegisterExistingDatasourceComponent implements OnInit {

  ngOnInit() {

    this.datasourceType = 'data';

    this.currentMode = 're3data';

    super.ngOnInit();

  }

}

import { Component, OnInit } from '@angular/core';

import { RegisterNewDatasourceComponent } from './register-new-datasource.component';

@Component ({

  selector: 'app-sr-journal',

  templateUrl: './register-new-datasource.component.html'

})

export class SrJournalComponent extends RegisterNewDatasourceComponent implements OnInit {

  ngOnInit() {

    this.datasourceType = 'journal';

    super.ngOnInit();

  }

}

        <div>

          <div>

            <div class="animated fadeInRight stepContent">

              <div class="uk-alert uk-alert-danger" *ngIf="alertMessage" style="padding: 10px">

                {{ alertMessage }}

              </div>

              <div class="alert alert-info">

                Please make sure your repository is registered in

                <a target="_blank" href="{{ sourceUrl }}">

                  <i class="fas fa-external-link-alt" style="margin-right:3px;"></i>{{ sourceTitle }}

                </a>

                . <br>

                <span *ngIf="latestUpdate && (latestUpdate !== null)">

                  <b>Last Updated: </b>{{ latestUpdate }}

                </span>

              </div>

              <div>

                <div class="form-group">

                  <label class="control-label">Select repository's country</label>

                  <select class="form-control" (change) ="getReposInCountry($event.target.value)">

                    <option value="" disabled>-- none selected --</option>

                    <option *ngFor="let country of countries; let i = index" value="{{ i }}">{{ country.name ? country.name : country.code }}</option>

                  </select>

                </div>

                <div class="form-group">

                  <label class="control-label">Start typing in the name of your repository to narrow down the view</label>

                  <input #searchInput id="searchInput" class="form-control" type="text"

                         [disabled]="(!hasSelectedCountry)" (keyup)="searchTerm($event)" />

                </div>

              </div>

              <div *ngIf="selectedCountry">

                <div>

                  <h2>{{ sourceTitle }} Repositories in {{ selectedCountry.name ? selectedCountry.name : selectedCountry.code }}</h2>

                </div>

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

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

                    {{ loadingMessage }}

                  </div>

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

                </div>

                <div class="uk-alert uk-alert-warning" *ngIf="noRepositories">{{ noRepositories }}</div>

                <div class="repositoriesRadioButtonForm" *ngIf="countryRepos && !loadingMessage">

                  <div class="form-group"

                       *ngFor="let repo of countryRepos | repoFilter: searchBox">

                    <label for="{{ repo.id }}"

                           class="uk-button uk-link-muted visible_uk_links"

                           style="display: block; text-align: left;">

                      <input type="radio" value="{{ repo.id }}" id="{{ repo.id }}" name="repositories"

                             (change)="onChooseRepository(repo.id)" [disabled]="repo.registeredby !== null">

                      <span>

                        {{(repo.officialname !== null) ? repo.officialname : repo.englishname }}

                        <span *ngIf="repo.registeredby !== null" class="uk-label uk-label-warning registeredLabel">Registered</span>

                        <a target="_blank" href="{{ (repo.websiteurl !== null) ? repo.websiteurl : '' }}" [ngStyle]="">

                          <i class="fas fa-external-link-alt externalLink"></i>

                        </a>

                      </span>

                      <div *ngIf="repoId == repo.id" class="uk-float-right">

                        <a class="uk-button uk-button-primary uk-border-rounded uk-vertical-align-middle"

                                style="border-color: grey;"

                                (click)="pushedNext()">NEXT</a>

                      </div>

                    </label>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

/*

*  updated by myrto on 19/12/2018

*/

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

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

import { loadingReposMessage, noRepositoriesFound, noRepositoryChosenMsg, noServiceMessage } from '../../../domain/shared-messages';

import { Country, RepositorySnippet } from '../../../domain/typeScriptClasses';

@Component({

  selector: 'app-select-existing-datasource',

  templateUrl: './register-datasource-select-existing.component.html'

})

export class RegisterDatasourceSelectExistingComponent implements OnInit {

  countries: Country[] = [];

  hasSelectedCountry: boolean;

  selectedCountry: Country;

  countryRepos: RepositorySnippet[] = [];

  hasSelectedRepo: boolean;

  noRepositories: string;

  alertMessage: string;

  loadingMessage: string = loadingReposMessage;

  repoId: string;

  sourceUrl: string;

  sourceTitle: string;

  latestUpdate: string;

  @Input() mode: string;

  @Output() emitRepoId: EventEmitter<string> = new EventEmitter();

  @Output() promptNext: EventEmitter<boolean> = new EventEmitter();

  searchBox = '';

  constructor(private repoService: RepositoryService) {}

  ngOnInit() {

    this.setUpSourceInfo();

    this.getCountries();

    this.hasSelectedCountry = false;

  }

  setUpSourceInfo() {

    if (this.mode === 'opendoar') {

      this.sourceUrl = 'http://v2.sherpa.ac.uk/opendoar/';

      this.sourceTitle = 'OpenDOAR';

    } else if (this.mode === 're3data') {

      this.sourceUrl = 'https://www.re3data.org/';

      this.sourceTitle = 'Re3data';

    }

    this.getLatestUpdate();

  }

  getCountries() {

    this.repoService.getCountries()

      .subscribe(

        countries => {

          // TODO: check again getCountries null return values

          /*/!* check for null values *!/

          let nullVals = countries.filter(el => el.name === null);

          /!* remove null values from array *!/

          for (let nullVal of nullVals) {

            let i = countries.findIndex(el => el === nullVal);

            /!* remove null value from array *!/

            if (i !== -1) { countries.splice(i, 1); }

          }*/

          /* sort countries array */

          this.countries = countries.sort( function(a, b) {

            if (a.name < b.name) {

              return -1;

            } else if (a.name > b.name) {

              return 1;

            } else {

              return 0;

            }

          } );

        },

        error => {

          this.alertMessage = noServiceMessage;

          console.log(error);

        });

  }

  getReposInCountry(i: number) {

    setTimeout( () => {

      const country = this.countries[i];

      console.log(`I got ${country} and ${this.mode}`);

      this.countryRepos = [];

      this.selectedCountry = country;

      this.hasSelectedCountry = false;

      this.loadingMessage = loadingReposMessage;

      this.noRepositories = '';

      this.repoService.getRepositoriesOfCountry(country.code, this.mode).subscribe (

        repos => {

          this.countryRepos = repos;

        },

        error => {

          console.log(error.statusText);

          this.loadingMessage = '';

          this.alertMessage = noServiceMessage;

          this.countryRepos = [];

        },

        () => {

          if (!this.countryRepos || !this.countryRepos.length) {

            this.noRepositories = noRepositoriesFound;

          } else {

            this.noRepositories = '';

            if (this.selectedCountry.code === country.code) {

              /* to make sure that the correct set of repositories is displayed - in case of consequent country selections */

              this.hasSelectedCountry = true;

            } else {

              this.countryRepos = [];

            }

          }

          this.loadingMessage = '';

          this.alertMessage = '';

          console.log('this.selectedCountry became', JSON.stringify(this.selectedCountry));

        }

      );

    }, 500);

  }

  getLatestUpdate() {

    return this.repoService.getListLatestUpdate(this.mode).subscribe (

      responseDate => this.latestUpdate = responseDate['lastCollectionDate'],

      error => console.log(error)

    );

  }

  onChooseRepository(id: string) {

    this.hasSelectedRepo = true;

    this.repoId = id;

  }

  pushedNext() {

    this.promptNext.emit(true);

  }

  public goToNextStep(): boolean {

    if (!this.hasSelectedRepo || this.noRepositories) {

      this.alertMessage = noRepositoryChosenMsg;

      return false;

    } else {

      this.emitRepoId.emit(this.repoId);

      return true;

    }

  }

  searchTerm(event: any) {

    this.searchBox = event.target.value;

  }

}

<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">

  <div class="uk-width-1-1@m uk-first-column">

    <h1 class="uk-h2">Register your datasource</h1>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">

      <div class="uk-grid">

        <!-- LEFT HELP CONTENT -->

        <aside-help-content #leftHelperContent [position]="'left'"

                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

        <!-- MIDDLE -->

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

          <div class="wizard">

            <div class="wizardBreadcrumbs">

              <div class="steps clearfix">

                <div class="step active">

                  <div>

                    Enter Information

                    <span></span>

                  </div>

                </div>

                <div class="step {{ (currentStep > 1) ? 'active' : '' }}">

                  <div>

                    Add Interfaces

                    <span></span>

                  </div>

                </div>

                <div class="step {{ (currentStep > 2) ? 'active' : '' }}">

                  <div>

                    Finish

                    <span></span>

                  </div>

                </div>

              </div>

            </div>

            <div class="content">

              <div>

                <div class="animated fadeInRight stepContent">

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

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

                      {{ loadingMessage }}

                    </div>

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

                  </div>

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

                  <div>

                    <datasource-create-form *ngIf="(currentStep === 1) && !loadingMessage"

                                            #registerDatasource

                                            [mode]="datasourceType"

                                            [selectedRepo]="repo"

                                            (emittedInfo)="getCurrentRepo($event)"></datasource-create-form>

                    <div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-child-width-1-2">

                      <div *ngFor="let inter of dataForInterfaceComp"

                           class="interfacesForm el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">

                        <app-repository-interface-form #interfacesArray

                                                       [data]="inter"

                                                       (emitDeleteInterface)="removeInterfaceFromList($event)">

                        </app-repository-interface-form>

                      </div>

                      <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">

                        <div class="interface-box new" style="text-align: center">

                          <a class="add-new-element add-new-group" (click)="addInterfaceToList()">

                            <i class="far fa-plus-square" aria-hidden="true"></i>

                            <span class="info">Add New Interface</span>

                          </a>

                        </div>

                      </div>

                    </div>

                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="row openAIRECompliantLogoDownload">

                      <div class="col-lg-12">

                        <div class="col-md-12">

                          <div>

                            <div class="openAIRECompliantLogo">

                              <h2 class="openAIRECompliantLogoMessage">

                                Congratulations! Your repository was successfully registered in OpenAIRE. You can download this logo to use in your site.

                              </h2>

                              <img src="../../../../assets/imgs/3_0ValidatedLogo.png" alt="OpenAireCompliant">

                            </div>

                          </div>

                          <a (click)="downloadLogo()">

                            Download

                            <i class="fa fa-download" style=""></i>

                          </a>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

            <div class="wizardActions">

              <button *ngIf="(currentStep === 2) && !loadingMessage" class="uk-button uk-button-grey-light uk-margin-small-right"

                      type="button" (click)="moveBackAStep()">

                <i class="fa fa-angle-double-left"></i>

                Back

              </button>

              <button *ngIf="(currentStep < 3) && !loadingMessage" class="uk-button uk-button-grey-light uk-margin-small-left"

                      type="button" (click)="moveAStep()">

                Next

                <i class="fa fa-angle-double-right"></i>

              </button>

            </div>

          </div>

        </div>

        <!-- RIGHT HELP CONTENT -->

        <aside-help-content #rightHelperContent [position]="'right'"

                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

      </div>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

  </div>

</div>

<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">

  <div class="uk-width-1-1@m uk-first-column">

    <h1 class="uk-h2">Register your datasource</h1>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">

      <div class="uk-grid">

        <!-- LEFT HELP CONTENT -->

        <aside-help-content #leftHelperContent [position]="'left'"

                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

        <!-- MIDDLE -->

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

          <div class="wizard">

            <div class="wizardBreadcrumbs">

              <div class="steps clearfix">

                <div class="step active">

                  <div>

                    Select repository

                    <span></span>

                  </div>

                </div>

                <div class="step {{ (currentStep > 0) ? 'active' : '' }}">

                  <div>

                    Enter Information

                    <span></span>

                  </div>

                </div>

                <div class="step {{ (currentStep > 1) ? 'active' : '' }}">

                  <div>

                    Add Interfaces

                    <span></span>

                  </div>

                </div>

                <div class="step {{ (currentStep > 2) ? 'active' : '' }}">

                  <div>

                    Finish

                    <span></span>

                  </div>

                </div>

              </div>

            </div>

            <div class="content">

              <div>

                <div class="animated fadeInRight stepContent">

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

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

                      {{ loadingMessage }}

                    </div>

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

                  </div>

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

                  <div>

                    <app-select-existing-datasource *ngIf="(currentStep === 0) && (currentMode !== null) && !loadingMessage"

                                                    #datasourcesByCountry

                                                    [mode]="currentMode"

                                                    (emitRepoId)="getRepoId($event)"

                                                    (promptNext)="goToStep2($event)"></app-select-existing-datasource>

                    <datasource-update-form *ngIf="(currentStep === 1) && (repo !== null) && !loadingMessage"

                                            #registerDatasource

                                            [selectedRepo]="repo"

                                            (emittedInfo)="getUpdatedRepo($event)"></datasource-update-form>

                    <div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-child-width-1-2">

                      <div *ngFor="let inter of dataForInterfaceComp"

                           class="interfacesForm el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">

                        <app-repository-interface-form #interfacesArray

                                                       [data]="inter"

                                                       (emitDeleteInterface)="removeInterfaceFromList($event)">

                        </app-repository-interface-form>

                      </div>

                      <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">

                        <div class="interface-box new" style="text-align: center">

                          <a class="add-new-element add-new-group" (click)="addInterfaceToList()">

                            <i class="far fa-plus-square" aria-hidden="true"></i>

                            <span class="info">Add New Interface</span>

                          </a>

                        </div>

                      </div>

                    </div>

                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="row openAIRECompliantLogoDownload">

                      <div class="col-lg-12">

                        <div class="col-md-12">

                          <div>

                            <div class="openAIRECompliantLogo">

                              <h2 class="openAIRECompliantLogoMessage">

                                Congratulations! Your repository was successfully registered in OpenAIRE. You can download this logo to use in your site.

                              </h2>

                              <img src="../../../../assets/imgs/3_0ValidatedLogo.png" alt="OpenAireCompliant">

                            </div>

                          </div>

                          <a (click)="downloadLogo()">

                            Download

                            <i class="fa fa-download" style=""></i>

                          </a>

                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>

            <div class="wizardActions">

              <button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"

                      class="uk-button uk-button-grey-light uk-margin-small-right"

                      type="button" (click)="moveBackAStep()">

                <i class="fa fa-angle-double-left"></i>

                Back

              </button>

              <button *ngIf="(currentStep < 3) && !loadingMessage"

                      class="uk-button uk-button-grey-light uk-margin-small-left"

                      type="button" (click)="moveAStep()">

                Next

                <i class="fa fa-angle-double-right"></i>

              </button>

            </div>

          </div>

        </div>

        <!-- RIGHT HELP CONTENT -->

        <aside-help-content #rightHelperContent [position]="'right'"

                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

        </aside-help-content>

      </div>

    </div>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>