Skip to content

Commit ce82961

Browse files
AwakichAwakich
committed
filled & empty design of task-detail, models for kanban, badge component
1 parent c33a1f6 commit ce82961

21 files changed

Lines changed: 549 additions & 75 deletions

File tree

‎projects/social_platform/src/app/office/models/tag.model.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/** @format */
2+
3+
export interface Tag {
4+
id: number;
5+
name: string;
6+
color: string;
7+
}

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

Lines changed: 128 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<i class="kanban__column--add-task" appIcon icon="plus" appSquare="10"></i>
2727
</div>
2828
} @if (isTaskDetailOpen()) {
29-
<div class="kanban__detail">
29+
<div class="kanban__detail" [formGroup]="taskDetailForm">
3030
<div class="kanban__detail-top">
3131
<app-button size="medium" customTypographyClass="text-body-12"
3232
>прикрепить результат</app-button
@@ -51,132 +51,213 @@
5151
<p class="text-body-6">12.10.2025 21:00</p>
5252
</div>
5353

54+
<div class="kanban__divider">
55+
<img alt="divider image" src="assets/images/projects/shared/divider.png" />
56+
</div>
57+
5458
<div class="kanban__detail-info">
59+
@if (taskDetailForm.get("responsible"); as responsible) {
5560
<div class="kanban__detail-info-wrapper">
5661
<div class="kanban__detail-info-name">
5762
<i appIcon icon="person" appSquare="10"></i>
5863
<h6 class="text-body-10">ответственный</h6>
5964
</div>
6065

6166
<div class="kanban__detail-info-name">
62-
<app-avatar [size]="20" [url]=""></app-avatar>
63-
<p class="text-body-10">Екатерина Ш</p>
67+
@if (responsible.value) {
68+
<app-avatar [size]="20" [url]="responsible.value.avatar"></app-avatar>
69+
<p class="text-body-10">{{ responsible.value.name }}</p>
70+
} @else {
71+
<div class="kanban__detail-add-responsible">
72+
<i appIcon icon="plus" appSquare="5"></i>
73+
</div>
74+
}
6475
</div>
6576
</div>
66-
77+
} @if (taskDetailForm.get("performers"); as performers) {
6778
<div class="kanban__detail-info-wrapper">
6879
<div class="kanban__detail-info-name">
6980
<i appIcon icon="people-bold" appSquare="10"></i>
7081
<h6 class="text-body-10">исполнители</h6>
7182
</div>
7283

7384
<div class="kanban__detail-info-name">
74-
<app-avatar [size]="20" [url]=""></app-avatar>
85+
@if (performers.value.length > 0) {
86+
<div class="kanban__detail-performers">
87+
@for (performer of performers.value; track $index) {
88+
<app-avatar [size]="20" [url]="performer.avatar"></app-avatar>
89+
}
90+
</div>
91+
} @else {
92+
<div class="kanban__detail-add-responsible">
93+
<i appIcon icon="plus" appSquare="5"></i>
94+
</div>
95+
}
7596
</div>
7697
</div>
77-
98+
} @if (taskDetailForm.get("startDate"); as startDate) {
7899
<div class="kanban__detail-info-wrapper">
79100
<div class="kanban__detail-info-name--date">
80101
<i appIcon icon="calendar" appSquare="10"></i>
81102
<p class="text-body-10">начало</p>
82103
</div>
83104

84105
<div class="kanban__detail-info-name">
85-
<p class="text-body-10">20.10.25</p>
106+
<p class="text-body-10">{{ startDate.value || todayDate | date: "dd.MM.yy" }}</p>
86107

87-
<div class="badge">
88-
<p class="text-body-6">началась</p>
89-
</div>
108+
<app-badge color="red" type="start">закончена</app-badge>
90109
</div>
91110
</div>
92-
111+
} @if (taskDetailForm.get("deadline"); as deadline) {
93112
<div class="kanban__detail-info-wrapper">
94113
<div class="kanban__detail-info-name--date">
95114
<i appIcon icon="calendar" appSquare="10"></i>
96115
<p class="text-body-10">дедлайн</p>
97116
</div>
98117

99118
<div class="kanban__detail-info-name">
100-
<p class="text-body-10">25.10.25</p>
119+
<p class="text-body-10">{{ deadline.value || tommorowDate | date: "dd.MM.yy" }}</p>
101120

102-
<div class="badge">
103-
<p class="text-body-6">10 дней</p>
104-
</div>
121+
<app-badge color="green" type="deadline">10 дней</app-badge>
105122
</div>
106123
</div>
124+
}
107125
</div>
108126

109127
<div class="kanban__detail-info">
128+
@if (taskDetailForm.get("tags"); as tags) {
110129
<div class="kanban__detail-info-wrapper">
111130
<div class="kanban__detail-info-name">
112-
<i appIcon icon="hastag" appSquare="10"></i>
131+
<i appIcon icon="hashtag" appSquare="10"></i>
113132
<p class="text-body-10">тег</p>
114133
</div>
115134

116-
<app-tag color="soft">#аналитика</app-tag>
135+
@if (tags.value.length > 0) {
136+
<div class="kanban__detail-info-list">
137+
@for (tag of tags.value; track $index) {
138+
<app-tag color="soft">{{ "#" + tag.name }}</app-tag>
139+
}
140+
</div>
141+
} @else {
142+
<div class="kanban__detail-add-object">
143+
<i appIcon icon="plus" appSquare="5"></i>
144+
</div>
145+
}
117146
</div>
118-
147+
} @if (taskDetailForm.get("goal"); as goal) {
119148
<div class="kanban__detail-info-wrapper">
120149
<div class="kanban__detail-info-name">
121150
<i appIcon icon="goal" appSquare="10"></i>
122151
<p class="text-body-10">цель</p>
123152
</div>
124153

125-
<app-tag color="soft">выход на рынок для...</app-tag>
154+
@if (goal.value) {
155+
<app-tag color="soft">{{
156+
goal.value.name.length > 20 ? goal.value.name.slice(0, 15) + "..." : goal.value.name
157+
}}</app-tag>
158+
} @else {
159+
<div class="kanban__detail-add-object">
160+
<i appIcon icon="plus" appSquare="5"></i>
161+
</div>
162+
}
126163
</div>
127-
164+
} @if (taskDetailForm.get("skills"); as skills) {
128165
<div class="kanban__detail-info-wrapper" style="flex-grow: 1">
129166
<div class="kanban__detail-info-name">
130167
<i appIcon icon="squiz" appSquare="10"></i>
131168
<p class="text-body-10">навыки</p>
132169
</div>
133170

134-
<app-tag color="complete">word</app-tag>
171+
@if (skills.value.length > 0) {
172+
<div class="kanban__detail-info-list">
173+
@for (skill of skills.value; track $index) {
174+
<app-tag color="complete">{{ skill.name }}</app-tag>
175+
}
176+
</div>
177+
} @else {
178+
<div class="kanban__detail-add-object">
179+
<i appIcon icon="plus" appSquare="5"></i>
180+
</div>
181+
}
135182
</div>
183+
}
184+
</div>
185+
186+
<div class="kanban__divider">
187+
<img alt="divider image" src="assets/images/projects/shared/divider.png" />
136188
</div>
137189

190+
@if (taskDetailForm.get("description"); as description) {
138191
<div class="kanban__detail-description">
139-
<!-- @if (taskDetail.description) { -->
140-
<div class="text-body-10 about__text">
141-
<p
142-
#descEl
143-
[innerHTML]="
144-
'Разобраться с настройками nginx.conf. Выяснилось, что мы просто бесполезно гоняем трафик из одного сервиса в другой без какой-либо реальной выгоды. Надо настроить базовый nginx.conf на сервере, который бы отвечал за сервис без его дублирующей реализации в контейнере Логика частична описана в задаче Пользователь должен сперва зарегистрироваться в программе и только потом сможет добавлять проект...'
145-
| parseLinks
146-
| parseBreaks
147-
"
148-
></p>
192+
<div (click)="onChangeText($event)" class="text-body-10 about__text">
193+
@if (isChangeDescriptionText() && description.value) {
194+
<p #descEl [innerHTML]="description.value | parseLinks | parseBreaks"></p>
149195
@if (descriptionExpandable) {
150196
<div
151197
class="read-more text-body-10"
152198
(click)="onExpandDescription(descEl, 'expanded', readFullDescription)"
153199
>
154200
{{ readFullDescription ? "cкрыть" : "подробнее" }}
155201
</div>
202+
} } @else {
203+
<app-textarea
204+
(keydown.enter)="isChangeDescriptionText.set(true)"
205+
(clickOutside)="isChangeDescriptionText.set(true)"
206+
(click)="$event.stopPropagation()"
207+
size="big"
208+
formControlName="description"
209+
placeholder="добавить описание"
210+
></app-textarea>
156211
}
157212
</div>
158-
<!-- } -->
159213
</div>
214+
}
160215

161216
<div class="kanban__detail-files">
162-
<app-file-item [name]="''" [link]="''" [type]="''" [size]="12"></app-file-item>
217+
@if (taskDetailForm.get("files"); as files) { @if (files.value.length >= 0 &&
218+
files.value.length <= 3) { @for (file of files.value; track $index) {
219+
<app-file-item
220+
class="kanban__detail-file"
221+
[name]="''"
222+
[link]="''"
223+
[type]="''"
224+
[size]="12"
225+
></app-file-item>
226+
} @if (!(files.value.length === 3)) {
227+
<div class="kanban__detail-file--empty">
228+
<div class="kanban__detail-add-responsible">
229+
<i appIcon icon="plus" appSquare="5"></i>
230+
</div>
231+
232+
<p class="text-body-10">файл</p>
233+
</div>
234+
} } }
163235
</div>
164236

165237
<div class="kanban__detail-comments">
238+
<!-- [formGroup]="messageForm" (ngSubmit)="onSubmit()" -->
166239
<form class="form">
167-
<!-- [formGroup]="messageForm" (ngSubmit)="onSubmit()" -->
168-
<app-input
169-
size="big"
170-
formControlName="text"
171-
[hasBorder]="false"
172-
class="form__input text-body-12"
173-
autosize
174-
placeholder="сегодня был хороший день"
175-
></app-input>
176-
<!-- (paste)="onPaste($event)" -->
177-
<!-- (keydown.meta.enter)="onSubmit()" -->
178-
<i appIcon icon="send" appSquare="12" class="form__send"></i>
179-
240+
<div class="form__row">
241+
<app-input
242+
size="big"
243+
formControlName="text"
244+
[hasBorder]="false"
245+
class="form__input text-body-12"
246+
autosize
247+
placeholder="добавить комментарий"
248+
></app-input>
249+
<!-- (paste)="onPaste($event)"
250+
(keydown.meta.enter)="onSubmit()" -->
251+
<div class="form__actions">
252+
<label class="form__attach">
253+
<i appIcon icon="attach" appSquare="20"></i>
254+
<!-- (change)="onInputFiles($event)" -->
255+
<input type="file" accept="*/*" multiple />
256+
</label>
257+
<i appIcon icon="send" appSquare="7" class="form__send"></i>
258+
</div>
259+
<!-- (click)="onSubmit()" -->
260+
</div>
180261
<div class="form__files">
181262
@for (f of filesList; track f.id) {
182263
<app-file-upload-item
@@ -186,15 +267,8 @@ <h6 class="text-body-10">исполнители</h6>
186267
[loading]="f.loading"
187268
[error]="f.error"
188269
></app-file-upload-item>
189-
<!-- (delete)="onDeleteFile(f.id)" -->
190270
}
191-
</div>
192-
<div class="footer">
193-
<label class="footer__attach">
194-
<i appIcon icon="attach" appSquare="12"></i>
195-
<input type="file" accept="*/*" multiple />
196-
<!-- (change)="onInputFiles($event)" -->
197-
</label>
271+
<!-- (delete)="onDeleteFile(f.id)" -->
198272
</div>
199273
</form>
200274
</div>

0 commit comments

Comments
 (0)