From 3390b5b003894255903b9d47020d71f61b497199 Mon Sep 17 00:00:00 2001
From: iHackN3WTON <ihackn3wton@gmail.com>
Date: Tue, 15 Mar 2022 14:56:51 -0600
Subject: [PATCH 1/2] feat: TT-576 Improve grids visual presentation and
 function

---
 .../customer-list.component.scss              | 25 +++++++++++++++++++
 .../customer-list/customer-list.component.ts  |  4 ++-
 .../time-entries-table.component.scss         | 25 +++++++++++++++++++
 .../month-picker/month-picker.component.html  |  2 +-
 .../month-picker/month-picker.component.scss  |  4 +++
 .../pages/time-entries.component.scss         | 25 +++++++++++++++++++
 .../pages/time-entries.component.ts           |  1 +
 .../users-list/users-list.component.css       | 25 +++++++++++++++++++
 .../users-list/users-list.component.ts        |  4 ++-
 9 files changed, 112 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
index e69de29bb..f250ffb44 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
@@ -0,0 +1,25 @@
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}
diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
index 7e39b78fd..dbb0d79af 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts
@@ -30,7 +30,9 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
   @Output() changeValueShowCustomerForm = new EventEmitter<boolean>();
   @Input()
   customers: CustomerUI[] = [];
-  dtOptions: any = {};
+  dtOptions: any = {
+    columnDefs: [{orderable: false, targets: [2]}]
+  };
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
   dtElement: DataTableDirective;
diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
index 82fab2e2a..9a71bb9d7 100644
--- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
+++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
@@ -55,3 +55,28 @@ $url-hover-color: darken($url-base-color, 20);
   }
 }
 
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.html b/src/app/modules/shared/components/month-picker/month-picker.component.html
index 431d75ffc..4229aa45b 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.html
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.html
@@ -22,7 +22,7 @@
 <div class="row content-months">
   <div class="spacing col-xl-1 col-lg-1 col-md-2 col-2" *ngFor="let month of months; let i = index">
     <button class="btn btn-light btn-block"
-      [ngClass]="{'btn-primary': isSelectedMonth(i)}"
+      [ngClass]="{'btn-primary selected-month': isSelectedMonth(i)}"
       (click)="selectMonth(i)"
       [disabled]="monthEnable(i)">
       <small>{{ month.slice(0, 3) }}</small>
diff --git a/src/app/modules/shared/components/month-picker/month-picker.component.scss b/src/app/modules/shared/components/month-picker/month-picker.component.scss
index 29e11f684..432bcfe65 100644
--- a/src/app/modules/shared/components/month-picker/month-picker.component.scss
+++ b/src/app/modules/shared/components/month-picker/month-picker.component.scss
@@ -24,6 +24,10 @@
   }
 }
 
+.selected-month {
+  color: white;
+}
+
 .align-item {
   display: flex;
   justify-content: center;
diff --git a/src/app/modules/time-entries/pages/time-entries.component.scss b/src/app/modules/time-entries/pages/time-entries.component.scss
index e69de29bb..f250ffb44 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.scss
+++ b/src/app/modules/time-entries/pages/time-entries.component.scss
@@ -0,0 +1,25 @@
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}
diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts
index 0ecdbc921..7bbbb794e 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.ts
+++ b/src/app/modules/time-entries/pages/time-entries.component.ts
@@ -24,6 +24,7 @@ import { CalendarView } from 'angular-calendar';
 export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {
     order: [[ 0, 'desc' ]],
+    columnDefs: [{orderable: false, targets: [6]}],
     destroy: true,
   };
   dtTrigger: Subject<any> = new Subject();
