added a tool to validate MFK structure

fixed css class due to upgrading to bootstrap 5

projects/uiowa/uiowa-mfk/src/lib/models/mfk-tools.ts

@@ -67,3 +67,46 @@ export function validFormat(mfk: Mfk): boolean {
   }
   return true;
 }
+
+/**
+ * checks if each field of an Mfk object is in a valid format
+ * returns an array of error messages
+ * If the format is valid, then the returning array is empty.
+ */
+export function validateStructure(mfk: Mfk): string[] {
+  const result: string[] = [];
+  if (mfk.fund?.length !== 3) {
+    result.push(`Invalid Fund: Length is incorrect (must be 3 digits)`);
+  }
+  if (mfk.org?.length !== 2) {
+    result.push(`Invalid Org: Length is incorrect (must be 2 digits)`);
+  }
+  if (mfk.dept?.length !== 4) {
+    result.push(`Invalid Dept: Length is incorrect (must be 4 digits)`);
+  }
+  if (mfk.subdept?.length !== 5) {
+    result.push(`Invalid Subdept: Length is incorrect (must be 5 digits)`);
+  }
+  if (mfk.grantpgm?.length !== 8) {
+    result.push(`Invalid Grant/Pgm: Length is incorrect (must be 8 digits)`);
+  }
+  if (mfk.iact?.length !== 4) {
+    result.push(`Invalid Iact: Length is incorrect (must be 4 digits)`);
+  }
+  if (mfk.oact?.length !== 3) {
+    result.push(`Invalid Oact: Length is incorrect (must be 3 digits)`);
+  }
+  if (mfk.dact?.length !== 5) {
+    result.push(`Invalid Dact: Length is incorrect (must be 5 digits)`);
+  }
+  if (mfk.fn?.length !== 2) {
+    result.push(`Invalid Fn: Length is incorrect (must be 2 digits)`);
+  }
+  if (mfk.cctr?.length !== 4) {
+    result.push(`Invalid Cctr: Length is incorrect (must be 4 digits)`);
+  }
+  if (mfk.brf && mfk.brf.length !== 2) {
+    result.push(`Invalid Brf: Length is incorrect (must be 2 digits)`);
+  }
+  return result;
+}

src/app/actions/actions.component.html

@@ -21,45 +21,45 @@
 
 <section id="configurable-options">
   <p class="h2">MFK input with configurable options</p>
-  <div class="form-inline mb-2">
-    <div class="mr-sm-2">
-      <select class="custom-select" [(ngModel)]="field" name="field">
+  <div class="d-flex align-items-center mb-2">
+    <div class="me-2">
+      <select class="form-select" [(ngModel)]="field" name="field">
         <option value="">Select an MFK field</option>
         <option *ngFor="let item of mfkFields" [ngValue]="item">
           {{ item }}
         </option>
       </select>
     </div>
-    <div class="mr-sm-2">
+    <div class="me-2">
       <input
         type="text"
         class="form-control"
         [(ngModel)]="defaultValue"
         placeholder="default value"
       />
     </div>
-    <div class="mr-sm-2">
-      <div class="custom-control custom-checkbox">
+    <div class="me-2">
+      <div class="form-check">
         <input
           type="checkbox"
-          class="custom-control-input"
+          class="form-check-input"
           id="reonly"
           [(ngModel)]="isReadonly"
         />
-        <label class="custom-control-label" id="checkbox-readonly" for="reonly">
+        <label class="form-check-label" id="checkbox-readonly" for="reonly">
           ReadOnly?
         </label>
       </div>
     </div>
-    <div class="mr-sm-2">
-      <div class="custom-control custom-checkbox">
+    <div class="me-2">
+      <div class="form-check">
         <input
           type="checkbox"
-          class="custom-control-input"
+          class="form-check-input"
           id="brf"
           [(ngModel)]="withBrf"
         />
-        <label class="custom-control-label" id="checkbox-brf" for="brf">
+        <label class="form-check-label" id="checkbox-brf" for="brf">
           With BRF?
         </label>
       </div>
@@ -69,7 +69,7 @@
     <button
       id="set-option2-btn"
       type="button"
