refactor(habits-widget): remove currentValue and use history for tracking

- Removed currentValue field from HabitsWidgetItem and related schema definitions
- Updated progress calculation to use history length instead of currentValue
- Modified client-side habits-widget utils to manage history entries for increments/decrements
- Added saveState callback to update widget state when history changes
- Applied changes to UI rendering to reflect history-based counts
- Ensured unique IDs are generated for items and history entries
- Updated widget rendering and initialization to work with state history
- Adjusted related widgets typings and schemas for state handling improvements

Author: EndyKaufman

web/WIDGETS_DOCUMENTATION.md

@@ -70,7 +70,6 @@ interface HabitsWidgetItem {
   color: string;
   minValue: number;
   maxValue: number;
-  currentValue: number;
   history: Array<{
     id: number;
     time: string;
@@ -108,7 +107,6 @@ The widget is integrated with the general widget system of the project and uses
       "color": "blue",
       "minValue": 0,
       "maxValue": 8,
-      "currentValue": 0,
       "history": []
     }
   ]

web/WIDGETS_DOCUMENTATION_RU.md

@@ -58,10 +58,12 @@
 #### Техническая реализация:
 
 ##### Файлы реализации:
+
 - `web/src/server/widgets/habits-widget.ts` - Основной класс виджета и шаблон отображения
 - `web/src/server/widgets/habits-widget.utils.ts` - Вспомогательные функции на стороне клиента
 
 ##### Структура данных:
+
 ```typescript
 interface HabitsWidgetItem {
   id: string;
@@ -70,7 +72,6 @@ interface HabitsWidgetItem {
   color: string;
   minValue: number;
   maxValue: number;
-  currentValue: number;
   history: Array<{
     id: number;
     time: string;
@@ -79,6 +80,7 @@ interface HabitsWidgetItem {
 ```
 
 ##### Основные функции:
+
 - `showHabitsModal(modalId)` - Отображение модального окна
 - `hideHabitsModal(modalId)` - Скрытие модального окна
 - `addItem(itemId)` - Увеличение значения привычки
@@ -89,6 +91,7 @@ interface HabitsWidgetItem {
 #### Интеграция с системой:
 
 Виджет интегрирован с общей системой виджетов проекта и использует следующие компоненты:
+
 - Zod схемы для валидации данных
 - Formly для конфигурации формы настройки виджета
 - Lucide Icons для иконок
@@ -108,7 +111,6 @@ interface HabitsWidgetItem {
       "color": "blue",
       "minValue": 0,
       "maxValue": 8,
-      "currentValue": 0,
       "history": []
     }
   ]
