TSK-485: Calendar Year/Month summary (#2465)

Signed-off-by: Denis Maslennikov <denis.maslennikov@gmail.com>

plugins/hr-assets/lang/en.json

@@ -22,6 +22,7 @@
     "RequestType": "Type",
     "CreateRequest": "Create {type}",
     "Today": "Today",
+    "Summary": "Total",
     "NoEmployeesInDepartment": "There are no employees in the selected department",
     "Vacation": "Vacation",
     "Sick": "Sick",

plugins/hr-assets/lang/ru.json

@@ -22,6 +22,7 @@
     "RequestType": "Тип",
     "CreateRequest": "Создать {type}",
     "Today": "Сегодня",
+    "Summary": "Итого",
     "NoEmployeesInDepartment": "Нет сотрудников в выбранном департаменте",
     "Vacation": "Отпуск",
     "Sick": "Больничный",

plugins/hr-resources/src/components/ScheduleView.svelte

@@ -92,8 +92,10 @@
         for (const request of res) {
           const requests = employeeRequests.get(request.attachedTo) ?? []
           requests.push(request)
+          if (request.attachedTo) {
             employeeRequests.set(request.attachedTo, requests)
           }
+        }
         employeeRequests = employeeRequests
       }
     )

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -52,8 +52,13 @@
 
   const todayDate = new Date()
 
-  function getRequests (employee: Ref<Staff>, date: Date): Request[] {
+  function getRequests (date: Date, employee?: Ref<Staff>): Request[] {
-    const requests = employeeRequests.get(employee)
+    let requests = undefined
+    if (employee) {
+      requests = employeeRequests.get(employee)
+    } else {
+      requests = Array.from(employeeRequests.values()).flat()
+    }
     if (requests === undefined) return []
     const res: Request[] = []
     const time = date.getTime()
@@ -176,7 +181,7 @@
             </td>
             {#each values as value, i}
               {@const date = getDay(startDate, value)}
-              {@const requests = getRequests(employee._id, date)}
+              {@const requests = getRequests(date, employee._id)}
               {@const editable = isEditable(employee)}
               {@const tooltipValue = getTooltip(requests)}
               {@const ww = findReports(employee, date, timeReports)}
@@ -208,6 +213,40 @@
             {/each}
           </tr>
         {/each}
+        <tr>
+          <td class="summary">
+            <Label label={hr.string.Summary} />
+          </td>
+          <td class="flex-center p-1 whitespace-nowrap text-center summary">
+            {getTotal(Array.from(employeeRequests.values()).flat(), startDate.getMonth(), types)}
+          </td>
+          <td class="p-1 text-center summary">
+            {floorFractionDigits(
+              Array.from(timeReports.values())
+                .flat()
+                .reduce((a, b) => a + b.value, 0),
+              3
+            )}
+          </td>
+          {#each values as value, i}
+            {@const date = getDay(startDate, value)}
+            {@const requests = getRequests(date)}
+            <td
+              class="p-1 text-center summary"
+              class:hovered={i === hoveredIndex}
+              class:weekend={isWeekend(date)}
+              class:today={areDatesEqual(todayDate, date)}
+              on:mousemove={() => {
+                hoveredColumn = i
+              }}
+              on:mouseleave={() => {
+                hoveredColumn = -1
+              }}
+            >
+              {getTotal(requests, startDate.getMonth(), types)}
+            </td>
+          {/each}
+        </tr>
       </tbody>
     </table>
   </Scroller>
@@ -269,6 +308,9 @@
       &.today {
         background-color: var(--theme-bg-accent-hover);
       }
+      &.summary {
+        font-weight: 600;
+      }
       &.weekend:not(.today) {
         background-color: var(--theme-bg-accent-color);
       }

plugins/hr-resources/src/components/schedule/ReportPresenter.svelte

@@ -14,11 +14,12 @@
 -->
 <script lang="ts">
   import { Staff } from '@hcengineering/hr'
+  import { floorFractionDigits } from '@hcengineering/ui'
 
   export let value: Staff
   export let display: (staff: Staff) => number | string
 
-  $: _value = display(value)
+  $: _value = floorFractionDigits(display(value), 3)
 </script>
 
 <span class="select-text flex lines-limit-2">{_value}</span>

plugins/hr-resources/src/components/schedule/YearView.svelte

@@ -31,8 +31,13 @@
 
   const todayDate = new Date()
 
-  function getRequests (employeeRequests: Map<Ref<Staff>, Request[]>, employee: Ref<Staff>, date: Date): Request[] {
+  function getRequests (employeeRequests: Map<Ref<Staff>, Request[]>, date: Date, employee?: Ref<Staff>): Request[] {
-    const requests = employeeRequests.get(employee)
+    let requests = undefined
+    if (employee) {
+      requests = employeeRequests.get(employee)
+    } else {
+      requests = Array.from(employeeRequests.values()).flat()
+    }
     if (requests === undefined) return []
     const res: Request[] = []
     const time = date.getTime()
@@ -117,7 +122,7 @@
             </td>
             {#each values as value, i}
               {@const month = getMonth(currentDate, value)}
-              {@const requests = getRequests(employeeRequests, employee._id, month)}
+              {@const requests = getRequests(employeeRequests, month, employee._id)}
               {@const tooltipValue = getTooltip(requests)}
               {#key tooltipValue}
                 <td
@@ -134,6 +139,23 @@
             {/each}
           </tr>
         {/each}
+        <tr class="tr-body">
+          <td class="fixed td-body summary">
+            <Label label={hr.string.Summary} />
+          </td>
+          {#each values as value, i}
+            {@const month = getMonth(currentDate, value)}
+            {@const requests = getRequests(employeeRequests, month)}
+            <td
+              class:today={month.getFullYear() === todayDate.getFullYear() && month.getMonth() === todayDate.getMonth()}
+              class="fixed td-body summary"
+            >
+              <div class="flex-center">
+                {getTotal(requests, value, types)}
+              </div>
+            </td>
+          {/each}
+        </tr>
       </tbody>
     </table>
   </Scroller>
@@ -196,6 +218,9 @@
       &.today {
         background-color: var(--theme-bg-accent-hover);
       }
+      &.summary {
+        font-weight: 600;
+      }
       &.td-body {
         border-bottom: 1px solid var(--divider-color);
         &:not(:last-child) {

plugins/hr-resources/src/plugin.ts

@@ -39,6 +39,7 @@ export default mergeIds(hrId, hr, {
     CreateRequest: '' as IntlString,
     Today: '' as IntlString,
     NoEmployeesInDepartment: '' as IntlString,
+    Summary: '' as IntlString,
     Staff: '' as IntlString,
     Members: '' as IntlString,
     NoMembers: '' as IntlString,