Commit 5b6cec9b authored by rajkumar's avatar rajkumar
Browse files

1) Adding a body DIV and container DIV to seperate the caption and content with a divider

2) Removing old Dashboard screen and adding new screen
3) Adding Home icon in the header section
4) Adding New routes for navigation from the dashboard
5) Updating expandables with card layout
parent 91289655
......@@ -72,6 +72,16 @@ const appRoutes: Routes = [
component: ReportComponent,
canActivate: [WebinAuthenticationGuardService],
},
{
path: 'app-submit',
component: SubmitComponent,
canActivate: [WebinAuthenticationGuardService],
},
{
path: 'app-checklist/:checklistType/:init',
component: ChecklistComponent,
canActivate: [WebinAuthenticationGuardService],
},
{
path: '**',
component: DashboardComponent,
......
.body{
padding:10px 20px 10px 10px;
}
.container{
padding: 10px 0px 0px 0px;
}
.checklist-restriction {
color: black;
background-color: #F5F5F5;
......
<mat-expansion-panel [expanded]="init">
<mat-expansion-panel-header>
<mat-panel-title>
<b>Download spreadsheet template for annotated sequences</b>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="body">
<div class="mat-h3 mat-tittle">Download spreadsheet template for annotated sequences</div>
<mat-divider></mat-divider>
<div *ngIf="!checklistGroupDataSource && !init">
<div class="container">
<mat-card class="mat-body">
<div *ngIf="!checklistGroupDataSource && !init" class="mat-body">
<p *ngIf="checklistType === ChecklistType.sample">
Use this submission option to create and download a spreadsheet template for samples.
......@@ -208,4 +208,9 @@
</mat-step>
</mat-vertical-stepper>
</mat-expansion-panel>
</mat-card>
</div>
</div>
......@@ -55,7 +55,8 @@ export class ChecklistComponent implements OnInit {
constructor(
private _webinAuthenticationService: WebinAuthenticationService,
private _webinReportService: WebinReportService,
private _route: ActivatedRoute) {
private _route: ActivatedRoute,
private activatedRoute: ActivatedRoute) {
if (_route) {
switch (_route.snapshot.data.checklistType) {
case 'sample': {
......@@ -71,9 +72,16 @@ export class ChecklistComponent implements OnInit {
}
ngOnInit(): void {
this.checklistType=this.activatedRoute.snapshot.params.checklistType;
console.log("this.checklistType : "+this.checklistType)
this.init=this.activatedRoute.snapshot.params.init;
if (this.init) {
this.initChecklists();
}
}
// field group restriction type (not supported for spreadsheets)
......@@ -172,7 +180,7 @@ export class ChecklistComponent implements OnInit {
}
initChecklists(): void {
// console.log(' ** initChecklists **');
console.log(' ** initChecklists **');
this.active = true;
this.dataError = undefined;
......
.body{
padding-top: 20px;
padding-bottom: 10px;
padding:10px 20px 10px 10px;
}
.container{
margin: 20px;
}
.header{
text-align: center;
font-size: 15px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(109, 108, 108);
}
.cat-element{
width: 100%
}
.category p{
font-size: medium;
font-weight: 600;
color: #00767b;
padding: 10px 0px 0px 0px;
}
.cat-element span{
display: inline-block;
......@@ -29,28 +13,19 @@
cursor: pointer;
}
.cat-element span p{
font-size: 10px;
font-weight: 600;
color: #6361618f;
margin-top: -10px;
}
.cat-element span mat-icon{
width: 50px !important;
font-size: 50px;
padding-right: 25px;
}
.insert_chart{
color: #02028c;
}
.account_box{
color:#900000;
}
.note_add{
color:#036d03;
}
.system_update_alt{
color:#85858e;
}
span:hover {
background-color: rgba(180, 180, 180, 0.164);
}
mat-card{
margin:10px;
}
\ No newline at end of file
<div class="body">
<div class="header">Webin Home</div>
<div class="mat-h3 mat-tittle">Dashboard</div>
<mat-divider></mat-divider>
<div class="container">
<div class="category">
<p>Account Management</p>
<div class="cat-element">
<span>
<mat-icon class="account_box">account_box</mat-icon>
<p>Account Information</p>
</span>
</div>
<mat-accordion>
<div class="category" hidden>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Account Management
</mat-panel-title>
</mat-expansion-panel-header>
<div class="cat-element">
<span>
<mat-icon class="account_box">account_box</mat-icon>
<p class="mat-small mat-caption">Account Information</p>
</span>
</div>
</mat-expansion-panel>
</div>
<div class="category">
<p>Submissions</p>
<div class="cat-element">
<span>
<mat-icon class="note_add">note_add</mat-icon>
<p>Xml Submission</p>
</span>
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title> Submissions </mat-panel-title>
</mat-expansion-panel-header>
<div class="cat-element">
<span [routerLink]="['/app-submit']">
<mat-icon class="note_add">note_add</mat-icon>
<p class="mat-small mat-caption">Xml Submission</p>
</span>
</div>
</mat-expansion-panel>
</div>
<div class="category">
<p>Spreadsheet Templates</p>
<div class="cat-element">
<span>
<mat-icon class="system_update_alt">system_update_alt</mat-icon>
<p>Download Spreadsheet</p>
</span>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Spreadsheet Templates</mat-panel-title>
</mat-expansion-panel-header>
<div class="cat-element">
<span [routerLink]="['/app-checklist','sequence',true]">
<mat-icon class="system_update_alt">system_update_alt</mat-icon>
<p class="mat-small mat-caption">Annotated Sequences</p>
</span>
</div>
</mat-expansion-panel>
</div>
<!-------------------------Reports------------------------->
<div class="category">
<p>Reports</p>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Reports</mat-panel-title>
</mat-expansion-panel-header>
<div class="cat-element">
<span [routerLink]="['/report',ReportType.studies]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Studies Report</p>
<p class="mat-small mat-caption">Studies Report</p>
</span>
<span [routerLink]="['/report',ReportType.samples]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Samples Report</p>
<p class="mat-small mat-caption">Samples Report</p>
</span>
<span [routerLink]="['/report',ReportType.runs]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Runs Report</p>
<p class="mat-small mat-caption">Runs Report</p>
</span>
<span [routerLink]="['/report',ReportType.analyses]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Analysis Report</p>
<p class="mat-small mat-caption">Analysis Report</p>
</span>
<span [routerLink]="['/report',ReportType.runFiles]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Run File Report</p>
</span>
<ng-container *ngIf="!isEga()">
<span [routerLink]="['/report',ReportType.analysisFiles]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Analysis File Report</p>
</span>
<span [routerLink]="['/report',ReportType.runFiles]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Run File Report</p>
</span>
<span [routerLink]="['/report',ReportType.runProcess]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Run Process Report</p>
</span>
<span [routerLink]="['/report',ReportType.analysisFiles]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Analysis File Report</p>
</span>
<span [routerLink]="['/report',ReportType.analysisProcess]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>Analysis Process Report</p>
</span>
<span [routerLink]="['/report',ReportType.runProcess]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Run Process Report</p>
</span>
<span [routerLink]="['/report',ReportType.unsubmittedFiles]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p>UnsubmittedFiles Files Report</p>
</span>
<span [routerLink]="['/report',ReportType.analysisProcess]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Analysis Process Report</p>
</span>
<span [routerLink]="['/report',ReportType.unsubmittedFiles]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Unsubmitted Files Report</p>
</span>
</ng-container>
<ng-container *ngIf="isEga()">
<span [routerLink]="['/report',ReportType.dacs]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Dacs</p>
</span>
<span [routerLink]="['/report',ReportType.policies]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Policies</p>
</span>
<span [routerLink]="['/report',ReportType.datasets]" >
<mat-icon class=insert_chart>insert_chart</mat-icon>
<p class="mat-small mat-caption">Datasets</p>
</span>
</ng-container>
</div>
</mat-expansion-panel>
</div>
</mat-accordion>
</div>
</div>
......@@ -9,44 +9,34 @@
* specific language governing permissions and limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UiModule } from '../ui/ui.module';
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';
import { WebinAuthenticationService } from '../webin-authentication.service';
import { MockWebinAuthenticationService } from '../mock/mock-webin-authentication.service';
import { MockReportComponent } from '../mock/mock-report.component';
import { MockSubmitComponent } from '../mock/mock-submit.component';
import { ReportType } from '../report-type.enum';
import { MatIconModule } from '@angular/material'
import {MatExpansionModule} from '@angular/material/expansion';
import { DashboardComponent } from './dashboard.component';
@Component({
selector: 'app-main',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DashboardComponent {
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
ReportType = ReportType; // Allows use in template
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
DashboardComponent,
MockReportComponent,
MockSubmitComponent,
],
imports: [ UiModule ],
providers: [
{
provide: WebinAuthenticationService,
useClass: MockWebinAuthenticationService
},
]
})
.compileComponents();
}));
constructor(
private _webinAuthenticationService: WebinAuthenticationService) { }
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
ngOnInit() {
}
it('should create', () => {
expect(component).toBeTruthy();
});
});
ngOnDestroy() {
}
isEga(): boolean {
return this._webinAuthenticationService.ega;
}
}
......@@ -11,10 +11,8 @@
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';
import { ReportComponent } from '../report/report.component';
import { WebinAuthenticationService } from '../webin-authentication.service';
import { ReportType } from '../report-type.enum';
import { ReportActionInterface } from '../report-action.interface';
import { MatIconModule } from '@angular/material'
@Component({
......@@ -22,9 +20,6 @@ import { MatIconModule } from '@angular/material'
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [
ReportComponent
]
})
export class DashboardComponent {
......
.homeDiv{
float: left;
padding: 0px 0px 0px 5px;
}
.homeDiv mat-icon{
font-size: 33px;
cursor: pointer;
}
\ No newline at end of file
<header id="masthead-black-bar" class="clearfix masthead-black-bar">
</header>
<div> <!-- fxHide fxShow.gt-xs> <!-- ** Application specific content: fxHide fxShow.gt-xs ** -->
<header id="masthead" class="masthead compact-for-data">
<div class="masthead-inner row expanded">
<div class="homeDiv">
<mat-icon matTooltip="Dashboard" routerLink="">home</mat-icon>
</div>
<!-- local-title -->
<div class="float-left inline-block padding-left-large" id="local-title">
<a routerLink=""><h4 style="color:white">{{getTitle()}}</h4></a> <!-- ** Application specific content ** -->
<a routerLink=""><h4 style="color:white">
{{getTitle()}}
</h4></a> <!-- ** Application specific content ** -->
</div>
<!-- /local-title -->
<!-- local-nav -->
......
table, th, td {
.body{
padding:10px 20px 10px 10px;
}
.container{
padding: 10px 0px 0px 0px;
}
.cdk-table {
background: white;
}
.cdk-row:nth-child(even){
background-color:#f8f8f8;
}
.component-margin {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
padding: 10px 0px 0px 0px;
}
mat-form-field.mat-form-field {
font-size: 14px;
font-family: Roboto;
}
<div class="component-margin">
<div class="body">
<p>
<div class="mat-h3 mat-tittle">{{ ReportType.getPluralName(reportType) | titlecase }} Report</div>
<mat-divider></mat-divider>
<div class="container">
<p class="mat-body" >
<span class = "app-primary-color">
<i class="material-icons">info</i>
</span>
......@@ -37,10 +42,13 @@
</p>
<p><b>Please click search to see the results.</b></p>
<p class="mat-body-strong">Please click search to see the results.</p>
<mat-card class="mat-body">
<mat-card-subtitle>Search {{ ReportType.getPluralName(reportType) | titlecase }}</mat-card-subtitle>
<div fxLayout="row wrap"
fxLayoutAlign="start center">
<div *ngIf="!isMetadataReport() && reportType !== ReportType.unsubmittedFiles">
<mat-form-field class="app-field-padding">
......@@ -48,8 +56,8 @@
</mat-form-field>
</div>
<div *ngIf="isMetadataReport() && reportType !== ReportType.unsubmittedFiles">
<mat-form-field class="app-field-padding">
<input matInput placeholder="Accession or Name" [(ngModel)]="id">
<mat-form-field class="app-field-padding">
<input matInput placeholder="Accession or Name" [(ngModel)]="id">
</mat-form-field>
</div>
<div *ngIf="isMetadataReport()">
......@@ -187,9 +195,10 @@
</mat-checkbox>
</div>
</div>
</mat-card>
<div *ngIf="this.data && this.data.length > 0">
<p><a href="{{ csvDownloadAllLink() }}">Download all results</a></p>
<p class="mat-body-strong"><a href="{{ csvDownloadAllLink() }}">Download all results</a></p>
</div>
<div *ngIf="active" style="height:70px;">
......@@ -197,16 +206,17 @@
</mat-spinner>
</div>
<div *ngIf="dataSource">
<table cdk-table [dataSource]="dataSource">
<div *ngIf="dataSource">
<mat-card>
<table cdk-table class="mat-body" [dataSource]="dataSource">
<ng-container *ngFor="let col of displayedColumns" cdkColumnDef={{col}}>
<th cdk-header-cell *cdkHeaderCellDef>{{ col }}</th>
<ng-container *ngIf="col!='Action' && col!='Archive status' && col!='Process status'">
<td cdk-cell *cdkCellDef="let element">{{getElementValue(element, col)}}</td>
</ng-container>
<ng-container *ngIf="col=='Archive status'">
<ng-container *ngIf="col=='Archive status'">
<td cdk-cell *cdkCellDef="let element">
<ng-container *ngIf="getElementValue(element, col)=='File archived'">
......@@ -264,8 +274,10 @@
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr> <!-- (click)="clickRow(row)" -->
</table>
</mat-card>
</div>
<div [hidden]="!dataSource">
<!-- the paginator must be created before the dataSource has been defined -->
<mat-paginator #dataPaginator
......@@ -283,3 +295,4 @@
</div>
</div> <!-- component-margin -->
</div>
.component-margin {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
.body{
padding:10px 20px 10px 10px;
}
.container{
padding: 10px 0px 0px 0px;
}
\ No newline at end of file
......@@ -9,10 +9,13 @@
~ specific language governing permissions and limitations under the License.
-->