moved warning messages about Fasten Table View into the generic resou…

…rce list component.

rename fhir to fhir card module.

frontend/src/app/app.module.ts

@@ -38,7 +38,7 @@ import { ExploreComponent } from './pages/explore/explore.component';
 import {DirectivesModule} from './directives/directives.module';
 import { DesktopCallbackComponent } from './pages/desktop-callback/desktop-callback.component';
 import { BackgroundJobsComponent } from './pages/background-jobs/background-jobs.component';
-import {FhirResourceModule} from './components/fhir/fhir-resource.module';
+import {FhirCardModule} from './components/fhir-card/fhir-card.module';
 
 @NgModule({
   declarations: [
@@ -65,7 +65,7 @@ import {FhirResourceModule} from './components/fhir/fhir-resource.module';
     BrowserModule,
     FontAwesomeModule,
     SharedModule,
-    FhirResourceModule,
+    FhirCardModule,
     AppRoutingModule,
     HttpClientModule,
     NgbModule,

frontend/src/app/components/fhir/fhir-resource.module.ts → frontend/src/app/components/fhir-card/fhir-card.module.ts

@@ -103,4 +103,4 @@ import { EncounterComponent } from './resources/encounter/encounter.component';
     FhirResourceOutletDirective,
   ]
 })
-export class FhirResourceModule { }
+export class FhirCardModule { }

frontend/src/app/components/list-generic-resource/list-fallback.component.html

@@ -1,12 +1,4 @@
 <div>
-
-  <div class="alert alert-warning" role="alert">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">×</span>
-    </button>
-    <strong>Warning!</strong> Fasten does not know how to display this resource type (yet). Click an item in the list below to see the raw data
-  </div>
-
   <ngx-datatable
     #table
     class="bootstrap"

frontend/src/app/components/list-generic-resource/list-generic-resource.component.html

@@ -1,16 +1,4 @@
 <div>
-
-  <div class="alert alert-info" role="alert">
-    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">×</span>
-    </button>
-    <strong>Work-in-Progress!</strong> Fasten is still under active development, and some of these tables may be incomplete.
-    <br/>
-    You can click on a row to see the raw data.
-    <br/>
-    If you have any feedback regarding the data displayed, please <a href="https://github.com/fastenhealth/fasten-onprem/issues" externalLink>file a ticket <i class="fab fa-github"></i></a>
-  </div>
-
   <ngx-datatable
     #table
     class="bootstrap"

frontend/src/app/components/medical-record-wizard-add-organization/medical-record-wizard-add-organization.component.html

@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <h4 class="modal-title" id="modal-location">New Location</h4>
+  <h4 class="modal-title" id="modal-location">Add Location</h4>
   <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()"><span aria-hidden="true">×</span></button>
 </div>
 <div class="modal-body">
@@ -9,59 +9,79 @@ <h4 class="modal-title" id="modal-location">New Location</h4>
     <strong>New Organization Form Status: {{ newOrganizationForm.status }}</strong>
   </div>
 
-  <div class="row row-sm">
-
-    <div class="col-12">
-      <p class="mg-b-10">Name<span ngbTooltip="required" class="text-danger">*</span></p>
-      <form [formGroup]="newOrganizationTypeaheadForm">
-        <app-nlm-typeahead formControlName="data" searchType="MedicalContactOrganization" [debugMode]="debugMode"></app-nlm-typeahead>
-      </form>
-      <span *ngFor="let extId of newOrganizationForm.get('identifier').getRawValue()" class="badge badge-pill badge-primary">{{extId.type?.coding[0].code}}: {{extId.value}}</span>
-    </div><!-- col -->
+  <div>
+    <div ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills bg-gray-200 pd-20">
+      <ng-container ngbNavItem="existing">
+        <a class="nav-link" ngbNavLink>Find Existing</a>
+        <ng-template ngbNavContent>
+          <div class="row row-sm pd-t-15">
+            <div class="col-12">
+
+            </div>
+          </div>
+        </ng-template>
+      </ng-container>
+      <ng-container ngbNavItem="create">
+        <a class="nav-link" ngbNavLink>New Location</a>
+        <ng-template ngbNavContent>
+          <div class="row row-sm pd-t-15">
+            <div class="col-12">
+              <p class="mg-b-10">Name<span ngbTooltip="required" class="text-danger">*</span></p>
+              <form [formGroup]="newOrganizationTypeaheadForm">
+                <app-nlm-typeahead formControlName="data" searchType="MedicalContactOrganization" [debugMode]="debugMode"></app-nlm-typeahead>
+              </form>
+              <span *ngFor="let extId of newOrganizationForm.get('identifier').getRawValue()" class="badge badge-pill badge-primary">{{extId.type?.coding[0].code}}: {{extId.value}}</span>
+            </div><!-- col -->
 
