Skip to content

DSS-fix sm id fields #2236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

DSS-fix sm id fields #2236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c3ff20d
DSS-fix-smID-fields
Sep 22, 2023
5754cbc
DSS-fix-smID-fields improved
Sep 22, 2023
b9260a4
DSS-fix-smID-fields more improvements
Sep 22, 2023
afd5771
DSS-fix-smID-fields method renamed
Sep 22, 2023
578bfc2
Merge branch 'develop' into DSS-fix-smID-fields
GiCharkviani Sep 22, 2023
ff676a4
Merge branch 'develop' into DSS-fix-smID-fields
GiCharkviani Sep 26, 2023
424cf22
Merge branch 'develop' into DSS-fix-smID-fields
GiCharkviani Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions ddp-workspace/projects/ddp-dsm-ui/src/app/tissue/tissue.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,29 @@ input::-webkit-inner-spin-button {
.changed{
color: #b02727;
}

.onlyFlex {
display: flex;
}

.inputField {
border: 1px solid #5a8dda;
border-radius: 3px;
padding: .2em;
}

.displayFlexCenter {
display: flex;
justify-content: center;
margin-bottom: .5em;
}

.deleteBtn {
margin-left: 1em;
margin-bottom: .5em;
}

md-hint.ErrorMessageForm {
height: 0;
}

27 changes: 18 additions & 9 deletions ddp-workspace/projects/ddp-dsm-ui/src/app/tissue/tissue.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,25 +395,28 @@
<div class="app-modal-body">
<ng-container *ngIf="this.currentSMIDField === 'HE'">
<table>
<tr *ngFor="let smid of this.tissue.HESMId; let i = index;">
<tr class="onlyFlex" *ngFor="let smid of this.tissue.HESMId; let i = index;">
<ng-container *ngIf="!smid.deleted">
<td>
<td class="displayFlexCenter">
<mat-checkbox color="primary" disableRipple *ngIf="!smIdCountMatch(this.tissue.HESMId, this.tissue.hECount)"
[checked]="smid.isSelected" [disabled]="!canChangeThis(i, this.currentSMIDField)"
(change)="smid.isSelected = $event.checked; checkboxChecked($event, this.tissue.HESMId, i)"></mat-checkbox>
<md-input-container [ngClass]="{'Input': true}">
<input matInput [disabled]="!canChangeThis(i, this.currentSMIDField)" id="HE{{i}}"
[ngClass]="{'Color--Field--Patched': isPatchedCurrently('SMIDHE' + i)}"
class="inputField"
#HEInputField
(blur)="currentField(null)" [(ngModel)]="this.tissue.HESMId[i].smIdValue"
(change)="changeSmId($event, 'smIdValue', smid.smIdPk, 'he', this.tissue.HESMId, i, 'SMIDHE'+i)"
(focus)="currentField('SMIDHE' + i)"
[value]="smid.smIdValue" (keydown.enter)="goNext('HE', i)">
[value]="smid.smIdValue" (keydown.enter)="goNext('HE', i, this.tissue.HESMId?.length)">
<md-hint class="ErrorMessageForm" *ngIf="isDuplicate(this.currentSMIDField, i)">Duplicate Value! Not Saved!
</md-hint>
</md-input-container>
</td>
<td>
<button md-mini-fab color="warn" [disabled]="!canChangeThis(i, this.currentSMIDField)"
class="deleteBtn"
(click)="deleteSMID(this.tissue.HESMId, i)">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
Expand All @@ -424,9 +427,9 @@
</ng-container>
<ng-container *ngIf="this.currentSMIDField === 'USS'">
<table>
<tr *ngFor="let smid of this.tissue.ussSMId; let i = index;">
<tr *ngFor="let smid of this.tissue.ussSMId; let i = index;" class="onlyFlex">
<ng-container *ngIf="!smid.deleted">
<td>
<td class="displayFlexCenter">
<mat-checkbox color="primary" disableRipple *ngIf="!smIdCountMatch(this.tissue.ussSMId, this.tissue.ussCount)"
[checked]="smid.isSelected" [disabled]="!canChangeThis(i, this.currentSMIDField)"
(change)="smid.isSelected = $event.checked; checkboxChecked($event, this.tissue.ussSMId, i)"></mat-checkbox>
Expand All @@ -435,14 +438,17 @@
[ngClass]="{'Color--Field--Patched': isPatchedCurrently('SMIDUSS' + i)}"
(blur)="currentField(null)" (change)="changeSmId($event, 'smIdValue', smid.smIdPk, 'uss', this.tissue.ussSMId, i, 'SMIDUSS'+i)"
[(ngModel)]="this.tissue.ussSMId[i].smIdValue"
class="inputField"
#USSInputField
(focus)="currentField('SMIDUSS' + i)"
[value]="smid.smIdValue" (keydown.enter)="goNext('USS', i)">
[value]="smid.smIdValue" (keydown.enter)="goNext('USS', i, this.tissue.ussSMId?.length)">
<md-hint class="ErrorMessageForm" *ngIf="isDuplicate(this.currentSMIDField, i)">Duplicate Value! Not Saved!
</md-hint>
</md-input-container>
</td>
<td *ngIf="!smid.deleted">
<button md-mini-fab color="warn" [disabled]="!canChangeThis(i, this.currentSMIDField)"
class="deleteBtn"
(click)="deleteSMID(this.tissue.ussSMId, i)">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
Expand All @@ -453,9 +459,9 @@
</ng-container>
<ng-container *ngIf="this.currentSMIDField === 'scrolls'">
<table>
<tr *ngFor="let smid of this.tissue.scrollSMId; let i = index;">
<tr *ngFor="let smid of this.tissue.scrollSMId; let i = index;" class="onlyFlex">
<ng-container *ngIf="!smid.deleted">
<td *ngIf="!smid.deleted">
<td *ngIf="!smid.deleted" class="displayFlexCenter">
<mat-checkbox color="primary" disableRipple *ngIf="!smIdCountMatch(this.tissue.scrollSMId, this.tissue.scrollsCount)"
[checked]="smid.isSelected" [disabled]="!canChangeThis(i, this.currentSMIDField)"
(change)="smid.isSelected = $event.checked; checkboxChecked($event, this.tissue.scrollSMId, i)"></mat-checkbox>
Expand All @@ -464,14 +470,17 @@
[ngClass]="{'Color--Field--Patched': isPatchedCurrently('SMIDScrolls' + i)}"
(blur)="currentField(null)" [(ngModel)]="this.tissue.scrollSMId[i].smIdValue"
(focus)="currentField('SMIDScrolls' + i)"
class="inputField"
#ScrollsInputField
(change)="changeSmId($event, 'smIdValue', smid.smIdPk, 'scrolls', this.tissue.scrollSMId, i, 'SMIDScrolls'+i )"
[value]="smid.smIdValue" (keydown.enter)="goNext('scrolls', i)">
[value]="smid.smIdValue" (keydown.enter)="goNext('scrolls', i, this.tissue.scrollSMId?.length)">
<md-hint class="ErrorMessageForm" *ngIf="isDuplicate(this.currentSMIDField, i)">Duplicate Value! Not Saved!
</md-hint>
</md-input-container>
</td>
<td *ngIf="!smid.deleted">
<button md-mini-fab color="warn" [disabled]="!canChangeThis(i, this.currentSMIDField)"
class="deleteBtn"
(click)="deleteSMID(this.tissue.scrollSMId, i)">
<i class="fas fa-trash-alt fa-sm"></i>
</button>
Expand Down
54 changes: 50 additions & 4 deletions ddp-workspace/projects/ddp-dsm-ui/src/app/tissue/tissue.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Input, ViewChild } from '@angular/core';
import {Component, ElementRef, Input, QueryList, ViewChild, ViewChildren} from '@angular/core';
import { FieldSettings } from '../field-settings/field-settings.model';
import { OncHistoryDetail } from '../onc-history-detail/onc-history-detail.model';
import { Participant } from '../participant-list/participant-list.model';
Expand All @@ -15,6 +15,9 @@ import { PatchUtil } from '../utils/patch.model';
import { ModalComponent } from '../modal/modal.component';
import {TissueSmId} from './sm-id.model';