-      class="btn btn-primary mr-2"
+      class="btn btn-primary me-2"
       (click)="setOptions2()"
     >
       Set

src/app/mfk-validations/mfk-validations.component.html

@@ -4,7 +4,7 @@
     <label
       for="mfk-container_mfk1"
       style="width: 100px"
-      class="font-weight-bold justify-content-start"
+      class="fw-bold justify-content-start"
     >
       MFK
     </label>
@@ -19,7 +19,7 @@
     <button
       id="set-value-btn"
       type="button"
-      class="btn btn-secondary mr-2"
+      class="btn btn-secondary me-2"
       (click)="updateMfk1()"
     >
       Set an MFK Value
@@ -34,6 +34,9 @@
       Validate
     </button>
   </div>
+  <div class="text-danger">
+    <p *ngFor="let e of mfkStructureErrors" class="m-0">{{ e }}</p>
+  </div>
   <div *ngIf="validationResult">
     <pre>{{ validationResult | json }}</pre>
   </div>

src/app/mfk-validations/mfk-validations.component.ts

@@ -4,6 +4,7 @@ import {
   Mfk,
   MfkString,
   stringify,
+  validateStructure,
 } from 'projects/uiowa/uiowa-mfk/src/public-api';
 import { emptyMfk } from '@uiowa/uiowa-mfk';
 
@@ -24,6 +25,7 @@ interface MfkValidationResult {
 })
 export class MfkValidationsComponent implements OnInit {
   mfk1: Mfk = emptyMfk();
+  mfkStructureErrors: string[] = [];
   validationResult: MfkValidationResult = {
     statusCode: 0,
     statusMessage: '',
@@ -40,10 +42,11 @@ export class MfkValidationsComponent implements OnInit {
   }
 
   validateMfk1() {
-    const mfk40String = stringify(this.mfk1).replace(/-/g, '');
-    if (mfk40String.length !== 40) {
+    this.mfkStructureErrors = validateStructure(this.mfk1);
+    if (this.mfkStructureErrors.length) {
       return;
     }
+    const mfk40String = stringify(this.mfk1).replace(/-/g, '');
     const url = `https://apps.its.uiowa.edu/mfk/api-singleDesc.jsp?mfk=10%20%20%20${mfk40String}`;
     return this.httpClient.get(url, { responseType: 'text' }).subscribe((x) => {
       const parts = x.split(/\n/);

src/app/split-cost/split-cost.component.html

@@ -2,19 +2,19 @@
 <hr />
 
 <section id="multiple-mfks-group" class="flex flex-column">
-  <div class="font-weight-bold">MFK(s)</div>
+  <div class="fw-bold">MFK(s)</div>
   <div id="mfk-lines">
     <div
       *ngFor="let item of accounts"
       class="d-flex align-items-end justify-content-between mfk-line"
     >
       <uiowa-mfk-input [(mfk)]="item.mfk"></uiowa-mfk-input>
-      <div class="percentage-field ml-auto">
+      <div class="percentage-field ms-auto">
         <p class="percentage-label">Percentage</p>
         <div class="input-group" style="max-width: 4.25rem; min-width: 4.25rem">
           <input
             type="text"
-            class="form-control text-right"
+            class="form-control text-end"
             style="padding: 0.375rem"
             aria-label="percentage"
             digitOnly
@@ -49,11 +49,11 @@
       Add an MFK
     </button>
     <div>
-      <span class="font-weight-bold"> Total:</span>
+      <span class="fw-bold"> Total:</span>
       <div
-        class="d-inline-block text-right"
+        class="d-inline-block text-end"
         style="width: 4.25rem; margin-right: 3rem"
-        [ngClass]="{ 'text-danger font-weight-bold': total != 100 }"
+        [ngClass]="{ 'text-danger fw-bold': total != 100 }"
       >
         <span style="padding: 0.375rem">{{ total }}</span>
         <span style="padding: 0.375rem">%</span>
@@ -98,7 +98,7 @@ <h4 class="modal-title" id="modal-title">Confirm Accounts</h4>
   <div class="modal-footer">
     <button
       type="button"
-      class="btn btn-outline-dark mr-2"
+      class="btn btn-outline-dark me-2"
       (click)="modal.close()"
     >
       No. I changed my mind.