Skip to content

Commit

Permalink
Merge pull request #629 from RADAR-base/fix/better-project-view
Browse files Browse the repository at this point in the history 
Fix/better project view
  • Loading branch information
@nivemaham
nivemaham committed Nov 9, 2021
2 parents d82aeb4 + 9ac3bd3 commit 3d3ff43
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 32 deletions.
1 change: 0 additions & 1 deletion src/main/webapp/app/shared/group/group.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export class GroupComponent implements OnInit, OnDestroy, OnChanges {
}

ngOnInit() {
this.loadGroups();
this.registerChangeInGroups();
}

Expand Down
7 changes: 4 additions & 3 deletions src/main/webapp/app/shared/subject/subject.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ <h5 [translate]="'managementPortalApp.subject.filter.title'"></h5>
[(ngModel)]="filters.enrollmentDateFrom"
ngbDatepicker
#enrollmentFromDatePicker="ngbDatepicker"
(ngModelChange)='filterChanged("enrollmentDateFrom", filters.enrollmentDateFrom)'>
(ngModelChange)='enrollmentDateFromFilterChanged("enrollmentDateFrom", filters.enrollmentDateFrom)'>
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="enrollmentFromDatePicker.toggle()" type="button"></button>
</div>
Expand All @@ -101,7 +101,7 @@ <h5 [translate]="'managementPortalApp.subject.filter.title'"></h5>
name="enrollmentDateTo"
ngbDatepicker
#enrollmentToDatePicker="ngbDatepicker"
(ngModelChange)='filterChanged("enrollmentDateTo", filters.enrollmentDateTo)'>
(ngModelChange)='enrollmentDateToFilterChanged("enrollmentDateTo", filters.enrollmentDateTo)'>
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="enrollmentToDatePicker.toggle()" type="button"></button>
</div>
Expand Down Expand Up @@ -131,11 +131,12 @@ <h5 [translate]="'managementPortalApp.subject.filter.title'"></h5>
placeholder="yyyy-mm-dd"
ngbDatepicker
#dateOfBirthDatePicker="ngbDatepicker"
(ngModelChange)='filterChanged("dateOfBirth", filters.dateOfBirth)'>
(ngModelChange)='dateOfBirthFilterChanged("dateOfBirth", filters.dateOfBirth)'>
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dateOfBirthDatePicker.toggle()" type="button"></button>
</div>
</div>
<span *ngIf="dateOfBirthError" class="error" [translate]="'managementPortalApp.subject.filter.error.invalidDate'"></span>
</div>
</div>

Expand Down
9 changes: 9 additions & 0 deletions src/main/webapp/app/shared/subject/subject.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,3 +157,12 @@ background: rgba(169, 209, 255, 0.3);
.subject-pagination__load-more:active {
background: rgba(0, 120, 255, 0.15);
}

.form-group .error{
color: red;
background-color: inherit;
}

.applied-filters .badge {
cursor: pointer;
}
67 changes: 55 additions & 12 deletions src/main/webapp/app/shared/subject/subject.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators';
import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';

import {Group, GroupService, ITEMS_PER_PAGE, Project} from '..';
import { Subject } from './subject.model';
Expand All @@ -23,7 +23,7 @@ import { PagingParams } from '../commons';
import { AlertService } from '../util/alert.service';
import { EventManager } from '../util/event-manager.service';
import { parseLinks } from '../util/parse-links-util';
import {NgbCalendar, NgbDate, NgbDateParserFormatter} from "@ng-bootstrap/ng-bootstrap";
import {NgbCalendar, NgbDate, NgbDateParserFormatter, NgbDateStruct} from "@ng-bootstrap/ng-bootstrap";