diff --git a/src/app/modules/users/components/users-list/users-list.component.css b/src/app/modules/users/components/users-list/users-list.component.css
index e69de29bb..f250ffb44 100644
--- a/src/app/modules/users/components/users-list/users-list.component.css
+++ b/src/app/modules/users/components/users-list/users-list.component.css
@@ -0,0 +1,25 @@
+table.dataTable thead th {
+  position: relative;
+}
+
+table.dataTable thead th.sorting:after,
+table.dataTable thead th.sorting_asc:after,
+table.dataTable thead th.sorting_desc:after {
+  position: absolute;
+  top: 10px;
+  right: 3px;
+  display: block;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+table.dataTable thead .sorting_asc::after {
+  content: "▲";
+}
+table.dataTable thead .sorting_desc::after {
+  content: "▼";
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc {
+  background-image: none;
+}
diff --git a/src/app/modules/users/components/users-list/users-list.component.ts b/src/app/modules/users/components/users-list/users-list.component.ts
index 36758778d..e5d1d5f6b 100644
--- a/src/app/modules/users/components/users-list/users-list.component.ts
+++ b/src/app/modules/users/components/users-list/users-list.component.ts
@@ -22,7 +22,9 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
   dtElement: DataTableDirective;
-  dtOptions: any = {};
+  dtOptions: any = {
+    columnDefs: [{ orderable: false, targets: [2]}]
+  };
   switchGroupsSubscription: Subscription;
   isDevelopment = true;
 

From 1bdc681eaba57f0ab7dca8d242270aa3cb5ccc05 Mon Sep 17 00:00:00 2001
From: iHackN3WTON <ihackn3wton@gmail.com>
Date: Wed, 16 Mar 2022 09:46:10 -0600
Subject: [PATCH 2/2] feat: TT-576 Improve grids visual presentation and
 function

---
 .../components/customer-list/customer-list.component.scss      | 3 +++
 .../time-entries-table/time-entries-table.component.scss       | 3 +++
 src/app/modules/time-entries/pages/time-entries.component.scss | 3 +++
 .../users/components/users-list/users-list.component.css       | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
index f250ffb44..f8d73e904 100644
--- a/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
+++ b/src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss
@@ -10,11 +10,14 @@ table.dataTable thead th.sorting_desc:after {
   right: 3px;
   display: block;
   font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
 }
 
 table.dataTable thead .sorting_asc::after {
   content: "▲";
 }
+
 table.dataTable thead .sorting_desc::after {
   content: "▼";
 }
diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
index 9a71bb9d7..34034aa2b 100644
--- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
+++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss
@@ -67,11 +67,14 @@ table.dataTable thead th.sorting_desc:after {
   right: 3px;
   display: block;
   font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
 }
 
 table.dataTable thead .sorting_asc::after {
   content: "▲";
 }
+
 table.dataTable thead .sorting_desc::after {
   content: "▼";
 }
diff --git a/src/app/modules/time-entries/pages/time-entries.component.scss b/src/app/modules/time-entries/pages/time-entries.component.scss
index f250ffb44..f8d73e904 100644
--- a/src/app/modules/time-entries/pages/time-entries.component.scss
+++ b/src/app/modules/time-entries/pages/time-entries.component.scss
@@ -10,11 +10,14 @@ table.dataTable thead th.sorting_desc:after {
   right: 3px;
   display: block;
   font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
 }
 
 table.dataTable thead .sorting_asc::after {
   content: "▲";
 }
+
 table.dataTable thead .sorting_desc::after {
   content: "▼";
 }
diff --git a/src/app/modules/users/components/users-list/users-list.component.css b/src/app/modules/users/components/users-list/users-list.component.css
index f250ffb44..f8d73e904 100644
--- a/src/app/modules/users/components/users-list/users-list.component.css
+++ b/src/app/modules/users/components/users-list/users-list.component.css
@@ -10,11 +10,14 @@ table.dataTable thead th.sorting_desc:after {
   right: 3px;
   display: block;
   font-family: Arial, Helvetica, sans-serif;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
 }
 
 table.dataTable thead .sorting_asc::after {
   content: "▲";
 }
+
 table.dataTable thead .sorting_desc::after {
   content: "▼";
 }