Skip to content

Commit 708ffeb

Browse files
anastasiakuznietsovaOmntnsVwitolDark
authored
Feature/admin panel settings tab (#3902)
* feat: add admin settings and homepage edit components * feat: implement OnInit in ubs-admin-edit-homepage component * feat: enable dynamic multilingual content management for homepage settings * feat: extract price section into a reusable component for ubs main page * refactor: replace flex-direction and flex-wrap with flex-flow in ubs-admin-edit-homepage styles * added telegram responses edit * lint fix * fix 2 lint * tests fix * tests fix * req changes * main page setting clearance, bug fixing * icon fix * improved styles for edit homepage * returned source map * req changes, refactor * tests fix, reliability * req changes * styles fix * styles fix * css fix * button styles for setting page --------- Co-authored-by: viktor <yu.viktor31@gmail.com> Co-authored-by: witolDark <witalikspelina@gmail.com>
1 parent ad75ec5 commit 708ffeb

35 files changed

+1985
-383
lines changed

‎src/app/ubs/ubs-admin/components/ubs-admin-edit-user-agreement/ubs-admin-edit-user-agreement.component.html‎

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,56 @@
11
<div class="page" *ngIf="!isLoading; else spinner">
2-
<div class="page-top-bar">
3-
<h5 class="page-title">{{ 'ubs-user-agreement.edit' | translate }}</h5>
2+
<div class="page-top-bar d-flex justify-content-center expand-btn">
3+
<button class="d-flex align-items-center border-0 bg-transparent expand-btn" (click)="collapseView()">
4+
<span class="page-title">
5+
{{ 'ubs-user-agreement.edit' | translate }}
6+
</span>
7+
<img
8+
[ngClass]="!isCollapsed ? { transform: 'rotate(180deg)' } : {}"
9+
src="../../../../../../assets/icons/arrow-down-green.svg"
10+
alt="collapse"
11+
class="collapse-icon"
12+
/>
13+
</button>
414
</div>
515

6-
<div class="page-controls">
7-
<div class="page-version">
8-
<div class="version-field">
9-
<label for="version">{{ 'ubs-user-agreement.select-version' | translate }}:</label>
10-
<select class="version-select" name="version" id="version" (change)="onVersionSelect($event)" [(ngModel)]="selectedVersion">
11-
<option *ngFor="let version of versions; let i = index" [value]="version">
12-
{{ i === 0 ? version + ' (latest)' : version }}
13-
</option>
14-
</select>
15-
</div>
16+
<div class="collapsed-content" [class.hidden]="isCollapsed">
17+
<div class="page-controls">
18+
<div class="page-version">
19+
<div class="version-field">
20+
<label for="version">{{ 'ubs-user-agreement.select-version' | translate }}:</label>
21+
<select class="version-select" name="version" id="version" (change)="onVersionSelect($event)" [(ngModel)]="selectedVersion">
22+
<option *ngFor="let version of versions; let i = index" [value]="version">
23+
{{ i === 0 ? version + ' (latest)' : version }}
24+
</option>
25+
</select>
26+
</div>
1627

17-
<div class="version-current">
18-
<span class="version-author">{{ 'ubs-user-agreement.author' | translate }}: {{ author }}</span>
19-
<span class="version-date">{{ 'ubs-user-agreement.date' | translate }}: {{ date | date: 'dd/MM/yyyy, HH:mm' }}</span>
28+
<div class="version-current">
29+
<span class="version-author">{{ 'ubs-user-agreement.author' | translate }}: {{ author }}</span>
30+
<span class="version-date">{{ 'ubs-user-agreement.date' | translate }}: {{ date | date: 'dd/MM/yyyy, HH:mm' }}</span>
31+
</div>
2032
</div>
21-
</div>
2233

23-
<button class="btn page-btn" (click)="onSave()" [disabled]="userAgreementForm.pristine || userAgreementForm.invalid">
24-
{{ 'ubs-user-agreement.btn.save' | translate }}
25-
</button>
26-
</div>
34+
<button class="btn page-btn" (click)="onSave()" [disabled]="userAgreementForm.pristine || userAgreementForm.invalid">
35+
{{ 'ubs-user-agreement.btn.save' | translate }}
36+
</button>
37+
</div>
2738

28-
<div class="page-content">
29-
<form [formGroup]="userAgreementForm">
30-
<fieldset class="agreement" *ngFor="let lang of languages">
31-
<span class="agreement-lang">{{ lang }}:</span>
32-
<quill-editor minlength="20" [modules]="quillModules" [formControlName]="'userAgreement' + lang"></quill-editor>
33-
</fieldset>
34-
</form>
39+
<div class="page-content">
40+
<form [formGroup]="userAgreementForm">
41+
<fieldset class="agreement" *ngFor="let lang of languages">
42+
<span class="agreement-lang">{{ lang }}:</span>
43+
<quill-editor minlength="20" [modules]="quillModules" [formControlName]="'userAgreement' + lang"></quill-editor>
44+
</fieldset>
45+
</form>
46+
</div>
47+
<img
48+
*ngIf="!isCollapsed"
49+
src="assets/icons/arrow-down-green.svg"
50+
alt="collapse"
51+
(click)="collapseView()"
52+
class="collapse-icon transform"
53+
/>
3554
</div>
3655
</div>
3756

‎src/app/ubs/ubs-admin/components/ubs-admin-edit-user-agreement/ubs-admin-edit-user-agreement.component.scss‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
@import 'src/typography/_resp.scss';
22

3+
.expand-btn {
4+
height: 40px;
5+
gap: 10px;
6+
}
7+
38
.page {
49
&-title {
510
font-family: var(--primary-font);
611
font-size: 24px;
712
line-height: 32px;
8-
margin-bottom: 32px;
913
}
1014

1115
&-btn {
@@ -49,6 +53,37 @@
4953
}
5054
}
5155

56+
.page-top-bar {
57+
display: flex;
58+
align-items: center;
59+
}
60+
61+
.collapse-icon {
62+
width: 18px;
63+
height: 18px;
64+
cursor: pointer;
65+
}
66+
67+
.transform {
68+
display: flex;
69+
transform: rotate(180deg);
70+
justify-self: center;
71+
}
72+
73+
.collapsed-content {
74+
margin-top: 7px;
75+
overflow: hidden;
76+
opacity: 1;
77+
transition:
78+
max-height 0.3s ease,
79+
opacity 0.3s ease;
80+
81+
&.hidden {
82+
max-height: 0;
83+
opacity: 0;
84+
}
85+
}
86+
5287
.agreement {
5388
display: flex;
5489
flex-direction: column;
@@ -66,3 +101,8 @@
66101
}
67102
}
68103
}
104+
105+
.centered-title {
106+
width: 100%;
107+
text-align: center;
108+
}

