MaDgIK
/
metadata-validator-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Validator | right-col-temp]: [WIP] oaipmh-validator.component: Updates in right sidebar of validation page.

This commit is contained in:
Konstantina Galouni 2023-09-13 15:04:18 +03:00
parent e0aa075c3a
commit e9c22bfe73
2 changed files with 165 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.html
View File

@ -1,5 +1,6 @@
<div id="page_content">
<div id="page_content_header" class="uk-blur-background">
<div>
<!-- uk-blur-background-->
<div class="">
<div class="uk-grid uk-margin-remove-left" uk-grid>
<!-- <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">-->
<!-- <div class="uk-section uk-width-expand" [formGroup]="form">-->
@ -55,8 +56,8 @@
</div>
</div>
<!-- <div id="right-sidebar" *ngIf="help" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
<!-- <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">-->
<!-- <div id="right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
<!-- <div class="uk-sticky" uk-sticky [attr.offset]="offset">-->
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
<!-- <div class="uk-h5 uk-light uk-text-center">Help</div>-->
<!-- <div class="uk-card uk-card-default">-->
@ -70,74 +71,76 @@
<div id="right-sidebar" *ngIf="help"
class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m uk-card uk-card-default">
<div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-overflow-auto uk-height-1-1">
<div>
<div class="uk-section uk-section-small uk-background-primary">
<div #right_sidebar class="uk-height-1-1">
<div class="uk-height-1-1">
<div #right_sidebar_header class="uk-section uk-section-small uk-background-primary">
<div class="uk-h5 uk-light uk-text-center">Help</div>
</div>
<div class="uk-card-body uk-padding-remove-horizontal">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
1
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Data source</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>
Select from the list, or enter the base OAI URL of the repository/ journal.
The repository's/ journal's published sets are exposed in a later stage and you may select one for the compatibility tests.
</p>
</div>
</li>
<li>
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
2
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Guidelines</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>You may apply two types of compatibility tests on your repository:</p>
<ul>
<li>Content: specific to the content/ format of the dc fields</li>
<li>Usage: specific to the implementation of OAI-PMH</li>
</ul>
<p>You may select from a predefined set of rules (OpenAIRE for Literature Repositories, OpenAIRE for Data Archives) or customize them according to your needs.</p>
</div>
</li>
<li>
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
3
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Parameters</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>
...
</p>
</div>
</li>
</ul>
<div class="uk-overflow-auto uk-padding-remove-horizontal" [style]="'height: ' + right_sidebar_body_height + 'px;'">
<div class="uk-card-body">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
1
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Data source</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>
Select from the list, or enter the base OAI URL of the repository/ journal.
The repository's/ journal's published sets are exposed in a later stage and you may select one for the compatibility tests.
</p>
</div>
</li>
<li>
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
2
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Guidelines</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>You may apply two types of compatibility tests on your repository:</p>
<ul>
<li>Content: specific to the content/ format of the dc fields</li>
<li>Usage: specific to the implementation of OAI-PMH</li>
</ul>
<p>You may select from a predefined set of rules (OpenAIRE for Literature Repositories, OpenAIRE for Data Archives) or customize them according to your needs.</p>
</div>
</li>
<li>
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
3
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Parameters</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>
...
</p>
</div>
</li>
</ul>
</div>
</div>
<a uk-sticky="end: true" class="uk-sticky uk-card-footer uk-button-link uk-text-center" (click)="help=false">Dismiss Help</a>
<a #right_sidebar_footer uk-sticky="end: true" class="uk-sticky uk-card-footer uk-button-link uk-text-center" (click)="help=false">Dismiss Help</a>
</div>
</div>
</div>
@ -147,7 +150,7 @@
<div *ngIf="!help" class="quick-contact uk-align-right uk-padding uk-padding-remove-vertical">
<button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle"
(click)="help = true">
(click)="openHelp();">
<icon name="lightbulb" [flex]="true"></icon>
<span class="uk-margin-small-left">help</span>
</button>
@ -156,3 +159,72 @@
</div>
</div>
<!--<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">-->
<!-- <div class="tm-main">-->
<!-- <div class="publication">-->
<!-- <div class="uk-grid uk-margin-remove-left" uk-grid>-->
<!-- <div id="center-content" class="uk-width-expand uk-padding-remove uk-background-default">-->
<!-- <div class="uk-heading-2xlarge">-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <ng-container >-->
<!-- <div id="right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m">-->
<!-- <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">-->
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
<!-- test-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </ng-container>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
<!--<div id="tm-main" class="uk-visible@m landing uk-section uk-padding-remove tm-middle">-->
<!-- <div class="tm-main">-->
<!-- <div class="">-->
<!-- <div class="uk-grid uk-margin-remove-left" uk-grid>-->
<!-- <div id="center-content" class="uk-width-2-3 uk-width-3-4@l">-->
<!-- <div class="uk-heading-2xlarge">-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- <div>test</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="right-sidebar" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
<!-- <div class="uk-sticky" uk-sticky [attr.offset]="offset">-->
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
<!-- <div class="uk-h5 uk-light uk-text-center">Help</div>-->
<!-- <div class="uk-card uk-card-default">-->
<!-- <div class="uk-card-body">test body</div>-->
<!-- <div class="uk-card-footer">Dismiss Help</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->

