Merge branch 'feature/calendar-widget' into dev

Создан виджет с календарём для дашбордов

docs/Создание кастомного виджета для дашборда.md

@@ -0,0 +1,408 @@
+# Создание кастомного виджета для дашборда
+
+В проекте представлено несколько готовых виджетов для дашбордов. Главная фича дашбордов - возможность добавления любых кастомных виджетов на основе существующих React компонентов или разработки собственных компонентов.
+
+Чтобы добавить собственный виджет нужно
+
+- добавить data-loader на backend-е
+- добавить React компонент для виджета на frontend-е
+
+data-loader и react-компонент свяжутся через совпадающие поле `type`.
+
+Давайте разберём подробнее на примере создания виджета предстоящих событий.
+
+![Виджет с календарём предстоящих событий.png](_resources/Виджет%20с%20календарём%20предстоящих%20событий.png)
+
+## Data loader на backend-е
+
+Выберем расположение файла для класса data-loader-а на backend-е.
+
+Data-loader для нового виджета можно расположить где угодно.
+
+1. Для единообразия его можно расположить в стандартном месте с универсальными виджетами в папке `libs/event-emitter/src/dashboards/widget-data-loader`
+2. Либо если виджет ускоспециализирован под нужды вашего проекта, то можно сделать отдельную папку под ваш проект: `src/<PROJECT_NAME>/dashboards/widget-data-loader`
+
+Рассматриваемый виджет будет универсальным, поэтому файл сохраним в `libs/event-emitter/src/dashboards/widget-data-loader/calendar.widget-data-loader.service.ts`:
+
+```ts
+import { Injectable } from '@nestjs/common';
+import { WidgetDataLoaderInterface } from '../widget-data-loader-interface';
+import { Result, AppError } from '@app/event-emitter/utils/result';
+
+@Injectable()
+export class CalendarWidgetDataLoaderService
+  implements WidgetDataLoaderInterface<any, any, any>
+{
+  // TODO: Добавить конструктор для подключения
+  // дополнительных зависимостей
+
+  isMyConfig(dataLoaderParams: any): boolean {
+    return true;
+  }
+
+  load(
+    dataLoaderParams: any,
+    dashboardParams: any,
+  ): Promise<Result<any, AppError>> {
+    // TODO: Логика для загрузки данных
+    throw new Error('Method not implemented.');
+  }
+}
+```
+
+В фреймворках для классических случаев по концепции MVC делают сервисы для реализации в них логики и контроллеры для открытия ендпоинтов для передачи данных пользователям и на frontend приложения.
+
+К представленному выше `DataLoaderService` можно относиться как к контроллеру в концепции MVC, который обратиться к более низкоуровневому сервису для получения данных, а так же передаст эти результаты уже в виджет на frontend-е.
+
+Сервис для получения данных уже был разработан, и остаётся его подключить к data-loader-у класс `CalendarService` через конструктор и получить с его помощью нужные данные вызвав метод `CalendarService.getRawData`:
+
+```ts
+@Injectable()
+export class CalendarWidgetDataLoaderService
+  implements WidgetDataLoaderInterface<DataLoaderParams, any, IssueAndEvent[]>
+{
+  constructor(private calendarService: CalendarService) {}
+
+  isMyConfig(): boolean {
+    return true;
+  }
+
+  async load(
+    dataLoaderParams: DataLoaderParams,
+  ): Promise<Result<IssueAndEvent[], AppError>> {
+    let data: IssueAndEvent[];
+    try {
+      data = await this.calendarService.getRawData(
+        dataLoaderParams.filter,
+        dataLoaderParams.period * 24 * 60 * 60 * 1000,
+      );
+      return success(data);
+    } catch (ex) {
+      return fail(createAppError(ex.message ? ex.message : 'UNKNOWN_ERROR'));
+    }
+  }
+}
+```
+
+Остаётся зарегистрировать data-loader в коллекцию доступных виджетов на стороне backend-а и задать ему свой уникальный `type`.
+
+> Архитектура предполагает кроме реализации `WidgetDataLoaderInterface` ещё и реализацию собственно виджета `WidgetInterface`, но последнее можно упросить с помощью вызова фабричного метода `createInteractiveWidget` - он создаст экземпляр `InteractiveWidget` для реализованного ранее data-loader-а. Более подробно можно ознакомитсья с разными типами виджетов, как они устроены в разделе [[Архитектура дашбордов]].
+
+Зарегистрировать новый тип виджета можно в коллекции `libs/event-emitter/src/dashboards/widgets-collection.service.ts` для этого в конструктор добавить такой код:
+
+```ts
+createInteractiveWidget(
+  this.calendarWidgetDataLoaderService,
+  'calendar_next_events',
+)
+```
+
+**Важно:** проделать необходимые изменения в соответствии с требованиями базового фреймворка NestJS. Сюда входят требования к инъекции зависимостей в конструктор из сервисов доступных через модули `libs/event-emitter/src/event-emitter.module.ts` и `src/app.module.ts` и включение новых сервисов в эти модули. Подробнее об этом можно прочитать в документации [NestJS - Providers](https://docs.nestjs.com/providers).
+
+На backend-е всё готово. Переходим к самому интересному - frontend-у
+
+## Виджет на frontend-е
+
+Начнём с непосредственно компонента. Виджеты лежат в папке `frontend/src/dashboard/widgets`. Добавим туда же новый виджет `frontend/src/dashboard/widgets/calendar-next-events.tsx`:
+
+```tsx
+import React from 'react';
+
+export const CalendarNextEvents = (): JSX.Element => {
+  return <></>;
+};
+```
+
+Этот пустой компонент можно сразу добавить в фабрику виджетов дашборда на frontend-е:
+
+`frontend/src/dashboard/widgets/widget-factory.tsx`:
+
+```tsx
+import React from 'react';
+import { CalendarNextEvents } from './calendar-next-events';
+
+// ...
+
+export const WidgetFactory = observer((props: Props): JSX.Element => {
+
+  // ...
+
+  if (props.store.type === 'calendar_next_events') {
+    return <CalendarNextEvents store={props.store} />;
+  }
+
+  // ...
+  
+});
+```
+
+**Важно!** Чтобы `type` совпадало с объявленным типом виджета на backend-е. Объявление на backend-е было сделано в файле `libs/event-emitter/src/dashboards/widgets-collection.service.ts`.
+
+Теперь можно снова вернуться к виджету `calendar-next-events.tsx`.
+
+Для управления состоянием компонентов на стороне frontend-а предполагается использование [mobx-state-tree](https://mobx-state-tree.js.org/), поэтому для компоненты можно определить следующий стор с массивом данных event+issue:
+
+```ts
+// Описание основных и вспомогательных моделей данных для календаря:
+
+export const CalendarEvent = types.model({
+  from: types.string,
+  fromTimestamp: types.number,
+  to: types.string,
+  toTimestamp: types.number,
+  fullDay: types.boolean,
+  description: types.string,
+});
+
+export type ICalendarEvent = Instance<typeof CalendarEvent>;
+
+export const FormattedDateTime = types.model({
+  fromDate: types.string,
+  fromTime: types.string,
+  toDate: types.string,
+  toTime: types.string,
+  interval: types.string,
+});
+
+export type IFormattedDateTime = Instance<typeof FormattedDateTime>;
+
+export const IssueAndEvent = types.model({
+  issue: types.frozen<any>(),
+  event: CalendarEvent,
+});
+
+export type IIssueAndEvent = Instance<typeof IssueAndEvent>;
+
+type InDay = {
+  order: number;
+  relativeDate: string | null;
+  formattedDate: string;
+  events: string[];
+};
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+export const TIME_FORMAT = 'HH:mm';
+
+function getEventKey(e: IIssueAndEvent): string {
+  const description: string = e.event.description.replaceAll(/\s+/g, '_');
+  const fromKey = String(e.event.fromTimestamp);
+  const toKey = String(e.event.toTimestamp);
+  return `${e.issue.id}-${fromKey}-${toKey}-${description}`;
+}
+
+function getFormattedDateTime(
+  issueAndEvent: IIssueAndEvent,
+): IFormattedDateTime {
+  const from = DateTime.fromMillis(issueAndEvent.event.fromTimestamp);
+  const to = DateTime.fromMillis(issueAndEvent.event.toTimestamp);
+  const fromDate: string = from.isValid ? from.toFormat(DATE_FORMAT) : '-';
+  const fromTime: string = from.isValid ? from.toFormat(TIME_FORMAT) : '-';
+  const toDate: string = to.isValid ? to.toFormat(DATE_FORMAT) : '-';
+  const toTime: string = to.isValid ? to.toFormat(TIME_FORMAT) : '-';
+  let interval: string;
+  if (issueAndEvent.event.fullDay) {
+    interval = 'весь день';
+  } else if (toTime != '-') {
+    interval = `${fromTime} - ${toTime}`;
+  } else {
+    interval = `${fromTime}`;
+  }
+  return FormattedDateTime.create({
+    fromDate: fromDate,
+    fromTime: fromTime,
+    toDate: toDate,
+    toTime: toTime,
+    interval: interval,
+  });
+}
+
+function getRelativeDate(issueAndEvent: IIssueAndEvent): string | null {
+  const from = Luxon.DateTime.fromMillis(issueAndEvent.event.fromTimestamp);
+  return from.toRelativeCalendar();
+}
+
+function getStartOfDayTimestamp(issueAndEvent: IIssueAndEvent): number {
+  const from = Luxon.DateTime.fromMillis(issueAndEvent.event.fromTimestamp);
+  return from.startOf('day').toMillis();
+}
+
+/** Стор данных для виджета "Календарь следующих событий" */
+export const EventsStore = types
+  .model({
+    events: types.array(IssueAndEvent),
+  })
+  .views((self) => {
+    return {
+      /** Геттер мапы событий в формате eventKey -> issue+event */
+      eventsMap: (): Record<string, IIssueAndEvent> => {
+        return self.events.reduce((acc, issueAndEvent) => {
+          const key = getEventKey(issueAndEvent);
+          acc[key] = issueAndEvent;
+          return acc;
+        }, {} as Record<string, IIssueAndEvent>);
+      },
+
+      /**
+       * Геттер сгруппированных по дням данных.
+       *
+       * Ключ группы определяется по timestamp-у указывающему на начало дня
+       *
+       * Дополнительные поля relativeDate и formattedDate для отображения в виджете подробной
+       * информации об этой группе событий
+       */
+      orderedByDates: (): InDay[] => {
+        const res: Record<number, InDay> = self.events.reduce(
+          (acc, issueAndEvent) => {
+            const order = getStartOfDayTimestamp(issueAndEvent);
+            const formattedDate = DateTime.fromMillis(
+              issueAndEvent.event.fromTimestamp,
+            ).toFormat(DATE_FORMAT);
+            if (!acc[order]) {
+              acc[order] = {
+                order: order,
+                relativeDate: getRelativeDate(issueAndEvent),
+                formattedDate: formattedDate,
+                events: [],
+              };
+            }
+            const key = getEventKey(issueAndEvent);
+            acc[order].events.push(key);
+            return acc;
+          },
+          {} as Record<number, InDay>,
+        );
+        return Object.values(res).sort((a, b) => a.order - b.order);
+      },
+
+      /**
+       * Мапа событий с отформатированными значениями даты и времени
+       *
+       * * Ключ - это ключ события
+       * * Значение - вспомогательная информация для человеко-читаемого вывода даты и времени
+       */
+      formattedDateTimes: (): Record<string, IFormattedDateTime> => {
+        const res: Record<string, IFormattedDateTime> = self.events.reduce(
+          (acc, event) => {
+            const key = getEventKey(event);
+            acc[key] = getFormattedDateTime(event);
+            return acc;
+          },
+          {} as Record<string, IFormattedDateTime>,
+        );
+        return res;
+      },
+    };
+  })
+  .actions((self) => {
+    return {
+      /** Сеттер основных данных */
+      setEvents: (events: any): void => {
+        self.events = events;
+      },
+    };
+  });
+
+export type IEventsStore = Instance<typeof EventsStore>;
+```
+
+Этот стор будет принимать данные получаемые с backend-а через action "setEvents" и с помощью вспомогательных геттеров предоставлять нужную информацию для вывода в виджете.
+
+Теперь остаётся в react-компоненте CalendarNextEvents добавить использование описанного выше стора и сделать рендер данных:
+
+```tsx
+/**
+ * Компонент для отображения данных из стора EventsStore
+ *
+ * @see {EventsStore}
+ */
+export const CalendarList = observer(
+  (props: { store: IEventsStore }): JSX.Element => {
+    const list = props.store.orderedByDates().map((events) => {
+      const keyOfGroup = `${events.order}-${events.relativeDate}`;
+      const item = (
+        <div key={keyOfGroup}>
+          <p title={events.formattedDate}>{events.relativeDate}:</p>
+          <ul>
+            {events.events.map((keyOfEvent) => {
+              const events = props.store.eventsMap();
+              const formatted = props.store.formattedDateTimes();
+              if (!events[keyOfEvent] && !formatted[keyOfEvent]) return <></>;
+              const issue = events[keyOfEvent].issue;
+              return (
+                <li key={keyOfEvent}>
+                  {formatted[keyOfEvent].interval}:{' '}
+                  <IssueHref
+                    id={issue.id}
+                    subject={events[keyOfEvent].event.description}
+                    tracker={issue.tracker.name}
+                    url={issue.url.url}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+      return item;
+    });
+    return <>{list}</>;
+  },
+);
+
+export type Props = {
+  store: DashboardStoreNs.IWidget;
+};
+
+/**
+ * Основной компонент календаря
+ *
+ * Он нужен для преобразования стора абстрактного виджета в стор специфичный для
+ * календаря
+ */
+export const CalendarNextEvents = observer((props: Props): JSX.Element => {
+  const calendarListStore = EventsStore.create();
+  onSnapshot(props.store, (storeState) => {
+    if (storeState.data) {
+      calendarListStore.setEvents(storeState.data);
+    }
+  });
+  return (
+    <>
+      <CalendarList store={calendarListStore} />
+    </>
+  );
+});
+```
+
+## Проверка
+
+Если всё было сделано верно, то в дашбордах станет доступен новый виджет "calendar_next_events".
+
+Можно проверить на тестовом дашборде с конфигурацией следующего вида:
+
+```json
+{
+  "widgets": [
+    {
+      "id": "test-calendar",
+      "title": "Тест календаря",
+      "type": "calendar_next_events",
+      "collapsed": true,
+      "dataLoaderParams": {
+        "filter": {
+          "selector": {
+            "project.name": "proj"
+          },
+          "limit": 10
+        },
+        "period": 30
+      }
+    }
+  ],
+  "title": "Test"
+}
+```
+
+И убедиться что данные соответствуют указанным данным в задачах Redmine:
+
+![Виджет с календарём предстоящих событий получившийся результат.png](_resources/Виджет%20с%20календарём%20предстоящих%20событий%20-%20получившийся%20результат.png)

frontend/src/dashboard/widgets/calendar-next-events.tsx

@@ -0,0 +1,231 @@
+import { observer } from 'mobx-react-lite';
+import { Instance, onSnapshot, types } from 'mobx-state-tree';
+import React from 'react';
+import * as Luxon from 'luxon';
+import * as DashboardStoreNs from '../dashboard-store';
+import { DateTime } from 'luxon';
+import { IssueHref } from '../../misc-components/issue-href';
+
+// Описание основных и вспомогательных моделей данных для календаря:
+
+export const CalendarEvent = types.model({
+  from: types.string,
+  fromTimestamp: types.number,
+  to: types.string,
+  toTimestamp: types.number,
+  fullDay: types.boolean,
+  description: types.string,
+});
+
+export type ICalendarEvent = Instance<typeof CalendarEvent>;
+
+export const FormattedDateTime = types.model({
+  fromDate: types.string,
+  fromTime: types.string,
+  toDate: types.string,
+  toTime: types.string,
+  interval: types.string,
+});
+
+export type IFormattedDateTime = Instance<typeof FormattedDateTime>;
+
+export const IssueAndEvent = types.model({
+  issue: types.frozen<any>(),
+  event: CalendarEvent,
+});
+
+export type IIssueAndEvent = Instance<typeof IssueAndEvent>;
+
+type InDay = {
+  order: number;
+  relativeDate: string | null;
+  formattedDate: string;
+  events: string[];
+};
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+export const TIME_FORMAT = 'HH:mm';
+
+function getEventKey(e: IIssueAndEvent): string {
+  const description: string = e.event.description.replaceAll(/\s+/g, '_');
+  const fromKey = String(e.event.fromTimestamp);
+  const toKey = String(e.event.toTimestamp);
+  return `${e.issue.id}-${fromKey}-${toKey}-${description}`;
+}
+
+function getFormattedDateTime(
+  issueAndEvent: IIssueAndEvent,
+): IFormattedDateTime {
+  const from = DateTime.fromMillis(issueAndEvent.event.fromTimestamp);
+  const to = DateTime.fromMillis(issueAndEvent.event.toTimestamp);
+  const fromDate: string = from.isValid ? from.toFormat(DATE_FORMAT) : '-';
+  const fromTime: string = from.isValid ? from.toFormat(TIME_FORMAT) : '-';
+  const toDate: string = to.isValid ? to.toFormat(DATE_FORMAT) : '-';
+  const toTime: string = to.isValid ? to.toFormat(TIME_FORMAT) : '-';
+  let interval: string;
+  if (issueAndEvent.event.fullDay) {
+    interval = 'весь день';
+  } else if (toTime != '-') {
+    interval = `${fromTime} - ${toTime}`;
+  } else {
+    interval = `${fromTime}`;
+  }
+  return FormattedDateTime.create({
+    fromDate: fromDate,
+    fromTime: fromTime,
+    toDate: toDate,
+    toTime: toTime,
+    interval: interval,
+  });
+}
+
+function getRelativeDate(issueAndEvent: IIssueAndEvent): string | null {
+  const from = Luxon.DateTime.fromMillis(issueAndEvent.event.fromTimestamp);
+  return from.toRelativeCalendar();
+}
+
+function getStartOfDayTimestamp(issueAndEvent: IIssueAndEvent): number {
+  const from = Luxon.DateTime.fromMillis(issueAndEvent.event.fromTimestamp);
+  return from.startOf('day').toMillis();
+}
+
+/** Стор данных для виджета "Календарь следующих событий" */
+export const EventsStore = types
+  .model({
+    events: types.array(IssueAndEvent),
+  })
+  .views((self) => {
+    return {
+      /** Геттер мапы событий в формате eventKey -> issue+event */
+      eventsMap: (): Record<string, IIssueAndEvent> => {
+        return self.events.reduce((acc, issueAndEvent) => {
+          const key = getEventKey(issueAndEvent);
+          acc[key] = issueAndEvent;
+          return acc;
+        }, {} as Record<string, IIssueAndEvent>);
+      },
+
+      /**
+       * Геттер сгруппированных по дням данных.
+       *
+       * Ключ группы определяется по timestamp-у указывающему на начало дня
+       *
+       * Дополнительные поля relativeDate и formattedDate для отображения в виджете подробной
+       * информации об этой группе событий
+       */
+      orderedByDates: (): InDay[] => {
+        const res: Record<number, InDay> = self.events.reduce(
+          (acc, issueAndEvent) => {
+            const order = getStartOfDayTimestamp(issueAndEvent);
+            const formattedDate = DateTime.fromMillis(
+              issueAndEvent.event.fromTimestamp,
+            ).toFormat(DATE_FORMAT);
+            if (!acc[order]) {
+              acc[order] = {
+                order: order,
+                relativeDate: getRelativeDate(issueAndEvent),
+                formattedDate: formattedDate,
+                events: [],
+              };
+            }
+            const key = getEventKey(issueAndEvent);
+            acc[order].events.push(key);
+            return acc;
+          },
+          {} as Record<number, InDay>,
+        );
+        return Object.values(res).sort((a, b) => a.order - b.order);
+      },
+
+      /**
+       * Мапа событий с отформатированными значениями даты и времени
+       *
+       * * Ключ - это ключ события
+       * * Значение - вспомогательная информация для человеко-читаемого вывода даты и времени
+       */
+      formattedDateTimes: (): Record<string, IFormattedDateTime> => {
+        const res: Record<string, IFormattedDateTime> = self.events.reduce(
+          (acc, event) => {
+            const key = getEventKey(event);
+            acc[key] = getFormattedDateTime(event);
+            return acc;
+          },
+          {} as Record<string, IFormattedDateTime>,
+        );
+        return res;
+      },
+    };
+  })
+  .actions((self) => {
+    return {
+      /** Сеттер основных данных */
+      setEvents: (events: any): void => {
+        self.events = events;
+      },
+    };
+  });
+
+export type IEventsStore = Instance<typeof EventsStore>;
+
+/**
+ * Компонент для отображения данных из стора EventsStore
+ *
+ * @see {EventsStore}
+ */
+export const CalendarList = observer(
+  (props: { store: IEventsStore }): JSX.Element => {
+    const list = props.store.orderedByDates().map((events) => {
+      const keyOfGroup = `${events.order}-${events.relativeDate}`;
+      const item = (
+        <div key={keyOfGroup}>
+          <p title={events.formattedDate}>{events.relativeDate}:</p>
+          <ul>
+            {events.events.map((keyOfEvent) => {
+              const events = props.store.eventsMap();
+              const formatted = props.store.formattedDateTimes();
+              if (!events[keyOfEvent] && !formatted[keyOfEvent]) return <></>;
+              const issue = events[keyOfEvent].issue;
+              return (
+                <li key={keyOfEvent}>
+                  {formatted[keyOfEvent].interval}:{' '}
+                  <IssueHref
+                    id={issue.id}
+                    subject={events[keyOfEvent].event.description}
+                    tracker={issue.tracker.name}
+                    url={issue.url.url}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+      return item;
+    });
+    return <>{list}</>;
+  },
+);
+
+export type Props = {
+  store: DashboardStoreNs.IWidget;
+};
+
+/**
+ * Основной компонент календаря
+ *
+ * Он нужен для преобразования стора абстрактного виджета в стор специфичный для
+ * календаря
+ */
+export const CalendarNextEvents = observer((props: Props): JSX.Element => {
+  const calendarListStore = EventsStore.create();
+  onSnapshot(props.store, (storeState) => {
+    if (storeState.data) {
+      calendarListStore.setEvents(storeState.data);
+    }
+  });
+  return (
+    <>
+      <CalendarList store={calendarListStore} />
+    </>
+  );
+});

frontend/src/dashboard/widgets/widget-factory.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite';
 import * as KanbanWidgetNs from './kanban';
 import { DebugInfo } from '../../misc-components/debug-info';
 import * as IssuesListNs from './issues-list';
+import * as CalendarNextEventsNs from './calendar-next-events';
 
 export type Props = {
   store: Instance<typeof DashboardStoreNs.Widget>;
@@ -21,6 +22,10 @@ export const WidgetFactory = observer((props: Props): JSX.Element => {
     return <IssuesListNs.IssuesList store={props.store} />;
   }
 
+  if (type === 'calendar_next_events') {
+    return <CalendarNextEventsNs.CalendarNextEvents store={props.store} />;
+  }
+
   return (
     <div>
       <div>Unknown widget</div>

libs/event-emitter/src/calendar/calendar.controller.ts

@@ -1,58 +1,54 @@
-import { Controller, Get, Inject, Logger, Param, Query } from "@nestjs/common";
+import { Controller, Get, Inject, Logger, Param, Query } from '@nestjs/common';
-import { CalendarService } from "./calendar.service";
+import { CalendarService } from './calendar.service';
 import nano from 'nano';
-import { UNLIMITED } from "../consts/consts";
+import { UNLIMITED } from '../consts/consts';
 
 @Controller('calendar')
 export class CalendarController {
-	private logger = new Logger(CalendarController.name);
+  private logger = new Logger(CalendarController.name);
 
-	constructor(
+  constructor(
-		@Inject('CALENDAR_SERVICE')
+    @Inject('CALENDAR_SERVICE')
-		private calendarService: CalendarService
+    private calendarService: CalendarService,
-	) {}
+  ) {}
 
-	@Get()
+  @Get()
-	async get(@Param('filter') filter: any): Promise<string> {
+  async get(@Param('filter') filter: any): Promise<string> {
-		return await this.calendarService.getICalData(filter);
+    return await this.calendarService.getICalData(filter);
-	}
+  }
 
-	@Get('/simple')
+  @Get('/simple')
-	async simple(
+  async simple(
-		@Query('project') project?: string,
+    @Query('project') project?: string,
-		@Query('category') category?: string
+    @Query('category') category?: string,
-	): Promise<string> {
+  ): Promise<string> {
-		const andSection: any[] = [
+    const andSection: any[] = [
-			{
+      {
-				"closed_on": {
+        closed_on: {
-					"$exists": false
+          $exists: false,
-				}
+        },
-			}
+      },
-		];
+    ];
-		if (project) {
+    if (project) {
-			andSection.push({
+      andSection.push({
-				"project.name": {
+        'project.name': {
-					"$in": [
+          $in: [project],
-						project
+        },
-					]
+      });
-				}
+    }
-			});
+    if (category) {
-		}
+      andSection.push({
-		if (category) {
+        'category.name': {
-			andSection.push({
+          $in: [category],
-				"category.name": {
+        },
-					"$in": [
+      });
-						category
+    }
-					]
+    const query: nano.MangoQuery = {
-				}
+      selector: {
-			});
+        $and: andSection,
-		}
+      },
-		const query: nano.MangoQuery = {
+      limit: UNLIMITED,
-			selector: {
+    };
-				"$and": andSection
+    return await this.calendarService.getICalData(query);
-			},
+  }
-			limit: UNLIMITED
-		};
-		return await this.calendarService.getICalData(query);
-	}
 }

libs/event-emitter/src/calendar/calendar.service.ts

@@ -1,8 +1,8 @@
-import { Injectable, Logger } from "@nestjs/common";
+import { Injectable } from '@nestjs/common';
-import { CalendarEvent } from "../models/calendar-event";
+import { CalendarEvent } from '../models/calendar-event';
-import { RedmineTypes } from "../models/redmine-types";
+import { RedmineTypes } from '../models/redmine-types';
 import * as Luxon from 'luxon';
-import { IssuesService } from "../issues/issues.service";
+import { IssuesService } from '../issues/issues.service';
 import { randomUUID } from 'crypto';
 
 /*
@@ -36,57 +36,89 @@ END:VCALENDAR
 */
 
 export type IssueAndEvent = {
-	issue: RedmineTypes.ExtendedIssue;
+  issue: RedmineTypes.ExtendedIssue;
-	event: CalendarEvent;
+  event: CalendarEvent;
 };
 
 @Injectable()
 export class CalendarService {
-	private interval = 30 * 24 * 60 * 60 * 1000; // 30 days
+  private defaultInterval = 30 * 24 * 60 * 60 * 1000; // 30 days
 
-	constructor(public calendarEventsKey: string, private issuesService: IssuesService) {}
+  constructor(
+    public calendarEventsKey: string,
+    private issuesService: IssuesService,
+  ) {}
 
-	async getICalData(filter: any): Promise<string> {
+  /**
-		const issues = await this.issuesService.find(filter);
+   * @param filter фильтр для первичной выборки данных из couchdb через nano.filter
-		const actualEvents = this.getActualEvents(issues);
+   * @param interval период в милисекундах
-		const formattedEvents = actualEvents.map((event) => {
+   * @returns
-			return this.generateICalendarEvent(event.issue, event.event);
+   */
-		}).filter((event) => {
+  async getICalData(filter: any, interval?: number): Promise<string> {
-			return !!event;
+    const issues = await this.issuesService.find(filter);
-		});
+    const actualEvents = this.getActualEvents(issues, interval);
-		const res = this.generateICalendar(formattedEvents);
+    const formattedEvents = actualEvents
-		return res;
+      .map((event) => {
-	}
+        return this.generateICalendarEvent(event.issue, event.event);
+      })
+      .filter((event) => {
+        return !!event;
+      });
+    const res = this.generateICalendar(formattedEvents);
+    return res;
+  }
 
-	private getActualEvents(issues: RedmineTypes.ExtendedIssue[]): IssueAndEvent[] {
+  /**
-		const res: IssueAndEvent[] = [];
+   * @param filter фильтр для первичной выборки данных из couchdb через nano.filter
-		for (let i = 0; i < issues.length; i++) {
+   * @param interval период в милисекундах
-			const issue = issues[i];
+   * @returns
-			if (!issue[this.calendarEventsKey] || issue[this.calendarEventsKey].length <= 0) {
+   */
-				continue;
+  async getRawData(filter: any, interval?: number): Promise<IssueAndEvent[]> {
-			}
+    const issues = await this.issuesService.find(filter);
-			const events = issue[this.calendarEventsKey];
+    return this.getActualEvents(issues, interval);
-			for (let j = 0; j < events.length; j++) {
+  }
-				const event = events[j];
-				if (this.actualEvent(event)) res.push({event: event, issue: issue});
-			}
-		}
-		return res;
-	}
 
-	private actualEvent(event: CalendarEvent): boolean {
+  private getActualEvents(
-		const now = Luxon.DateTime.now().toMillis();
+    issues: RedmineTypes.ExtendedIssue[],
-		const from = now - this.interval;
+    interval?: number,
-		const to = now + this.interval;
+  ): IssueAndEvent[] {
-		return Boolean(
+    if (typeof interval !== 'number') interval = this.defaultInterval;
-			(from <= event.fromTimestamp && event.fromTimestamp <= to) ||
+    const res: IssueAndEvent[] = [];
-			(from <= event.toTimestamp && event.toTimestamp <= to)
+    for (let i = 0; i < issues.length; i++) {
-		);
+      const issue = issues[i];
-	}
+      if (
+        !issue[this.calendarEventsKey] ||
+        issue[this.calendarEventsKey].length <= 0
+      ) {
+        continue;
+      }
+      const events = issue[this.calendarEventsKey];
+      for (let j = 0; j < events.length; j++) {
+        const event = events[j];
+        if (this.actualEvent(event, interval)) {
+          res.push({ event: event, issue: issue });
+        }
+      }
+    }
+    return res;
+  }
 
-	private generateICalendarEvent(issue: RedmineTypes.Issue, data: CalendarEvent): string | null {
+  private actualEvent(event: CalendarEvent, interval: number): boolean {
-		if (!data) return null;
+    const now = Luxon.DateTime.now().toMillis();
-		return `BEGIN:VEVENT
+    const from = now - interval;
+    const to = now + interval;
+    return Boolean(
+      (from <= event.fromTimestamp && event.fromTimestamp <= to) ||
+        (from <= event.toTimestamp && event.toTimestamp <= to),
+    );
+  }
+
+  private generateICalendarEvent(
+    issue: RedmineTypes.Issue,
+    data: CalendarEvent,
+  ): string | null {
+    if (!data) return null;
+    return `BEGIN:VEVENT
 UID:${randomUUID()}@example.com
 DTSTAMP:${this.formatTimestamp(data.fromTimestamp, data.fullDay)}
 ORGANIZER;CN=John Doe:MAILTO:john.doe@example.com
@@ -94,20 +126,20 @@ DTSTART:${this.formatTimestamp(data.fromTimestamp, data.fullDay)}
 DTEND:${this.formatTimestamp(data.toTimestamp, data.fullDay)}
 SUMMARY:#${issue.id} - ${data.description} - ${issue.subject}
 END:VEVENT`;
-	}
+  }
 
-	private formatTimestamp(timestamp: number, fullDay?: boolean): string {
+  private formatTimestamp(timestamp: number, fullDay?: boolean): string {
-		let format: string = fullDay ? "yyyyMMdd" : "yyyyMMdd'T'HHmmss'Z'";
+    const format: string = fullDay ? 'yyyyMMdd' : "yyyyMMdd'T'HHmmss'Z'";
-		let datetime = Luxon.DateTime.fromMillis(timestamp);
+    let datetime = Luxon.DateTime.fromMillis(timestamp);
-		if (!fullDay) datetime = datetime.setZone('utc');
+    if (!fullDay) datetime = datetime.setZone('utc');
-		return datetime.toFormat(format);
+    return datetime.toFormat(format);
-	}
+  }
 
-	private generateICalendar(events: string[]): string {
+  private generateICalendar(events: string[]): string {
-		return `BEGIN:VCALENDAR
+    return `BEGIN:VCALENDAR
 VERSION:2.0
 PRODID:-//Example Corp.//CalDAV Client//EN
-${events.join("\n")}
+${events.join('\n')}
 END:VCALENDAR`;
-	}
+  }
 }

libs/event-emitter/src/dashboards/dashboards-data.service.ts

@@ -22,6 +22,7 @@ export class DashboardsDataService {
     const cfg = await this.dashboardsService.load(id);
     const results: WidgetWithData[] = [];
     let isSuccess = false;
+    let counter = 0;
     if (!cfg?.widgets || cfg?.widgets?.length <= 0) {
       return results;
     }
@@ -35,12 +36,13 @@ export class DashboardsDataService {
         cfg,
       );
       if (loadRes.result) {
+        counter++;
         isSuccess = true;
         loadRes.result.widgetId = widget.id;
         results.push({ data: loadRes.result, widgetId: widget.id });
       }
     }
-    if (!isSuccess) throw createAppError('CANNOT_LOAD_DATA');
+    if (!isSuccess && counter > 0) throw createAppError('CANNOT_LOAD_DATA');
     return results;
   }
 

libs/event-emitter/src/dashboards/widget-data-loader/calendar.widget-data-loader.service.ts

@@ -0,0 +1,49 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { WidgetDataLoaderInterface } from '../widget-data-loader-interface';
+import {
+  Result,
+  AppError,
+  success,
+  fail,
+  createAppError,
+} from '@app/event-emitter/utils/result';
+import {
+  CalendarService,
+  IssueAndEvent,
+} from '@app/event-emitter/calendar/calendar.service';
+import nano from 'nano';
+
+export type DataLoaderParams = {
+  /** Период для выборки предстоящих событий в днях */
+  period: number;
+  /** Фильтр для выборки данных из couchdb */
+  filter: nano.MangoQuery;
+};
+
+@Injectable()
+export class CalendarWidgetDataLoaderService
+  implements WidgetDataLoaderInterface<DataLoaderParams, any, IssueAndEvent[]>
+{
+  constructor(
+    @Inject('CALENDAR_SERVICE') private calendarService: CalendarService,
+  ) {}
+
+  isMyConfig(): boolean {
+    return true;
+  }
+
+  async load(
+    dataLoaderParams: DataLoaderParams,
+  ): Promise<Result<IssueAndEvent[], AppError>> {
+    let data: IssueAndEvent[];
+    try {
+      data = await this.calendarService.getRawData(
+        dataLoaderParams.filter,
+        dataLoaderParams.period * 24 * 60 * 60 * 1000,
+      );
+      return success(data);
+    } catch (ex) {
+      return fail(createAppError(ex.message ? ex.message : 'UNKNOWN_ERROR'));
+    }
+  }
+}

libs/event-emitter/src/dashboards/widgets-collection.service.ts

@@ -5,6 +5,7 @@ import { ListIssuesByUsersLikeJiraWidgetDataLoaderService } from './widget-data-
 import { RootIssueSubTreesWidgetDataLoaderService } from './widget-data-loader/root-issue-subtrees.widget-data-loader.service';
 import { createInteractiveWidget } from './interactive-widget-factory';
 import { Result, success } from '@app/event-emitter/utils/result';
+import { CalendarWidgetDataLoaderService } from './widget-data-loader/calendar.widget-data-loader.service';
 
 @Injectable()
 export class WidgetsCollectionService {
@@ -14,6 +15,7 @@ export class WidgetsCollectionService {
     private listIssuesByFieldsWidgetDataLoaderService: ListIssuesByFieldsWidgetDataLoaderService,
     private listIssuesByUsersLikeJiraWidgetDataLoaderService: ListIssuesByUsersLikeJiraWidgetDataLoaderService,
     private rootIssueSubTreesWidgetDataLoaderService: RootIssueSubTreesWidgetDataLoaderService,
+    private calendarWidgetDataLoaderService: CalendarWidgetDataLoaderService,
   ) {
     const collection = [
       createInteractiveWidget(
@@ -40,6 +42,10 @@ export class WidgetsCollectionService {
         this.rootIssueSubTreesWidgetDataLoaderService,
         'issues_list_by_tree',
       ),
+      createInteractiveWidget(
+        this.calendarWidgetDataLoaderService,
+        'calendar_next_events',
+      ),
     ];
 
     collection.forEach((w) => this.appendWidget(w));

libs/event-emitter/src/event-emitter.module.ts

@@ -36,6 +36,7 @@ import { ListIssuesByUsersLikeJiraWidgetDataLoaderService } from './dashboards/w
 import { ListIssuesByFieldsWidgetDataLoaderService } from './dashboards/widget-data-loader/list-issues-by-fields.widget-data-loader.service';
 import { WidgetsCollectionService } from './dashboards/widgets-collection.service';
 import { DashboardsController } from './dashboards/dashboards.controller';
+import { CalendarWidgetDataLoaderService } from './dashboards/widget-data-loader/calendar.widget-data-loader.service';
 
 @Module({})
 export class EventEmitterModule implements OnModuleInit {
@@ -104,6 +105,7 @@ export class EventEmitterModule implements OnModuleInit {
         DashboardsService,
         DashboardsDataService,
         WidgetsCollectionService,
+        CalendarWidgetDataLoaderService,
       ],
       exports: [
         EventEmitterService,
@@ -142,6 +144,7 @@ export class EventEmitterModule implements OnModuleInit {
         DashboardsService,
         DashboardsDataService,
         WidgetsCollectionService,
+        CalendarWidgetDataLoaderService,
       ],
       controllers: [
         MainController,

libs/event-emitter/src/issue-enhancers/calendar-enhancer.ts

@@ -33,8 +33,15 @@ export class CalendarEnhancer implements IssueEnhancerInterface {
     public descriptionCalendarParams: DescriptionParserParams,
     public calendarEventsKey: string,
   ) {
-    const initParams = {useForProjects, customFields, descriptionCalendarParams, calendarEventsKey};
+    const initParams = {
-    this.logger.debug(`Calendar enhancer init with ${JSON.stringify(initParams)}`);
+      useForProjects,
+      customFields,
+      descriptionCalendarParams,
+      calendarEventsKey,
+    };
+    this.logger.debug(
+      `Calendar enhancer init with ${JSON.stringify(initParams)}`,
+    );
   }
 
   async enhance(
@@ -49,10 +56,18 @@ export class CalendarEnhancer implements IssueEnhancerInterface {
     try {
       res[this.calendarEventsKey] = this.getCalendarEvents(res);
     } catch (ex) {
-      this.logger.error(`Error at parsing calendar events, message - ${ex}: ${(ex as Error)?.stack}`);
+      this.logger.error(
+        `Error at parsing calendar events, message - ${ex}: ${
+          (ex as Error)?.stack
+        }`,
+      );
       return res;
     }
-    this.logger.debug(`Calendar events for #${issue.id}: issue.${this.calendarEventsKey} = ${JSON.stringify(res[this.calendarEventsKey])}`);
+    this.logger.debug(
+      `Calendar events for #${issue.id}: issue.${
+        this.calendarEventsKey
+      } = ${JSON.stringify(res[this.calendarEventsKey])}`,
+    );
 
     return res;
   }
@@ -147,7 +162,9 @@ export class CalendarEnhancer implements IssueEnhancerInterface {
 
     const lines = text.split('\n').map((line) => line.trim());
 
-    const calendarStartIndex = lines.indexOf(this.descriptionCalendarParams.title);
+    const calendarStartIndex = lines.indexOf(
+      this.descriptionCalendarParams.title,
+    );
     if (calendarStartIndex < 0) return [];
 
     let index = calendarStartIndex + 1;

libs/event-emitter/src/utils/string-with-dates-parser.ts

@@ -35,7 +35,9 @@ export function parse(str: string, params?: Moo.Rules): Moo.Token[] {
     }
     return res;
   } catch (ex) {
-    logger.error(`Error at parse str=${str} with params=${params}, error message - ${ex}`);
+    logger.error(
+      `Error at parse str=${str} with params=${params}, error message - ${ex}`,
+    );
     return [];
   }
 }
@@ -140,7 +142,7 @@ export function parseToCalendarEvent(
     to = date1.set({
       hour: time2.hours,
       minute: time2.minutes,
-      second: time2.seconds
+      second: time2.seconds,
     });
   } else {
     to = from.plus(Luxon.Duration.fromMillis(DEFAULT_EVENT_DURATION));