Merge pull request #483 from udsm-dhis2-lab/feature/improve-lis-menu

Improve form fields rendering
udsm-dhis2-lab · Nov 19, 2024 · 0215efd · 0215efd
2 parents 2ad425a + 4051821
commit 0215efd
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/ui/src/app/modules/laboratory/laboratory.component.scss b/ui/src/app/modules/laboratory/laboratory.component.scss
@@ -87,7 +87,7 @@
   border-bottom: solid 1px #eee;
 }
 
-ul {
+.lis-menu ul {
   list-style-type: none;
   margin-left: -24px;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2),

diff --git a/...atory/modules/sample-registration/components/person-details/person-details.component.html b/...atory/modules/sample-registration/components/person-details/person-details.component.html
@@ -119,16 +119,18 @@
   ></app-form>
   <app-form
     [fields]="personFields"
+    [colClass]="'col-2'"
     [isFormHorizontal]="true"
     (formUpdate)="onFormUpdate($event)"
   ></app-form>
 
   <div class="row">
-    <div class="col-3">
+    <div class="col-2">
       <div class="row">
         <div class="col-12">
           <app-form
             [fields]="personDOBField"
+            [colClass]="'col-12'"
             [isFormHorizontal]="true"
             (formUpdate)="onFormUpdate($event)"
           ></app-form>
@@ -148,7 +150,7 @@
       <mat-form-field
         class="w-100 no-padding"
         style="margin-left: 6px"
-        appearance="fill"
+        appearance="outline"
       >
         <mat-label>Years</mat-label>
         <input
@@ -168,7 +170,7 @@
       <mat-form-field
         class="w-100 no-padding"
         style="margin-left: 6px"
-        appearance="fill"
+        appearance="outline"
       >
         <mat-label>Months</mat-label>
         <input

diff --git a/ui/src/app/shared/components/capture-form-data/capture-form-data.component.html b/ui/src/app/shared/components/capture-form-data/capture-form-data.component.html
@@ -9,6 +9,7 @@
           [isFormHorizontal]="true"
           [isReport]="isReport"
           [formId]="form?.uuid"
+          [ngClass]="isLIS ? 'col-md-2' : null"
           [fieldsData]="observations"
           [formValidationRules]="formValidationRules"
           (formUpdate)="onFormUpdate($event)"
@@ -48,7 +49,7 @@
                     [fields]="formField?.formFields"
                     [isFormHorizontal]="true"
                     [isReport]="isReport"
-                    [colClass]="isLIS ? 'col-4' : null"
+                    [colClass]="isLIS ? 'col-2' : null"
                     [formId]="form?.uuid"
                     [formValidationRules]="formValidationRules"
                     [fieldsData]="observations"
@@ -161,7 +162,6 @@
               member?.setMembers?.length == 0
             "
           >
-
             <app-form
               [fields]="[member?.formField]"
               [dataType]="member?.dataType"
@@ -172,7 +172,6 @@
               (formUpdate)="onFormUpdate($event)"
             >
             </app-form>
-
           </div>
           <div
             *ngIf="

diff --git a/ui/src/app/shared/modules/form/components/field/field.component.html b/ui/src/app/shared/modules/form/components/field/field.component.html
@@ -9,7 +9,7 @@
 >
   <mat-form-field
     [ngSwitch]="field?.controlType"
-    appearance="fill"
+    appearance="outline"
     class="w-100 no-padding"
   >
     <mat-label [attr.for]="field?.key">{{ field?.label }} </mat-label>
@@ -254,7 +254,7 @@
     !field?.multiple
   "
 >
-  <mat-form-field class="w-100" appearance="fill">
+  <mat-form-field class="w-100" appearance="outline">
     <mat-label>{{ field?.label }}</mat-label>
     <input
       type="text"
@@ -318,7 +318,7 @@
     field?.multiple
   "
 >
-  <mat-form-field class="w-100" appearance="fill">
+  <mat-form-field class="w-100" appearance="outline">
     <mat-label>{{ field?.label }}</mat-label>
     <mat-select
       [formControlName]="field?.key"
@@ -372,7 +372,7 @@
   <mat-form-field
     [hidden]="field?.hidden"
     [ngSwitch]="field?.controlType"
-    appearance="fill"
+    appearance="outline"
     class="w-100"
   >
     <mat-label [attr.for]="field?.key">{{ field?.label }}</mat-label>
@@ -401,7 +401,7 @@
   <mat-form-field
     [hidden]="field?.hidden"
     [ngSwitch]="field?.controlType"
-    appearance="fill"
+    appearance="outline"
     class="w-100"
   >
     <mat-label [attr.for]="field?.key">{{ field?.label }}</mat-label>

diff --git a/ui/src/app/shared/modules/form/components/field/field.component.scss b/ui/src/app/shared/modules/form/components/field/field.component.scss
@@ -20,7 +20,7 @@
 //   background-color: #fff;
 // }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
 .mat-form-field-underline {
   display: none !important;
 }
@@ -82,16 +82,21 @@ ng-deep .disabled-form-selection-option,
   min-width: 50px;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
 ::ng-deep .mat-form-field-wrapper {
   padding-bottom: 0.375rem !important;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
 ::ng-deep .mat-form-field-infix {
   display: block;
   position: relative;
   flex: auto;
   min-width: 80px !important;
   width: auto !important;
 }
+
+.custom-height .mat-form-field-wrapper {
+  height: 60px; /* Adjust the height as needed */
+  align-items: center; /* Optional: centers input content */
+}