-    <ng-container [formGroup]="newOrganizationForm">
-      <div class="col-6 mg-t-10 mg-lg-t-0">
-        <p class="mg-b-10">Type<span ngbTooltip="required" class="text-danger">*</span></p>
-        <app-nlm-typeahead formControlName="type" searchType="MedicalContactOrganizationType" [debugMode]="debugMode"></app-nlm-typeahead>
-      </div><!-- col -->
-      <div class="col-6 mg-t-10 mg-lg-t-0">
-        <p class="mg-b-10">Telephone</p>
-        <input formControlName="phone" class="form-control" placeholder="(123) 456-7890" type="text">
-      </div><!-- col -->
-      <div class="col-6 mg-t-10 mg-lg-t-0">
-        <p class="mg-b-10">Fax</p>
-        <input formControlName="fax" class="form-control" placeholder="(123) 456-7890" type="text">
-      </div><!-- col -->
-      <div class="col-6 mg-t-10 mg-lg-t-0">
-        <p class="mg-b-10">Email</p>
-        <input formControlName="email" class="form-control" placeholder="email@example.com" type="text" email>
-      </div><!-- col -->
-      <ng-container formGroupName="address">
-        <div class="col-12 mg-t-10 mg-lg-t-0">
-          <p class="mg-b-10">Address</p>
-          <input formControlName="line1" class="form-control" placeholder="Line 1" type="text">
-        </div><!-- col -->
-        <div class="col-12 pd-t-10 mg-t-10 mg-lg-t-0">
-          <input formControlName="line2" class="form-control" placeholder="Line 2" type="text">
-        </div><!-- col -->
-        <div class="col-6 mg-t-10 mg-lg-t-0">
-          <p class="mg-b-10">City</p>
-          <input formControlName="city" class="form-control" placeholder="City" type="text">
-        </div><!-- col -->
-        <div class="col-6 mg-t-10 mg-lg-t-0">
-          <p class="mg-b-10">State</p>
-          <input formControlName="state" class="form-control" placeholder="State" type="text">
-        </div><!-- col -->
-        <div class="col-6 mg-t-10 mg-lg-t-0">
-          <p class="mg-b-10">Zip/Postal</p>
-          <input formControlName="zip" class="form-control" placeholder="Zip" type="text">
-        </div><!-- col -->
-        <div class="col-6 mg-t-10 mg-lg-t-0">
-          <p class="mg-b-10">Country</p>
-          <app-nlm-typeahead formControlName="country" searchType="Countries" [debugMode]="debugMode"></app-nlm-typeahead>
-        </div><!-- col -->
+            <ng-container [formGroup]="newOrganizationForm">
+              <div class="col-6 mg-t-10 mg-lg-t-0">
+                <p class="mg-b-10">Type<span ngbTooltip="required" class="text-danger">*</span></p>
+                <app-nlm-typeahead formControlName="type" searchType="MedicalContactOrganizationType" [debugMode]="debugMode"></app-nlm-typeahead>
+              </div><!-- col -->
+              <div class="col-6 mg-t-10 mg-lg-t-0">
+                <p class="mg-b-10">Telephone</p>
+                <input formControlName="phone" class="form-control" placeholder="(123) 456-7890" type="text">
+              </div><!-- col -->
+              <div class="col-6 mg-t-10 mg-lg-t-0">
+                <p class="mg-b-10">Fax</p>
+                <input formControlName="fax" class="form-control" placeholder="(123) 456-7890" type="text">
+              </div><!-- col -->
+              <div class="col-6 mg-t-10 mg-lg-t-0">
+                <p class="mg-b-10">Email</p>
+                <input formControlName="email" class="form-control" placeholder="email@example.com" type="text" email>
+              </div><!-- col -->
+              <ng-container formGroupName="address">
+                <div class="col-12 mg-t-10 mg-lg-t-0">
+                  <p class="mg-b-10">Address</p>
+                  <input formControlName="line1" class="form-control" placeholder="Line 1" type="text">
+                </div><!-- col -->
+                <div class="col-12 pd-t-10 mg-t-10 mg-lg-t-0">
+                  <input formControlName="line2" class="form-control" placeholder="Line 2" type="text">
+                </div><!-- col -->
+                <div class="col-6 mg-t-10 mg-lg-t-0">
+                  <p class="mg-b-10">City</p>
+                  <input formControlName="city" class="form-control" placeholder="City" type="text">
+                </div><!-- col -->
+                <div class="col-6 mg-t-10 mg-lg-t-0">
+                  <p class="mg-b-10">State</p>
+                  <input formControlName="state" class="form-control" placeholder="State" type="text">
+                </div><!-- col -->
+                <div class="col-6 mg-t-10 mg-lg-t-0">
+                  <p class="mg-b-10">Zip/Postal</p>
+                  <input formControlName="zip" class="form-control" placeholder="Zip" type="text">
+                </div><!-- col -->
+                <div class="col-6 mg-t-10 mg-lg-t-0">
+                  <p class="mg-b-10">Country</p>
+                  <app-nlm-typeahead formControlName="country" searchType="Countries" [debugMode]="debugMode"></app-nlm-typeahead>
+                </div><!-- col -->
+              </ng-container>
+            </ng-container>
+          </div>
+        </ng-template>
       </ng-container>
