Skip to content

Commit 21dd8eb

Browse files
AwakichAwakich
committed
add creating/updating tagsLib, adding/editing skills, tags, goals, mapper for tag colors
1 parent 0cc1b76 commit 21dd8eb

22 files changed

Lines changed: 712 additions & 218 deletions

projects/core/src/consts/lists/ldirection-project-list.const.ts renamed to projects/core/src/consts/lists/direction-project-list.const.ts

File renamed without changes.

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,39 @@
99

1010
export const priorityInfoList = [
1111
{
12-
id: 0,
12+
id: 1,
1313
label: "бэклог",
1414
color: "#322299",
15-
priorityType: 0,
15+
priorityType: 1,
1616
},
1717
{
18-
id: 1,
18+
id: 2,
1919
label: "в ближайшие часы",
2020
color: "#A63838",
21-
priorityType: 1,
21+
priorityType: 2,
2222
},
2323
{
24-
id: 2,
24+
id: 3,
2525
label: "высокий",
2626
color: "#D48A9E",
27-
priorityType: 2,
27+
priorityType: 3,
2828
},
2929
{
30-
id: 3,
30+
id: 4,
3131
label: "средний",
3232
color: "#E5B25D",
33-
priorityType: 3,
33+
priorityType: 4,
3434
},
3535
{
36-
id: 4,
36+
id: 5,
3737
label: "низкий",
3838
color: "#297373",
39-
priorityType: 4,
39+
priorityType: 5,
4040
},
4141
{
42-
id: 5,
42+
id: 6,
4343
label: "улучшение",
4444
color: "#88C9A1",
45-
priorityType: 5,
45+
priorityType: 6,
4646
},
4747
];

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,42 @@
33
export const tagColorsList = [
44
{
55
id: 1,
6+
name: "accent",
67
color: "#8A63E6",
78
},
89
{
910
id: 2,
11+
name: "accent-medium",
1012
color: "#9764BA",
1113
},
1214
{
1315
id: 3,
16+
name: "blue-dark",
1417
color: "#2F36AA",
1518
},
1619
{
1720
id: 4,
21+
name: "cyan",
1822
color: "#4CD9F1",
1923
},
2024
{
2125
id: 5,
26+
name: "complete",
2227
color: "#88C9A1",
2328
},
2429
{
2530
id: 6,
31+
name: "red",
2632
color: "#D48A9E",
2733
},
2834
{
2935
id: 7,
36+
name: "gold",
3037
color: "#E5B25D",
3138
},
3239
{
3340
id: 8,
41+
name: "green-dark",
3442
color: "#297373",
3543
},
3644
];

‎projects/core/src/consts/other/kanban-column-info.const.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/** @format */
2+
3+
export const kanbanColumnInfo = [
4+
{
5+
id: 1,
6+
label: "редактировать",
7+
value: "edit",
8+
},
9+
{
10+
id: 2,
11+
label: "удалить",
12+
value: "delete",
13+
},
14+
];

‎projects/social_platform/src/app/office/projects/detail/kanban-board/kanban-board.component.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,21 @@
1919
}
2020
<p class="text-body-12">{{ boardColumn.name }}</p>
2121
</div>
22-
<i appIcon icon="dots" appSquare="8"></i>
22+
23+
<div class="">
24+
<i appIcon icon="dots" appSquare="8" (click)="toggleDropDown(boardColumn.id)"></i>
25+
26+
@if (isColumnInfoOpen && (selectedColumnId === boardColumn.order)) {
27+
<app-dropdown
28+
[isOpen]="isColumnInfoOpen"
29+
type="text"
30+
colorText="grey"
31+
(select)="onTypeSelect($event, false, boardColumn.id)"
32+
(outside)="isColumnInfoOpen = false"
33+
[options]="columnInfoOptions"
34+
></app-dropdown>
35+
}
36+
</div>
2337
</div>
2438

2539
<div class="kanban__tasks">

‎projects/social_platform/src/app/office/projects/detail/kanban-board/kanban-board.component.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { IconComponent } from "@ui/components";
1111
import { KanbanTaskComponent } from "./shared/task/kanban-task.component";
1212
import { ClickOutsideModule } from "ng-click-outside";
1313
import { TaskDetailComponent } from "./shared/task/detail/task-detail.component";
14+
import { DropdownComponent } from "@ui/components/dropdown/dropdown.component";
15+
import { kanbanColumnInfo } from "projects/core/src/consts/other/kanban-column-info.const";
1416

