Skip to content

Commit c28b705

Browse files
AwakichAwakich
committed
change detail program page for manager & member & add modal for adding project to program
1 parent 680f682 commit c28b705

27 files changed

Lines changed: 340 additions & 128 deletions

‎projects/social_platform/src/app/office/chat/chat-direct/chat-direct/chat-direct.component.html‎

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

33
<div class="page">
4-
<!-- <app-bar class="bar page__bar" [backHave]="true" [links]="[]"></app-bar> -->
4+
<app-bar class="bar page__bar" [backHave]="true" [links]="[]"></app-bar>
55

66
<div class="page__main">
77
@if (chat) {

‎projects/social_platform/src/app/office/chat/chat.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div class="page">
44
<div class="page__bar">
5-
<!-- <app-bar
5+
<app-bar
66
class="bar"
77
[backHave]="true"
88
[links]="[
@@ -17,7 +17,7 @@
1717
isRouterLinkActiveOptions: false,
1818
},
1919
]"
20-
></app-bar> -->
20+
></app-bar>
2121
</div>
2222

2323
<div class="page__list">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="profile">
55
<section class="profile__bar">
66
@if (loggedUserId$ | async; as loggedUserId) {
7-
<!-- <app-bar
7+
<app-bar
88
class="bar"
99
[backHave]="true"
1010
[links]="[
@@ -20,9 +20,9 @@
2020
isRouterLinkActiveOptions: false,
2121
},
2222
]"
23-
></app-bar> -->
23+
></app-bar>
2424
} @else {
25-
<!-- <app-bar [backHave]="true" [links]="[]"></app-bar> -->
25+
<app-bar [backHave]="true" [links]="[]"></app-bar>
2626
}
2727
</section>
2828

‎projects/social_platform/src/app/office/program/detail/main/main.component.html‎

Lines changed: 102 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,5 @@
11
<!-- @format -->
22

