feat: TT-576 Improve grids visual presentation and function (#826)

* feat: TT-576 Improve grids visual presentation and function

Author: iHackN3WTON

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

@@ -0,0 +1,28 @@
+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;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+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;
+}

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;

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -55,3 +55,31 @@ $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;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+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;
+}

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>

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;

src/app/modules/time-entries/pages/time-entries.component.scss

@@ -0,0 +1,28 @@
+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;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+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;
+}

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();

src/app/modules/users/components/users-list/users-list.component.css

@@ -0,0 +1,28 @@
+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;
+  color: #ff5e0a;
+  -webkit-text-stroke: 2px white;
+}
+
+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;
+}

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;