chore: code tidying

e-picsa · Jan 25, 2024 · 3183960 · 3183960
1 parent dcfbbf2
commit 3183960
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 52 deletions.
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.html b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.html
@@ -1,26 +1,25 @@
 <div class="summary-container">
-  <h4>Details</h4>
-  <div class="summary-list">
-    <p matTooltip="Total Family Labour Hours">
-      <img [src]="getImagePath('family', 'svg')" alt="Groups Icon" class="icon" />:
-      <b>{{ totalFamilyLabourHours }}</b>
-    </p>
-    <p matTooltip="Total Inputs Value">
+  <section matTooltip="Total Family Labour Hours">
+    <mat-icon svgIcon="picsa_budget_family-labour" class="summary-icon"></mat-icon>
+    <span class="summary-value">{{ totalFamilyLabourHours }} {{ 'hours' | translate }}</span>
+  </section>
+  <!-- TODO - confirm with UoR if inputs/outputs preferred alongside net cash balance -->
+  <!-- <p matTooltip="Total Inputs Value">
       <img [src]="getImagePath('inputs', 'svg')" alt="Receipt Icon" class="icon" /> : <b>{{ totalInputsValue }}</b>
     </p>
     <p matTooltip="Total Outputs Value">
       <img [src]="getImagePath('outputs', 'svg')" alt="Monetization Icon" class="icon" />:
       <b>{{ totalOutputsValue }}</b>
-    </p>
-    <div *ngFor="let produce of totalProduceSummary">
-      <p [matTooltip]="'Total ' + produce.label + ' consumed'">
-        <img [src]="getImagePath(produce.id, produce.extension)" [alt]="produce.label + ' Icon'" class="icon" />
-        : <b>{{ produce.total }}</b>
-      </p>
-    </div>
-    <p matTooltip="Final Cash Balance">
-      <img [src]="getImagePath('cash-balance', 'svg')" alt="Wallet Icon" class="icon" />:
-      <b>{{ finalCashBalance }}</b>
-    </p>
-  </div>
+    </p> -->
+  @for (produce of totalProduceSummary; track produce.id) {
+  <section [matTooltip]="'Total ' + produce.label + ' consumed'">
+    <img [src]="produce.imgPath" [alt]="produce.label + ' Icon'" class="summary-icon" />
+    <span class="summary-value">{{ produce.total }} {{ 'consumed' | translate }}</span>
+  </section>
+  }
+
+  <section matTooltip="Final Cash Balance">
+    <mat-icon svgIcon="picsa_budget_cash_balance" alt="Wallet Icon" class="summary-icon" />
+    <span class="summary-value">{{ finalCashBalance }} {{ 'balance' | translate }}</span>
+  </section>
 </div>
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss
@@ -1,35 +1,20 @@
+:host {
+  display: block;
+}
 .summary-container {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-
-  h4 {
-    margin: 0 0 0.5rem 0;
-  }
-
-  .summary-list {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-
-    p {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-      font-weight: 400;
-
-      .mat-icon {
-        font-size: 1.2rem;
-      }
-
-      .icon {
-        width: 1.2rem;
-        height: 1.2rem;
-      }
-    }
-  }
+  gap: 8px;
+}
+section {
+  display: flex;
+  align-items: center;
+}
+.summary-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+.summary-value {
+  margin-left: 8px;
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/components/card/card-new/card-new.ts b/apps/picsa-tools/budget-tool/src/app/components/card/card-new/card-new.ts
@@ -30,6 +30,7 @@ export class BudgetCardNew {
       label: '',
       type: this.type,
       groupings: groupings as IBudgetCardGrouping[],
+      imgType: 'svg',
     };
     const dialogRef = this.dialog.open(BudgetCardNewDialog, {
       width: '250px',

diff --git a/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html b/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html
@@ -6,7 +6,7 @@
       <mat-card-content>{{ budget.meta.description }}</mat-card-content>
       <mat-card-subtitle>{{ budget._created | date }}</mat-card-subtitle>
     </div>
-    <budget-summary style="width: 150px" [budgetData]="budget.data" style="margin-bottom: 1.2rem"></budget-summary>
+    <budget-summary [budgetData]="budget.data" style="margin-bottom: 1.2rem; width: 150px"></budget-summary>
     <button
       mat-icon-button
       [matMenuTriggerFor]="budgetMenu"

diff --git a/apps/picsa-tools/budget-tool/src/app/schema/cards/schema_v1.ts b/apps/picsa-tools/budget-tool/src/app/schema/cards/schema_v1.ts
@@ -15,7 +15,7 @@ export type IBudgetCard_v1 = {
   groupings?: IBudgetCardGrouping[];
   customMeta?: IBudgetCardCustomMeta;
   values?: IBudgetCardValues;
-  imgType?: 'svg' | 'png';
+  imgType: 'svg' | 'png';
   /** Optional image overide (default used card id) */
   imgId?: string;
   _deleted?: boolean;
@@ -62,6 +62,7 @@ export const ENTRY_TEMPLATE_V1 = (options: {
   return {
     id: generateID(),
     customMeta: { imgData, createdBy: '', dateCreated: new Date().toISOString() },
+    imgType: 'svg',
     groupings,
     label,
     type,

diff --git a/apps/picsa-tools/budget-tool/src/app/store/templates.ts b/apps/picsa-tools/budget-tool/src/app/store/templates.ts
@@ -31,6 +31,7 @@ export const NEW_BUDGET_TEMPLATE: IBudget = {
       label: '',
       type: null as any,
       groupings: [],
+      imgType: 'svg',
     },
     lengthScale: 'months',
     lengthTotal: 5,