1517
@Component({
1618
selector: "app-kanban-board",
@@ -23,6 +25,7 @@ import { TaskDetailComponent } from "./shared/task/detail/task-detail.component"
2325
KanbanTaskComponent,
2426
ClickOutsideModule,
2527
TaskDetailComponent,
28+
DropdownComponent,
2629
],
2730
standalone: true,
2831
})
@@ -36,6 +39,13 @@ export class KanbanBoardComponent implements OnInit, OnDestroy {
3639
boardColumns = signal<any[]>([]);
3740
isTaskDetailOpen = signal<boolean>(false);
3841

42+
isColumnInfoOpen = false;
43+
selectedColumnId = 0;
44+
45+
get columnInfoOptions() {
46+
return kanbanColumnInfo;
47+
}
48+
3949
ngOnInit(): void {
4050
const detailInfoUrl$ = this.route.queryParams.subscribe({
4151
next: params => {
@@ -61,6 +71,7 @@ export class KanbanBoardComponent implements OnInit, OnDestroy {
6171
{
6272
id: 0,
6373
name: "бэклог",
74+
order: 0,
6475
locked: true,
6576
tasks: [
6677
{
@@ -76,6 +87,7 @@ export class KanbanBoardComponent implements OnInit, OnDestroy {
7687
{
7788
id: 1,
7889
locked: false,
90+
order: 1,
7991
name: "в работе",
8092
tasks: [
8193
{ id: 3, title: "настроить API" },
@@ -85,6 +97,7 @@ export class KanbanBoardComponent implements OnInit, OnDestroy {
8597
{
8698
id: 2,
8799
locked: false,
100+
order: 2,
88101
name: "Готово",
89102
tasks: [
90103
{ id: 5, title: "верстка страницы входа" },
@@ -100,6 +113,34 @@ export class KanbanBoardComponent implements OnInit, OnDestroy {
100113
this.subscriptions.forEach($ => $.unsubscribe());
101114
}
102115

116+
toggleDropDown(columnId: number): void {
117+
if (this.selectedColumnId === columnId) {
118+
this.isColumnInfoOpen = !this.isColumnInfoOpen;
119+
} else {
120+
this.selectedColumnId = columnId;
121+
this.isColumnInfoOpen = true;
122+
}
123+
}
124+
125+
onTypeSelect(option: any, state: boolean, columnId?: number): void {
126+
if (!option) {
127+
this.isColumnInfoOpen = state;
128+
return;
129+
}
130+
131+
switch (option) {
132+
case 1:
133+
console.log("EDIT in column:", columnId);
134+
break;
135+
136+
case 2:
137+
console.log("DELETE in column:", columnId);
138+
break;
139+
}
140+
141+
this.isColumnInfoOpen = state;
142+
}
143+
103144
openDetailTask(taskId: number): void {
104145
this.router.navigate([], {
105146
queryParams: {

‎projects/social_platform/src/app/office/projects/detail/kanban-board/models/column.model.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ import { TaskPreview } from "./task.model";
55
export interface Column {
66
id: number;
77
tasks: TaskPreview[];
8+
order: number;
9+
// TODO: добавить даты создания и удаления
810
}

‎projects/social_platform/src/app/office/projects/detail/kanban-board/shared/create-tag-form/create-tag-form.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
@for (colorItem of tagColors; track $index) {
2222
<div
2323
class="create-tag__pick-color"
24-
(click)="selectTagColor(colorItem.color)"
24+
(click)="selectTagColor(colorItem.name)"
2525
[style.backgroundColor]="colorItem.color"
2626
></div>
2727
}

‎projects/social_platform/src/app/office/projects/detail/kanban-board/shared/create-tag-form/create-tag-form.component.ts‎

Lines changed: 72 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,30 @@
11
/** @format */
22

33
import { CommonModule } from "@angular/common";
4-
import { Component, EventEmitter, inject, Output } from "@angular/core";
4+
import {
5+
Component,
6+
EventEmitter,
7+
inject,
8+
Input,
9+
OnChanges,
10+
OnInit,
11+
Output,
12+
SimpleChanges,
13+
} from "@angular/core";
514
import { tagColorsList } from "projects/core/src/consts/lists/tag-colots.list.const";
6-
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
15+
import {
16+
FormBuilder,
17+
FormGroup,
18+
FormsModule,
19+
ReactiveFormsModule,
20+
Validators,
21+
} from "@angular/forms";
22+
23+
export interface TagData {
24+
id?: number;
25+
name: string;
26+
color: string;
27+
}
728

829
@Component({
930
selector: "app-create-tag-form",
@@ -12,15 +33,17 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from "@angul
1233
imports: [CommonModule, FormsModule, ReactiveFormsModule],
1334
standalone: true,
1435
})
15-
export class CreateTagFormComponent {
16-
@Output() createTag = new EventEmitter<{ name: string; color: string }>();
36+
export class CreateTagFormComponent implements OnInit, OnChanges {
37+
@Input() editingTag: TagData | null = null;
38+
@Output() createTag = new EventEmitter<TagData>();
39+
@Output() updateTag = new EventEmitter<TagData>();
1740

1841
private readonly fb = inject(FormBuilder);
1942

2043
constructor() {
2144
this.tagForm = this.fb.group({
22-
tagName: [""],
23-
tagColor: [tagColorsList[0].color],
45+
tagName: ["", [Validators.required, Validators.maxLength(30)]],
46+
tagColor: [tagColorsList[0].name, [Validators.required]],
2447
});
2548
}
2649

@@ -32,11 +55,27 @@ export class CreateTagFormComponent {
3255
}
3356

3457
get selectedColor(): string {
35-
return this.tagForm.get("tagColor")?.value || tagColorsList[0].color;
58+
const colorName = this.tagForm.get("tagColor")?.value;
59+
const found = tagColorsList.find(c => c.name === colorName);
60+
return found ? found.color : tagColorsList[0].color;
61+
}
62+
63+
get isEditMode(): boolean {
64+
return !!this.editingTag;
65+
}
66+
67+
ngOnChanges(changes: SimpleChanges): void {
68+
if (changes["editingTag"]) {
69+
this.initFormFromEditingTag();
70+
}
71+
}
72+
73+
ngOnInit(): void {
74+
this.initFormFromEditingTag();
3675
}
3776

38-
selectTagColor(color: string) {
39-
this.tagForm.patchValue({ tagColor: color });
77+
selectTagColor(colorName: string) {
78+
this.tagForm.patchValue({ tagColor: colorName });
4079
this.openPickColors = false;
4180
}
4281

@@ -45,17 +84,36 @@ export class CreateTagFormComponent {
4584
event.preventDefault();
4685

4786
const { tagName, tagColor } = this.tagForm.value;
87+
const tagData: TagData = {
88+
name: tagName,
89+
color: tagColor,
90+
};
4891

4992
if (!tagName?.trim() || !tagColor) return;
5093

51-
this.createTag.emit({
52-
name: tagName,
53-
color: tagColor,
54-
});
94+
if (this.isEditMode && this.editingTag?.id) {
95+
this.updateTag.emit({ ...tagData, id: this.editingTag.id });
96+
} else {
97+
this.createTag.emit(tagData);
98+
}
99+
this.resetForm();
100+
}
55101

102+
private resetForm(): void {
56103
this.tagForm.reset({
57104
tagName: "",
58-
tagColor: tagColorsList[0].color,
105+
tagColor: tagColorsList[0].name,
59106
});
60107
}
108+
109+
private initFormFromEditingTag() {
110+
if (this.editingTag) {
111+
this.tagForm.patchValue({
112+
tagName: this.editingTag.name,
113+
tagColor: this.editingTag.color,
114+
});
115+
} else {
116+
this.resetForm();
117+
}
118+
}
61119
}

‎projects/social_platform/src/app/office/projects/detail/kanban-board/shared/sidebar/kanban-board-sidebar.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @format */
22

33
import { CommonModule } from "@angular/common";
4-
import { ChangeDetectorRef, Component, inject, Input, signal } from "@angular/core";
4+
import { Component, Input, signal } from "@angular/core";
55
import { Project } from "@office/models/project.model";
66
import { AvatarComponent } from "@ui/components/avatar/avatar.component";
77
import { KanbanBoardActionsComponent } from "../actions/kanban-board-actions.component";

0 commit comments

Comments
 (0)