Merge master branch into TT-589

Author: sbateca

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "time-tracker",
-  "version": "1.72.4",
+  "version": "1.72.5",
   "scripts": {
     "config": "ts-node ./scripts/setenv.ts",
     "preinstall": "npx npm-force-resolutions",

package.json

@@ -6,7 +6,9 @@ const getActivityState = createFeatureSelector<ActivityState>('activities');
 export const allActivities = createSelector(getActivityState, (state: ActivityState) => state?.data);
 
 export const allActiveActivities = createSelector(getActivityState, (state: ActivityState) => {
-  return state?.data.filter((item) => item.status !== 'inactive');
+  return state?.data.filter((item) => item.status !== 'inactive').sort( (a, b) => {
+    return (a.name).localeCompare(b.name);
+  });
 });
 
 export const activityIdToEdit = createSelector(getActivityState, (state: ActivityState) => state?.activityIdToEdit);

src/app/modules/activities-management/store/activity-management.selectors.ts

@@ -20,7 +20,7 @@
         </thead>
         <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
         <tbody *ngIf="!dataSource.isLoading">
-            <tr class="d-flex" *ngFor="let entry of dataSource.data">
+            <tr class="d-flex col-height" *ngFor="let entry of dataSource.data">
                 <td class="hidden-col">{{ entry.id }}</td>
                 <td class="col md-col">{{ entry.owner_email }}</td>
                 <td class="col sm-col">
@@ -43,8 +43,8 @@
             </a>
                     </ng-container>
                 </td>
-                <td class="col lg-col">{{ entry.description }}</td>
-                <td class="col lg-col">
+                <td class="col lg-scroll">{{ entry.description }}</td>
+                <td class="col lg-scroll">
                     <ng-container *ngIf="entry.technologies.length > 0">
                         <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
                             {{ technology }}

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

@@ -2,9 +2,14 @@
 .col{
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
   font-size: small;
 }
+
+.col-height {
+  min-height: auto;
+  max-height: 8rem;
+}
+
 .x-sm-col{
   width: 5em;
   max-width: 7em;
@@ -23,7 +28,39 @@
   width: 12em;
   overflow: hidden;
   white-space: normal;
+  border: none;
+}
+
+@mixin scroll-style {
+  width: 18em;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 8px 10px 0px 10px;
+  border: none;
+  overflow-y: auto;
+  overflow-wrap: break-word;
+
+  &::-webkit-scrollbar {
+    width: 0.5em;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #7a8486;
+    outline: 1px solid #7a8486;
+    border-radius: 0.5em;
+  }
+}
+
+.lg-scroll {
+  @include scroll-style;
 }
+
 .hidden-col{
   display: none;
 }

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

@@ -61,7 +61,9 @@ export class EntryFieldsComponent implements OnInit, OnDestroy {
     this.loadActivitiesSubscription =  this.actionsSubject$
       .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS))
       .subscribe((action) => {
-        this.activities = action.payload.filter((item) => item.status !== 'inactive');
+        this.activities = action.payload.filter((item) => item.status !== 'inactive').sort((a, b) => {
+          return (a.name).localeCompare(b.name);
+        });
         this.store.dispatch(new LoadActiveEntry());
       });