Skip to content

Commit

Permalink
Loading spinners for substance counters on home page;
Browse files Browse the repository at this point in the history 
Import substance from URL
  • Loading branch information
@bartapes
bartapes committed Feb 24, 2025
1 parent c2cbe34 commit 5bd6f86
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 58 deletions.
35 changes: 20 additions & 15 deletions src/app/core/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,25 +341,30 @@ <h1 class = "home">{{homeHeader}}</h1>
</div>
<mat-divider class = "divide-test"></mat-divider>

<div class = "flex-row" style = "padding-bottom: 10px;">
<div class = "data">
Total substances: {{total | number:'1.0':'en-US'}}
</div>
<div class = "flex-row" style = "padding-bottom: 10px;">
<div class = "data">
Total substances:
<div style="float: right; margin-left: 10px;">
<mat-spinner *ngIf="!total" color="warn" [diameter]="22"></mat-spinner>
<span *ngIf="total">{{total | number:'1.0':'en-US'}}</span>
</div>
</div>
</div>
<div class = "flex-row test" style = "padding-bottom: 10px;">
<div *ngFor = "let link of customLinks" class = "custom-wrap" (click) = "routeToCustom(link)">
<span class = "entry">
<div class = "label">
{{link.display}}
</div>
<div class = "value">
{{link.total | number:'1.0':'en-US'}}
</div>
</span>
<div class = "label">
{{link.display}}
</div>
<mat-spinner [diameter]="15" *ngIf="!link.total"></mat-spinner>
<div class = "value" *ngIf="link.total">
{{link.total | number:'1.0':'en-US'}}
</div>
</span>
</div>
</div>
<div style = "padding-left:15px; padding-top: 10px;">
</div>
</div>
<div style = "padding-left:15px; padding-top: 10px;">
</div>
</mat-card>

<mat-card *ngIf = "usefulLinks?.length" class = "home-card" >
Expand Down Expand Up @@ -392,4 +397,4 @@ <h3 class = "resource-link">

</div>
</mat-sidenav-content>
</mat-sidenav-container>
</mat-sidenav-container>
14 changes: 7 additions & 7 deletions src/app/core/home/home.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
import { UtilsService } from '@gsrs-core/utils';
import { UsefulLink } from '../config/config.model';



@Component({
selector: 'app-home',
templateUrl: './home.component.html',
Expand All @@ -29,19 +29,19 @@ export class HomeComponent implements OnInit, AfterViewInit {
imageLoc: any;
appId: string;
customLinks: Array<any>;
total: string;
total: number;
isCollapsed = true;
hasBackdrop = false;
bannerMessage?: string;
usefulLinks?: Array<UsefulLink>;


// these may be necessary due to a strange quirk
// of angular and ngif
searchValue: string;
loadedComponents: LoadedComponents;


private overlayContainer: HTMLElement;
@ViewChild('matSideNavInstance', { static: true }) matSideNav: MatSidenav;

Expand Down Expand Up @@ -133,7 +133,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
});
});
this.substanceService.getRecordCount().subscribe( response => {
this.total = response;
this.total = parseInt(response);
});
// this.isClosedWelcomeMessage = localStorage.getItem('isClosedWelcomeMessage') === 'false';
this.isClosedWelcomeMessage = false;
Expand Down
47 changes: 30 additions & 17 deletions src/app/core/substance-edit-import-dialog/substance-edit-import-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,39 @@
<h3 class="colorblue">{{title}}</h3>
</div>
<hr>
<div mat-dialog-content class = "mat-dialog-content">
<div class = "info">
<div mat-dialog-content class = "mat-dialog-content" style="min-height: 350px">
<mat-tab-group style="height: 300px" (selectedTabChange)="tabChanged($event)">
<mat-tab label="File">
<div class = "info">
Select a .json file to import into a new edit form.
</div>
<div class = "full-row">
<div><button mat-stroked-button class="button-select-file" (click)="openInput()">Select File to Import</button></div>
<div class = "file-name" [ngClass] = "filename? 'test':'italics'">{{filename? filename: 'no file chosen'}}</div>
<input id="fileInput" hidden type="file" (change)="uploadFile($event)" name="file1" accept=".json">
</div>
<div class = "full-row-col" *ngIf = "!this.record" style = "margin-top:10px;">
<div style = "width:100%" class="padbottom20px">Or paste JSON here:</div>
<textarea class="bordergray" [(ngModel)] = "pastedJSON" cdkAutosizeMinRows="8" (ngModelChange)="checkLoaded()" style = "min-height: 180px;"></textarea>
</div>
<div class = "message" *ngIf="message">
{{message}}
</div>
</div>
<div class = "full-row">
<div><button mat-stroked-button class="button-select-file" (click)="openInput()">Select File to Import</button></div>
<div class = "file-name" [ngClass] = "filename? 'test':'italics'">{{filename? filename: 'no file chosen'}}</div>
<input id="fileInput" hidden type="file" (change)="uploadFile($event)" name="file1" accept=".json">
</div>
</mat-tab>
<mat-tab label="JSON">
<div class="full-row-col" style="margin-top:10px;">
<div style="width:100%" class="padbottom20px">Paste JSON here:</div>
<textarea class="bordergray" [(ngModel)] = "pastedJSON" cdkAutosizeMinRows="8" (ngModelChange)="checkLoaded()" style = "min-height: 180px;"></textarea>
</div>
</mat-tab>
<mat-tab label="URL" *ngIf="urlImportEnabled">
<div class="full-row-col" style="margin-top:10px;">
<div style="width:100%" class="padbottom20px">URL:</div>
<input style="width: calc(100% - 10px)" placeholder="E.g. https://domain.com/substance.json" [(ngModel)]="pastedUrl" (ngModelChange)="checkUrl()" />
<div style="width:100%; margin-top: 5px; font-style: italic; font-size: 80%">Note: The URL needs to be publicly accessible</div>
</div>
</mat-tab>
</mat-tab-group>
<div class = "message" *ngIf="message">
{{message}}
</div>
</div>
<hr>
<div mat-dialog-actions class = "mat-dialog-actions" >
<button mat-stroked-button class="button-cancel colorred" matDialogClose>Cancel</button>
<span class="middle-fill"></span>
<button mat-flat-button class="button-import" [disabled]= "!loaded" (click) ="useFile()">Import</button>
</div>
<button mat-flat-button class="button-import" [disabled]= "!loaded" (click) ="importSubstance()">Import</button>
</div>
91 changes: 72 additions & 19 deletions src/app/core/substance-edit-import-dialog/substance-edit-import-dialog.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { ConfigService } from '@gsrs-core/config';

