fix: TT-290 add method to avoid text overflow

Author: jase156

src/app/modules/time-entries/components/calendar/calendar.component.html

@@ -22,6 +22,19 @@
         {{ timeEntries.end_date | date: 'HH:mm' }}
       </p>
     </div>
+    <div
+      *ngIf="
+        isVisibleForCurrentView(calendarView, CalendarViewEnum.Week) ||
+        isVisibleForCurrentView(calendarView, CalendarViewEnum.Day)
+      "
+    >
+      <p
+        class="additional {{ 'line-' + getCardEntryHeight(timeEntries.start_date, timeEntries.end_date) }}"
+        *ngIf="timeIsGreaterThan(timeEntries.start_date, timeEntries.end_date, 60)"
+      >
+        {{ timeEntries.description }}
+      </p>
+    </div>
   </div>
 </ng-template>
 
@@ -140,15 +153,15 @@
       *ngSwitchCase="CalendarViewEnum.Week"
       [viewDate]="currentDate"
       [events]="timeEntriesAsEvent"
-      [hourSegmentHeight]="60"
+      [hourSegmentHeight]="HALF_HOUR * VARIATION_HEIGHT"
       [eventTemplate]="timeEntriesInsideDaysCalendarTemplate"
     >
     </mwl-calendar-week-view>
     <mwl-calendar-day-view
       *ngSwitchCase="CalendarViewEnum.Day"
       [viewDate]="currentDate"
       [events]="timeEntriesAsEvent"
-      [hourSegmentHeight]="60"
+      [hourSegmentHeight]="HALF_HOUR * VARIATION_HEIGHT"
       [eventTemplate]="timeEntriesInsideDaysCalendarTemplate"
     >
     </mwl-calendar-day-view>

src/app/modules/time-entries/components/calendar/calendar.component.scss

@@ -1,4 +1,17 @@
 @import '/src/styles/colors.scss';
+@import '/src/styles/vars.scss';
+
+$line-height-value: $line-height-base * $font-size-base;
+
+$max-lines-project: 2;
+$max-lines-activity: 1;
+$max-lines-description: 50;
+$container-time-entries-margin: 0.125;
+$time-entries-padding: 0.5rem;
+$project-name-line-height: 1;
+
+$project-text-size: $max-lines-project * $project-name-line-height;
+$activity-text-size: $max-lines-activity * $line-height-base;
 
 @function calculate-border-color($base-background-color) {
   @return darken(desaturate(adjust-hue($base-background-color, 6), 18), 27);
@@ -8,12 +21,29 @@
   @return darken(saturate(adjust-hue($text-color, 6), 46.19), 40.98);
 }
 
+@for $card-height from 12 through $max-lines-description {
+  $wrap-height: ($card-height * 0.625rem) -
+    $project-text-size -
+    $activity-text-size -
+    $container-time-entries-margin -
+    $time-entries-padding;
+  $line-clamp: ($wrap-height / $line-height-value);
+  .line-#{$card-height} {
+    overflow-y: hidden;
+    height: $wrap-height;
+    display: -webkit-box;
+    -webkit-line-clamp: round($line-clamp);
+    -webkit-box-orient: vertical;
+  }
+}
+
 .container-time-entries {
-  margin: 2px;
+  margin: $container-time-entries-margin;
   div.time-entries {
-    padding: 8px;
+    padding: $time-entries-padding;
     height: 100%;
     border-radius: 7px;
+    overflow-y: hidden;
     color: $primary-text;
     margin: 2px 6px 0px 5px;
     background-color: $background-card-entry;
@@ -27,8 +57,12 @@
     p.project-name {
       color: calculate-bold-text-color($primary-text);
       line-height: 1;
+      display: -webkit-box;
+      -webkit-line-clamp: $max-lines-project;
+      -webkit-box-orient: vertical;
     }
     p.additional {
+      overflow-wrap: break-word;
       color: calculate-bold-text-color($primary-text);
     }
   }

src/app/modules/time-entries/components/calendar/calendar.component.spec.ts

@@ -314,4 +314,22 @@ describe('CalendarComponent', () => {
       expect(result).toBe(expected);
     });
   });
+
+  it('return card entry height multiplied by height variation when call getCardEntryHeight', () => {
+    [
+      { startDate: '2021-04-11T08:00:00Z', endDate: '2021-04-11T10:20:00Z', expected: 28 },
+      { startDate: '2021-04-12T17:00:00Z', endDate: '2021-04-12T17:00:00Z', expected: 0 },
+      { startDate: '2021-04-11T18:00:00Z', endDate: '2021-04-12T18:00:00Z', expected: 288 },
+      { startDate: '2021-04-12T12:00:00Z', endDate: '2021-04-12T12:01:01Z', expected: 0 },
+    ].forEach(({startDate, endDate, expected}) => {
+      const fakeStartDate = new Date(startDate);
+      const fakeEndDate = new Date(endDate);
+
+      const result = component.getCardEntryHeight(fakeStartDate, fakeEndDate);
+
+      expect(result).toBe(expected);
+    });
+
+
+  });
 });

src/app/modules/time-entries/components/calendar/calendar.component.ts

@@ -16,6 +16,9 @@ import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/s
   styleUrls: ['./calendar.component.scss'],
 })
 export class CalendarComponent implements OnInit {
+  readonly HALF_HOUR: number = 30;
+  readonly VARIATION_HEIGHT: number = 2;
+
   @Input() set timeEntries$(timeEntries: Observable<DataSource<Entry>>){
     this.castEntryToCalendarEvent(timeEntries);
   }
@@ -115,6 +118,12 @@ export class CalendarComponent implements OnInit {
     return new SubstractDatePipe().transformInMinutes( endDate , startDate);
   }
 
+  getCardEntryHeight(startDate: Date, endDate: Date): number{
+    const heightCard = this.getTimeWork(startDate, endDate) * this.VARIATION_HEIGHT;
+    const finalHeightCard = heightCard / 10;
+    return Math.floor(finalHeightCard) ;
+  }
+
   timeIsGreaterThan(startDate: Date, endDate: Date, timeRange: number ): boolean{
     const timeWorkInMinutes = this.getTimeWork(startDate, endDate);
     return timeWorkInMinutes > timeRange;

src/styles/vars.scss

@@ -0,0 +1,7 @@
+/*
+  Font
+*/
+$font-size-base: 1rem;
+$font-family-base: 'Roboto', sans-serif;
+$font-weight-base: 400;
+$line-height-base: 1.5;