type SMIDs = 'HE' | 'USS' | 'scrolls';

@Component({
selector: 'app-tissue',
templateUrl: './tissue.component.html',
Expand All @@ -24,6 +27,9 @@ export class TissueComponent {
@ViewChild('collaboratorSampleId') collaboratorSampleIdInputField;
@ViewChild( ModalComponent )
public SMIDModal: ModalComponent;
@ViewChildren('HEInputField') HEInputFields: QueryList<ElementRef>;
@ViewChildren('USSInputField') USSInputFields: QueryList<ElementRef>;
@ViewChildren('ScrollsInputField') ScrollsInputFields: QueryList<ElementRef>;

@Input() participant: Participant;
@Input() oncHistoryDetail: OncHistoryDetail;
Expand Down Expand Up @@ -300,12 +306,52 @@ export class TissueComponent {
this.SMIDModal.hide();
}

goNext( name: string, i: number ): void {
const nextId = name + ( i + 1 );
const nextElement = document.getElementById( nextId );
goNext(SMIDName: SMIDs , currentIndex: number, totalFields: number): void {
// Generate the ID of the next element
const nextIndex = currentIndex + 1;
const nextId = `${SMIDName}${nextIndex}`;

// Attempt to find the next element by ID
const nextElement = document.getElementById(nextId);

// If found, focus on it
if (nextElement) {
nextElement.focus();
}

// Check if this is the last field
const isLastField = currentIndex === totalFields - 1;

// If it's the last field, add the next field
if(isLastField) {
this.addNextField(SMIDName);
}
}

addNextField(SMIDName: SMIDs): void {
this.addSMId(this.currentSMIDField);
// Move the focus after adding the field
setTimeout(() => this.moveFocusToTheLastField(SMIDName));
}

private moveFocusToTheLastField(SMIDName: SMIDs): void {
// Define a map of SMID names to corresponding input field lists
const inputFieldsMap: Record<SMIDs, QueryList<ElementRef>> = {
USS: this.USSInputFields,
scrolls: this.ScrollsInputFields,
HE: this.HEInputFields,
};

// Attempt to get the last input field of the specified group
const lastInputField = inputFieldsMap[SMIDName]?.last;

// If the last input field is not found, throw an error
if (!lastInputField) {
throw new Error('Provided SMID name is wrong - ' + SMIDName);
}

// Set focus on the last input field's native element
lastInputField?.nativeElement?.focus();
}

smIdCountMatch( array: any[], num: number ): boolean {
Expand Down