‎src/app/ubs/ubs-admin/components/ubs-admin-edit-user-agreement/ubs-admin-edit-user-agreement.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export class UbsAdminEditUserAgreementComponent implements OnInit {
3232

3333
private adminUserAgreementService: AdminUserAgreementService = inject(AdminUserAgreementService);
3434

35+
isCollapsed = false;
36+
3537
userAgreementForm: FormGroup = new FormGroup({});
3638
quillModules = quillConfigAdmin;
3739
languages = ['Uk', 'En'];
@@ -159,4 +161,8 @@ export class UbsAdminEditUserAgreementComponent implements OnInit {
159161
this.loadVersions();
160162
});
161163
}
164+
165+
collapseView() {
166+
this.isCollapsed = !this.isCollapsed;
167+
}
162168
}

‎src/app/ubs/ubs-admin/components/ubs-admin-edit/ubs-admin-edit-homepage/ubs-admin-edit-homepage.component.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div *ngIf="!isLoading; else spinner">
2+
<div class="page-top-bar d-flex justify-content-center expand-btn">
3+
<button class="d-flex w-100 justify-content-center align-items-center border-0 bg-transparent expand-btn" (click)="collapseView()">
4+
<span class="settings__title">
5+
{{ 'settings.edit' | translate }}
6+
</span>
7+
<img
8+
[ngClass]="isCollapsed ? { transform: 'rotate(180deg)' } : {}"
9+
src="../../../../../../assets/icons/arrow-down-green.svg"
10+
alt="collapse"
11+
class="collapse-icon"
12+
/>
13+
</button>
14+
</div>
15+
16+
<div class="collapsed-content" [class.hidden]="!isCollapsed">
17+
<form class="settings__form" [formGroup]="homepageContentForm">
18+
<div class="settings__form-lang" *ngFor="let lang of languages">
19+
<h4 class="settings__form-lang-title">{{ 'settings.lang.' + lang.toLowerCase() | translate }}</h4>
20+
21+
<div class="settings__form-section" *ngFor="let section of homepageContent[lang.toLowerCase()] | keyvalue">
22+
<h4 class="settings__form-section-title">{{ 'settings.section.' + section.key + '.title' | translate }}</h4>
23+
24+
<fieldset class="settings__form-fieldset" *ngFor="let field of section.value | keyvalue">
25+
<span class="settings__form-fieldset-name">{{ 'settings.section.' + section.key + '.' + field.key | translate }}</span>
26+
<quill-editor class="settings__form-fieldset-input" type="text" [formControlName]="lang + section.key + field.key" />
27+
</fieldset>
28+
</div>
29+
</div>
30+
</form>
31+
<button class="btn" (click)="onSave()" [disabled]="homepageContentForm.pristine || homepageContentForm.invalid">
32+
{{ 'ubs-user-agreement.btn.save' | translate }}
33+
</button>
34+
</div>
35+
</div>
36+
<ng-template class="spinner" #spinner>
37+
<app-spinner></app-spinner>
38+
</ng-template>