@Component({
selector: 'app-substance-edit-import-dialog',
Expand All @@ -14,15 +16,21 @@ export class SubstanceEditImportDialogComponent implements OnInit {
record: any;
filename: string;
pastedJSON: string;
uploaded = false;
pastedUrl: string;
title = 'Substance Import';
entity = 'Substance';

currentTab: number = 0;
urlImportEnabled: boolean = false;

constructor(
private router: Router,
private configService: ConfigService,
public dialogRef: MatDialogRef<SubstanceEditImportDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
) {
this.urlImportEnabled = this.configService.configData.isPfdaVersion;
}

ngOnInit() {
if (this.data) {
Expand Down Expand Up @@ -59,36 +67,70 @@ export class SubstanceEditImportDialogComponent implements OnInit {
}
};
reader.readAsText(event.target.files[0]);
this.uploaded = true;
}
}

useFile() {
if (!this.uploaded && this.pastedJSON) {
const read = JSON.parse(this.pastedJSON);
if (!read['substanceClass']) {
this.message = 'Error: Invalid JSON format';
this.loaded = false;
importSubstance() {
if (this.currentTab === 0) {
// Nothing
this.dialogRef.close(this.record);
} else if (this.currentTab === 1) {
const read = JSON.parse(this.pastedJSON);
if (!read['substanceClass']) {
this.message = 'Error: Invalid JSON format';
this.loaded = false;
} else {
this.loaded = true;
this.record = this.pastedJSON;
this.message = '';
this.dialogRef.close(this.record);
}
} else if (this.currentTab === 2) {
fetch(`/reverse-proxy?url=${this.pastedUrl}`).then(r => {
if (r.status !== 200) {
r.json().then(data => {
this.message = data.message ? data.message : 'Error while loading given URL';
}).catch(_e => {
this.message = 'Error while loading given URL';
})
} else {
this.loaded = true;
this.record = this.pastedJSON;
this.message = '';
const json = r.text().then(data => {
try {
JSON.parse(data);
this.record = data;
this.dialogRef.close(this.record);
} catch (_e) {
this.message = 'Error: The URL does not point to a valid JSON file'
}
});
}
}).catch(e => {
this.message = `Error: ${e.message}`;
})
}
this.dialogRef.close(this.record);
}


checkLoaded() {
this.loaded = true;
try {
JSON.parse(this.pastedJSON);
this.message = '';
} catch (e) {
this.message = 'Error: Invalid JSON format in pasted string';
this.loaded = false;
} catch (e) {
this.message = 'Error: Invalid JSON format in pasted string';
this.loaded = false;
}
}

checkUrl() {
try {
new URL(this.pastedUrl);
this.loaded = true;
this.message = '';
} catch (_e) {
this.message = 'Invalid URL';
this.loaded = false;
}
}
}


openInput(): void {
Expand All @@ -104,4 +146,15 @@ export class SubstanceEditImportDialogComponent implements OnInit {
return true;
}

tabChanged(tabChangeEvent: MatTabChangeEvent) {
if (this.currentTab !== tabChangeEvent.index) {
this.currentTab = tabChangeEvent.index;
this.message = '';
this.loaded = false;
this.record = '';
this.pastedJSON = '';
this.pastedUrl = '';
this.filename = '';
}
}
}

0 comments on commit 5bd6f86

Please sign in to comment.