25
src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {OaipmhValidatorService} from "../../../services/oaipmh-validator.service";
import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
import {Option} from "../../../openaire-library/sharedComponents/input/input.component";
@ -13,6 +13,10 @@ import {Subscriber} from "rxjs";
styleUrls: ['./oaipmh-validator.component.less']
})
export class OaipmhValidatorComponent implements OnInit {
@ViewChild("right_sidebar") right_sidebar;
@ViewChild("right_sidebar_header") right_sidebar_header;
@ViewChild("right_sidebar_footer") right_sidebar_footer;
public options: Option[] = [
{label: 'OpenAIRE Guidelines for Data Archives Profile v2', value: 'OpenAIRE Guidelines for Data Archives Profile v2'},
{label: 'OpenAIRE Guidelines for Literature Repositories Profile v3', value: 'OpenAIRE Guidelines for Literature Repositories Profile v3'},
@ -27,9 +31,13 @@ export class OaipmhValidatorComponent implements OnInit {
public offset: number = 0;
public help: boolean = false;
public right_sidebar_body_height: number = 0;
subscriptions = [];
constructor(private fb: UntypedFormBuilder, private router: Router, private validator: OaipmhValidatorService) {
constructor(private fb: UntypedFormBuilder, private router: Router,
private cdr: ChangeDetectorRef,
private validator: OaipmhValidatorService) {
this.form = this.fb.group({
url: this.fb.control("", StringUtils.urlValidator()),//[Validators.required/*, Validators.email*/]),
guidelines: this.fb.control("", Validators.required),
@ -58,6 +66,17 @@ export class OaipmhValidatorComponent implements OnInit {
});
}
openHelp() {
this.help = true;
this.cdr.detectChanges();
if (typeof document !== 'undefined') {
console.log(this.right_sidebar.nativeElement.offsetHeight);
console.log(this.right_sidebar_header.nativeElement.offsetHeight);
console.log(this.right_sidebar_footer.nativeElement.offsetHeight);
this.right_sidebar_body_height = this.right_sidebar.nativeElement.offsetHeight - this.right_sidebar_header.nativeElement.offsetHeight - this.right_sidebar_footer.nativeElement.offsetHeight;
}
}
updateRecordsNum(increase: boolean = true) {
this.recordsNum = this.recordsNum + (increase ? 10 : -10);
this.form.get('recordsNum').setValue(this.recordsNum);
@ -95,4 +114,6 @@ export class OaipmhValidatorComponent implements OnInit {
}
));
}
protected readonly innerHeight = innerHeight;
}