Merge pull request #272 from babyfeed/feat/new_growth_page

feat: new clinic growth page & fix values in lb

src/app/app-routing.module.ts

@@ -44,6 +44,7 @@ import {AdminresultsComponent} from './pages/admin-results/adminresults.componen
 import { EducationalResourcesENComponent } from './pages/educational-resources-en/educational-resources-en.component';
 import { EducationalResourcesESComponent } from './pages/educational-resources-es/educational-resources-es.component';
 import { AdminExternalResourcesComponent } from './pages/admin-resources/admin-resources.component';
+import { ClinicGrowthPage } from './pages/clinic-growth/clinic-growth-page.component';
 
 
 const routes: Routes = [
@@ -211,6 +212,11 @@ const routes: Routes = [
     component: ClinicalPortalComponent,
     canActivate: [AuthGuard]
   },
+  {
+    path: 'clinic/growth',
+    component: ClinicGrowthPage,
+    canActivate: [AuthGuard]
+  },
   {
     path: 'parent/questionnaire',
     component: QuestIdInputComponent,

src/app/app.module.ts

@@ -118,6 +118,7 @@ import { GrowthNewRecordFormComponent } from "./components/growth/growth-new-rec
 import { GrowthChartComponent } from "./components/growth/growth-chart/growth-chart.component";
 import { GrowthTableComponent } from "./components/growth/growth-table/growth-table.component";
 import { GrowthMessageComponent } from "./components/growth/growth-message/growth-message.component";
+import { ClinicGrowthPage } from "./pages/clinic-growth/clinic-growth-page.component";
 
 import { NgApexchartsModule } from "ng-apexcharts";
 // possibly to be deleted below
@@ -210,6 +211,7 @@ import { AdminExternalResourcesComponent } from "./pages/admin-resources/admin-r
     GrowthNewRecordFormComponent,
     GrowthTableComponent,
     GrowthMessageComponent,
+    ClinicGrowthPage,
   ],
   imports: [
     BrowserModule,

src/app/components/growth/growth-new-record-form/growth-new-record-form.component.ts

@@ -33,10 +33,11 @@ export class GrowthNewRecordFormComponent implements OnInit {
   ngOnInit(): void {}
 
   getStandardUnitValue(value, unit) {
+    console.log(value, unit);
     if (unit === UnitsOfMeasurement.lb)
-      return Math.round(parseFloat(value) * FFQChildren.KG_TO_LB);
+      return Math.round((parseFloat(value) / FFQChildren.KG_TO_LB) * 100) / 100;
     if (unit === UnitsOfMeasurement.in)
-      return Math.round(parseFloat(value) * FFQChildren.IN_TO_CM);
+      return Math.round(parseFloat(value) * FFQChildren.IN_TO_CM * 100) / 100;
     return value;
   }
 

src/app/pages/admin-results/adminresults.component.html

@@ -2,7 +2,7 @@
 
 <div class="page-container">
   <section class="header">
-    <h1 class="header-title">Growth Charts Measurements</h1>
+    <h1 class="header-title">{{ "Growth Charts Results" | translate }}</h1>
     <button (click)="toggleLanguage()" mat-raised-button class="lang-button">
       {{ "For English" | translate }}
     </button>

src/app/pages/clinic-growth/clinic-growth-page.component.css

@@ -0,0 +1,62 @@
+.page-container {
+  width: 100%;
+  max-width: 1200px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 16px;
+  padding-top: 220px;
+  @media (min-width: 693px) {
+    padding-top: 164px;
+  }
+}
+.header {
+  margin-top: 32px;
+  display: flex;
+  justify-content: space-between;
+}
+.header-title {
+  font-size: 24px;
+}
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+  margin-top: 16px;
+  margin-bottom: 32px;
+}
+
+td,
+th {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+tr:nth-child(even) {
+  background-color: #eee;
+}
+
+th {
+  background-color: #f4f4f4;
+}
+
+.empty-table-message {
+  width: 100%;
+  padding: 8px;
+  background-color: white;
+  border: 1px solid #ddd;
+  text-align: center;
+  color: #888
+}
+
+.percentile-td {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.percentile-indicator {
+  width: 16px;
+  height: 16px;
+  border-radius: 99px;
+}

src/app/pages/clinic-growth/clinic-growth-page.component.html

@@ -0,0 +1,45 @@
+<clinical-header></clinical-header>
+
+<div class="page-container">
+  <section class="header">
+    <h1 class="header-title">{{ "Growth Charts Results" | translate }}</h1>
+    <button (click)="toggleLanguage()" mat-raised-button class="lang-button">
+      {{ "For English" | translate }}
+    </button>
+  </section>
+  <table>
+    <thead>
+      <tr>
+        <th>{{ "Parent" | translate }}</th>
+        <th>{{ "Date" | translate }}</th>
+        <th>{{ "Age (months)" | translate }}</th>
+        <th>{{ "Gender" | translate }}</th>
+        <th>{{ "Weight (kg)" | translate }}</th>
+        <th>{{ "Length (cm)" | translate }}</th>
+        <th>{{ "Percentile" | translate }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let record of records">
+        <td>{{ record.parentUsername }}</td>
+        <td>{{ record.timestamp | date : "medium" }}</td>
+        <td>{{ record.age }}</td>
+        <td>{{ record.gender | translate }}</td>
+        <td>{{ record.weight }}</td>
+        <td>{{ record.height }}</td>
+        <td class="percentile-td">
+          <span
+            class="percentile-indicator"
+            [style.background]="record.percentile.color"
+          ></span>
+          {{ record.percentile.percentile }}
+        </td>
+      </tr>
+      <tr *ngIf="records.length === 0">
+        <td colspan="8" class="empty-table-message">
+          {{ "No data available" | translate }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

src/app/pages/clinic-growth/clinic-growth-page.component.ts

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import {
+  GrowthRecord,
+  GrowthService,
+} from "src/app/services/growth/growth-service";
+
+@Component({
+  selector: "app-clinic-growth-page",
+  templateUrl: "./clinic-growth-page.component.html",
+  styleUrls: ["./clinic-growth-page.component.css"],
+})
+export class ClinicGrowthPage {
+  records: GrowthRecord[] = [];
+  constructor(private growthService: GrowthService) {}
+
+  ngOnInit() {
+    this.loadRecords();
+  }
+
+  async loadRecords() {
+    const records = await this.growthService.getClinicRecords();
+    this.records = records.data;
+  }
+  toggleLanguage(): void {
+    this.growthService.toggleLanguage();
+  }
+}

src/app/pages/clinical-header/clinical-header.component.css

@@ -37,7 +37,7 @@ html {
   cursor: pointer;
   padding: 10px 16px;
   font-size: 17px;
-  width: 20%;
+  width: 16.66%;
   text-align: center;
 }
 

src/app/pages/clinical-header/clinical-header.component.html

@@ -26,6 +26,12 @@ <h2 matDialogTitle>Clinician Portal</h2>
     routerLinkActive="active"
     >Tracking History</a
   >
+  <a
+    class="tab-link"
+    routerLink="/clinic/growth"
+    routerLinkActive="active"
+    >Growth Chart Results</a
+  >
   <a
     class="tab-link"
     routerLink="/clinic/questionnaire"

src/app/services/growth/growth-service.ts

@@ -67,6 +67,15 @@ export class GrowthService {
       })
       .subscribe(({ data }) => this.recordsSource.next(data));
   }
+  async getClinicRecords() {
+    const [user] = JSON.parse(localStorage.getItem("currentUser"));
+    this.token = user.token;
+    return this.http.get<any>(`${this.endpoint}/clinic`, {
+      headers: {
+        Authorization: `Bearer ${this.token}`,
+      },
+    }).toPromise();
+  }
   async getAdminRecords() {
     const [user] = JSON.parse(localStorage.getItem("currentUser"));
     this.token = user.token;

src/assets/i18n/en-US.json

@@ -147,16 +147,16 @@
   "Carbohydrate (g)": "Carbohydrate (g)",
   "Carrot": "Carrot",
   "Baby Cereal added to formula or breastmilk (examples: rice, wheat, etc.)": "Baby Cereal added to formula or breastmilk (examples: rice, wheat, etc.)",
-  "Complete this questionnaire to learn if you are feeding your child the recommended amounts for each food group.":"Complete this questionnaire to learn if you are feeding your child the recommended amounts for each food group.",
-  "Complete this short form every week to monitor if you are feeding your child the recommended amounts for each food group.":"Complete this short form every week to monitor if you are feeding your child the recommended amounts for each food group.",
+  "Complete this questionnaire to learn if you are feeding your child the recommended amounts for each food group.": "Complete this questionnaire to learn if you are feeding your child the recommended amounts for each food group.",
+  "Complete this short form every week to monitor if you are feeding your child the recommended amounts for each food group.": "Complete this short form every week to monitor if you are feeding your child the recommended amounts for each food group.",
   "Cheese": "Cheese",
   "Chicken or turkey (includes breast, thighs, wings, ground or ham)": "Chicken or turkey (includes breast, thighs, wings, ground or ham)",
   "Chips (examples: Doritos, Lays, Cheetos, Tostitos, etc.)": "Chips (examples: Doritos, Lays, Cheetos, Tostitos, etc.)",
   "Citrus fruits (examples: orange, mandarin, etc.)": "Citrus fruits (examples: orange, mandarin, etc.)",
   "Click the submit button at the bottom of the form when finished": "Click the submit button at the bottom of the form when finished",
   "Click the submit button when finished": "Click the submit button when finished.",
-  "Click here to input the weight and length of your child from the last visit to the pediatric office to monitor his/her growth.":"Click here to input the weight and length of your child from the last visit to the pediatric office to monitor his/her growth.",
-  "Click here to access other resources (videos and websites) with information related to feeding your child.":"Click here to access other resources (videos and websites) with information related to feeding your child.",
+  "Click here to input the weight and length of your child from the last visit to the pediatric office to monitor his/her growth.": "Click here to input the weight and length of your child from the last visit to the pediatric office to monitor his/her growth.",
+  "Click here to access other resources (videos and websites) with information related to feeding your child.": "Click here to access other resources (videos and websites) with information related to feeding your child.",
   "Cookies (sugar cookies, chocolate chips, oats, vanilla, etc.)": "Cookies (sugar cookies, chocolate chips, oats, vanilla, etc.)",
   "Consumed More": "Consumed more",
   "Equal Amount": "Equal Amount",
@@ -168,7 +168,7 @@
   "Daily Average": "Daily Average",
   "Date": "Date",
   "Day": "Day",
-  "Each tab has a different tool, please see the descriptions below":"Each tab has a different tool, please see the descriptions below",
+  "Each tab has a different tool, please see the descriptions below": "Each tab has a different tool, please see the descriptions below",
   "Egg": "Egg",
   "Energy (kcal)": "Energy (kcal)",
   "Enter Age": "Enter Age",
@@ -507,8 +507,8 @@
   "For each food and drink, you can click the up or down arrows for the number of times a food and drink were consumed, the serving size, and if it was given weekly or daily.": "For each food and drink, you can click the up or down arrows for the number of times a food and drink were consumed, the serving size, and if it was given weekly or daily.",
   "You can click on the pictures to the right of each item to help you with the serving size and can also see the pictures larger.": "You can click on the pictures to the right of each item to help you with the serving size and can also see the pictures larger.",
   "Menus are composed from the following panels: Child Personal Information Panel, Child Body Measurements Panel, Chart Options Panel. The buttons located on top-right screen side are the Download, Language and Info buttons in the respectively order. The Download button allows you to save the visible current chart and their respectively data into a pdf file. The language button allows to change the language from English to Spanish and vice versa. The Info button allows gives a basic guideline to interact with the Graphical User Interface": "Menus are composed from the following panels: Child Personal Information Panel, Child Body Measurements Panel, Chart Options Panel. The buttons located on top-right screen side are the Download, Language and Info buttons in the respectively order. The Download button allows you to save the visible current chart and their respectively data into a pdf file. The language button allows to change the language from English to Spanish and vice versa. The Info button allows gives a basic guideline to interact with the Graphical User Interface",
-  "Welcome to Parent Portal":"Welcome to Parent Portal",
-  "Parental Portal":"Parental Portal",
+  "Welcome to Parent Portal": "Welcome to Parent Portal",
+  "Parental Portal": "Parental Portal",
   "result": [
     {
       "description": "Breastmilk or iron-fortified infant formula is recommended until age 12 months. Do not use low-iron milk, such as cow or soy, even in infant cereal. Do not add cereal in the bottle. Do not serve 1% (low-fat) or skim (non-fat) milks before age 24 months.",
@@ -604,5 +604,6 @@
   "No data available": "No data available",
   "Percentile": "Percentile",
   "Clinic": "Clinic",
-  "Parent": "Parent"
-}
+  "Parent": "Parent",
+  "Growth Charts Results": "Growth Charts Results"
+}

src/assets/i18n/es.json

@@ -619,5 +619,6 @@
   "This growth chart provides standards on typical growth patterns among infants. Your baby is above optimal growth. Please discuss with your pediatrician as soon as possible.": "Esta tabla de crecimiento proporciona estándares sobre los patrones de crecimiento típicos entre los bebés. Su bebé está por encima del crecimiento óptimo. Hable con su pediatra lo antes posible.",
   "This growth chart provides standards on typical growth patterns among infants. Your baby is below optimal growth. Please discuss with your pediatrician as soon as possible.": "This growth chart provides standards on typical growth patterns among infants. Your baby is below optimal growth. Please discuss with your pediatrician as soon as possible.",
   "Clinic": "Clínica",
-  "Parent": "Padre"
-}
+  "Parent": "Padre",
+  "Growth Charts Results": "Resultados de gráficos de crecimiento"
+}