@Component({
selector: 'jhi-subjects',
Expand Down Expand Up @@ -77,6 +77,7 @@ export class SubjectComponent implements OnInit, OnDestroy, OnChanges {

enrollmentDateFromError = false;
enrollmentDateToError = false;
dateOfBirthError = false;

isAdvancedFilterCollapsed = true;

Expand Down Expand Up @@ -110,6 +111,7 @@ export class SubjectComponent implements OnInit, OnDestroy, OnChanges {

this.filterTriggerUpdate$.pipe(
debounceTime(300),
filter(f => f !== ''),
distinctUntilChanged()
).subscribe(() => this.applyFilter());
}
Expand Down Expand Up @@ -237,7 +239,7 @@ export class SubjectComponent implements OnInit, OnDestroy, OnChanges {
return params;
}

isRange(from: NgbDate, to: NgbDate): boolean {
isRange(from: NgbDateStruct, to: NgbDateStruct): boolean {
if(from && !this.calendar.isValid(NgbDate.from(from))){
this.enrollmentDateFromError = true;
return false;
Expand Down Expand Up @@ -300,7 +302,32 @@ export class SubjectComponent implements OnInit, OnDestroy, OnChanges {
}

filterChanged(field: string, text: string) {
this.filterTriggerUpdate$.next(field + text);
this.filterTriggerUpdate$.next(field + ',' + text);
}

dateOfBirthFilterChanged(field: string, date: NgbDateStruct){
this.dateOfBirthError = false;
if (date) {
if (this.calendar.isValid(NgbDate.from(date))) {
this.filterTriggerUpdate$.next(field + ',' + this.formatter.format(date));
} else {
this.dateOfBirthError = true;
}
} else {
this.filterTriggerUpdate$.next(field);
}
}

enrollmentDateFromFilterChanged(field: string, date: NgbDateStruct){
if (this.isRange(date, this.filters.enrollmentDateTo)) {
this.filterTriggerUpdate$.next(field + ',' + this.formatter.format(date));
}
}

enrollmentDateToFilterChanged(field: string, date: NgbDateStruct){
if (this.isRange(this.filters.enrollmentDateFrom, date)) {
this.filterTriggerUpdate$.next(field + ',' + this.formatter.format(date));
}
}

applyFilter() {
Expand All @@ -319,6 +346,17 @@ export class SubjectComponent implements OnInit, OnDestroy, OnChanges {
clearDateFilter(filterName: string) {
this.appliedFilters[filterName] = undefined;
this.filters[filterName] = undefined;
switch (filterName) {
case 'dateOfBirth':
this.dateOfBirthError = false;
break;
case 'enrollmentDateFrom':
this.enrollmentDateFromError = false;
break;
case 'enrollmentDateTo':
this.enrollmentDateToError = false;
break;
}
this.applyFilter();
}

Expand Down Expand Up @@ -358,17 +396,22 @@ export class SubjectComponent implements OnInit, OnDestroy, OnChanges {
}

updateSortingSortBy(predicate) {
this.subjects = [];
this.predicate = predicate;
this.page = 1;
this.transition();
if (this.predicate !== predicate) {
this.subjects = [];
this.predicate = predicate;
this.page = 1;
this.transition();
}
}

updateSortingOrder(direction) {
this.subjects = [];
this.ascending = direction === 'asc';
this.page = 1;
this.transition();
if ((this.ascending && direction !== 'asc') ||
(!this.ascending && direction === 'asc')){
this.subjects = [];
this.ascending = direction === 'asc';
this.page = 1;
this.transition();
}
}

selectAll(checked: boolean = true): void {
Expand Down
15 changes: 0 additions & 15 deletions src/test/javascript/e2e/cypress/integration/entities/subject.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,12 @@ describe('Subject e2e test', () => {
});

it('should load create Subject dialog', () => {
cy.wait(1000);
cy.get('jhi-subjects button.create-subject').click();
cy.get('jhi-subject-dialog h4.modal-title').first().should('have.text', 'Create or edit a Subject');
cy.get('jhi-subject-dialog button.close').click();
});

it('should be able to create new subject', () => {
cy.wait(1000);
cy.get('jhi-subjects button.create-subject').click();
cy.get('jhi-subject-dialog input[name=externalLink]').type('https://radar-base-test.org');
cy.get('jhi-subject-dialog input[name=externalId]').type('test-subject-1');
Expand All @@ -33,15 +31,13 @@ describe('Subject e2e test', () => {
});

it('should be able to edit a subject', () => {
cy.wait(1000);
cy.contains('jhi-subjects .subject-row', 'test-subject-1').contains('button', 'Edit').click();
cy.get('jhi-subject-dialog input[name=externalLink]').clear().type('https://radar-base-test-edited.org');
cy.contains('jhi-subject-dialog button.btn-primary', 'Save').click();
cy.get('jhi-subjects .subject-row').should('have.length', 20);
});

it('should have load subject row with subject-id, external-id, status, project, sources and attributes columns', () => {
cy.wait(1000);
cy.get('jhi-subjects .subject-row').first().find('.subject-row__select-row input')
.invoke('attr', 'type')
.should('eq', 'checkbox')
Expand Down Expand Up @@ -80,23 +76,20 @@ describe('Subject e2e test', () => {
})

it('should be able to filter subjects by subject id', () => {
cy.wait(1000);
cy.get('#field-subject-id').type('b-1');
cy.get('jhi-subjects .subject-row').should('have.length', 11);
cy.get('#field-subject-id').clear();
cy.get('jhi-subjects .subject-row').should('have.length', 20);
});

it('should be able to filter subjects by subject external id', () => {
cy.wait(1000);
cy.get('#field-subject-external-id').type('test-subject-1');
cy.get('jhi-subjects .subject-row').should('have.length', 1);
cy.get('#field-subject-external-id').clear();
cy.get('jhi-subjects .subject-row').should('have.length', 20);
});

it('should be able to filter subjects by human readable id', () => {
cy.wait(1000);
cy.get('#advanced-filter').click();
cy.get('#field-human-readable-id').type('Test');
cy.get('jhi-subjects .subject-row').should('have.length', 1);
Expand All @@ -106,7 +99,6 @@ describe('Subject e2e test', () => {
});

it('should be able to filter subjects by person name', () => {
cy.wait(1000);
cy.get('#advanced-filter').click();
cy.get('#field-person-name').type('Test');
cy.get('jhi-subjects .subject-row').should('have.length', 1);
Expand All @@ -118,7 +110,6 @@ describe('Subject e2e test', () => {
// TODO Filter by group

it('should be able to filter subjects by date of birth', () => {
cy.wait(1000);
cy.get('#advanced-filter').click();
cy.get('#field_date_of_birth').type('1980-01-01');
cy.get('jhi-subjects .subject-row').should('have.length', 1);
Expand All @@ -130,7 +121,6 @@ describe('Subject e2e test', () => {
// TODO Filter by Enrollment Date

it('should be able to sort subjects by subject id in asc/desc order', () => {
cy.wait(1000);
cy.get('jhi-subjects #field-order-by').click();
cy.get('jhi-subjects #order-by-desc').click();
cy.get('jhi-subjects .subject-row').first().should('contain.text', 'sub-9');
Expand All @@ -141,7 +131,6 @@ describe('Subject e2e test', () => {


it('should be able to sort subjects by external id in asc/desc order', () => {
cy.wait(1000);
cy.get('jhi-subjects #field-sort-by').click();
cy.get('jhi-subjects #sort-by-externalId').click();
cy.get('jhi-subjects .subject-row').first().should('contain.text', 'sub-1');
Expand All @@ -151,30 +140,26 @@ describe('Subject e2e test', () => {
});

it('should be able to delete a subject without source', () => {
cy.wait(1000);
cy.contains('jhi-subjects .subject-row', 'test-subject-1').find('a').first().click();
cy.contains('jhi-subject-detail button', 'Delete').click();
cy.contains('jhi-subject-delete-dialog button', 'Delete').click();
cy.get('jhi-subjects .subject-row').should('have.length', 20);
});

it('should be able to delete a group', () => {
cy.wait(1000);
cy.contains('jhi-project-detail ul.nav-tabs .nav-item', 'Groups').click();
cy.contains('jhi-groups .group-row', 'Test Group C').contains('button', 'Delete').click();
cy.contains('jhi-group-delete-dialog button', 'Delete').click();
cy.get('jhi-groups .group-row').should('have.length', 2);
});

it('should show number of loaded subjects and total number of subjects', () => {
cy.wait(1000);
cy.contains('jhi-project-detail ul.nav-tabs .nav-item', 'Subjects').click();
cy.get('jhi-subjects a.subject-pagination__load-more').should('have.text', 'Load more (20/25 shown)');
cy.get('jhi-subjects .subject-row').should('have.length', 20);
});

it('should be able to load subjects on loadMore click', () => {
cy.wait(1000);
cy.get('jhi-subjects a.subject-pagination__load-more').click();
cy.get('jhi-subjects span.subject-pagination__all-loaded').should('have.text', 'All 25 subjects loaded');
cy.get('jhi-subjects .subject-row').should('have.length', 25);
Expand Down
1 change: 0 additions & 1 deletion src/test/javascript/e2e/cypress/integration/scenarios/generate-qr-code.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ describe('Project view: Generate QR code', () => {
});

it('should open pair app dialog', () => {
cy.wait(1000);
cy.contains('button', 'Pair App').first().click();
cy.get('[name=pairForm]').find('h4').first()
.should('have.text', 'Pair an application');
Expand Down

0 comments on commit 3d3ff43

Please sign in to comment.