add date-range-text to report week graph

urlaubsverwaltung · Oct 4, 2024 · 2d19a9d · 2d19a9d
1 parent aedb320
commit 2d19a9d
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 18 deletions.
diff --git a/src/main/java/de/focusshift/zeiterfassung/report/GraphWeekDto.java b/src/main/java/de/focusshift/zeiterfassung/report/GraphWeekDto.java
@@ -2,7 +2,7 @@
 
 import java.util.List;
 
-record GraphWeekDto(String yearMonthWeek, List<GraphDayDto> dayReports, Double maxHoursWorked) {
+record GraphWeekDto(int calendarWeek, String dateRangeString, List<GraphDayDto> dayReports, Double maxHoursWorked) {
 
     public Double graphLegendMaxHour() {
 

diff --git a/src/main/java/de/focusshift/zeiterfassung/report/ReportControllerHelper.java b/src/main/java/de/focusshift/zeiterfassung/report/ReportControllerHelper.java
@@ -2,6 +2,7 @@
 
 import de.focusshift.zeiterfassung.absence.Absence;
 import de.focusshift.zeiterfassung.user.DateFormatter;
+import de.focusshift.zeiterfassung.user.DateRangeFormatter;
 import de.focusshift.zeiterfassung.user.UserId;
 import de.focusshift.zeiterfassung.usermanagement.User;
 import de.focusshift.zeiterfassung.usermanagement.UserLocalId;
@@ -28,10 +29,12 @@ class ReportControllerHelper {
 
     private final ReportPermissionService reportPermissionService;
     private final DateFormatter dateFormatter;
+    private final DateRangeFormatter dateRangeFormatter;
 
-    ReportControllerHelper(ReportPermissionService reportPermissionService, DateFormatter dateFormatter) {
+    ReportControllerHelper(ReportPermissionService reportPermissionService, DateFormatter dateFormatter, DateRangeFormatter dateRangeFormatter) {
         this.reportPermissionService = reportPermissionService;
         this.dateFormatter = dateFormatter;
+        this.dateRangeFormatter = dateRangeFormatter;
     }
 
     UserId principalToUserId(OidcUser principal) {
@@ -65,14 +68,15 @@ GraphWeekDto toGraphWeekDto(ReportWeek reportWeek, Month monthPivot) {
             .map(reportDay -> toUserReportDayReportDto(reportDay, !reportDay.date().getMonth().equals(monthPivot)))
             .toList();
 
-        final String yearMonthWeek = dateFormatter.formatYearMonthWeek(reportWeek.firstDateOfWeek());
+        final int calendarWeek = reportWeek.firstDateOfWeek().get(ChronoField.ALIGNED_WEEK_OF_YEAR);
+        final String dateRangeString = dateRangeFormatter.toDateRangeString(reportWeek.firstDateOfWeek(), reportWeek.lastDateOfWeek());
 
         final double maxHoursWorked = dayReports.stream()
             .map(GraphDayDto::hoursWorked)
             .mapToDouble(value -> value)
             .max().orElse(0.0);
 
-        return new GraphWeekDto(yearMonthWeek, dayReports, maxHoursWorked);
+        return new GraphWeekDto(calendarWeek, dateRangeString, dayReports, maxHoursWorked);
     }
 
     private GraphDayDto toUserReportDayReportDto(ReportDay reportDay, boolean differentMonth) {

diff --git a/src/main/java/de/focusshift/zeiterfassung/user/DateFormatter.java b/src/main/java/de/focusshift/zeiterfassung/user/DateFormatter.java
@@ -19,6 +19,4 @@ public interface DateFormatter {
     String formatDate(LocalDate date);
 
     String formatDate(LocalDate date, MonthFormat monthFormat, YearFormat yearFormat);
-
-    String formatYearMonthWeek(LocalDate date);
 }
diff --git a/src/main/java/de/focusshift/zeiterfassung/user/DateFormatterImpl.java b/src/main/java/de/focusshift/zeiterfassung/user/DateFormatterImpl.java
@@ -8,7 +8,6 @@
 import java.time.YearMonth;
 import java.time.format.DateTimeFormatter;
 import java.time.format.TextStyle;
-import java.time.temporal.ChronoField;
 import java.util.Locale;
 
 @Service
@@ -53,11 +52,6 @@ public String formatDate(LocalDate date, MonthFormat monthFormat, YearFormat yea
         return DateTimeFormatter.ofPattern(pattern, locale).format(date);
     }
 
-    public String formatYearMonthWeek(LocalDate date) {
-        final String yearMonth = formatYearMonth(YearMonth.from(date));
-        return yearMonth + " KW " + date.get(ChronoField.ALIGNED_WEEK_OF_YEAR);
-    }
-
     private Locale locale() {
         return LocaleContextHolder.getLocale();
     }

diff --git a/src/main/java/de/focusshift/zeiterfassung/user/DateRangeFormatter.java b/src/main/java/de/focusshift/zeiterfassung/user/DateRangeFormatter.java
@@ -0,0 +1,38 @@
+package de.focusshift.zeiterfassung.user;
+
+import org.springframework.context.MessageSource;
+import org.springframework.context.i18n.LocaleContextHolder;
+import org.springframework.stereotype.Component;
+
+import java.time.LocalDate;
+import java.util.Locale;
+
+@Component
+public class DateRangeFormatter {
+
+    private final DateFormatter dateFormatter;
+    private final MessageSource messageSource;
+
+    DateRangeFormatter(DateFormatter dateFormatter, MessageSource messageSource) {
+        this.dateFormatter = dateFormatter;
+        this.messageSource = messageSource;
+    }
+
+    public String toDateRangeString(LocalDate from, LocalDate to) {
+
+        final MonthFormat firstMonthFormat =
+            from.getMonthValue() == to.getMonthValue() ? MonthFormat.NONE : MonthFormat.STRING;
+
+        final YearFormat firstYearFormat =
+            from.getYear() == to.getYear() ? YearFormat.NONE : YearFormat.FULL;
+
+        final String firstDateString = dateFormatter.formatDate(from, firstMonthFormat, firstYearFormat);
+        final String lastDateString = dateFormatter.formatDate(to, MonthFormat.STRING, YearFormat.FULL);
+
+        return messageSource.getMessage("date-range", new Object[]{firstDateString, lastDateString}, locale());
+    }
+
+    private Locale locale() {
+        return LocaleContextHolder.getLocale();
+    }
+}
diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
@@ -199,6 +199,9 @@ month.october.short=Okt
 month.november.short=Nov
 month.december.short=Dez
 
+date-range={0} bis {1}
+date-range.with-calendar-week=KW {0} | {1}
+
 datepicker.today=Heute
 
 # duet-date-picker localization
@@ -277,7 +280,6 @@ time-entry.form.delete.tooltip=Löschen
 time-entry.date.label=Datum
 time-entry.delete=Zeitslot wurde gelöscht.
 
-
 report.page.meta.title=Zeiterfassung - Berichte
 
 report.view.select=Ansicht:

diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
@@ -199,6 +199,9 @@ month.october.short=Oct
 month.november.short=Nov
 month.december.short=Dec
 
+date-range={0} to {1}
+date-range.with-calendar-week=CW {0} | {1}
+
 datepicker.today=Today
 
 # duet-date-picker localization

diff --git a/src/main/resources/templates/reports/user-report-week.html b/src/main/resources/templates/reports/user-report-week.html
@@ -65,16 +65,57 @@
       <div class="relative flex flex-col">
         <span
           th:if="${isThisWeek}"
-          class="text-gray-400 text-sm absolute -top-3/4 flex items-center"
+          class="text-gray-400 text-sm absolute -top-full flex items-center"
         >
           <svg
             th:replace="~{icons/bookmark::svg(className='-ml-0.5 mr-1 w-3 h-3 fill-amber-300')}"
           />
           <th:block th:text="#{report.week.current-week}">Diese Woche</th:block>
         </span>
-        <span class="font-bold" th:text="${weekReport.yearMonthWeek}">
-          Dezember 2021, KW 42
-        </span>
+        <div th:id="${'week-banner-'}" class="flex items-center">
+          <div class="flex-1 w-full">
+            <div
+              class="relative flex justify-between gap-x-2 flex-wrap text-sm"
+            >
+              <span
+                class="font-bold"
+                th:text="#{date-range.with-calendar-week(${weekReport.calendarWeek}, ${weekReport.dateRangeString})}"
+              >
+                KW 40 | 30. September bis 06. Oktober 2024
+              </span>
+              <p
+                class="tabular-nums text-sm text-gray-800 font-medium sm:flex-1 sm:absolute sm:left-0 sm:right-0 sm:text-center"
+              >
+                <span class="inline-flex items-center">+01:58</span>
+                <!--              <span class="inline-flex items-center">-->
+                <!--                <th:block th:if="${week.hoursDeltaNegative}">-</th:block>-->
+                <!--                <th:block th:if="${not week.hoursDeltaNegative}">+</th:block>-->
+                <!--                <span class="font-bold tabular-nums" th:text="${week.hoursDelta}">-->
+                <!--                  01:30-->
+                <!--                </span>-->
+                <!--                <th:block th:if="${not week.hoursDeltaNegative and week.hoursDelta != '00:00'}">-->
+                <!--                  <svg-->
+                <!--                    th:replace="~{icons/trending-up::svg(className='w-4 h-4 ml-1')}"-->
+                <!--                  ></svg>-->
+                <!--                </th:block>-->
+                <!--              </span>-->
+              </p>
+              <p class="sr-only sm:not-sr-only">
+                Geleistet:
+                <span class="font-bold tabular-nums"> 41:58 </span>
+                (<th:block
+                  th:text="#{time-entry.overview.week.group.hours-bar.should}"
+                  >Soll: </th:block
+                ><span class="font-bold tabular-nums">40:00</span>)
+              </p>
+            </div>
+            <div
+              class="translate-y-1 h-1 rounded-full bg-gradient-to-r from-gray-200 to-gray-600"
+              th:styleappend="${'width:100%'}"
+            ></div>
+          </div>
+          <div class="time-entry-box__controls"></div>
+        </div>
       </div>
       <div is="z-report-graph">
         <svg

diff --git a/src/main/resources/templates/reports/user-report.html b/src/main/resources/templates/reports/user-report.html
@@ -55,7 +55,9 @@
               class="2xl:sticky 2xl:self-start"
               style="top: calc(var(--navigation-header-height) + 1rem)"
             >
-              <div class="p-8 bg-gradient-to-b from-gray-100 rounded-t-3xl">
+              <div
+                class="p-8 pt-9 bg-gradient-to-b from-gray-100 rounded-t-3xl"
+              >
                 <div th:replace="~{__${chartFragment}__}"></div>
               </div>
               <th:block th:if="${{reportSummary != null}}">