-    </ng-container>
+    </div>
+
+    <div [ngbNavOutlet]="nav" class="ms-4"></div>
   </div>
 </div>
 <div class="modal-footer">

frontend/src/app/components/medical-record-wizard-add-organization/medical-record-wizard-add-organization.component.ts

@@ -3,7 +3,8 @@ import {CommonModule} from '@angular/common';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {NlmTypeaheadComponent} from '../nlm-typeahead/nlm-typeahead.component';
 import {HighlightModule} from 'ngx-highlightjs';
-import {NgbActiveModal, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbActiveModal, NgbNavLink, NgbNavModule, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
+import {ListEncounterComponent} from '../list-generic-resource/list-encounter.component';
 
 @Component({
   standalone: true,
@@ -13,7 +14,8 @@ import {NgbActiveModal, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
     FormsModule,
     NlmTypeaheadComponent,
     HighlightModule,
-    NgbTooltipModule
+    NgbTooltipModule,
+    NgbNavModule,
   ],
   selector: 'app-medical-record-wizard-add-organization',
   templateUrl: './medical-record-wizard-add-organization.component.html',
@@ -22,6 +24,8 @@ import {NgbActiveModal, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
 export class MedicalRecordWizardAddOrganizationComponent implements OnInit {
   @Input() debugMode: boolean = false;
 
+  activeId: string = 'existing'
+
   newOrganizationTypeaheadForm: FormGroup
   newOrganizationForm: FormGroup //ResourceCreateOrganization
 

frontend/src/app/components/medical-record-wizard/medical-record-wizard.component.ts

@@ -28,7 +28,7 @@ import {
 import {GenerateR4Bundle} from '../../pages/resource-creator/resource-creator.utilities';
 import {EncounterModel} from '../../../lib/models/resources/encounter-model';
 import {SharedModule} from '../shared.module';
-import {FhirResourceModule} from '../fhir/fhir-resource.module';
+import {FhirCardModule} from '../fhir-card/fhir-card.module';
 
 @Component({
   standalone: true,
@@ -43,7 +43,7 @@ import {FhirResourceModule} from '../fhir/fhir-resource.module';
     NlmTypeaheadComponent,
     NgSelectModule,
     HighlightModule,
-    FhirResourceModule
+    FhirCardModule
   ],
   selector: 'app-medical-record-wizard',
   templateUrl: './medical-record-wizard.component.html',
@@ -235,6 +235,7 @@ export class MedicalRecordWizardComponent implements OnInit {
   openOrganizationModal(formGroup?: AbstractControl, controlName?: string) {
     let modalRef = this.modalService.open(MedicalRecordWizardAddOrganizationComponent, {
       ariaLabelledBy: 'modal-organization',
+
     })
     modalRef.componentInstance.debugMode = this.debugMode;
     modalRef.result.then(

frontend/src/app/components/resource-list/resource-list.component.html

@@ -1,3 +1,25 @@
 <h2 class="az-content-title mg-t-40">{{resourceListType}}</h2>
 
+<div *ngIf="knownResourceType; else unknownResourceType" class="alert alert-info" role="alert">
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">×</span>
+  </button>
+  <strong>Work-in-Progress!</strong> Fasten is still under active development, and some of these tables may be incomplete.
+  <br/>
+  You can click on a row to see the raw data.
+  <br/>
+  If you have any feedback regarding the data displayed, please <a href="https://github.com/fastenhealth/fasten-onprem/issues" externalLink>file a ticket <i class="fab fa-github"></i></a>
+</div>
+
+
+
+<ng-template #unknownResourceType>
+  <div class="alert alert-warning" role="alert">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">×</span>
+    </button>
+    <strong>Warning!</strong> Fasten does not know how to display this resource type (yet). Click an item in the list below to see the raw data
+  </div>
+</ng-template>
+
 <ng-template resourceListOutlet></ng-template>

frontend/src/app/components/resource-list/resource-list.component.ts

@@ -51,6 +51,7 @@ export class ResourceListComponent implements OnInit, OnChanges {
   //location to dynamically load the resource list
   @ViewChild(ResourceListOutletDirective, {static: true}) resourceListOutlet!: ResourceListOutletDirective;
 
+  knownResourceType: boolean = true;
 
   constructor(private fastenApi: FastenApiService) { }
 
@@ -74,6 +75,8 @@ export class ResourceListComponent implements OnInit, OnChanges {
       componentRef.instance.resourceListType = this.resourceListType;
       componentRef.instance.sourceId = this.source.id;
       componentRef.instance.markForCheck()
+
+      this.knownResourceType = (componentType != ListFallbackComponent)
     }
   }
 

frontend/src/app/components/shared.module.ts

@@ -64,7 +64,7 @@ import { MedicalRecordWizardComponent } from './medical-record-wizard/medical-re
 import { MedicalRecordWizardAddPractitionerComponent } from './medical-record-wizard-add-practitioner/medical-record-wizard-add-practitioner.component';
 import { MedicalRecordWizardAddOrganizationComponent } from './medical-record-wizard-add-organization/medical-record-wizard-add-organization.component';
 import { MedicalRecordWizardAddAttachmentComponent } from './medical-record-wizard-add-attachment/medical-record-wizard-add-attachment.component';
-import {FhirResourceModule} from './fhir/fhir-resource.module';
+import {FhirCardModule} from './fhir-card/fhir-card.module';
 
 @NgModule({
   imports: [
@@ -84,7 +84,7 @@ import {FhirResourceModule} from './fhir/fhir-resource.module';
     HighlightModule,
     PipesModule,
     DirectivesModule,
-    FhirResourceModule,
+    FhirCardModule,
 
     //standalone components
     GlossaryLookupComponent,