add form & initialization for task-detail, add dropdown, create-tag component, fix websockets to subprotocol

Author: Awakich

projects/core/src/consts/lists/actiion-type-list.const.ts

@@ -0,0 +1,22 @@
+/** @format */
+
+export const actionTypeList = [
+  {
+    id: 1,
+    value: "action",
+    label: "действие",
+    additionalInfo: "task",
+  },
+  {
+    id: 2,
+    value: "call",
+    label: "звонок",
+    additionalInfo: "phone",
+  },
+  {
+    id: 3,
+    value: "meet",
+    label: "встреча",
+    additionalInfo: "people-bold",
+  },
+];

projects/core/src/consts/lists/priority-info-list.const.ts

@@ -10,37 +10,37 @@
 export const priorityInfoList = [
   {
     id: 0,
-    name: "бэклог",
+    label: "бэклог",
     color: "#322299",
     priorityType: 0,
   },
   {
     id: 1,
-    name: "в ближайшие часы",
+    label: "в ближайшие часы",
     color: "#A63838",
     priorityType: 1,
   },
   {
     id: 2,
-    name: "высокий",
+    label: "высокий",
     color: "#D48A9E",
     priorityType: 2,
   },
   {
     id: 3,
-    name: "средний",
+    label: "средний",
     color: "#E5B25D",
     priorityType: 3,
   },
   {
     id: 4,
-    name: "низкий",
+    label: "низкий",
     color: "#297373",
     priorityType: 4,
   },
   {
     id: 5,
-    name: "улучшение",
+    label: "улучшение",
     color: "#88C9A1",
     priorityType: 5,
   },

projects/core/src/consts/lists/tag-colots.list.const.ts

@@ -0,0 +1,36 @@
+/** @format */
+
+export const tagColorsList = [
+  {
+    id: 1,
+    color: "#8A63E6",
+  },
+  {
+    id: 2,
+    color: "#9764BA",
+  },
+  {
+    id: 3,
+    color: "#2F36AA",
+  },
+  {
+    id: 4,
+    color: "#4CD9F1",
+  },
+  {
+    id: 5,
+    color: "#88C9A1",
+  },
+  {
+    id: 6,
+    color: "#D48A9E",
+  },
+  {
+    id: 7,
+    color: "#E5B25D",
+  },
+  {
+    id: 8,
+    color: "#297373",
+  },
+];

projects/core/src/lib/services/token.service.ts

@@ -5,7 +5,7 @@ import { map, Observable } from "rxjs";
 import { RefreshResponse } from "@auth/models/http.model";
 import { plainToInstance } from "class-transformer";
 import { Tokens } from "@auth/models/tokens.model";
-import Cookies from "js-cookie";
+import Cookies, { CookieAttributes } from "js-cookie";
 import { ApiService, PRODUCTION } from "@corelib";
 
 /**
@@ -66,11 +66,13 @@ export class TokenService {
    * - Используются дефолтные настройки браузера
    * - Cookies привязаны к текущему домену
    */
-  getCookieOptions() {
+  getCookieOptions(): CookieAttributes {
     if (this.production) {
       return {
         domain: ".procollab.ru", // Домен для production окружения
         expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 дней
+        secure: true,
+        sameSite: "None",
       };
     }
 

projects/social_platform/src/app/core/services/websocket.service.ts

@@ -1,9 +1,10 @@
 /** @format */
-import { Injectable } from "@angular/core";
+import { inject, Injectable } from "@angular/core";
 import { filter, map, Observable, Observer, retry, Subject } from "rxjs";
 import { environment } from "@environment";
 import * as snakecaseKeys from "snakecase-keys";
 import camelcaseKeys from "camelcase-keys";
+import { TokenService } from "@corelib";
 
 /**
  * Сервис для работы с WebSocket соединениями
@@ -20,6 +21,8 @@ export class WebsocketService {
   /** Subject для обработки входящих сообщений */
   private messages$ = new Subject<MessageEvent>();
 
+  private readonly tokenService = inject(TokenService);
+
   /** Флаг состояния соединения */
   public isConnected = false;
 
@@ -36,7 +39,11 @@ export class WebsocketService {
    */
   public connect(path: string): Observable<void> {
     return new Observable((observer: Observer<void>) => {
-      this.socket = new WebSocket(environment.websocketUrl + path);
+      const tokens = this.tokenService.getTokens();
+
+      const tokenAccess = tokens?.access ? tokens.access : "";
+
+      this.socket = new WebSocket(environment.websocketUrl + path, ["Bearer", tokenAccess]);
 
       this.socket.onopen = () => {
         this.isConnected = true;

projects/social_platform/src/app/office/features/context-menu/context-menu.component.html

@@ -0,0 +1,24 @@
+<!-- @format -->
+
+<ul
+  #contextMenu
+  class="context-menu"
+  [class]="customClass"
+  [style.opacity]="isOpen ? 1 : 0"
+  [style.pointer-events]="isOpen ? 'auto' : 'none'"
+  [style.min-width.px]="minWidth"
+  (clickOutside)="onClickOutside()"
+  tabindex="-1"
+>
+  @for (item of visibleItems; track item.id) {
+  <li
+    class="context-menu__item text-body-10"
+    [class]="item.className"
+    (click)="onItemClick($event, item.id)"
+  >
+    {{ item.label }}
+  </li>
+  @if (item.divider && !$last) {
+  <li class="context-menu__divider"></li>
+  } }
+</ul>

projects/social_platform/src/app/office/features/context-menu/context-menu.component.scss

@@ -0,0 +1,61 @@
+/** @format */
+
+.context-menu {
+  position: fixed;
+  z-index: 9999;
+
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+
+  padding: 8px 0;
+  margin: 0;
+  list-style: none;
+
+  transition: opacity 0.15s ease;
+  outline: none;
+
+  &__item {
+    padding: 10px 16px;
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+
+    &--red {
+      color: #f44336;
+
+      &:hover {
+        background-color: rgba(244, 67, 54, 0.08);
+      }
+
+      &:active {
+        background-color: rgba(244, 67, 54, 0.16);
+      }
+    }
+
+    &--primary {
+      color: #2196f3;
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 8px 0;
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+}