3-
<!-- <app-bar
4-
class="bar"
5-
[links]="[
6-
{
7-
link: '/office/program' + '/' + programId!.toString(),
8-
linkText: 'Страница программы',
9-
isRouterLinkActiveOptions: true,
10-
},
11-
12-
{
13-
link: '/office/program' + '/' + programId!.toString() + '/' + 'projects',
14-
linkText: 'Проекты-участники',
15-
isRouterLinkActiveOptions: false,
16-
},
17-
18-
{
19-
link: '/office/program' + '/' + programId!.toString() + '/' + 'members',
20-
linkText: 'Участники',
21-
isRouterLinkActiveOptions: false,
22-
},
23-
]"
24-
></app-bar> -->
25-
263
@if (program) {
274
<main class="project">
285
<section class="program__main">
@@ -49,28 +26,34 @@
4926

5027
<div class="info__body">
5128
<div class="info__actions">
52-
@if (!program.isUserMember && !registerDateExpired) { @if
29+
@if (!program.isUserMember && !program.isUserManager && !registerDateExpired) { @if
5330
(program.name.includes("Кейс-чемпионат MIR")) {
5431
<a href="https://case-champ.ru/corporate#rec1176757836">
55-
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12"
56-
>Зарегистрироваться</app-button
57-
>
32+
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
33+
зарегистрироваться
34+
</app-button>
5835
</a>
5936
} @else {
6037
<a [routerLink]="['/office/program', program.id, 'register']">
61-
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12"
62-
>Зарегистрироваться</app-button
63-
>
38+
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
39+
зарегистрироваться
40+
</app-button>
6441
</a>
65-
} } @else if (program.isUserMember || program.isUserManager) {
42+
} } @else if (program.isUserMember) {
6643
<app-button
6744
size="medium"
68-
(click)="addProject()"
45+
(click)="toggleSubmitProjectModal()"
6946
customTypographyClass="text-body-12 bar__add-project"
7047
>
7148
<span class="bar__add-project-text">подать проект</span>
7249
<i appIcon icon="plus" appSquare="10"></i>
7350
</app-button>
51+
} @else if (program.isUserManager) {
52+
<a [routerLink]="'/office/program/' + program.id + '/projects-rating'">
53+
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
54+
оценка проектов
55+
</app-button>
56+
</a>
7457
}
7558

7659
<a
@@ -90,50 +73,65 @@
9073
</a>
9174

9275
<!-- TODO: внести ссылку на сайт программы когда это поле будет на бэке -->
76+
@if (!program.isUserManager) {
9377
<a class="info__more" [href]="program.presentationAddress" target="_blank">
9478
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12"
9579
>узнать подробнее</app-button
9680
>
9781
</a>
98-
82+
} @else {
83+
<a [routerLink]="'/office/program/' + program.id + '/projects'">
84+
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
85+
проекты-участники
86+
</app-button>
87+
</a>
88+
} @if (!program.isUserManager) {
9989
<!-- добавить информацию с ссылок или чего-то в дизайне телефон но не у каждой программы есть телефон в контактах -->
10090
<a class="info__contacts">
10191
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12"
10292
>информация с ссылок</app-button
10393
>
10494
</a>
95+
} @else {
96+
<a [routerLink]="'/office/program/' + program.id + '/projects'">
97+
<app-button appearance="outline" size="medium" customTypographyClass="text-body-12">
98+
участники
99+
</app-button>
100+
</a>
101+
}
105102
</div>
106103
</div>
107104
</div>
108105

109106
<!-- advertisementImageAddress поле только для тех кто не участник программы поэтому нельзя сделать toggle и давать появляться или нет полю -->
110-
@if (!program.isUserMember && !showDetails) {
107+
@if ((!program.isUserMember || program.isUserManager) && !showDetails) {
111108
<div class="program__advertisement">
112109
<img [src]="program.advertisementImageAddress" [alt]="program.name" />
113110
</div>
114-
} @else if (program.isUserMember && showDetails) {
111+
} @else if ((program.isUserMember && showDetails) || program.isUserManager) {
115112
<div class="program__details">
116113
<div class="program__left">
117114
<aside class="program__aside">
118-
@if (program.isUserMember && (program.links?.length && program.links)) {
119-
<div class="links program__section">
120-
<h3 class="links__title text-body-12">контакты</h3>
121-
<ul>
122-
@for (link of program.links; track $index) {
123-
<li class="contact-link links__item text-body-10">
124-
@if (link | userLinks; as l) {
125-
<a
126-
class="contact-link__link"
127-
target="_blank"
128-
[href]="link.includes('@') ? 'mailto:' + link : link"
115+
@if (program.isUserMember) {
116+
<div class="program__analytics">
117+
<div class="analytics">
118+
<div class="analytics__soon">
119+
<div class="analytics__closed">
120+
<i appIcon icon="lock" appSquare="10"></i>
121+
<span class="text-body-6 analytics__closed--text">пока закрыто</span>
122+
</div>
123+
<app-button customTypographyClass="text-body-6" color="green" size="extra-small"
124+
>скоро</app-button
129125
>
130-
<i class="contact-link__icon" appIcon [icon]="l.iconName" appSquare="16"></i>
131-
<span>{{ l.tag }}</span>
132-
</a>
133-
}
134-
</li>
135-
}
136-
</ul>
126+
</div>
127+
128+
<div class="analytics__info">
129+
<p class="text-body-12">аналитика</p>
130+
<p class="text-body-6">
131+
уровень включённости студентов, статистика достижения целей в проектах
132+
</p>
133+
</div>
134+
</div>
137135
</div>
138136
}
139137
</aside>
@@ -255,4 +253,55 @@ <h3 class="links__title text-body-12">материалы</h3>
255253
>
256254
</div>
257255
</app-modal>
256+
257+
<app-modal [open]="showSubmitProjectModal()" (openChange)="toggleSubmitProjectModal()">
258+
<div class="cancel">
259+
<div class="cancel__top">
260+
<i
261+
(click)="toggleSubmitProjectModal()"
262+
appIcon
263+
appSquare="24"
264+
icon="cross"
265+
class="cancel__cross"
266+
></i>
267+
<p class="cancel__title text-body-14">выберите проект для подачи</p>
268+
<p class="cancel__text text-body-10" style="width: 41%">
269+
после выбора проекта будет создан дубликат данного проекта для заполнения под конкретный
270+
конкурс
271+
</p>
272+
273+
<div class="project">
274+
<ul class="project__list" [class.project__list--scrollable]="memberProjects.length > 3">
275+
@for (project of memberProjects; track project.id) {
276+
<li class="project__item">
277+
<div class="project__item--info">
278+
<app-avatar [url]="project.imageAddress" [size]="40"></app-avatar>
279+
<p class="text-body-12">
280+
{{ project.name }}
281+
</p>
282+
</div>
283+
<app-input
284+
type="radio"
285+
name="goalLeaderSelection"
286+
[appValue]="project.id.toLocaleString()"
287+
[checked]="selectedProjectId === project.id"
288+
(change)="onProjectRadioChange($event)"
289+
></app-input>
290+
</li>
291+
}
292+
</ul>
293+
</div>
294+
</div>
295+
296+
<app-button
297+
size="medium"
298+
class="cancel__button"
299+
customTypographyClass="text-body-12"
300+
[disabled]="!selectedProjectId"
301+
(click)="addProjectModal()"
302+
>
303+
выбрать проект
304+
</app-button>
305+
</div>
306+
</app-modal>
258307
}

‎projects/social_platform/src/app/office/program/detail/main/main.component.scss‎

Lines changed: 92 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,13 @@
6161
grid-template-columns: 2fr 5fr 3fr;
6262
grid-gap: 20px;
6363
}
64+
65+
&__analytics {
66+
padding: 12px;
67+
border-radius: var(--rounded-lg);
68+
border: 0.5px solid var(--medium-grey-for-outline);
69+
background-color: var(--light-white);
70+
}
6471
}
6572

6673
.bar__add-project {
@@ -78,6 +85,88 @@
7885
display: inline;
7986
}
8087

88+
.project {
89+
margin-top: 40px;
90+
91+
&__list {
92+
display: flex;
93+
flex-direction: column;
94+
gap: 10px;
95+
align-items: center;
96+
97+
max-height: none;
98+
99+
&--scrollable {
100+
max-height: 180px;
101+
overflow-y: auto;
102+
}
103+
}
104+
105+
&__item {
106+
display: flex;
107+
flex-grow: 1;
108+
align-items: center;
109+
justify-content: space-between;
110+
width: 300px;
111+
margin-bottom: 12px;
112+
113+
&--info {
114+
display: flex;
115+
gap: 20px;
116+
align-items: center;
117+
}
118+
}
119+
}
120+
121+
.analytics {
122+
text-align: center;
123+
124+
&__soon {
125+
position: relative;
126+
border-radius: var(--rounded-lg);
127+
border: 0.5px solid var(--medium-grey-for-outline);
128+
margin-bottom: 4px;
129+
}
130+
131+
&__closed {
132+
display: flex;
133+
flex-direction: column;
134+
align-items: center;
135+
justify-content: center;
136+
gap: 2px;
137+
padding: 24px 37px;
138+
139+
&--text {
140+
color: var(--dark-grey);
141+
}
142+
143+
i {
144+
color: var(--dark-grey);
145+
}
146+
}
147+
148+
app-button {
149+
position: absolute;
150+
top: 82%;
151+
left: 41%;
152+
}
153+
154+
&__info {
155+
display: flex;
156+
flex-direction: column;
157+
align-items: center;
158+
justify-content: center;
159+
gap: 2px;
160+
margin-top: 8px;
161+
162+
p {
163+
width: 60%;
164+
text-align: center;
165+
color: var(--accent);
166+
}
167+
}
168+
}
169+
81170
.about {
82171
padding: 24px;
83172
background-color: var(--light-white);
@@ -284,21 +373,13 @@
284373
flex-direction: column;
285374
align-items: center;
286375
justify-content: center;
287-
width: 80%;
288376
max-height: calc(100vh - 40px);
289-
padding: 40px 0 80px;
290-
overflow-y: auto;
291-
292-
@include responsive.apply-desktop {
293-
width: 50%;
294-
}
377+
padding: 24px 54px;
295378

296379
&__cross {
297380
position: absolute;
298381
top: 0;
299382
right: 0;
300-
width: 32px;
301-
height: 32px;
302383
cursor: pointer;
303384

304385
@include responsive.apply-desktop {
@@ -311,6 +392,8 @@
311392
display: flex;
312393
flex-direction: column;
313394
margin-bottom: 10px;
395+
gap: 10px;
396+
align-items: center;
314397
}
315398

316399
&__title {

0 commit comments

Comments
 (0)