@@ -118,12 +120,14 @@ interface HabitsWidgetItem {
 ## План развития виджетов
 
 ### Ближайшие задачи:
+
 1. Реализация дополнительных виджетов (часы, календарь)
 2. Улучшение системы настройки виджетов
 3. Добавление возможности сохранения состояния виджетов в базе данных
 4. Реализация системы логирования изменений виджетов
 
 ### Долгосрочные цели:
+
 1. Создание расширяемой системы виджетов с возможностью добавления новых типов
 2. Реализация механизма обмена виджетами между пользователями
 3. Добавление системы уведомлений для виджетов
@@ -132,10 +136,12 @@ interface HabitsWidgetItem {
 ## Решение проблем
 
 ### Известные проблемы:
+
 1. Некоторые цветовые классы Tailwind CSS не генерируются автоматически для пользовательских цветов
 2. Для корректной работы некоторых функций требуется глобальная область видимости
 
 ### Рекомендации:
+
 1. При добавлении новых цветов убедитесь, что они корректно отображаются в Tailwind CSS
 2. При разработке новых виджетов следуйте установленным паттернам реализации
-3. Используйте предоставленные утилиты для работы с DOM вместо прямого обращения к элементам
+3. Используйте предоставленные утилиты для работы с DOM вместо прямого обращения к элементам

web/src/app/pages/dashboards/[dashboardId]/widgets/[widgetId]/index.page.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { RouteMeta } from '@analogjs/router';
 import { AsyncPipe, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
@@ -11,6 +12,7 @@ import { catchError, first, map, shareReplay, tap } from 'rxjs';
 import { ClientValidationErrorType } from '../../../../../../server/types/client-error-type';
 import {
   WIDGETS_FORMLY_FIELDS,
+  WIDGETS_RENDERERS,
   WidgetsType,
 } from '../../../../../../server/widgets/widgets';
 import { NoSanitizePipe } from '../../../../../directives/no-sanitize.directive';
@@ -138,7 +140,14 @@ export default class DashboardsWidgetsEditPageComponent {
     shareReplay(1)
   );
 
-  html$ = this.data$.pipe(mapToRenderHtml(true));
+  html$ = this.data$.pipe(
+    mapToRenderHtml(true, (state, widget) => {
+      this.widgetsService
+        .updateState({ id: widget.id, state })
+        .pipe(first())
+        .subscribe();
+    })
+  );
 
   private setFormFields(options?: { clientError?: ClientValidationErrorType }) {
     this.formHandlerService.updateFormFields(this.formFields$, {
@@ -151,14 +160,19 @@ export default class DashboardsWidgetsEditPageComponent {
 
   onSubmit(data: { type: string; id: string }) {
     this.setFormFields({});
+    
+    const widget = {
+      ...data,
+      options: {
+        ...this.formModel,
+        type: data.type,
+      } as WidgetsType,
+    };
+
+    WIDGETS_RENDERERS[data.type].beforeSave?.(widget);
+
     this.widgetsService
-      .update({
-        ...data,
-        options: {
-          ...this.formModel,
-          type: data.type,
-        } as WidgetsType,
-      })
+      .update(widget)
       .pipe(
         catchError(err =>
           this.errorHandlerService.catchAndProcessServerError({

web/src/app/pages/dashboards/[dashboardId]/widgets/add/[type]/index.page.ts

@@ -9,8 +9,10 @@ import { LucideAngularModule } from 'lucide-angular';
 import { catchError, first, map, of, shareReplay, switchMap, tap } from 'rxjs';
 
 import { ClientValidationErrorType } from '../../../../../../../server/types/client-error-type';
+import { CreateWidgetType } from '../../../../../../../server/types/WidgetSchema';
 import {
   WIDGETS_FORMLY_FIELDS,
+  WIDGETS_RENDERERS,
   WidgetsType,
 } from '../../../../../../../server/widgets/widgets';
 import { mapFormlyTypes } from '../../../../../../formly/get-formly-type';
@@ -142,15 +144,20 @@ export default class DashboardsWidgetsAddByTypePageComponent {
 
   onSubmit(data: { type: string; dashboardId: string }) {
     this.setFormFields({});
-    this.widgetsService
-      .create({
-        dashboardId: data.dashboardId,
+
+    const widget = {
+      dashboardId: data.dashboardId,
+      type: data.type,
+      options: {
+        ...this.formModel,
         type: data.type,
-        options: {
-          ...this.formModel,
-          type: data.type,
-        } as unknown as WidgetsType,
-      })
+      } as unknown as WidgetsType,
+    } as CreateWidgetType;
+
+    WIDGETS_RENDERERS[data.type].beforeSave?.(widget);
+
+    this.widgetsService
+      .create(widget)
       .pipe(
         catchError(err =>
           this.errorHandlerService.catchAndProcessServerError({

web/src/app/utils/render.utils.ts

@@ -3,19 +3,24 @@ import { createIcons, icons } from 'lucide';
 import { forkJoin, map, mergeMap, of, switchMap, tap } from 'rxjs';
 
 import { WidgetRender, WidgetType } from '../../server/types/WidgetSchema';
+import { isSSR } from '../../server/utils/is-ssr';
+import { setHabitItems } from '../../server/widgets/habits-widget.utils';
 import {
+  CreateWidgetsStateType,
   WIDGETS_FORMLY_FIELDS,
   WIDGETS_RENDERERS,
 } from '../../server/widgets/widgets';
 import { mapFormlyTypes } from '../formly/get-formly-type';
 import { DashboardsService } from '../services/dashboards.service';
 import { WidgetsService } from '../services/widgets.service';
-import { isSSR } from '../../server/utils/is-ssr';
 
-export function mapToRenderHtml(staticMode = true) {
+export function mapToRenderHtml(
+  staticMode = true,
+  saveState?: (state: CreateWidgetsStateType, widget: WidgetType) => void
+) {
   return mergeMap(
     (data: { render: WidgetRender<unknown>; widget: WidgetType } | null) =>
-      data?.render?.render(data.widget, { static: staticMode }).pipe(
+      data?.render?.render(data.widget, { static: staticMode, saveState }).pipe(
         tap(() =>
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
@@ -44,6 +49,11 @@ export function mapToRenderDataByDashboardIdAndWidgetId() {
                 WIDGETS_FORMLY_FIELDS[widget.type] || []
               );
               const render = WIDGETS_RENDERERS[widget.type];
+              setHabitItems(
+                widget.id,
+                widget.options?.items || [],
+                widget.state?.history || []
+              );
               return { render, widget, fields, model };
             })
           ),

web/src/server/types/WidgetSchema.ts

@@ -2,7 +2,12 @@ import { Observable } from 'rxjs';
 import { z } from 'zod';
 
 import { WidgetScalarFieldEnum } from '../generated/prisma/internal/prismaNamespace';
-import { CreateWidgetsSchema, WidgetsSchema } from '../widgets/widgets';
+import {
+  CreateWidgetsSchema,
+  CreateWidgetsStateSchema,
+  CreateWidgetsStateType,
+  WidgetsSchema,
+} from '../widgets/widgets';
 
 export const WidgetSchema = z.object({
   [WidgetScalarFieldEnum.id]: z.string().uuid(),
@@ -14,7 +19,7 @@ export const WidgetSchema = z.object({
   [WidgetScalarFieldEnum.columnCount]: z.number().nullish(),
   [WidgetScalarFieldEnum.rowCount]: z.number().nullish(),
   [WidgetScalarFieldEnum.isBlackTheme]: z.boolean().nullish(),
-  [WidgetScalarFieldEnum.isActive]: z.boolean().nullish(),  
+  [WidgetScalarFieldEnum.isActive]: z.boolean().nullish(),
   [WidgetScalarFieldEnum.backgroundColor]: z.string().nullish(),
   [WidgetScalarFieldEnum.primaryColor]: z.string().nullish(),
   [WidgetScalarFieldEnum.positiveColor]: z.string().nullish(),
@@ -72,29 +77,37 @@ export type UpdateWidgetType = z.infer<typeof UpdateWidgetSchema>;
 
 export const UpdateWidgetStateSchema = z.object({
   [WidgetScalarFieldEnum.id]: z.string().uuid(),
-  [WidgetScalarFieldEnum.state]: z.any().nullish(),
+  [WidgetScalarFieldEnum.state]: CreateWidgetsStateSchema,
 });
 
 export type UpdateWidgetStateType = z.infer<typeof UpdateWidgetStateSchema>;
 
 export type WidgetRenderInitFunctionOptions = {
   static?: boolean;
+  saveState?: (state: CreateWidgetsStateType, widget: WidgetType) => void;
 };
 
 export type WidgetRenderRenderFunctionOptions = {
   static?: boolean;
   init?: boolean;
+  saveState?: (state: CreateWidgetsStateType, widget: WidgetType) => void;
 };
 
-export type WidgetRenderType<T> = WidgetType & { options?: T };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface WidgetRenderType<T, S = any> extends WidgetType {
+  options?: T;
+  state?: S;
+}
 
-export interface WidgetRender<T> {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface WidgetRender<T, S = any> {
   init?(
-    widget: WidgetRenderType<T>,
+    widget: WidgetRenderType<T, S>,
     options?: WidgetRenderInitFunctionOptions
   ): void;
   render(
-    widget: WidgetRenderType<T>,
+    widget: WidgetRenderType<T, S>,
     options?: WidgetRenderRenderFunctionOptions
   ): Observable<string>;
-}
+  beforeSave?(widget: Partial<WidgetRenderType<T, S>>): void;
+}

web/src/server/widgets/calendar-widget.ts

@@ -52,6 +52,10 @@ export const CalendarWidgetSchema = z.object({
     .default(CalendarWidgetWeekday.sunday),
 });
 
+export const CalendarWidgetStateSchema = z.object({
+  type: z.literal('calendar'),
+});
+
 export type CalendarWidgetType = z.infer<typeof CalendarWidgetSchema>;
 
 export const CALENDAR_FORMLY_FIELDS: FormlyFieldConfig[] = [