‎src/app/ubs/ubs-admin/components/ubs-admin-edit/ubs-admin-edit-homepage/ubs-admin-edit-homepage.component.scss‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
.expand-btn {
2+
height: 40px;
3+
gap: 10px;
4+
}
5+
6+
.settings {
7+
&__title {
8+
font-family: var(--primary-font);
9+
font-size: 24px;
10+
line-height: 32px;
11+
}
12+
13+
&__form {
14+
display: flex;
15+
flex-flow: row wrap;
16+
gap: 0.5em;
17+
18+
&-lang {
19+
flex: 1 1 0;
20+
min-width: 200px;
21+
22+
&-title {
23+
background-color: var(--ubs-primary-grey);
24+
color: var(--ubs-primary-white);
25+
padding: 0.1em 0;
26+
font-weight: 400;
27+
text-align: center;
28+
}
29+
}
30+
31+
&-section {
32+
margin: 1em 0;
33+
border-bottom: 1px solid var(--ubs-primary-grey);
34+
padding-bottom: 2em;
35+
36+
&-title {
37+
text-align: center;
38+
font-size: 1.5em;
39+
font-weight: bold;
40+
}
41+
}
42+
43+
&-fieldset {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 10px;
47+
48+
&-input {
49+
::ng-deep .ql-editor {
50+
height: auto;
51+
min-height: 70px;
52+
max-height: 180px;
53+
margin-bottom: 5px;
54+
}
55+
}
56+
57+
&-name {
58+
font-size: 1.2em;
59+
font-weight: bold;
60+
}
61+
}
62+
}
63+
}
64+
65+
.btn {
66+
background-color: var(--ubs-button-light-green);
67+
height: 45px;
68+
display: block;
69+
margin-left: auto;
70+
margin-right: 5px;
71+
72+
&:disabled {
73+
background-color: var(--quintynary-light-grey);
74+
cursor: not-allowed;
75+
}
76+
}
77+
78+
.page-top-bar {
79+
display: flex;
80+
align-items: center;
81+
}
82+
83+
.collapse-icon {
84+
width: 18px;
85+
height: 18px;
86+
cursor: pointer;
87+
}
88+
89+
.transform {
90+
display: flex;
91+
transform: rotate(180deg);
92+
justify-self: center;
93+
margin: 18px 0;
94+
}
95+
96+
.collapsed-content {
97+
margin-top: 7px;
98+
overflow: hidden;
99+
opacity: 1;
100+
transition:
101+
max-height 0.3s ease,
102+
opacity 0.1s ease;
103+
104+
&.hidden {
105+
max-height: 0;
106+
opacity: 0;
107+
}
108+
}
109+
110+
.centered-title {
111+
width: 100%;
112+
text-align: center;
113+
}

0 commit comments

Comments
 (0)