fix: #212 clean up design a little bit

Author: enriquezrene

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html

@@ -10,7 +10,8 @@
       >
         <strong>{{ messageToShow }}</strong>
       </div>
-
+    </div>
+    <div class="form-group">
       <input
         class="form-control form-control-sm"
         id="customerName"
@@ -22,9 +23,11 @@
       />
       <span
         class="badge badge-pill badge-light text-danger"
-        *ngIf="(customerForm.dirty || customerForm.touched) && customerForm.invalid"
+        *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required"
         >Customer name is required</span
       >
+    </div>
+    <div class="form-group">
       <textarea
         class="form-control form-control-sm mt-2"
         id="customerDescription"
@@ -34,13 +37,13 @@
       ></textarea>
       <span
         class="badge badge-pill badge-light text-danger"
-        *ngIf="(customerForm.dirty || customerForm.touched) && customerForm.invalid"
+        *ngIf="(description.dirty || description.touched) && description.invalid && description.errors.required"
         >Customer description is required</span
       >
+    </div>
       <button type="submit" class="btn btn-sm btn-primary" [disabled]="!customerForm.valid">Save</button>
       <button (click)="resetCustomerForm()" id="cancel" type="button" class="btn btn-sm btn-secondary mb-2 ml-2 mt-2">
         Cancel
       </button>
-    </div>
   </form>
 </div>

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.ts

@@ -62,7 +62,6 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
         id: this.customerToEdit.id,
       };
       this.store.dispatch(new UpdateCustomer(customer));
-      this.customerForm.reset();
     } else {
       this.store.dispatch(new CreateCustomer(customerData));
     }
@@ -95,6 +94,14 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
     }
   }
 
+  get name() {
+    return this.customerForm.get('name');
+  }
+
+  get description() {
+    return this.customerForm.get('description');
+  }
+
   resetCustomerForm() {
     this.customerForm.reset();
     this.store.dispatch(new ResetCustomerToEdit());

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -12,7 +12,7 @@
 <table class="table table-sm table-bordered table-striped mb-0">
   <thead class="thead-orange">
     <tr class="d-flex">
-      <th class="col-9">Name</th>
+      <th class="col-9">Customer name</th>
       <th class="col-3 text-center"></th>
     </tr>
   </thead>

src/app/modules/customer-management/components/projects-type/components/create-project-type/create-project-type.component.html

@@ -1,42 +1,21 @@
 <form style="width: 600px;" [formGroup]="projectTypeForm" (ngSubmit)="onSubmit(projectTypeForm.value)">
   <div class="form-group">
-    <input
-      type="text"
-      class="form-control form-control-sm"
-      id="name"
-      formControlName="name"
-      aria-describedby=""
-      [class.is-invalid]="name.invalid && name.touched"
-      required
-      placeholder="Name"
-    />
+    <input type="text" class="form-control form-control-sm" id="name" formControlName="name" aria-describedby=""
+      [class.is-invalid]="name.invalid && name.touched" required placeholder="Name" />
     <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
       Name is required.
     </div>
-    <textarea
-      class="form-control form-control-sm mt-2"
-      id="descriptionTextArea"
-      rows="3"
-      placeholder="Description"
-      formControlName="description"
-    ></textarea>
-    <div class="btn-toolbar" role="toolbar">
-      <div class="btn-group mr-2" role="group">
-        <button type="submit" class="btn btn-sm btn-primary mb-2 ml-2 mt-2" [disabled]="!projectTypeForm.valid">
-          Save
-        </button>
-      </div>
-      <div class="btn-group mr-2" role="group">
-        <button
-          class="btn btn-sm btn-secondary mb-2 ml-2 mt-2"
-          type="reset"
-          [hidden]="!projectTypeToEdit"
-          (click)="cancelButton()"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
   </div>
+  <div class="form-group">
+    <textarea class="form-control form-control-sm mt-2" id="descriptionTextArea" rows="3" placeholder="Description"
+      formControlName="description"></textarea>
+  </div>
+  <button type="submit" class="btn btn-sm btn-primary" [disabled]="!projectTypeForm.valid">
+    Save
+  </button>
+  <button class="btn btn-sm btn-secondary mb-2 ml-2 mt-2" type="reset" [hidden]="!projectTypeToEdit"
+    (click)="cancelButton()">
+    Cancel
+  </button>
 </form>
-<hr />
+<hr/>

src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html

@@ -1,9 +1,3 @@
-<div class="row text-right">
-  <hr />
-  <div class="col-5 text-right">
-    <app-search (changedFilterValue)="filterProjects = $event"></app-search>
-  </div>
-</div>
 <table class="table table-sm table-bordered table-striped">
   <thead class="thead-orange">
     <tr class="d-flex">

src/app/modules/customer-management/pages/customer.component.html

@@ -1,12 +1,8 @@
 <div class="container mt-2">
-  <h4>Customers</h4>
   <div class="row">
-    <div class="col">
+    <div class="col-5" style="padding: 15px;">
       <button (click)="activateCustomerForm()" type="button" class="btn btn-primary">Add new customer</button>
     </div>
-    <div class="col-5 text-right">
-      <app-search></app-search>
-    </div>
   </div>
   <app-customer-list
     [showCustomerForm]="showCustomerForm"

src/app/modules/time-clock/pages/time-clock.component.html

@@ -1,7 +1,6 @@
 <app-notification [notificationMsg]="message | async" [isError]="isError" *ngIf="showNotification"></app-notification>
 <div class="text-center mt-3">
-  <div class="card">
-    <div class="card-body">
+
       <h6 class="text-left"><strong>Summary</strong></h6>
       <hr />
       <div class="row pb-4">
@@ -18,7 +17,6 @@ <h6>Month</h6>
           <h3>49:32</h3>
         </div>
       </div>
-      <hr />
       <div class="row pb-4">
         <div class="col-12">
           <p *ngIf="areFieldsVisible" class="card-title text-left">
@@ -40,7 +38,6 @@ <h3>49:32</h3>
       <div *ngIf="areFieldsVisible">
         <app-entry-fields></app-entry-fields>
       </div>
-      <hr />
       <div class="container">
         <div class="row">
           <div class="col text-right">
@@ -49,7 +46,5 @@ <h3>49:32</h3>
             </button>
           </div>
         </div>
-      </div>
-    </div>
   </div>
 </div>

src/styles/themes/_orange-theme.scss

@@ -1,5 +1,7 @@
 @import '../colors.scss';
 
+$font-size-base: 0.9rem;
+
 $primary: #fc5630;
 $secondary: #16bac5;
 $success: #16bac5;